/* ============================ 分割ファイルヘッダー ============================
   責務: 配色変数(ダーク/ライト)・リセット・背景(夜明けの空+ノイズ)・アバター共通
   見る場面: テーマの色・全体の地色・アバターの下地を変えるとき
   ============================================================================ */
/* ================================================================
   AIcone 本社 — オーナー専用コンソール v4
   黒と余白(山本耀司)× 太陽の赤(岡本太郎)× ガラスの質感
   ================================================================ */
:root {
  --bg0: #080e12;           /* 夜明け前の深い紺碧 */
  --bg1: #0c1620;
  --glass: rgba(255, 255, 255, 0.04);
  --glass2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.16);
  --text: #f0f0f3;
  --dim: #9a9daf;
  --dim2: #686c7e;
  --sun: #ff4d36;           /* 太陽の赤 */
  --sun2: #ff8a3d;
  --accent: #33c3b4;        /* ブランドのティール */
  --ok: #41d99a;
  --warn: #ffb454;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  /* 意味ごとの面・線・スクリム(ダーク/ライトで切り替わる) */
  --surface: #0a0a0f;              /* 不透明の小パネル(吹き出し等) */
  --surface-glass: rgba(13, 13, 18, 0.75); /* すりガラスのポップ */
  --chat-tint: rgba(10, 10, 14, 0.4);      /* 会話ペインの薄い被せ */
  --tree-line: rgba(255, 255, 255, 0.09);  /* 組織図の指示系統の線 */
  --hover: rgba(255, 255, 255, 0.04);      /* ホバーの淡い面 */
  --input-bg: rgba(0, 0, 0, 0.3);          /* 入力欄の背景 */
  --avatar-bg: #000;               /* アバターの上下余白(サムネのレターボックス) */
  --panel: rgba(18, 18, 24, 0.97);         /* 不透明パネル(モーダル・スレッド列・履歴の固定ヘッダ) */
  --side-tint: rgba(13, 12, 20, 0.6);      /* 秘書パネルの下地(裏の夜明けの光を透かすため薄め) */
  --thread-tint: rgba(18, 18, 24, 0.6);    /* スレッド列の下地(同じく薄めに透かす) */
  --code-bg: rgba(0, 0, 0, 0.45);          /* コードブロック・ツールチップの濃い面 */
  --on-accent: #fff;               /* 赤/緑ボタンなど濃い面の上に載る文字(常に白) */
  --bg-glows:                      /* 背景の光(#bg) */
    radial-gradient(62% 46% at 50% 116%, rgba(224, 138, 78, 0.13), transparent 70%),
    radial-gradient(46% 38% at 86% -6%, rgba(255, 90, 60, 0.10), transparent 70%),
    radial-gradient(55% 46% at 6% 6%, rgba(22, 36, 74, 0.42), transparent 72%),
    radial-gradient(64% 52% at 50% 58%, rgba(18, 74, 90, 0.16), transparent 76%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 60%);
}
/* ライトモードの палитра。明示切替(data-theme=light)と、未指定時のOS設定(prefers-color-scheme)の両方で効かせる。
   ダーク=黒基調のまま、ライト=白基調に反転する(アバターの上下余白も黒↔白で切り替わる) */
:root[data-theme="light"] {
  --bg0: #f5f6f8; --bg1: #eaecef;
  --glass: rgba(0, 0, 0, 0.03); --glass2: rgba(0, 0, 0, 0.06);
  --line: rgba(0, 0, 0, 0.10); --line2: rgba(0, 0, 0, 0.16);
  --text: #17181d; --dim: #565a67; --dim2: #888c9a;
  --shadow: 0 14px 44px rgba(0, 0, 0, 0.14);
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.86);
  --chat-tint: rgba(255, 255, 255, 0.5);
  --tree-line: rgba(0, 0, 0, 0.12);
  --hover: rgba(0, 0, 0, 0.04);
  --input-bg: rgba(0, 0, 0, 0.04);
  --avatar-bg: #fff;
  --panel: rgba(255, 255, 255, 0.97);
  --side-tint: rgba(247, 245, 253, 0.72);
  --thread-tint: rgba(255, 255, 255, 0.72);
  --code-bg: rgba(0, 0, 0, 0.05);
  --on-accent: #fff;
  --bg-glows:
    radial-gradient(62% 46% at 50% 116%, rgba(255, 176, 120, 0.16), transparent 70%),
    radial-gradient(46% 38% at 86% -6%, rgba(255, 130, 100, 0.10), transparent 70%),
    radial-gradient(55% 46% at 6% 6%, rgba(120, 150, 210, 0.14), transparent 72%),
    radial-gradient(64% 52% at 50% 58%, rgba(120, 190, 205, 0.10), transparent 76%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 60%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg0: #f5f6f8; --bg1: #eaecef;
    --glass: rgba(0, 0, 0, 0.03); --glass2: rgba(0, 0, 0, 0.06);
    --line: rgba(0, 0, 0, 0.10); --line2: rgba(0, 0, 0, 0.16);
    --text: #17181d; --dim: #565a67; --dim2: #888c9a;
    --shadow: 0 14px 44px rgba(0, 0, 0, 0.14);
    --surface: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.86);
    --chat-tint: rgba(255, 255, 255, 0.5);
    --tree-line: rgba(0, 0, 0, 0.12);
    --hover: rgba(0, 0, 0, 0.04);
    --input-bg: rgba(0, 0, 0, 0.04);
    --avatar-bg: #fff;
    --panel: rgba(255, 255, 255, 0.97);
    --side-tint: rgba(247, 245, 253, 0.96);
    --code-bg: rgba(0, 0, 0, 0.05);
    --on-accent: #fff;
    --bg-glows:
      radial-gradient(62% 46% at 50% 116%, rgba(255, 176, 120, 0.16), transparent 70%),
      radial-gradient(46% 38% at 86% -6%, rgba(255, 130, 100, 0.10), transparent 70%),
      radial-gradient(55% 46% at 6% 6%, rgba(120, 150, 210, 0.14), transparent 72%),
      radial-gradient(64% 52% at 50% 58%, rgba(120, 190, 205, 0.10), transparent 76%),
      linear-gradient(180deg, var(--bg1), var(--bg0) 60%);
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
/* アバターは横幅を丸に合わせ、はみ出す上下はレターボックス(--avatar-bg=ダーク:黒/ライト:白)で埋める。
   横長サムネは横幅いっぱい+上下に地色、正方形の写真・似顔絵はぴったり収まる(地色は出ない) */
img.avatar { object-fit: contain; background: var(--avatar-bg); }
body {
  background: var(--bg0); color: var(--text);
  font: 15px/1.7 var(--sans);
  height: 100dvh; overflow: hidden; overscroll-behavior: none;
}

/* ---- 背景: 夜明けの空(紺→ティール→水平線の残照) + ノイズ ---- */
#bg {
  position: fixed; inset: 0; z-index: -2;
  background: var(--bg-glows);
}
#bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}