/* ============================ 分割ファイルヘッダー ============================
   責務: 共通ユーティリティ(.hidden等)・スレッド列(🧵)・切替バー・吹き出し・仕組み/ルーティン/設定モーダル・ライトボックス
   見る場面: スレッドの幅・吹き出しの形・各モーダルの見た目を変えるとき
   ============================================================================ */
/* ================= 共通 ================= */
.hidden { display: none !important; }

/* ---- スレッド(🧵): 開いた会話ペインの「中」に、細い列として並ぶ(かぶせない) ----
   JS(moveThreadPanel)が #threadPanel を該当ペイン(chatPane / sidePanel)へ移す。
   ペインは flex-row。左の .pane-main が圧縮され、右にスレッドが並ぶ。重なりは一切なし。 */
/* .dropping のオーバーレイ基準用に relative(PCのみ。モバイルは position:fixed のまま壊さない) */
@media (min-width: 940px) {
  #chatPane { position: relative; }
  body.side-open #sidePanel { position: relative; }
}
#threadPanel {
  position: relative;
  flex: 0 0 0; width: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  /* 透かし画像は置かない。裏の光を透かしつつ、琥珀(太陽)の光をゆっくり動かす warm な地色。
     菫の秘書パネルと隣り合っても色で「こっちはスレッド」と分かる(オーナー指示 2026-07-08) */
  background:
    radial-gradient(46% 32% at 82% 12%, rgba(255, 138, 61, 0.15), transparent 70%),
    radial-gradient(42% 30% at 16% 82%, rgba(255, 77, 54, 0.10), transparent 70%),
    var(--thread-tint);
  background-size: 180% 180%, 200% 200%, auto;
  animation: aurora-drift 30s ease-in-out infinite alternate;
  border-left: 1px solid var(--line2);
  transition: flex-basis 0.26s cubic-bezier(0.32, 0.72, 0.25, 1);
}
/* 開くと列に。既定は画面幅に合わせた可変(clamp)。ドラッグで決めた幅(--thread-w)があればそれを使い、
   幅の下限(--thread-min, 設定で変更可)は必ず確保する。左端の .thread-rz でドラッグ調整できる。 */
#threadPanel.open {
  flex: 0 0 var(--thread-w, clamp(380px, 44%, 640px)); width: auto;
  min-width: var(--thread-min, 380px);
}
/* スレッドの左端(仕切り)をドラッグして幅を変えるハンドル。PCのみ。秘書・社員どちらのスレッドでも効く */
.thread-rz { display: none; }
@media (min-width: 940px) {
  #threadPanel.open .thread-rz {
    display: block; position: absolute; left: -4px; top: 0; bottom: 0; width: 9px;
    cursor: col-resize; z-index: 6;
  }
}
.thread-rz::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: transparent; }
.thread-rz:hover::before, .thread-rz:active::before { width: 2px; background: rgba(255, 77, 54, 0.22); }
/* スマホ・狭い画面: 割ると窮屈なので、スレッドは全幅にして本体を隠す(重ねずに置き換える) */
@media (max-width: 939px) {
  #threadPanel.open { flex: 1 1 auto; min-width: 0; } /* スマホは全幅。下限の指定で画面からはみ出させない */
  #chatPane:has(> #threadPanel.open) > .pane-main,
  #sidePanel:has(> #threadPanel.open) > .pane-main { display: none; }
}
.thread-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-weight: 800; font-size: 14.5px; letter-spacing: 0.05em;
}
#threadMessages { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior-x: none; padding: 12px 3px 8px; -webkit-overflow-scrolling: touch; }
/* 同時に動いているスレッドの切替バー(スレッド下部・横スクロール) */
#threadSwitch {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 7px 10px; border-top: 1px solid var(--line); background: var(--panel);
}
#threadSwitch.hidden { display: none; }
.tsw-item {
  position: relative; overflow: hidden;
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; max-width: 190px;
  padding: 4px 9px 4px 4px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line2); color: var(--dim2);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
/* 進み具合: ピル全体を左から薄いオレンジで満たし、先端の細い光る線が現在位置を示す。--p(0〜1)=経過ぶん。
   アバターの緑グロー(=いま考えているスレッド)とは色も場所も別レイヤーなので干渉しない */
.tsw-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(255, 138, 61, 0.04), rgba(255, 138, 61, 0.22));
  border-right: 1.5px solid rgba(255, 170, 90, 0.9);
  box-shadow: 2px 0 8px -2px rgba(255, 138, 61, 0.65);
  pointer-events: none; transition: width 0.6s linear;
}
/* --p 未設定(予想がまだ無い)なら先端の線・影を消し、ただのピルに戻す */
.tsw-item:not([style*="--p"])::before { border-right: 0; box-shadow: none; }
.tsw-item:hover { background: var(--glass2); }
.tsw-item.cur { border-color: var(--warn); color: var(--text); background: var(--glass2); }
.tsw-av { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; }
.tsw-nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsw-el { color: var(--sun2); font-weight: 800; flex: 0 0 auto; }
.tsw-item.cur .tsw-el { color: var(--warn); }
.tsw-eta { color: var(--dim2); font-size: 11px; flex: 0 0 auto; }
/* 終わった実行の名残り(押すまで残る): 実行中より薄く沈め、右端に「完了」等の状態を出す。
   要対応・衝突中は薄くしすぎない=オーナーの手番だと分かる色を残す */
.tsw-item.done { opacity: 0.5; border-style: dashed; }
.tsw-item.done:hover { opacity: 1; }
.tsw-item.done .tsw-el { color: var(--dim2); font-weight: 700; }
.tsw-item.st-owner { opacity: 0.72; }
.tsw-item.st-owner .tsw-el { color: var(--danger, #ff5a5a); }
.tsw-item.st-conflict { opacity: 0.72; }
.tsw-item.st-conflict .tsw-el { color: var(--warn); }
/* 平常を大きく超過: 赤枠+赤い経過で「止まってるかも」を一目で。フィルの光は消す(進捗ではなく警告なので) */
.tsw-item.overrun { border-color: var(--danger, #ff5a5a); background: rgba(255, 90, 90, 0.1); }
.tsw-item.overrun .tsw-el { color: var(--danger, #ff5a5a); }
.tsw-item.overrun::before { display: none; }
#threadPanel .thread-composer { border-top: 1px solid var(--line); }
/* スレッド列は幅が限られるので、本文の左右余白を詰めて文字幅を最大化する(右側を特に詰める)。
   アイコン側(左)は少し残しつつ、アバターを小さめにして本文へ幅を回す */
#threadMessages .msg { padding: 8px 5px 8px 8px; margin: 1px 0; gap: 9px; }
#threadMessages .msg .avatar { width: 32px; height: 32px; }
/* スレッドはアバターを32pxに縮めるので、実行中の回るリングを載せる枠も32pxに揃える
   (揃えないとリングだけ38pxのままでアイコンより大きくはみ出す) */
#threadMessages .msg .av { width: 32px; height: 32px; }
/* スレッド先頭=オーナーの指示全文は、普段の小さめ灰色で控えめに残す(要約は本文フィード側に出ている) */
#threadMessages .msg.owner .text { color: var(--dim2); font-size: 12.5px; line-height: 1.7; }

/* 秘書パネル・スレッド列の地色をゆっくり漂わせる(色はうるさくない程度に薄く)。動きが苦手な人には止める */
@keyframes aurora-drift {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 70% 45%, 30% 55%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #sidePanel, #threadPanel { animation: none; }
}

/* ===== 秘書会話・スレッドは"チャット吹き出し"にして会話文らしく見せる =====
   本文(.body)を吹き出しに。オーナーは右・相手(AI/社員)は左に振り分け、
   透かしの効いた地色の上に会話が流れる。菫=秘書 / 琥珀=スレッド で色も分ける。
   本文フィード(#messages)はミニマルな一覧のままなので、この2パネルだけに効かせる。 */
#sideMessages .msg, #threadMessages .msg {
  align-items: flex-start; gap: 8px; padding: 3px 10px; margin: 2px 0;
  border-radius: 0; animation: msg-in 0.24s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}
#sideMessages .msg:hover, #threadMessages .msg:hover { background: transparent; }
#sideMessages .msg.owner, #threadMessages .msg.owner { flex-direction: row-reverse; }
#sideMessages .msg .body, #threadMessages .msg .body {
  flex: 0 1 auto; max-width: 86%; position: relative;
  /* 文字や地色が透けて見えるガラスの吹き出し(磨りガラス=裏の光がぼやけて透ける) */
  background: var(--glass2); border: 1px solid var(--line);
  border-radius: 16px; padding: 8px 13px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* 本物の吹き出しの尻尾(小さな三角)を上の肩に付ける=アイコン側へ向く。
   吹き出しと同じ地色+同じ枠線を継ぐ小さな回転四角で、裏がぼやけて透ける磨りガラスのまま尖らせる。 */
#sideMessages .msg .body::before, #threadMessages .msg .body::before {
  content: ''; position: absolute; top: 8px; width: 11px; height: 11px;
  background: inherit; transform: rotate(45deg);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#sideMessages .msg.ai .body::before, #threadMessages .msg.ai .body::before {
  left: -5px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#sideMessages .msg.owner .body::before, #threadMessages .msg.owner .body::before {
  right: -5px; border-right: 1px solid var(--line); border-top: 1px solid var(--line);
}
/* オーナーの吹き出しは各パネルのブランド色で塗る=どちらの会話かが色で分かる(尻尾の枠線もその色) */
#sideMessages .msg.owner .body {
  background: linear-gradient(135deg, rgba(154, 109, 255, 0.22), rgba(109, 141, 255, 0.15));
  border-color: rgba(154, 109, 255, 0.42);
}
#sideMessages .msg.owner .body::before { border-color: rgba(154, 109, 255, 0.42); }
#threadMessages .msg.owner .body {
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.18), rgba(255, 77, 54, 0.11));
  border-color: rgba(255, 138, 61, 0.42);
}
#threadMessages .msg.owner .body::before { border-color: rgba(255, 138, 61, 0.42); }
/* システム行(区切り・注記)は吹き出しにしない=中央の淡い注記のまま流す */
#sideMessages .msg.system, #threadMessages .msg.system { justify-content: center; }
#sideMessages .msg.system .body, #threadMessages .msg.system .body {
  background: transparent; border: 0; padding: 3px 6px; max-width: 100%;
}
#sideMessages .msg.system .body::before, #threadMessages .msg.system .body::before { display: none; }
/* 吹き出しにしたので上寄せの余白を詰める。名前+時刻は吹き出しの中で小さく */
#sideMessages .msg .head, #threadMessages .msg .head { margin-bottom: 3px; }

/* ---- 仕組みモーダル(ℹ︎): 裏側の構成を1枚で ---- */
#sysModal, #clogModal, #routineModal {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  /* オーバーレイ自身をスクロールコンテナにして、背景(パネル外)をドラッグしても背後のページに伝播させない。
     overscroll-behavior だけだとパネル外の透明領域のドラッグが裏へ抜けてしまうため、ここで飲み込む(スマホ/Web共通) */
  overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* バージョン履歴の1件(バージョン見出し+その回の変更点) */
.clog-ver { font-weight: 800; font-size: 13px; color: var(--sun2); margin: 16px 0 6px; letter-spacing: 0.04em; }
.clog-ver:first-child { margin-top: 6px; }
.clog-note {
  color: var(--text); font-size: 12.5px; line-height: 1.65; padding: 3px 0 3px 14px; position: relative; word-break: break-word;
}
.clog-note::before { content: '·'; position: absolute; left: 2px; color: var(--sun2); }
/* 更新ボタンは一番上に固定して押しやすく。下にその回までの変更点(履歴)が並ぶ */
.clog-top { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding-bottom: 12px; background: var(--panel); }
.clog-top .upd-btn { width: 100%; justify-content: center; }
.sys-panel {
  width: min(560px, 92vw); max-height: 82vh; overflow-y: auto;
  /* パネル内を上端/下端までスクロールしても、その勢いで背後のページが動かないようにする(スクロール伝播を止める) */
  overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 20px;
  padding: 18px 20px 20px; box-shadow: var(--shadow);
}
.sys-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-weight: 800; font-size: 16px; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.sys-h { font-weight: 800; font-size: 12.5px; color: var(--sun2); margin: 14px 0 6px; letter-spacing: 0.08em; }
.sys-line {
  color: var(--text); font-size: 12.5px; line-height: 1.7; word-break: break-all;
  font-variant-numeric: tabular-nums;
}
/* ルーティンワーク(🔁): 種類の折りたたみカード。ヘッダをクリックで実際の業務内容を開く */
.rt-freq { font-weight: 800; font-size: 12.5px; color: var(--sun2); margin: 16px 0 8px; letter-spacing: 0.08em; }
.rt-freq:first-child { margin-top: 4px; }
.rt-card { border: 1px solid var(--line2); border-radius: 14px; margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.rt-card-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 11px 13px; color: var(--text);
}
.rt-caret { color: var(--dim); font-size: 11px; transition: transform 0.18s ease; flex: none; }
.rt-card.open .rt-caret { transform: rotate(90deg); }
.rt-name { font-weight: 700; font-size: 13px; flex: 1 1 auto; word-break: break-word; }
.rt-meta { font-size: 11px; color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }
.rt-body { display: none; padding: 0 13px 13px; }
.rt-card.open .rt-body { display: block; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rt-tag { font-size: 10.5px; color: var(--dim); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 9px; }
.rt-prompt { color: var(--text); font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.rt-empty { color: var(--dim); font-size: 12.5px; line-height: 1.7; }
/* 🌙 空き時間に実行する予定の1行(取り消し✕付き)と「今すぐ実行」 */
.rt-later {
  display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 10px;
  border: 1px solid var(--line2); border-radius: 12px; background: var(--glass2);
}
.rt-later .p { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-later .c { color: var(--dim); font-size: 11px; white-space: nowrap; }
.rt-later .x { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 13px; }
.rt-later .x:hover { color: var(--text); }
.rt-now {
  margin: 4px 0 12px; padding: 7px 12px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--glass2); color: var(--text);
}
.rt-now:hover { border-color: var(--sun); color: var(--sun2); }

#updModal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.upd-panel {
  width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--line2);
  border-radius: 20px; padding: 20px 22px 18px; box-shadow: var(--shadow);
}
.upd-head {
  font-family: var(--serif); font-weight: 800; font-size: 17px; letter-spacing: 0.05em; margin-bottom: 12px;
}
.upd-notes { list-style: none; margin: 0 0 10px; padding: 0; max-height: 40vh; overflow-y: auto; }
.upd-note {
  color: var(--text); font-size: 12.5px; line-height: 1.6; padding: 4px 0 4px 14px; position: relative; word-break: break-word;
}
.upd-note::before { content: '·'; position: absolute; left: 2px; color: var(--sun2); }
.upd-restart { font-size: 11.5px; color: var(--dim); margin-bottom: 10px; }
.upd-count { font-size: 13px; color: var(--sun2); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.upd-actions { display: flex; gap: 10px; justify-content: flex-end; }
.upd-btn { border-radius: 12px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--line2); }
.upd-later { background: transparent; color: var(--dim); }
.upd-now { background: var(--sun2); color: #1a1204; border-color: var(--sun2); }
.ver-chip.upd { box-shadow: 0 0 0 2px var(--sun2) inset; }

/* 設定モーダルの1項目(スレッド幅の下限スライダー) */
#settingsModal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#settingsModal.hidden { display: none; }
.set-row { margin-bottom: 16px; }
.set-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.set-val { color: var(--sun2); font-variant-numeric: tabular-nums; margin-left: 4px; }
.set-row input[type="range"] { width: 100%; accent-color: var(--sun2); cursor: pointer; }
.set-hint { font-size: 11.5px; color: var(--dim); line-height: 1.6; margin-top: 8px; }

#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px);
  background: var(--panel); border: 1px solid var(--warn); color: var(--text);
  border-radius: 14px; padding: 11px 18px; font-size: 13.5px; max-width: 86vw;
  opacity: 0; transition: all 0.25s ease; pointer-events: none; z-index: 40;
  backdrop-filter: blur(12px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }

/* 画像クリックで全画面拡大(ライトボックス) */
img.zoomable { cursor: zoom-in; }
body.lb-lock { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: lbfade 0.16s ease;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 96vw; max-height: 92vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
}
.lb-close {
  position: fixed; top: 14px; right: 16px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }