/* ============================================================
   mobile.css — スマホ用のレイアウト（メディアクエリで包まない）

   包まない理由：
     スマホがブラウザの「デスクトップ用サイト」等で画面幅やポインタ種別を
     偽って申告すると、メディアクエリが当たらずパソコン用の表示のままになる。
     実際にPixelで起きた（2026-08-04）。
     この1枚は index.html 側の media 属性で制御し、端末がタッチ対応なら
     JSが media="all" に書き換えて必ず適用する。
   ============================================================ */


/* ===== layout.css から ===== */
/* ============================================================
     スマホは「普通に縦スクロールするページ」にする。
     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; }
  /* 背景の演出も間引く。blur() と重ねたグラデーションは画面全体の描画を重くする */
  .bg-grid{ animation:none; opacity:.5; }
  .bg-glow{ display:none; }                    /* filter:blur(12px) が高くつく */
  .bg-scan{ display:none; }
  .bg-vignette{ display:none; }
  #bg{ background:radial-gradient(120% 70% at 50% 0%, #0a1830 0%, var(--bg) 62%); }
  /* 影とホバー演出はスクロール中の再描画を増やすので落とす */
  .dock-card{ box-shadow:none; transition:none; animation:none; }
  .dock-card:hover{ transform:none; box-shadow:none; }
  .item:hover{ transform:none; }


/* ===== core.css から ===== */
#core-wrap{ width:min(30vh, 150px); }
  #core{ display:none; }                       /* Canvasを止める */

  /* 発光する中心 */
  #core-wrap::before{ content:""; position:absolute; inset:20%; border-radius:50%; z-index:2;
    background:radial-gradient(circle,
      #ffffff 0%, #bae6fd 16%, var(--cy) 38%, rgba(34,211,238,.35) 58%, rgba(34,211,238,0) 74%);
    animation:orbPulse 3.8s ease-in-out infinite; will-change:transform, opacity; }
  /* 外側のにじみ */
  #core-wrap::after{ content:""; position:absolute; inset:-4%; border-radius:50%; z-index:1;
    background:radial-gradient(circle, rgba(34,211,238,.22) 0%, rgba(59,130,246,.10) 45%, transparent 70%);
    animation:orbPulse 5.6s ease-in-out infinite reverse; will-change:transform, opacity; }

  /* リングは1本だけ、ゆっくり回す */
  #core-ring span:nth-child(2){ display:none; }
  #core-ring span:nth-child(1){ animation-duration:26s; }
  #core-ring span:nth-child(3){ animation-duration:60s; }

  /* 状態に応じた色（Canvasの代わり） */
  #core-wrap[data-mode="listening"]::before{
    background:radial-gradient(circle, #fff 0%, #fde68a 16%, var(--amber) 38%, rgba(251,191,36,.3) 58%, transparent 74%);
    animation-duration:1.5s; }
  #core-wrap[data-mode="thinking"]::before{
    background:radial-gradient(circle, #fff 0%, #ddd6fe 16%, var(--violet) 38%, rgba(167,139,250,.3) 58%, transparent 74%);
    animation-duration:1.1s; }
  #core-wrap[data-mode="speaking"]::before{
    background:radial-gradient(circle, #fff 0%, #bae6fd 16%, #38bdf8 38%, rgba(56,189,248,.35) 58%, transparent 74%);
    animation-duration:2s; }


/* ===== panels.css から ===== */
.bar-row{ grid-template-columns:88px 1fr auto; }
  .bubble{ max-width:92%; }
  .ev{ grid-template-columns:64px 1fr; }