/* ============================ 分割ファイルヘッダー ============================
   責務: レイアウト(3列・ドラッグハンドル)・オフィス(組織図・バッジ・稼働ポップ・配線・横断検索)
   見る場面: 画面の列構成やオフィス(樹形図・未読/要対応・中継線)の見た目を変えるとき
   ============================================================================ */
/* ================= レイアウト =================
   スマホ: オフィス⇄チャット切替
   PC(940px〜): オフィス+チャット
   ワイド(1240px〜): オフィス+チャット+秘書常駐 */
#app { display: flex; height: 100dvh; }
#office {
  flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
}
#chatPane {
  flex: 1.7; min-width: 0; display: flex; flex-direction: row;
  border-left: 1px solid var(--line);
  background: var(--chat-tint); backdrop-filter: blur(6px);
}
/* 本体列(head+messages+composer)。スレッドを開くと、この列が左に圧縮されて右にスレッドが並ぶ(かぶせない) */
.pane-main {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 939px) {
  /* スマホ: 会話ボードは常にどれか1枚だけが全画面。社員リスト(#office)は左からのスライド式ドロワーにする
     (チャットアプリのドロワーのように、いつもは隠れていて☰で出す)。秘書もオーバーレイではなく全画面ボード=同時に2枚開かない */
  #chatPane { display: none; position: fixed; inset: 0; border-left: 0; background: var(--bg0); z-index: 5; }
  body.view-chat #chatPane { display: flex; }
  #office {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 26;
    width: min(340px, 86vw); background: var(--bg0);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.25, 1);
  }
  body.drawer-open #office { transform: translateX(0); }
  #officeBackdrop {
    display: block; /* 基底の display:none を解除(これが無いと暗幕もタップで閉じるも効かない) */
    position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease; backdrop-filter: blur(2px);
  }
  body.drawer-open #officeBackdrop { opacity: 1; pointer-events: auto; }
}
@media (min-width: 940px) {
  #office { flex: 0 0 var(--office-w, 380px); }
  .back { display: none !important; }
}

/* パネル幅のドラッグ調整ハンドル(PCのみ) */
.resizer { display: none; }
@media (min-width: 940px) {
  #rzOffice { display: block; }
}
@media (min-width: 940px) {
  body.side-open #rzSide { display: block; } /* 仕切りは秘書を開いている時だけ */
}
.resizer {
  flex: 0 0 7px; cursor: col-resize; position: relative; z-index: 4; background: transparent;
}
/* 境界は太い帯ではなく細い線で示す(掴む範囲は7px、見た目は1本の線)。掴むと淡い赤に灯る */
.resizer::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-50%); background: var(--line); transition: background 0.15s ease, width 0.15s ease;
}
.resizer:hover::before, .resizer:active::before { width: 2px; background: rgba(255, 77, 54, 0.22); }

/* ================= オフィス ================= */
/* 見出しとボタン群はflexで並べる(絶対配置をやめ、狭い幅ではボタン群が下に折り返す=文字被りが起きない) */
/* ヘッダは縦3段: ①題名 ②残り容量バー(横いっぱい) ③操作アイコン+右端バージョン */
.office-head {
  position: relative; margin: 10px 4px 22px; padding-left: 2px;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.office-title { position: relative; min-width: 0; display: flex; align-items: center; gap: 10px; }
/* アイコン + 焼き込みワードマーク(端末フォント差の影響を受けず画像通りに出す) + 暖色グロー */
.office-title::before {
  content: ""; position: absolute; z-index: -1; left: -40px; top: 50%;
  width: 360px; height: 140px; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(60% 72% at 42% 50%, rgba(255, 138, 61, 0.26), rgba(255, 138, 61, 0.08) 45%, transparent 74%);
  filter: blur(12px);
}
.office-title .brand-mark {
  width: 38px; height: 38px; flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(255, 138, 61, 0.30));
}
.office-title .wordmark {
  height: 42px; width: auto; flex: 0 0 auto; display: block;
}
.office-title h1 {
  font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 0.06em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.office-title p { color: var(--dim); font-size: 12px; margin-top: 4px; letter-spacing: 0.04em; }
.office-actions {
  display: flex; gap: 8px; align-items: center;
}
.oa-spacer { flex: 1 1 auto; } /* バージョンチップを右端へ押し出す */

/* 稼働状況ポップ: 実行中の役職(組織図で光って回るリングが出ている人)にカーソルを乗せると、
   組織図パネルの右外(チャット側の余白)に横へ出る小さな吹き出し。真下に出すと下の部下ノードを
   覆って押せなくなるため右へ逃がす。いま何本・どのぐらい動いているか(経過・残り目安・いまの動き)を
   見せる。手すきの人には出さない=動いている人だけの表示。 */
.work-pop {
  position: absolute; z-index: 60; min-width: 210px; max-width: 300px;
  display: flex; flex-direction: column; padding: 5px;
  background: var(--surface); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(65, 217, 154, 0.14);
  animation: msg-in 0.14s ease;
}
.wp-head {
  font-weight: 800; font-size: 10.5px; color: var(--ok); letter-spacing: 0.06em;
  padding: 4px 7px 5px;
}
.wp-head::before { content: "● "; }
.wp-row {
  width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px;
  padding: 6px 7px; cursor: pointer; color: var(--text); display: flex; flex-direction: column; gap: 2px;
}
.wp-row:hover { background: var(--glass2); }
.wp-top { display: flex; align-items: baseline; gap: 8px; }
.wp-el { font-weight: 800; font-size: 12px; color: var(--sun2); font-variant-numeric: tabular-nums; }
.wp-rm { font-size: 10.5px; color: var(--dim2); margin-left: auto; }
.wp-act { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-wait {
  font-size: 10.5px; color: var(--dim2); padding: 4px 7px;
  border-top: 1px solid var(--line); margin-top: 2px;
}

/* 待機中バッジ: アバターの左上に青い「●n」。まだ見ていない着信(相手からの返答・別役職からの
   指示中継)がいくつ待っているか=「待機中」の件数。赤(操作待ち=あなたの番)より弱い合図なので、
   iPhone通知のように目立つ右上は赤(操作待ち)に譲り、青は左上に置く */
.unread-badge {
  position: absolute; top: 1px; left: 1px; z-index: 3;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  border-radius: 999px; border: 2px solid var(--bg0);
  box-shadow: 0 0 8px rgba(51, 195, 180, 0.6);
}
/* 要対応: オーナーが動かないと完了しない用件がある人。アバターを赤いリングで脈打たせ、
   iPhoneの通知バッジと同じく右上に赤い「!」を出して「自分の番だ」と一目で分かるようにする
   (未読の●nとは別の、より強い合図) */
.tnode.needs-owner .avatar { animation: action-ring 1.3s ease-in-out infinite; }
@keyframes action-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--sun), 0 0 8px 2px rgba(255, 77, 54, 0.5); }
  50% { box-shadow: 0 0 0 3px var(--sun), 0 0 16px 5px rgba(255, 77, 54, 0.85); }
}
.action-badge {
  position: absolute; top: 0; left: 28px; z-index: 4;
  width: 17px; height: 17px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sun); color: #fff; font-size: 12px; font-weight: 900; line-height: 1;
  border-radius: 50%; border: 2px solid var(--bg0);
  box-shadow: 0 0 8px rgba(255, 77, 54, 0.8);
}
/* 動いている人が同時に要対応でもあるとき、緑グローより赤リングを優先(自分の番が埋もれない) */
.tnode.running.needs-owner .avatar { animation: action-ring 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tnode.needs-owner .avatar { animation: none; box-shadow: 0 0 0 2px var(--sun); } }
@keyframes pulse { 50% { opacity: 0.4; } }
@keyframes rotate { to { transform: rotate(360deg); } }
/* 考え中: アバター自身を緑の光が大きくふわっと包んで脈打つ(回るリングではなく、その人が光る)
   --g = 同時に動いている人数に応じた強さ(1人=1.0 の控えめな光、増えるほど大きく光る。JSがセット) */
@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 calc(7px * var(--g, 1)) calc(2px * var(--g, 1)) rgba(65, 217, 154, 0.42); }
  50% { box-shadow: 0 0 calc(16px * var(--g, 1)) calc(5px * var(--g, 1)) rgba(65, 217, 154, 0.8), 0 0 0 calc(3px * var(--g, 1)) rgba(65, 217, 154, 0.18); }
}

/* 組織図(樹形図)ビュー: 縦の線=指示系統。上の役職は下に指示・横並びには提案。
   線は直角(角)でアイコンへまっすぐ入る。既定は無色の細線、中継(裏側の指示)だけ--wireで点灯 */
.tree { margin: 2px 2px 6px; --g: 1; }
.tkids { margin-left: 16px; padding-left: 14px; }
.tkids > .tbranch { position: relative; }
/* 縦線: 枝の上端 → 自ノードの中心の高さ(=横線と交わる点)。どの子も中心まで伸ばす */
.tkids > .tbranch::before {
  content: ""; position: absolute; left: -15px; top: 0; width: 1.5px; height: 25px;
  background: var(--tree-line);
}
/* 兄弟へ続く縦線: 自ノード中心→枝の下端。最後の子は引かない=線がそこで止まる(全部つながらない) */
.tkids > .tbranch:not(:last-child)::after {
  content: ""; position: absolute; left: -15px; top: 25px; bottom: 0; width: 1.5px;
  background: var(--tree-line);
}
.tnode {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; margin: 3px 0; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.tnode:hover { background: var(--glass2); border-color: var(--line2); }
.tnode.selected { border-color: var(--sun); background: rgba(255, 77, 54, 0.07); }
.tnode.owner-node { cursor: default; }
.tnode.owner-node:hover { background: transparent; border-color: transparent; }
/* オーナー自身のボード(メモ帳)が使えるときは、他の役職と同じ当たり判定・hover・選択枠にする */
.tnode.owner-node.owner-board { cursor: pointer; }
.tnode.owner-node.owner-board:hover { background: var(--glass2); border-color: var(--line2); }
.tnode.owner-node.owner-board.selected { border-color: var(--sun); background: rgba(255, 77, 54, 0.07); }
/* オーナーの下に手伝い役秘書(秘書)をぶら下げる段(指示系統の線の外) */
.owner-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* 秘書: 偉くはない手伝い役。破線の淡い枠で「系統の外の助っ人」を表す。
   align-self:stretch で行全体を長方形いっぱいに広げ、文字以外の空白も押せる当たり判定にする */
.tnode.assistant-node { border: 1px dashed var(--line2); background: var(--glass); align-self: stretch; }
.tnode.assistant-node .tn { font-weight: 700; }
.tnode.assistant-node:hover { background: var(--glass2); border-color: var(--line2); border-style: solid; }
/* 横線: 縦線 → アイコン。角は丸めず、縦線とピッタリ交わって隙間なく1本(直角)に見せる。
   アイコンの下に1pxだけ潜り込ませ、線とアイコンの間に隙間を作らない */
.tkids > .tbranch > .tnode::before {
  content: ""; position: absolute; left: -15px; top: 50%; width: 25px; height: 1.5px;
  transform: translateY(-0.75px);
  background: var(--tree-line);
}
.tnode .avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.tnode .tn { font-weight: 700; font-size: 13px; white-space: nowrap; }
.tnode .td {
  color: var(--dim2); font-size: 10.5px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tnode .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim2); flex: 0 0 auto; }
.tnode.running .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.4s ease infinite; }
/* 自分は止まっているが、たたんだ配下の誰かが作業中: 点を緑で脈打たせて「中で誰か動いてる」を示す */
.tnode.desc-running .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.4s ease infinite; }
/* 折りたたみキャレット: 子を持つノードの右側。押すと部下の表示/非表示だけ切り替える(本人チャットは開かない)。
   たたんでいる間は配下の未読・操作待ちがこのノードのバッジに合算されるので、たたんでも取りこぼさない */
.tcaret {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass2); border: 1px solid var(--line2); border-radius: 6px;
  color: var(--dim); font-size: 13px; line-height: 1; cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.tcaret:hover { color: var(--text); background: var(--glass); border-color: var(--sun); }
.tcaret.open { transform: rotate(90deg); color: var(--text); }
.tnode.running .tn { color: var(--ok); }
/* 実行中の「考え中」表現: 回る緑丸ではなく、その人(アバター)自身がふわっと光って脈打つ */
.tnode.running .avatar { animation: avatar-glow 1.5s ease-in-out infinite; }

/* ---- 中継(裏側の指示 A→B)だけ、宛先Bへ入る1本の線を色で光らせる(--wire = その指示の色) ----
   lit-node = 宛先Bへ入る線(縦の上半分+横)。通り道の幹は光らせない=直接会話では線を引かない */
.tkids > .tbranch.lit-node::before {
  width: 3px; /* 縦線を太く */
  background: var(--wire); box-shadow: 0 0 12px var(--wire), 0 0 5px var(--wire);
}
.tkids > .tbranch.lit-node > .tnode::before {
  height: 3px; transform: translateY(-1.5px); /* 横線を太く(交点を隙間なく1本に見せる) */
  background: var(--wire); box-shadow: 0 0 12px var(--wire), 0 0 5px var(--wire);
}
/* ノード本体は箱を光らせない。名前と小さな点だけ線と同じ色にして「この線の先はこの人」を示す */
.tnode.wire-on .tn { color: var(--wire); }
.tnode.wire-on .dot { background: var(--wire); }

/* 実行中=働いている印は、アバター自身の大きな緑グロー(.tnode.running .avatar)で示す */
/* オーナー→秘書の直通線。アイコン同士を縦にまっすぐつなぐ破線(アバター中心の真下)。
   破線=「指揮系統の外の直属スタッフ」という立場を実線の幹と区別する。
   既定は淡い破線、指示が動いている間は緑(ASSISTANT_WIRE)で点灯して流れる。 */
.owner-link {
  height: 15px; flex: 0 0 auto; margin-left: 25px;
  border-left: 1.5px dashed var(--tree-line);
}
.owner-link.lit {
  border-left-width: 3px; border-left-color: var(--wire);
  filter: drop-shadow(0 0 8px var(--wire)) drop-shadow(0 0 4px var(--wire));
  animation: wire-pulse 1.6s ease-in-out infinite;
}
/* オーナー→社長の幹(樹形図の背骨の一番上)。直接会話では光らせない=常に淡い静かな線 */
.owner-stem { width: 1px; height: 15px; margin: 1px 0 0 15px; background: var(--line); }
@keyframes wire-pulse { 50% { opacity: 0.6; } }

/* 会話の横断検索(🔍): 本社パネルの見出し下。どの会話に語句があるかを探す */
.office-search {
  display: flex; align-items: center; gap: 8px; margin: -14px 4px 16px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--glass2);
}
.office-search .os-ic { flex: 0 0 auto; font-size: 13px; opacity: 0.7; }
.office-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 13px;
}
.office-search .os-x {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  border: 0; background: var(--glass2); color: var(--dim); font-size: 14px; line-height: 1;
}
#officeSearchResults { display: flex; flex-direction: column; gap: 6px; margin: 0 2px; }
.osr-empty { color: var(--dim2); font-size: 12px; padding: 10px 6px; }
.osr-item {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--glass2);
  color: var(--text); transition: border-color 0.15s ease, background 0.15s ease;
}
.osr-item:hover { border-color: var(--sun); background: var(--glass); }
.osr-item .avatar { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; }
.osr-meta { min-width: 0; flex: 1; }
.osr-name { display: flex; align-items: baseline; gap: 7px; margin-bottom: 1px; }
.osr-who { font-size: 14px; font-weight: 800; color: var(--sun2); font-family: var(--serif); letter-spacing: 0.02em; }
.osr-day { font-size: 10px; font-weight: 500; color: var(--dim2); flex: 0 0 auto; }
.osr-snip { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ★ブックマーク一覧(#bmModal): 検索結果と同じ行に「★を外す」を添える */
#bmBody { display: flex; flex-direction: column; gap: 6px; }
.bm-row { display: flex; align-items: center; gap: 6px; }
.bm-row .osr-item { flex: 1; min-width: 0; }
.bm-x {
  border: 0; background: transparent; color: var(--dim2); font-size: 12px; line-height: 1;
  cursor: pointer; padding: 6px; border-radius: 8px; flex: 0 0 auto;
}
.bm-x:hover { color: #ff6b6b; background: var(--glass2); }