/* ============================ 分割ファイルヘッダー ============================
   責務: チャット(縦フィード)・メッセージ行・Markdown/コードブロック・実行中行・コンポーザー・添付・使用量メーター
   見る場面: 本文フィードのメッセージ・依頼/成果物行・操作待ち/衝突表示・入力欄を変えるとき
   ============================================================================ */
/* ================= チャット(縦フィード) ================= */
.chat-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.chat-head .back {
  border: 0; background: var(--glass2); color: var(--text);
  width: 34px; height: 34px; border-radius: 12px; font-size: 17px; flex: 0 0 auto; cursor: pointer;
}
.side-head .back {
  border: 0; background: var(--glass2); color: var(--text);
  width: 30px; height: 30px; border-radius: 10px; font-size: 15px; flex: 0 0 auto; cursor: pointer;
}
#officeBackdrop { display: none; }
.chat-head .avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.chat-head .who { min-width: 0; flex: 1; }
.chat-head .who .n { font-weight: 800; font-size: 15px; font-family: var(--serif); letter-spacing: 0.03em; }
.chat-head .who .s { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who .s.running { color: var(--ok); }
.icon-btn {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--glass2); color: var(--text); font-size: 15px;
  transition: all 0.15s ease;
}
.icon-btn:hover { border-color: var(--sun); color: var(--sun2); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn.busy { animation: rotate 1s linear infinite; pointer-events: none; opacity: 0.7; }
/* 🌙 空き時間に実行がONの状態 */
.icon-btn.on { border-color: var(--sun); color: var(--sun2); box-shadow: 0 0 0 2px rgba(255, 191, 105, 0.22); }
/* テキスト付きアイコンボタン(例: 分析ダッシュボードの「社長に聞く」)は横幅を内容に合わせる */
#dashAsk { width: auto; padding: 0 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* バージョンチップ: 稼働中バージョンの表示。押すとサーバー更新(git pull→ビルド→再起動) */
.ver-chip {
  flex: 0 0 auto; height: 36px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--glass2); color: var(--dim);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: all 0.15s ease;
}
.ver-chip:hover { border-color: var(--sun); color: var(--sun2); }
.ver-chip:active { transform: scale(0.95); }
.ver-chip.busy { pointer-events: none; opacity: 0.6; }
.chat-head .stop { border-color: rgba(255, 120, 120, 0.4); background: rgba(255, 90, 90, 0.12); color: #ff8a8a; }
.chat-head .stop:hover { background: rgba(255, 90, 90, 0.25); }

#messages { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior-x: none; padding: 14px 6px 10px; -webkit-overflow-scrolling: touch; }
.day-sep {
  display: flex; align-items: center; gap: 12px; margin: 18px 10px 10px;
  color: var(--dim2); font-size: 11px; font-family: var(--serif); letter-spacing: 0.1em;
}
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 「対応中」帯: 考え中・操作待ちを下へ集めた区切り(解決済みの時系列とここで分ける)。
   warmなアクセントで「ここから下は今動いている/あなたの操作待ち」を一目で示す。 */
.active-sep {
  display: flex; align-items: center; gap: 10px; margin: 16px 10px 6px;
  color: var(--sun); font-size: 10.5px; letter-spacing: 0.16em; font-family: var(--serif);
}
.active-sep::before, .active-sep::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--sun) 40%, transparent);
}
/* 実行中(考え中)の行は最大3行で止め、以降は横へ列を足す。縦の圧迫をなくし、多いときは横スクロール。
   flexの縦積み+折り返し: 高さ(=3行分)を超えたら右の列へ回り込む。 */
.active-wrap {
  display: flex; flex-flow: column wrap; align-content: flex-start;
  max-height: 210px; /* 約3行分。これを超えると右の列へ折り返す */
  gap: 4px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px; scrollbar-width: thin;
}
/* 横並びになるので各行に固定幅を与える(1列=1枚のカード)。1件だけなら全幅に近く見せる */
.active-wrap > .msg.running-row { width: min(360px, 86vw); margin: 0; flex: 0 0 auto; }
.active-wrap:has(> .msg:only-child) > .msg.running-row { width: 100%; }

/* メッセージ行: アバター + 名前/時刻 + 本文(全幅・左右振り分けなし) */
.msg {
  display: flex; gap: 11px; padding: 9px 12px; border-radius: 14px; margin: 1px 2px;
  transition: background 0.15s ease;
}
.msg:hover { background: var(--hover); }
/* 完了直後に画面が寄った依頼行を一瞬だけ緑に光らせ「これが終わった」を分からせる(オーナー指示 2026-07-07) */
.msg.just-done { animation: just-done 1.8s ease; }
@keyframes just-done {
  0%   { background: rgba(74, 222, 128, 0.28); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.5) inset; }
  60%  { background: rgba(74, 222, 128, 0.14); }
  100% { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .msg.just-done { animation: none; } }
/* 横断検索(🔍)の結果から飛んできた行。枠線を数回パルスさせ「これ」と分かるようにする */
.msg.search-hit { animation: search-hit 2.4s ease; }
@keyframes search-hit {
  0%, 40%, 80% { box-shadow: 0 0 0 2px var(--sun2) inset, 0 0 18px rgba(255, 208, 112, 0.35); background: rgba(255, 208, 112, 0.1); }
  20%, 60%     { box-shadow: 0 0 0 2px transparent inset; background: transparent; }
  100%         { box-shadow: none; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .msg.search-hit { animation: none; box-shadow: 0 0 0 2px var(--sun2) inset; }
}
/* 枠上限中のCodex暫定回答(Claudeが後で自動でやり直す)。琥珀色の縁で「まだ暫定」と一目で分かる */
.msg.provisional { border-left: 3px solid var(--warn); background: rgba(255, 180, 84, 0.06); }
.deliverable.provisional { border-left: 3px solid var(--warn); padding-left: 7px; }
.msg .avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px; }
.msg .body { flex: 1; min-width: 0; }
.msg .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg .head .n { font-weight: 800; font-size: 13.5px; }
.msg.owner .head .n { color: var(--sun2); }
.msg.ai .head .n { color: #6fd8c8; }
.msg .head .t { color: var(--dim2); font-size: 10.5px; }
.msg .head .copy {
  border: 0; background: transparent; color: var(--dim2); font-size: 10.5px;
  margin-left: auto; cursor: pointer; padding: 0 2px; opacity: 0; transition: opacity 0.15s ease;
}
.msg:hover .head .copy { opacity: 1; }
.msg .head .copy:hover { color: var(--sun2); }
/* 右上の ☆ = ブックマーク / ✕ = 削除。指で確実に押せるよう当たり判定を 30px 角に取り、
   負のマージンで行の高さは膨らませない(見た目は今までどおり1行のまま) */
.msg .head .bm-msg,
.msg .head .del-msg {
  border: 0; background: transparent; color: var(--dim2); font-size: 17px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  display: flex; align-items: center; justify-content: center; align-self: center;
  width: 30px; height: 30px; margin: -8px -3px; border-radius: 50%; flex: 0 0 auto;
}
.msg .head:not(:has(.copy)) .bm-msg { margin-left: auto; } /* コピーが無い行では ☆ が右端を取る */
.msg:hover .head .bm-msg, .msg:hover .head .del-msg { opacity: 0.7; }
.msg .head .bm-msg:hover { opacity: 1; color: var(--sun2); background: var(--glass2); }
.msg .head .bm-msg.on { opacity: 1; color: var(--sun2); } /* ★が付いた行は常に見せる */
/* コピーも☆も無い行(ゲスト等)では ✕ が右端を取る */
.msg .head:not(:has(.copy)):not(:has(.bm-msg)) .del-msg { margin-left: auto; }
.msg .head .del-msg:hover { opacity: 1; color: #ff6b6b; background: var(--glass2); }
/* スマホはホバーが無いので常に見せる。指で押す前提でさらに大きく */
@media (hover: none) {
  .msg .head .del-msg, .msg .head .bm-msg {
    opacity: 0.6; width: 36px; height: 36px; font-size: 19px; margin: -11px -4px;
  }
}
.msg .text { font-size: 14.5px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.msg.system .text { color: var(--dim); font-size: 13px; }

/* 簡易マークダウン(renderRichが生成): **太字**・`コード`・# 見出し */
.text strong { font-weight: 800; color: var(--text); }
.text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  background: var(--glass2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 5px;
}
.text .md-h { font-family: var(--serif); font-size: 1.08em; letter-spacing: 0.03em; color: var(--text); }
.text .q {
  display: inline-block; width: 100%; box-sizing: border-box;
  border-left: 3px solid var(--line2); padding-left: 10px; color: var(--dim);
}

/* ```コードブロック```: 言語ラベル+ワンタップコピー。横に流れず中でスクロール */
.codeblock {
  margin: 8px 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--code-bg); overflow: hidden; white-space: normal;
}
.codeblock .cb-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 11px; font-size: 10.5px; color: var(--dim2);
  background: var(--glass); border-bottom: 1px solid var(--line);
}
.codeblock .cb-bar button {
  border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px;
  padding: 1px 4px; transition: color 0.15s ease;
}
.codeblock .cb-bar button:hover { color: var(--sun2); }
.codeblock pre {
  margin: 0; padding: 10px 12px; overflow-x: auto; white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; color: var(--text);
}

/* メッセージの入り(控えめなモーション。流行のモーション豊かなサイトを参考に、上品さ優先) */
.msg { animation: msg-in 0.28s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
}

.autolink { color: #8fb3ff; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.autolink:hover { color: var(--sun2); }
/* 本文フィードの1行(依頼の要約・成果物の要約)は、押すとスレッドが開く。ボタンは出さない。
   文字だけでなく行(枠)全体を当たり判定にする=空白部分を押してもスレッドが開く */
.msg.to-thread { cursor: pointer; }
.msg .text.to-thread:hover { color: var(--text); }
/* 完了後、依頼行に足す「成果物の要約」。オーナーのメッセージに畳んで載せる */
.msg .deliverable {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; cursor: pointer; color: var(--ok); font-size: 13.5px; line-height: 1.6;
  border-left: 2px solid rgba(65, 217, 154, 0.4); padding-left: 10px;
  transition: color 0.15s ease;
}
/* 誰が答えたか(担当)の小さいアイコン。緑の成果物行の左端に載せる */
.msg .deliverable-av { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px; }
.msg .deliverable-name { flex: 0 0 auto; margin-top: 1px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.msg .deliverable-text { flex: 1 1 auto; min-width: 0; }
.msg .deliverable:hover { color: #7ff0c4; }
.msg .deliverable strong { color: var(--ok); }
/* 要対応: オーナーが動かないと完了しない用件。成果物行を赤の縁取りにし、その下に赤い「操作待ち」ピルを置く */
.msg .deliverable.needs-owner {
  color: var(--sun); border-left-color: var(--sun);
}
.msg .deliverable.needs-owner:hover { color: var(--sun2); }
/* 衝突中: 他のAIと同じファイルを触って解決できなかった状態。緑=完了にせず琥珀色で「まだ終わっていない」と示す */
.msg .deliverable.conflict, .msg .text.conflict {
  color: var(--warn); border-left: 2px solid var(--warn); padding-left: 10px;
}
.msg .deliverable.conflict:hover { color: #ffc98a; }
.owner-wait.conflict {
  background: rgba(255, 180, 84, 0.14); color: var(--warn);
  border-color: rgba(255, 180, 84, 0.55); box-shadow: 0 0 10px rgba(255, 180, 84, 0.25);
}
.owner-wait.conflict:hover { color: #ffc98a; border-color: var(--warn); }
/* 質問文は読める文章として出す(秘書が文章で送ってきた形)。赤い縁で操作待ちと結びつける */
.owner-wait-wrap { margin-top: 7px; }
.owner-wait-q {
  color: var(--text); font-size: 13.5px; line-height: 1.6;
  border-left: 2px solid var(--sun); padding-left: 10px; margin-bottom: 7px;
  white-space: pre-wrap; word-break: break-word;
}
.owner-wait-q:hover { color: var(--sun2); }
.owner-wait {
  display: inline-flex; align-items: center;
  background: rgba(255, 77, 54, 0.14); color: var(--sun);
  border: 1px solid rgba(255, 77, 54, 0.5); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 800; line-height: 1.3;
  box-shadow: 0 0 10px rgba(255, 77, 54, 0.25);
}
.owner-wait:hover { color: var(--sun2); border-color: var(--sun); }
/* 操作待ちフラグの右に置く「✓解決」ボタン=押す導線が無い[[owner:]]でも自分の手で赤を消せる */
.owner-wait-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.owner-wait-done {
  display: inline-flex; align-items: center; cursor: pointer;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; font-size: 12px; font-weight: 700; line-height: 1.3;
}
.owner-wait-done:hover { color: var(--ok); border-color: var(--ok); background: rgba(65, 217, 154, 0.1); }
/* 完了で画面が寄ったとき、要対応の行は緑ではなく赤で光らせる(「あなたの番だ」を強く示す) */
.msg.needs-owner-row.just-done { animation: just-done-owner 2s ease; }
@keyframes just-done-owner {
  0%   { background: rgba(255, 77, 54, 0.26); box-shadow: 0 0 0 1px rgba(255, 77, 54, 0.6) inset; }
  60%  { background: rgba(255, 77, 54, 0.13); }
  100% { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .msg.needs-owner-row.just-done { animation: none; } }

/* オーナー発言の✏️編集(送った文章を入力欄へ戻して直せる)。普段は淡く、ホバーで浮き出す */
.edit-msg {
  display: inline-block; margin-top: 6px; border: 1px solid var(--line2); background: transparent;
  color: var(--dim); border-radius: 999px; padding: 3px 11px; font-size: 11px; cursor: pointer;
  opacity: 0.55; transition: all 0.15s ease;
}
.msg:hover .edit-msg { opacity: 1; }
.edit-msg:hover { color: var(--text); border-color: var(--sun2); }
/* 編集中の元メッセージ。送信すると消えて、直した後の1件だけが残る */
.msg.editing-src { opacity: 0.4; }

/* 動画・画像は本文にそのまま(折りたたまない) */
.msg .text video, .msg .text img, .msg .media video, .msg .media img {
  display: block; width: 100%; max-width: 480px; max-height: 500px; object-fit: contain;
  border-radius: 14px; margin-top: 10px; background: #000;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
/* 会話(本文フィード・秘書チャット)の画像は小さなサムネイル。クリックで全画面 */
.msg .text img.img-thumb, .msg .media img.img-thumb {
  width: 132px; max-width: 132px; height: 132px; object-fit: cover; cursor: zoom-in;
}
.msg a.file { color: var(--sun2); font-size: 13px; display: inline-block; margin-top: 7px; }
/* 画像が見つからないとき(404)の控えめなフォールバック。壊れたアイコンを出さない */
.msg .missing-img {
  color: var(--dim); background: var(--glass2); border: 1px dashed var(--line2);
  border-radius: 10px; padding: 6px 11px; font-size: 13px; display: inline-block; margin-top: 8px;
}
/* 会話の動画は実物を貼らずチップで示す(実物はスレッドで再生・投稿) */
.msg a.vid-chip {
  color: var(--text); background: var(--glass2); border: 1px solid var(--line2);
  border-radius: 10px; padding: 6px 11px; font-weight: 700;
}
.msg a.vid-chip:hover { border-color: var(--sun); }

/* 実行中 */
.msg.running-row .text { color: var(--dim); }
.typing { display: inline-flex; gap: 4px; margin-right: 9px; vertical-align: -1px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 30% { transform: translateY(-5px); opacity: 0.5; } }
.running-row .elapsed { color: var(--sun2); font-weight: 800; font-variant-numeric: tabular-nums; }
.running-row .eta { color: var(--dim2); font-size: 11.5px; margin-left: 8px; }
/* 実行中行の右端に置く停止ボタン。行の空いた右側に小さく出し、この実行だけを止める(枠切れ・やり直し用) */
.run-stop {
  float: right; margin: -1px 0 0 8px; padding: 0; width: 18px; height: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--dim2); cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 5px;
  transition: color .12s, border-color .12s, background .12s;
}
.run-stop:hover { color: #fff; background: var(--danger, #e0483a); border-color: var(--danger, #e0483a); }
.run-stop:disabled { opacity: .4; cursor: default; }
/* 作業ログ: いま調べていることを流す。過去の行は淡く、直近(.cur)だけ色で点灯。完了で行ごと消える */
.actlog { margin-top: 5px; display: flex; flex-direction: column; gap: 1px; }
.actline { color: var(--dim); font-size: 12px; line-height: 1.55; opacity: 0.5; transition: opacity 0.2s, color 0.2s; }
.actline::before { content: "› "; color: var(--dim2); }
.actline.cur { opacity: 1; color: var(--sun2); }

/* 選択肢・成果物などのチップ(本文内で使う) */
.chip {
  background: var(--glass); border: 1px solid var(--line); color: var(--dim);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { color: var(--text); border-color: var(--sun); }
.chip:active { transform: scale(0.95); }

/* コンポーザー */
.composer {
  flex: 0 0 auto; display: flex; gap: 9px; align-items: flex-end;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1; background: var(--glass2); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px; padding: 11px 14px;
  font: inherit; font-size: 15px; resize: none; max-height: 150px; min-height: 44px; outline: none;
  transition: border-color 0.15s ease;
}
.composer textarea:focus { border-color: var(--sun); }
.composer .send {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 35%, var(--sun2), var(--sun) 70%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(255, 77, 54, 0.35);
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.composer .send:active { transform: scale(0.88); }
.composer .send:disabled { opacity: 0.4; }
.composer svg { width: 19px; height: 19px; }
/* 添付(📎): コンポーザー横のボタンと、送信前の添付トレイ(プレビュー付き) */
.composer .attach { align-self: center; font-size: 14px; }
.attach-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 14px 4px; flex: 0 0 auto; }
.attach-chips:empty { display: none; }
/* 1枚のプレビューカード: 画像はサムネ、他はアイコン + 名前 + サイズ + × */
.att-card {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass2); border: 1px solid var(--line2); border-radius: 12px;
  padding: 6px 8px; max-width: 220px; transition: border-color 0.15s ease;
}
.att-card.uploading { opacity: 0.85; }
.att-card.error { border-color: rgba(255, 77, 54, 0.6); }
.att-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: rgba(0,0,0,0.3); }
.att-ic {
  width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--glass2);
}
.att-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.att-sz { font-size: 10.5px; color: var(--dim2); }
.att-card.error .att-sz { color: var(--sun2); }
.att-x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--surface); color: var(--dim); cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.att-x:hover { color: var(--on-accent); background: var(--sun); border-color: var(--sun); }
/* アップロード中のぐるぐる(サムネ/アイコンの上に重ねる) */
.att-spin {
  position: absolute; left: 8px; top: 6px; width: 40px; height: 40px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
}
.att-spin::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%;
  animation: att-rot 0.7s linear infinite;
}
@keyframes att-rot { to { transform: rotate(360deg); } }
/* ドラッグ&ドロップの受け入れ表示: 枠内をうっすら光らせ、点線の枠と案内を出す */
.dropping::after {
  content: "📎 ここにドロップして添付"; position: absolute; inset: 8px; z-index: 40;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  border: 2px dashed var(--sun); border-radius: 16px;
  background: rgba(255, 77, 54, 0.1); color: #fff; font-size: 14px; letter-spacing: 0.04em;
  backdrop-filter: blur(2px);
}

/* ネイティブのドロップダウン(OSが描く部分)が「白背景に白文字」にならないようにする。
   color-scheme をテーマに合わせ、optionにも面色/文字色を明示して両モードで読めるようにする */
select { color-scheme: light dark; }
:root[data-theme="dark"] select { color-scheme: dark; }
:root[data-theme="light"] select { color-scheme: light; }
select option { background: var(--surface); color: var(--text); }

/* ---- 使用量メーター(5時間枠)。横いっぱいの残り容量バー ---- */
.usage-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--dim); border-radius: 999px; padding: 7px 14px; font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.usage-pill > span:last-child { flex: 0 0 auto; white-space: nowrap; } /* 数字ラベルは折り返さない */
.usage-pill .bar {
  flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--glass2);
}
.usage-pill .bar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width 0.4s ease, background 0.3s ease; }
.usage-pill .bar i.hot { background: var(--warn); }
/* 5時間枠のペース色: 青=このペースなら最後までもつ / 橙=きわどい / 赤=枠終わり前に使い切る */
.usage-pill .bar i.pace-cool { background: #4db5ff; }
.usage-pill .bar i.pace-mid { background: var(--warn); }
.usage-pill .bar i.pace-hot { background: #ff5a4d; }
.usage-pill.limit {
  color: var(--sun); border-color: rgba(255, 120, 100, 0.45); background: rgba(255, 77, 54, 0.1);
  font-weight: 700;
}