/* ============================================================
   Syn3Chat base.css v1.1
   リセット・CSS変数・共通ユーティリティ
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Noto Sans JP',sans-serif;
  font-size:13px;
  color:var(--txt);
  display:flex;
  -webkit-font-smoothing:antialiased;
}

:root{
  /* ---- レイアウト ---- */
  --sb-w:132px; --sb-min:100px; --sb-max:260px;

  /* ---- サイドバー (温かみのあるベージュ系) ---- */
  --sb-bg:#f4efe6;
  --sb-bdr:rgba(180,140,85,.22);
  --sb-txt:#1e1208; --sb-txt2:#5c3d1a; --sb-txt3:#8a6535;
  --sb-acc:#f97316;
  --sb-acc-bg:rgba(249,115,22,.10);
  --sb-acc-bdr:rgba(249,115,22,.30);
  --sb-hover:rgba(0,0,0,.045);
  --sb-active:rgba(249,115,22,.10);

  /* ---- メイン ---- */
  --surface:rgba(255,255,255,.90);
  --surface2:rgba(255,255,255,.98);
  --bdr:rgba(14,165,233,.18);
  --txt:#0f172a; --txt2:#1e3a5f; --txt3:#475569; --txt4:#94a3b8;

  /* ---- 3AIカラー (Syn3Chat v1.1) ---- */
  --grok:#7c3aed;      /* Grok 4.1 Fast (紫) */
  --gpt:#10b981;       /* GPT-5 nano (緑) */
  --claude:#b45309;    /* Claude Haiku 4.5 (オレンジ) */
  --cmt:#0d9488;       /* コメント (ティール) */

  /* ---- セマンティック ---- */
  --ok:#047857; --err:#b91c1c; --warn:#b45309;

  /* ---- Syn3Chat ブランド ---- */
  --brand-sky:#0ea5e9;
  --brand-violet:#8b5cf6;
  --brand-orange:#f97316;
  --brand-amber:#fbbf24;
  --brand-grad:linear-gradient(135deg,#0ea5e9 0%,#8b5cf6 55%,#f97316 100%);

  /* ---- 角丸 ---- */
  --r:12px; --r-sm:7px; --r-lg:16px;

  /* ---- 影 ---- */
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(14,165,233,.12);
  --shadow-lg:0 8px 32px rgba(14,165,233,.18);
}

/* ==== スクロールバー ==== */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(14,165,233,.32);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,.5)}
#sidebar ::-webkit-scrollbar-thumb{background:rgba(180,140,85,.35)}

/* ==== 背景 (右カラム) ==== */
#right-col{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;min-width:0;
  background:
    radial-gradient(ellipse at 20% 10%,rgba(186,230,255,.55),transparent 55%),
    radial-gradient(ellipse at 80% 90%,rgba(251,191,36,.20),transparent 55%),
    radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.12),transparent 60%),
    linear-gradient(160deg,#e6f3ff,#c8e4f5 50%,#d6ecfd);
}

/* ==== ファイルローディング ==== */
#file-loading{
  display:none;position:fixed;inset:0;z-index:900;
  background:rgba(255,255,255,.75);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
#file-loading.show{display:flex}
.fl-box{
  background:#fff;padding:24px 32px;border-radius:14px;
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:16px;
}
.fl-spin{font-size:24px;animation:spin .8s linear infinite}
.fl-txt{font:600 13px 'JetBrains Mono',monospace;color:var(--txt2)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ==== コンテキストメニュー ==== */
#ctx-menu{
  position:fixed;z-index:999;
  background:#fff;border:1px solid rgba(0,0,0,.1);
  border-radius:9px;box-shadow:0 8px 28px rgba(0,0,0,.14);
  padding:5px;display:none;min-width:140px;
}
#ctx-menu.show{display:block}
.ctx-item{
  padding:8px 14px;border-radius:6px;cursor:pointer;
  font-size:12px;font-weight:500;color:#1e293b;
  display:flex;align-items:center;gap:8px;
}
.ctx-item:hover{background:#f1f5f9}
.ctx-item.danger{color:var(--err)}
.ctx-item.danger:hover{background:rgba(185,28,28,.08)}

/* ==== トースト (汎用) ==== */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;padding:10px 20px;border-radius:24px;
  font:600 12px 'Sora',sans-serif;z-index:1000;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:toastIn .25s ease, toastOut .3s ease 2.2s forwards;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-10px)}}

/* ==== 汎用バッジ ==== */
.badge{
  font:700 9px 'JetBrains Mono',monospace;
  padding:2px 7px;border-radius:20px;
  letter-spacing:.3px;
}
.badge-sky{background:rgba(14,165,233,.12);color:var(--brand-sky);border:1px solid rgba(14,165,233,.28)}
.badge-violet{background:rgba(139,92,246,.12);color:var(--brand-violet);border:1px solid rgba(139,92,246,.28)}
.badge-orange{background:rgba(249,115,22,.12);color:var(--brand-orange);border:1px solid rgba(249,115,22,.3)}
.badge-green{background:rgba(4,120,87,.10);color:var(--ok);border:1px solid rgba(4,120,87,.25)}