/* ============================================================
   layout.css — HUD骨格 / ドック / コンソール / ナビ / レスポンシブ
   ============================================================ */
#app{ position:relative; z-index:1; height:100dvh; display:grid;
  grid-template-rows:auto 1fr auto auto; }
#app[hidden]{ display:none; }

/* ---------- 上部HUD ---------- */
#hud-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px calc(12px); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,12,24,.9), rgba(6,12,24,0)); }
.hud-l,.hud-r{ display:flex; align-items:center; gap:10px; flex:1; }
.hud-r{ justify-content:flex-end; }
.hud-mark{ font-family:var(--mono); font-size:13px; letter-spacing:.28em; color:var(--cy);
  text-shadow:var(--glow); }
.hud-dot{ width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px var(--green); animation:pulseDot 2.4s ease-in-out infinite; }
.hud-dot.off{ background:var(--rose); box-shadow:0 0 10px var(--rose); }
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.35} }
.hud-link{ font-size:11px; letter-spacing:.14em; color:var(--ink-2); }
.hud-c{ text-align:center; font-family:var(--mono); }
#clock-time{ font-size:19px; letter-spacing:.08em; color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums; }
#clock-date{ display:block; font-size:10.5px; letter-spacing:.18em; color:var(--muted); margin-top:-2px; }
.icon-btn{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  color:var(--ink-2); border:1px solid transparent; transition:.2s; }
.icon-btn:hover{ color:var(--cy); border-color:var(--line-2); background:rgba(34,211,238,.08); }

/* ---------- ステージ ---------- */
#stage{ position:relative; display:grid; grid-template-columns:var(--dock-w) 1fr var(--dock-w);
  gap:18px; padding:16px 18px 0; min-height:0; }

/* ---------- ドック ---------- */
.dock{ display:flex; flex-direction:column; gap:14px; min-height:0; overflow-y:auto;
  padding-bottom:8px; }
.dock-card{ position:relative; border-radius:var(--r); border:1px solid var(--line);
  background:var(--panel); backdrop-filter:blur(10px); padding:14px 14px 12px;
  cursor:pointer; transition:border-color .25s, transform .25s, box-shadow .25s;
  animation:dockIn .6s cubic-bezier(.2,.8,.2,1) both; }
.dock-card:nth-child(2){ animation-delay:.08s; }
@keyframes dockIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.dock-card:hover{ border-color:var(--line-2); transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,0,0,.4), var(--glow-soft); }
/* コーナーブラケット */
.dock-card::before,.dock-card::after{ content:""; position:absolute; width:12px; height:12px;
  border:1px solid var(--line-2); pointer-events:none; opacity:.8; }
.dock-card::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; border-radius:var(--r) 0 0 0; }
.dock-card::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; border-radius:0 0 var(--r) 0; }
.dock-card h3{ display:flex; align-items:center; justify-content:space-between;
  font-size:11px; letter-spacing:.2em; color:var(--cy-soft); text-transform:none;
  padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--line); font-weight:600; }
.dock-card h3 .tick{ width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--cy)); }
.dock-body{ font-size:13px; }

/* ドック内の共通行 */
.row{ display:flex; align-items:flex-start; gap:9px; padding:6px 0; border-bottom:1px dashed rgba(94,234,255,.1); }
.row:last-child{ border-bottom:0; }
.row .t{ flex:1; min-width:0; color:var(--ink); line-height:1.5; }
.row .s{ font-family:var(--mono); font-size:11.5px; color:var(--cy-soft); white-space:nowrap; padding-top:2px; }
.row .t small{ display:block; color:var(--muted); font-size:11px; }
.bullet{ width:6px; height:6px; border-radius:50%; margin-top:7px; flex:none; background:var(--cy);
  box-shadow:0 0 8px var(--cy); }
.bullet.hi{ background:var(--rose); box-shadow:0 0 8px var(--rose); }
.bullet.lo{ background:var(--ink-3); box-shadow:none; }
.bullet.ok{ background:var(--green); box-shadow:0 0 8px var(--green); }

/* 数字 */
.figure{ font-family:var(--mono); font-size:23px; font-weight:600; color:var(--ink);
  letter-spacing:.01em; font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(34,211,238,.35); }
.figure small{ font-size:12px; color:var(--ink-2); margin-left:3px; font-weight:400; }
.figure-lab{ font-size:10.5px; letter-spacing:.16em; color:var(--muted); }

/* ---------- 中央 ---------- */
#center{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:0; gap:4px; }
#state-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:var(--cy-soft);
  opacity:.85; margin-top:2px; }
#subtitle{ width:min(680px,94%); margin-top:10px; min-height:74px; text-align:center; }
#sub-text{ font-size:16px; line-height:1.85; color:var(--ink);
  text-shadow:0 0 24px rgba(34,211,238,.2); }
#sub-text .cursor{ display:inline-block; width:8px; height:17px; margin-left:2px; vertical-align:-2px;
  background:var(--cy); box-shadow:var(--glow); animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{opacity:0} }
#subtitle.scrolly{ max-height:32vh; overflow-y:auto; text-align:left; }
#subtitle.scrolly #sub-text{ font-size:14.5px; }

/* ---------- コンソール ---------- */
#console{ padding:10px 18px 6px; }
.console-in{ display:flex; align-items:center; gap:10px; width:min(860px,100%); margin:0 auto;
  padding:7px 8px 7px 7px; border-radius:16px; border:1px solid var(--line);
  background:var(--panel-2); backdrop-filter:blur(12px);
  box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .25s, box-shadow .25s; }
.console-in:focus-within{ border-color:var(--line-2); box-shadow:0 10px 40px rgba(0,0,0,.5), var(--glow-soft); }
#ask{ flex:1; min-width:0; background:none; border:0; outline:0; padding:8px 2px; font-size:14.5px; }
#ask::placeholder{ color:var(--muted); }
.mic-btn,.send-btn{ position:relative; display:grid; place-items:center; width:40px; height:40px;
  border-radius:12px; color:var(--ink-2); transition:.2s; flex:none; }
.mic-btn:hover,.send-btn:hover{ color:var(--cy); background:rgba(34,211,238,.1); }
.mic-btn.on{ color:var(--amber); background:rgba(251,191,36,.12); }
.mic-pulse{ position:absolute; inset:0; border-radius:12px; border:1px solid var(--amber); opacity:0; }
.mic-btn.on .mic-pulse{ animation:micPulse 1.4s ease-out infinite; }
@keyframes micPulse{ 0%{opacity:.8; transform:scale(1)} 100%{opacity:0; transform:scale(1.6)} }
.console-hint{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:9px auto 0;
  width:min(860px,100%); }
.chip{ padding:5px 11px; border-radius:999px; font-size:11.5px; color:var(--ink-2);
  border:1px solid var(--line); background:rgba(12,22,40,.4); transition:.2s; white-space:nowrap; }
.chip:hover{ color:var(--cy); border-color:var(--line-2); background:rgba(34,211,238,.1); }

/* ---------- ナビ ---------- */
#nav{ display:flex; justify-content:center; gap:4px; padding:6px 12px 12px;
  padding-bottom:max(12px, env(safe-area-inset-bottom)); }
#nav button{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 16px;
  border-radius:12px; color:var(--muted); transition:.2s; position:relative; }
#nav button svg{ width:19px; height:19px; }
#nav button span{ font-size:10.5px; letter-spacing:.08em; }
#nav button:hover{ color:var(--ink-2); background:rgba(94,234,255,.05); }
#nav button.on{ color:var(--cy); }
#nav button.on::after{ content:""; position:absolute; left:50%; bottom:2px; width:20px; height:2px;
  margin-left:-10px; background:var(--cy); border-radius:2px; box-shadow:var(--glow); }

/* ---------- シート（フルパネル） ---------- */
#sheet{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:18px;
  background:rgba(2,5,11,.72); backdrop-filter:blur(6px); animation:fadeIn .22s ease both; }
#sheet[hidden]{ display:none; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.sheet-card{ width:min(1000px,100%); max-height:88dvh; display:flex; flex-direction:column;
  border-radius:20px; border:1px solid var(--line-2); background:linear-gradient(180deg, rgba(11,21,40,.96), rgba(5,10,20,.98));
  box-shadow:0 40px 110px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  animation:sheetIn .3s cubic-bezier(.2,.8,.2,1) both; overflow:hidden; }
@keyframes sheetIn{ from{opacity:0; transform:translateY(22px) scale(.98)} to{opacity:1; transform:none} }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(34,211,238,.07), transparent); }
.sheet-head h2{ font-size:14px; letter-spacing:.18em; color:var(--cy-soft); font-weight:600; }
.sheet-body{ padding:18px; overflow-y:auto; min-height:0; }

/* ---------- トースト ---------- */
#toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:70;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ padding:9px 16px; border-radius:11px; font-size:13px; color:var(--ink);
  border:1px solid var(--line-2); background:rgba(11,21,40,.94); backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.5); animation:toastIn .28s cubic-bezier(.2,.8,.2,1) both; }
.toast.err{ border-color:rgba(251,113,133,.5); color:#ffd9de; }
.toast.ok{ border-color:rgba(52,211,153,.5); }
@keyframes toastIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ============================================================
   レスポンシブ — スマホ
   ============================================================ */
@media (max-width:1080px){
  :root{ --dock-w:240px; }
}
@media (max-width:860px), (pointer:coarse) and (max-width:1200px){
  /* ============================================================
     スマホは「普通に縦スクロールするページ」にする。
     height:100dvh でアプリの高さを画面に固定していたら、Pixelで
     下半分が死んだ空白になった（2026-08-04に社長の写真で判明）。
     自社アプリと同じく min-height + 通常フローに合わせる。
     ============================================================ */
  html, body{ height:auto; overflow:visible; overflow-x:hidden; }
  #app{ display:block; height:auto; min-height:100dvh;
    /* 下に固定した入力バーとナビのぶんだけ余白を空ける */
    padding-bottom:calc(178px + env(safe-area-inset-bottom)); }
  #bg{ position:fixed; }                        /* 背景は画面に貼り付けたまま */

  /* 並び順：対話 → タスク → メモ → 予定 → 売上
     （社長の指定で、予定と売上は下へ回した） */
  #stage{ display:flex; flex-direction:column; padding:10px 14px 0;
    overflow:visible; min-height:0; }
  #center{ order:1; flex:none; }
  #dock-r{ order:2; flex:none; }                /* 今日のタスク・最近のメモ */
  #dock-l{ order:3; flex:none; }                /* 今日の予定・今月の売上 */
  .dock{ display:block; overflow:visible; padding-bottom:0; }
  .dock-card{ margin-bottom:12px; flex:none; }
  .dock-card h3{ font-size:13px; padding-bottom:10px; margin-bottom:10px; }
  .dock-body{ font-size:14.5px; }
  .row{ padding:10px 0; }                       /* 指で押せる高さにする */
  .row .t{ font-size:14.5px; }
  .row .s{ font-size:12.5px; }
  .figure{ font-size:28px; }

  /* ---- コアは小さめに。情報のほうを主役にする ---- */
  #center{ padding:4px 0 2px; }
  #core-wrap{ width:150px; }
  #state-label{ font-size:10.5px; letter-spacing:.24em; }
  /* 報告は途中で切らず、ページと一緒に流す（以前は上が見切れていた） */
  #subtitle{ width:100%; min-height:auto; margin:10px 0 14px; text-align:left; }
  #subtitle.scrolly{ max-height:none; overflow:visible; }
  #sub-text, #subtitle.scrolly #sub-text{ font-size:16px; line-height:1.9; }

  /* ---- 入力バーとナビは画面下に固定する ---- */
  #console{ position:fixed; left:0; right:0; z-index:30;
    bottom:calc(62px + env(safe-area-inset-bottom));
    padding:8px 12px 6px; border-top:1px solid var(--line);
    background:rgba(4,9,18,.96); backdrop-filter:blur(14px); }
  .console-in{ padding:6px 7px; border-radius:14px; }
  #ask{ font-size:16px; padding:11px 2px; }     /* 16px未満だとiOSが勝手に拡大する */
  .mic-btn,.send-btn{ width:46px; height:46px; }
  .console-hint{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .console-hint::-webkit-scrollbar{ display:none; }
  .chip{ padding:8px 14px; font-size:13px; }

  #nav{ position:fixed; left:0; right:0; bottom:0; z-index:31;
    gap:0; justify-content:space-around; padding:5px 2px 4px;
    padding-bottom:max(4px, env(safe-area-inset-bottom)); border-top:1px solid var(--line);
    background:rgba(4,9,18,.97); backdrop-filter:blur(14px); }
  #nav button{ padding:7px 4px; flex:1; min-height:52px; }
  #nav button svg{ width:22px; height:22px; }
  #nav button span{ font-size:11px; }

  /* ---- ヘッダーは上に貼り付ける ---- */
  #hud-top{ position:sticky; top:0; z-index:20;
    padding:9px 12px; padding-top:max(9px, env(safe-area-inset-top));
    background:rgba(4,9,18,.96); backdrop-filter:blur(14px); }
  #clock-time{ font-size:17px; }
  #clock-date{ font-size:10px; }
  .hud-mark{ font-size:12px; letter-spacing:.2em; }
  .hud-link{ display:none; }                    /* 幅が足りないので文字は省く */
  .icon-btn{ width:42px; height:42px; }

  /* ---- 詳細パネルは下から。つまんで閉じられるハンドルを付ける ---- */
  #sheet{ padding:0; place-items:end stretch; }
  /* dvh はスマホで当てにならないので、親（画面いっぱいの#sheet）を基準にする */
  .sheet-card{ max-height:calc(100% - 10px); border-radius:22px 22px 0 0; border-bottom:0; }
  .sheet-head{ padding:8px 14px 13px; position:relative; }
  .sheet-head::before{ content:""; position:absolute; left:50%; top:6px;
    width:38px; height:4px; margin-left:-19px; border-radius:4px; background:var(--line-2); }
  .sheet-head h2{ margin-top:6px; }
  .sheet-body{ padding:14px 14px calc(18px + env(safe-area-inset-bottom)); }
  .kpis{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .item{ padding:13px; }
  .btn{ padding:11px 15px; }                    /* ボタンも指サイズに */
  .check{ width:24px; height:24px; }
  #toast{ bottom:calc(190px + env(safe-area-inset-bottom)); left:12px; right:12px; transform:none; }
  .toast{ text-align:center; }

  /* ---- スクロールを軽くする ----
     backdrop-filter（すりガラス）は、スクロールのたびに背景を
     ぼかし直すため、スマホでは一番の重さの原因になる。
     固定バーとカードは不透明の背景に置き換える。 */
  #hud-top, #console, #nav, .console-in, .dock-card, .sheet-card, .toast{
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  #hud-top{ background:#050b16; }
  #console{ background:#050b16; }
  #nav{ background:#050b16; }
  .console-in{ background:#0a1526; }
  .dock-card{ background:#0a1424; }
  /* 背景の演出も間引く（見た目は残しつつ、動きは止める） */
  .bg-grid{ animation:none; }
  .bg-glow{ animation:none; opacity:.55; }
  .bg-scan{ display:none; }
  /* 影とホバー演出はスクロール中の再描画を増やすので落とす */
  .dock-card{ box-shadow:none; transition:none; animation:none; }
  .dock-card:hover{ transform:none; box-shadow:none; }
  .item:hover{ transform:none; }
}

/* 横向き・低い画面ではコアを畳んで、情報を優先する */
@media (max-height:520px) and (max-width:1200px) and (pointer:coarse){
  #core-wrap{ width:96px; }
}

/* スマホでドックの中身をシートで見せるための表示切替 */
@media (min-width:861px) and (pointer:fine){
  .only-mobile{ display:none !important; }
}