/* ============================================================
   Syn3Chat header.css v1.1
   サイドバー / ヘッダー / タブ / LVメーター
   ============================================================ */

/* ================= SIDEBAR ================= */
#sidebar{
  width:var(--sb-w);min-width:var(--sb-w);height:100%;
  background:var(--sb-bg);border-right:1px solid var(--sb-bdr);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:2px 0 14px rgba(0,0,0,.06);
  z-index:20;transition:width .22s ease,min-width .22s ease;
  position:relative;padding-right:12px;
}
#sidebar.collapsed{width:0;min-width:0;border-right:none;box-shadow:none;padding:0}
#sidebar.collapsed>*:not(#sb-toggle){visibility:hidden;overflow:hidden}

#sb-resize{
  position:absolute;top:12px;right:1px;width:10px;height:calc(100% - 24px);
  cursor:col-resize;
  background:linear-gradient(180deg,rgba(249,115,22,.12),rgba(249,115,22,.18),rgba(249,115,22,.12));
  border-radius:999px;z-index:24;
  box-shadow:inset 0 0 0 1px rgba(249,115,22,.18);
}
#sb-resize::after{
  content:'';position:absolute;top:8%;bottom:8%;left:50%;transform:translateX(-50%);
  width:2px;border-radius:999px;background:rgba(180,140,85,.62);
}
#sidebar.collapsed #sb-resize{display:none}

/* --- ハンバーガー --- */
#sb-toggle{
  position:fixed;top:10px;left:10px;z-index:30;
  width:24px;height:24px;background:rgba(30,38,50,.78);
  border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:all .2s;box-shadow:0 1px 6px rgba(0,0,0,.22);
}
#sb-toggle:hover{background:rgba(30,38,50,.92)}
#sb-toggle .bar{width:11px;height:1.3px;background:rgba(255,255,255,.85);border-radius:1px;transition:all .22s}
#sb-toggle.open .bar:nth-child(1){transform:rotate(45deg) translate(2.5px,2.5px)}
#sb-toggle.open .bar:nth-child(2){opacity:0;transform:scaleX(0)}
#sb-toggle.open .bar:nth-child(3){transform:rotate(-45deg) translate(2.5px,-2.5px)}

/* --- ブランド --- */
#sb-brand{padding:10px 9px 8px;border-bottom:1px solid var(--sb-bdr);flex-shrink:0;margin-top:34px}
.sb-logo-row{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.sb-logo-mark{
  width:26px;height:26px;border-radius:8px;
  background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;
  font:800 13px 'Sora',sans-serif;color:#fff;
  box-shadow:0 3px 10px rgba(14,165,233,.3);
}
.sb-logo-text{font:800 12px 'Sora',sans-serif;color:var(--sb-txt);letter-spacing:-.3px}
.sb-logo-text .s3{color:var(--brand-sky)}
.sb-logo-text em{color:var(--brand-orange);font-style:normal}
.sb-tag{font:700 6.5px 'JetBrains Mono',monospace;color:var(--sb-txt3);margin-left:33px;letter-spacing:.5px;line-height:1.25}

#sb-newbtn{
  margin:8px 7px 4px;padding:7px 8px;
  background:var(--sb-acc-bg);border:1px solid var(--sb-acc-bdr);
  border-radius:9px;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  font-size:9px;font-weight:700;color:var(--sb-acc);
  transition:all .15s;
}
#sb-newbtn:hover{background:rgba(249,115,22,.18)}
.sb-newbtn-icon{
  width:14px;height:14px;background:var(--sb-acc);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:10px;font-weight:800;
}
.sb-sec-label{
  padding:7px 9px 3px;font:700 7px 'JetBrains Mono',monospace;
  color:var(--sb-txt2);letter-spacing:.7px;text-transform:uppercase;
}
#sb-sessions{flex:1;overflow-y:auto;padding:0 5px 4px}
.sb-sess{
  padding:6px 7px;border-radius:7px;cursor:pointer;margin-bottom:2px;
  display:flex;align-items:flex-start;gap:5px;
  border:1px solid transparent;position:relative;
}
.sb-sess:hover{background:var(--sb-hover)}
.sb-sess.active{background:var(--sb-active);border-color:var(--sb-acc-bdr)}
.sb-sess.active .sb-sess-title{color:var(--sb-acc);font-weight:700}
.sb-sess-icon{width:14px;height:14px;min-width:14px;margin-top:1px;border-radius:4px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:8px}
.sb-sess-body{flex:1;min-width:0;padding-right:16px}
.sb-sess-title{font-size:9px;font-weight:600;color:var(--sb-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sess-meta{font:500 7px 'JetBrains Mono',monospace;color:var(--sb-txt3)}
.sb-sess-menu{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--sb-txt2);cursor:pointer;
  font-size:14px;padding:4px 6px;opacity:.55;transition:opacity .14s;z-index:5;
}
.sb-sess-menu:hover{opacity:1;color:var(--sb-acc)}
.sb-sess-rename{font-size:11px;font-weight:600;color:var(--sb-txt);background:#fff;border:1px solid var(--sb-acc-bdr);border-radius:4px;padding:2px 5px;width:100%;outline:none}

#sb-bottom{flex-shrink:0;border-top:1px solid var(--sb-bdr);padding:7px 9px}
.sb-status-row{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.sb-model-dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)}
.sb-model-name{font:700 6.5px 'JetBrains Mono',monospace;color:var(--sb-txt2)}
.sb-version{font:500 6.5px 'JetBrains Mono',monospace;color:var(--sb-txt3)}

/* ================= APP HEADER ================= */
#app-header{
  flex-shrink:0;height:46px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(14,165,233,.2);
  display:flex;align-items:center;padding:0 12px 0 38px;gap:8px;
  box-shadow:0 1px 10px rgba(14,165,233,.08);
}
#topbar-title{font:800 13px 'Sora',sans-serif;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;letter-spacing:-.3px}
.h-tag{
  font:700 9px 'JetBrains Mono',monospace;padding:2px 7px;
  background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);
  border-radius:20px;color:var(--brand-orange);
}

/* ========== LVメーター ========== */
.lv-meter{
  display:flex;align-items:center;gap:6px;
  padding:2px 9px 2px 7px;
  background:rgba(255,255,255,.7);border:1px solid rgba(14,165,233,.22);
  border-radius:20px;margin-left:auto;
}
.lv-icon{
  width:18px;height:18px;border-radius:50%;
  background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;
  font:800 9px 'Sora',sans-serif;color:#fff;
  box-shadow:0 2px 6px rgba(14,165,233,.3);
}
.lv-label{font:700 9px 'JetBrains Mono',monospace;color:var(--txt3)}
.lv-bar-wrap{
  width:88px;height:7px;background:rgba(0,0,0,.06);border-radius:4px;overflow:hidden;position:relative;
}
.lv-bar{
  height:100%;background:linear-gradient(90deg,var(--brand-sky),var(--brand-violet),var(--brand-orange));
  border-radius:4px;transition:width .4s ease;width:0%;
  box-shadow:0 0 8px rgba(14,165,233,.4);
}
.lv-tok{font:700 10px 'JetBrains Mono',monospace;color:var(--txt2);min-width:58px;text-align:right}
.lv-tok .tok-sub{color:var(--txt4);font-weight:500}

/* LVレベル別カラー */
.lv-icon.lv-1{background:linear-gradient(135deg,#94a3b8,#64748b)}
.lv-icon.lv-2{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.lv-icon.lv-3{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.lv-icon.lv-4{background:linear-gradient(135deg,#f97316,#b45309)}
.lv-icon.lv-5{background:linear-gradient(135deg,#eab308,#f97316,#dc2626);animation:lv5-glow 2s ease-in-out infinite}
@keyframes lv5-glow{0%,100%{box-shadow:0 0 8px rgba(249,115,22,.5)}50%{box-shadow:0 0 18px rgba(249,115,22,.8)}}

#header-user-badge{
  font:700 10px 'JetBrains Mono',monospace;color:var(--txt2);
  padding:3px 9px;background:rgba(255,255,255,.6);border:1px solid rgba(14,165,233,.2);
  border-radius:20px;
}

#g-status{display:flex;align-items:center;gap:5px;font:700 9.5px 'JetBrains Mono',monospace;color:var(--txt2);flex-shrink:0}
.g-dot{width:6px;height:6px;border-radius:50%;background:#94a3b8;transition:all .3s}
.g-dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:gp 1.1s ease-in-out infinite}
@keyframes gp{0%,100%{opacity:1}50%{opacity:.35}}

/* ================= TAB BAR ================= */
#panel-tab-bar{
  display:flex;align-items:flex-end;gap:3px;padding:5px 0 0;flex-shrink:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
}
#panel-tab-bar::-webkit-scrollbar{display:none}

.ptab{
  padding:5px 12px;border:1px solid rgba(0,0,0,.1);border-bottom:none;
  border-radius:8px 8px 0 0;background:rgba(255,255,255,.5);cursor:pointer;
  font:700 10.5px 'Sora',sans-serif;color:var(--txt3);
  display:flex;align-items:center;gap:5px;position:relative;
  user-select:none;transition:all .15s;white-space:nowrap;
}
.ptab:hover{background:rgba(255,255,255,.78);color:var(--txt2)}
.ptab.active{background:rgba(255,255,255,.96);color:var(--txt);border-color:rgba(0,0,0,.16);box-shadow:0 -2px 8px rgba(14,165,233,.08)}
.ptab-icon{
  width:16px;height:16px;border-radius:5px;
  background:rgba(14,165,233,.1);color:var(--brand-sky);
  display:inline-flex;align-items:center;justify-content:center;
  font:800 9px 'Sora',sans-serif;
}

/* ★ AIお喋りタブ (先頭・目立たせる) */
.ptab.ptab-laugh{
  background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(139,92,246,.10));
  border-color:rgba(249,115,22,.3);color:var(--brand-orange);font-weight:800;
}
.ptab.ptab-laugh .ptab-icon{background:var(--brand-grad);color:#fff}
.ptab.ptab-laugh.active{background:#fff;color:var(--brand-orange);border-color:rgba(249,115,22,.4);box-shadow:0 -2px 12px rgba(249,115,22,.18)}

/* 各AI色 */
.ptab-gpt .ptab-icon{background:rgba(16,185,129,.1);color:var(--gpt)}
.ptab-cld .ptab-icon{background:rgba(180,83,9,.1);color:var(--claude)}
.ptab-grk .ptab-icon{background:rgba(124,58,237,.1);color:var(--grok)}
.ptab-cmt .ptab-icon{background:rgba(13,148,136,.1);color:var(--cmt)}
.ptab-g1 .ptab-icon{background:rgba(239,159,39,.12);color:#d97706}
.ptab-g2 .ptab-icon{background:rgba(236,72,153,.1);color:#ec4899}
.ptab-adm .ptab-icon{background:rgba(185,28,28,.1);color:var(--err)}

.ptab.active.ptab-gpt{color:var(--gpt);border-color:rgba(16,185,129,.3)}
.ptab.active.ptab-cld{color:var(--claude);border-color:rgba(180,83,9,.3)}
.ptab.active.ptab-grk{color:var(--grok);border-color:rgba(124,58,237,.3)}
.ptab.active.ptab-cmt{color:var(--cmt);border-color:rgba(13,148,136,.3)}
.ptab.active.ptab-g1{color:#d97706;border-color:rgba(239,159,39,.4)}
.ptab.active.ptab-g2{color:#ec4899;border-color:rgba(236,72,153,.3)}
.ptab.active.ptab-adm{color:var(--err);border-color:rgba(185,28,28,.3)}

.ptab-dot{
  width:6px;height:6px;border-radius:50%;background:#cbd5e1;
  transition:all .2s;
}
.ptab-dot.busy{background:var(--brand-orange);animation:gp 1s ease-in-out infinite}
.ptab-dot.done{background:var(--ok);box-shadow:0 0 6px var(--ok)}

/* メイン領域 */
#main{flex:1;display:flex;flex-direction:column;padding:6px 9px 5px;overflow:hidden;min-height:0}
#view-multi{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* パネル表示切替 */
.view-pane{flex:1;display:none;flex-direction:column;min-height:0;overflow:hidden}
.view-pane.active{display:flex}