/* QuMo IoT — 白を基調に、色は「状態」を伝えるときだけ使う（Master 10/10「白は変えたくない」） */
:root{
  --bg:#F4F6F8; --card:#FFFFFF; --ink:#1F2933; --sub:#6B7785; --line:#E3E8EE;
  --ok:#2E7D32; --warn:#F9A825; --alarm:#C62828; --stop:#78909C; --nodata:#6A1B9A; --unset:#B0B7BF;
  --brand:#1565C0; --brand-soft:#E3EEFB; --rail:#14213D; --r:10px;
}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url("../../vendor/fredoka/fredoka-latin-600-normal.361ba37d62bd.woff2") format('woff2')}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 "Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--brand)}
.q-app{display:grid;grid-template-columns:var(--railw,56px) 1fr;min-height:100vh}
/* ★幅の動きは「たたむ／ひらく」を押したときだけ（ページを開くたびに左から伸びて見えた・10/10 Master） */
.q-app.q-anim{transition:grid-template-columns .2s}
.q-app>div{min-width:0}   /* 中身の列が、表やグラフの幅に押されて画面より広がらないように（スマホで横にはみ出していた） */
.q-app.open{--railw:200px}
.q-rail{background:var(--rail);color:#C9D3E0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:8px 0;overflow:hidden}
.q-logo{display:flex;align-items:center;height:52px;padding:0 18px;color:#5AB4FF;text-decoration:none;white-space:nowrap;font-family:'Fredoka',sans-serif;font-weight:600;font-size:27px;letter-spacing:.01em}
.q-logo:hover{color:#8ccaff}
.q-app:not(.open) .q-rail .q-logo{visibility:hidden}
.q-nav{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.q-nav a{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;color:inherit;text-decoration:none;white-space:nowrap;border-left:3px solid transparent;font-size:13px}
.q-nav a .bi{font-size:18px;width:20px;text-align:center;flex:none}
.q-nav a.on{background:rgba(255,255,255,.08);color:#fff;border-left-color:#42A5F5}
.q-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.q-nav .badge-n{margin-left:auto;background:var(--alarm);color:#fff;border-radius:9px;font-size:11px;padding:0 6px;line-height:18px}
.q-app:not(.open) .q-rail .t{display:none}
.q-app:not(.open) .q-nav .badge-n{position:absolute;left:30px;top:4px;font-size:10px;padding:0 4px;line-height:15px}
.q-rail .grow{flex:1}
/* ★10/12 工場の場所の天気（メニューのカード）。たたむとアイコンと気温だけ */
.q-wx{margin:12px 10px 0;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.06);font-size:11px;line-height:1.5;white-space:normal}
.q-wx-top{display:flex;align-items:center;gap:8px}
.q-wx-top .bi{font-size:20px;flex:none}
.q-wx .bi-sun{color:#FFCA28}
.q-wx-temp{font-size:20px;font-weight:600;color:#fff;line-height:1.1}
.q-wx-temp small{font-size:12px;font-weight:400;margin-left:1px}
.q-wx-place{margin-left:auto;text-align:right;line-height:1.3}
.q-wx-place small{color:#8FA0B5;font-size:10px}
.q-wx-short{display:none;font-size:12px;color:#fff;font-weight:600}
.q-wx-sub{margin-top:4px}
.q-wx-src{margin-top:4px;color:#8FA0B5;font-size:10px}
.q-app:not(.open) .q-wx{margin:12px 4px 0;padding:6px 0}
.q-app:not(.open) .q-wx-top{flex-direction:column;gap:0}
.q-app:not(.open) .q-wx-short{display:block}
.q-toggle{background:none;border:0;color:#C9D3E0;height:40px;display:flex;align-items:center;gap:12px;padding:0 18px;font-size:12px;white-space:nowrap}
/* ★10/13 Master「PC だと AI が目立たない・文字も小さい」→ 今の位置（メニューの下）のまま、ボタンにして文字を大きく */
.q-rail .q-ai-open{margin:6px 10px;height:42px;padding:0 14px;border-radius:21px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;gap:10px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.q-rail .q-ai-open .bi{font-size:18px;flex:none}
.q-rail .q-ai-open:hover{background:#1E88E5}
.q-app:not(.open) .q-rail .q-ai-open{width:40px;height:40px;padding:0;margin:6px auto;justify-content:center}
.q-app.open #qRailToggle .bi{transform:rotate(180deg)}
.q-top{position:sticky;top:0;z-index:20;height:52px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 16px}
.q-tenant{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-top .right{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--sub);font-size:12px;white-space:nowrap}
.q-avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:12px;border:0}
.q-burger{display:none;border:0;background:none;font-size:22px;padding:0 4px;color:var(--ink)}
.q-main{padding:12px 16px 32px;min-width:0}
.q-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.q-muted{color:var(--sub)}
.q-empty{padding:48px 16px;text-align:center;color:var(--sub)}
@media (max-width:991.98px){
  .q-app{grid-template-columns:1fr}
  .q-app > .q-rail{display:none}
  .q-burger{display:block}
}
/* offcanvas（スマホ・タブレット縦）の中のメニュー */
.offcanvas.q-off{background:var(--rail);color:#C9D3E0;width:240px}
.offcanvas.q-off .q-rail-inner{display:flex;flex-direction:column;height:100%;padding-top:8px}
/* ログイン */
.q-login{min-height:100vh;display:grid;place-items:center;padding:16px}
.q-login .box{width:100%;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px;box-shadow:0 10px 30px rgba(20,33,61,.06)}
.q-login .brand{font-family:'Fredoka',sans-serif;font-weight:600;font-size:34px;color:#1A1A1A;text-align:center;margin-bottom:18px;letter-spacing:.01em}

/* AI に聞く（左下のパネル） */
.q-ai{position:fixed;left:16px;bottom:16px;width:min(400px,calc(100vw - 32px));height:min(560px,calc(100vh - 32px));height:min(560px,calc(100dvh - 32px));z-index:1050;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,30,60,.18);display:flex;flex-direction:column}
.q-ai.d-none{display:none!important}
.q-ai header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
.q-ai header .ttl{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.3}
.q-ai header .btn-link,.q-ai header .btn-close{flex:0 0 auto}
.q-ai header .btn-close{padding:8px}
.q-ai header .ttl b{white-space:nowrap}
.q-ai header .q-muted{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* スマホ（左のメニューが隠れる幅）は 右下の丸いボタンから */
.q-ai-fab{display:none;position:fixed;right:16px;bottom:16px;z-index:1040;width:52px;height:52px;border-radius:50%;border:0;
  background:#0086D0;color:#fff;font-size:22px;box-shadow:0 6px 16px rgba(0,60,120,.3)}
@media (max-width:767.98px){.q-ai-fab{display:block}.q-ai{left:8px;right:8px;bottom:8px;width:auto;height:min(560px,calc(100vh - 80px));height:min(560px,calc(100dvh - 80px))}
  .q-ai:not(.d-none)~.q-ai-fab{display:none}
  body:has(.q-ai-fab) .q-main{padding-bottom:76px}   /* 右下の丸に、一番下のボタンが隠れないように */
  .q-ai form textarea{font-size:16px}   /* ★下の 14px より強く（書き順で負けていた）。16px 未満だと iPhone が入力時に画面を拡大する（開くとはみ出していた）*/}
.q-ai .log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.q-ai .msg{max-width:88%;padding:8px 10px;border-radius:10px;line-height:1.6;word-break:break-word}
.q-ai .msg.user{align-self:flex-end;background:#E3F2FD}
.q-ai .msg.assistant{align-self:flex-start;background:#F5F7FA}
.q-ai .msg.err{background:#FFEBEE;color:#B71C1C}
.q-ai .msg.wait{color:var(--muted)}
.q-ai .sug button{display:block;margin:4px 0;border:1px solid var(--line);background:#fff;border-radius:16px;padding:4px 12px;font-size:13px;text-align:left}
.q-ai .sug button:hover{background:#F5F7FA}
.q-ai .ctx{display:flex;gap:6px;overflow-x:auto;padding:6px 12px 0;border-top:1px solid var(--line)}
.q-ai .ctx button{flex:0 0 auto;border:1px solid #CFE3F5;background:#F3F8FD;border-radius:14px;padding:2px 10px;font-size:12px;white-space:nowrap}
.q-ai form{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--line)}
.q-ai textarea{flex:1;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:14px;resize:none}
.q-ai footer{font-size:11px;padding:0 12px 8px}
/* ★10/13 PC だけ 文字をひとまわり大きく（スマホはいまのまま＝入力欄 16px は下の 767px の決まり） */
@media (min-width:768px){
  .q-ai header{font-size:15px}
  .q-ai header .q-muted,.q-ai footer{font-size:12px}
  .q-ai .log{font-size:15px}
  .q-ai textarea{font-size:15px}
  .q-ai .sug button{font-size:14px}
  .q-ai .ctx button{font-size:13px}
}