/* ============================ 分割ファイルヘッダー ============================
   責務: サイドチャット(秘書=菫色)・秘書検索・ログイン・SNS投稿/選択肢ボタン・アバターのリング
   見る場面: 秘書パネルの配色・ログイン画面・投稿/選択ボタン・実行中リングを変えるとき
   ============================================================================ */
/* ================= サイドチャット(サイト開発者=別の存在なので配色も別) =================
   本社=太陽の赤 / 開発者=菫(すみれ)色。ひと目で「こっちはサイトをいじる人」と分かる */
#sidePanel {
  display: flex; flex-direction: row;
  /* 透かし画像は置かない(文字と重なって読みづらいため)。裏の夜明けの光を透かしつつ、
     菫の光をゆっくり動かして「うるさくない程度に生きている」地色にする(オーナー指示 2026-07-08) */
  background:
    radial-gradient(42% 32% at 18% 14%, rgba(154, 109, 255, 0.18), transparent 70%),
    radial-gradient(40% 30% at 84% 80%, rgba(109, 141, 255, 0.14), transparent 70%),
    var(--side-tint);
  background-size: 180% 180%, 200% 200%, auto;
  animation: aurora-drift 26s ease-in-out infinite alternate;
  border-left: 1px solid rgba(154, 109, 255, 0.35);
}
#sidePanel .side-head { border-bottom: 1px solid rgba(154, 109, 255, 0.22); }
#sidePanel .side-title::before { content: "🎧 "; color: #b191ff; }
#sidePanel .msg.owner .head .n { color: #b191ff; }
#sidePanel .msg.ai .head .n { color: #cdbcff; }
/* 右ログは長い相談が続くので、行間を広めに読みやすく(切れ目は吹き出しで見せる) */
#sideMessages .msg .text { line-height: 1.74; }
#sidePanel .composer .send {
  background: linear-gradient(135deg, #9a6dff, #6d8dff);
  box-shadow: 0 8px 22px rgba(154, 109, 255, 0.35);
}
#sidePanel .composer textarea:focus { border-color: #9a6dff; }
#sidePanel .chip:hover { border-color: #9a6dff; }
#sidePanel .msg.running-row .av::before {
  background: conic-gradient(from 0deg, transparent 10%, #9a6dff 32%, #6d8dff 45%, transparent 70%);
}
.side-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; padding-top: calc(13px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.side-title { font-family: var(--serif); font-weight: 800; font-size: 15px; letter-spacing: 0.05em; flex: 0 0 auto; }
/* 「秘書」の右の余白に置く検索。会話フィードから語句を探す */
.side-search {
  flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line2); background: var(--glass2);
}
.side-search .os-ic { flex: 0 0 auto; font-size: 12px; opacity: 0.7; }
.side-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 13px;
}
.side-search .os-x {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 0; background: var(--glass2); color: var(--dim); font-size: 13px; line-height: 1;
}
#sideSearchResults { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 8px; }
#sideMessages { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior-x: none; padding: 12px 4px 8px; -webkit-overflow-scrolling: touch; }
.side-composer { border-top: 1px solid var(--line); }

/* PC(940px〜): 秘書は"かぶせない"。✦で開くと本文が左へ詰まり、右に並んで出る(分割・暗幕なし)。
   閉じている間は幅0で消え、本文が全幅に戻る(オーナー指示 2026-07-07: 重なるのは汚いのでずらす) */
@media (min-width: 940px) {
  #sidePanel {
    position: static; transform: none; min-width: 0;
    flex: 0 0 0; width: 0; overflow: hidden; border-left: 0; box-shadow: none;
    transition: flex-basis 0.28s cubic-bezier(0.32, 0.72, 0.25, 1), width 0.28s cubic-bezier(0.32, 0.72, 0.25, 1);
  }
  body.side-open #sidePanel {
    flex: 0 0 var(--side-w, 360px); width: var(--side-w, 360px);
    border-left: 1px solid rgba(154, 109, 255, 0.35);
  }
}
/* スマホ(〜939px): 秘書もオーバーレイではなく全画面ボード。開くと1枚として表示され、閉じると裏の会話が戻る
   (SNS等と同時に2枚開かない=オーナー指示)。切替は☰の社員リストから行う */
@media (max-width: 939px) {
  #sidePanel {
    position: fixed; inset: 0; z-index: 10; width: auto; transform: none;
    display: none; box-shadow: none; border-left: 0;
  }
  body.side-open #sidePanel { display: flex; }
}

/* チャットボックスの最小幅(--chat-min, 設定で変更可。既定300px=スレッド下限より少し小さい)。
   ワイド表示で3列が並ぶとき、秘書チャット・チャンネルチャットが細くなりすぎない下限を敷く。
   スレッドを開いている列はスレッド側の自動調整に任せるので、その列には min を掛けない。 */
@media (min-width: 1240px) {
  body.side-open #sidePanel { min-width: var(--chat-min, 300px); }
  #chatPane:not(:has(> #threadPanel.open)) { min-width: var(--chat-min, 300px); }
}

/* ================= ログイン ================= */
#login {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: var(--bg0);
}
#login .mesh { position: absolute; inset: 0; background:
  radial-gradient(60% 42% at 50% 112%, rgba(224, 138, 78, 0.22), transparent 72%),
  radial-gradient(46% 40% at 80% 6%, rgba(22, 74, 90, 0.45), transparent 72%),
  radial-gradient(46% 40% at 14% 26%, rgba(22, 36, 74, 0.38), transparent 72%);
}
#login .panel {
  position: relative; width: min(360px, 88vw); text-align: center;
  background: var(--glass); border: 1px solid var(--line); border-radius: 26px;
  padding: 38px 28px 32px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
}
#login .sun {
  width: 88px; height: 88px; margin: 0 auto 18px; display: block;
  filter: drop-shadow(0 14px 34px rgba(255, 138, 61, 0.30)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
#login h1 { font-family: var(--serif); font-size: 27px; font-weight: 700; letter-spacing: 0.08em; }
#login p { color: var(--dim); font-size: 12px; margin: 5px 0 22px; letter-spacing: 0.06em; }
#login input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--line2); color: var(--text);
  border-radius: 14px; padding: 13px 15px; font-size: 16px; text-align: center; outline: none;
}
#login input:focus { border-color: var(--sun); }
#login button {
  width: 100%; margin-top: 12px; border: 0; border-radius: 14px; padding: 13px; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--sun2), var(--sun) 75%); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: 0.14em;
  box-shadow: 0 10px 28px rgba(255, 77, 54, 0.35); transition: transform 0.12s ease;
}
#login button:active { transform: scale(0.97); }
#login .err { color: var(--warn); font-size: 12.5px; min-height: 1.3em; margin-top: 10px; }

/* ---- SNS投稿ボタン・選択肢ボタン(メッセージの下) ---- */
.post-req {
  margin-top: 10px; padding: 11px 13px; border-radius: 14px;
  background: rgba(65, 217, 154, 0.06); border: 1px solid rgba(65, 217, 154, 0.3);
}
.post-cap { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.post-btn {
  border: 0; border-radius: 12px; padding: 9px 18px; cursor: pointer;
  background: linear-gradient(135deg, #2bb673, #1f9e83); color: #fff;
  font-size: 13.5px; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(65, 217, 154, 0.25); transition: transform 0.12s ease, opacity 0.15s ease;
}
.post-btn:active { transform: scale(0.95); }
.post-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* 投稿できない理由(動画が見つからない等)。承認ボタンは消さず、下に理由を添える */
.post-problem { margin-top: 8px; color: var(--sun2, #e6a23c); font-size: 12px; line-height: 1.5; }
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.goto-btn {
  border: 1px solid rgba(51, 195, 180, 0.42); background: rgba(51, 195, 180, 0.10);
  color: var(--accent); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; cursor: pointer;
  transition: all 0.15s ease;
}
.goto-btn:hover { background: rgba(51, 195, 180, 0.22); color: var(--text); }
.goto-btn:active { transform: scale(0.95); }

/* ---- アバターのリング(実行中はぐるぐる光る) ---- */
.msg .av { position: relative; flex: 0 0 auto; width: 38px; height: 38px; margin-top: 2px; }
.msg .av .avatar { width: 38px; height: 38px; margin: 0; }
.msg.running-row .av::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 10%, var(--sun) 32%, var(--sun2) 45%, transparent 70%);
  animation: rotate 1.3s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
.msg.running-row .av::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 77, 54, 0.25), transparent 70%);
  animation: pulse 1.6s ease infinite;
}