/* style.css — SynChat v5.02 完全版 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sb-w:118px;--sb-min:96px;--sb-max:260px;
  --sb-bg:#ede8df;--sb-bdr:rgba(140,110,70,.22);
  --sb-txt:#1e1208;--sb-txt2:#5c3d1a;--sb-txt3:#8a6535;
  --sb-acc:#b45309;--sb-acc-bg:rgba(180,83,9,.10);--sb-acc-bdr:rgba(180,83,9,.28);
  --sb-hover:rgba(0,0,0,.05);--sb-active:rgba(180,83,9,.10);
  --surface:rgba(255,255,255,.88);--surface2:rgba(255,255,255,.98);
  --bdr:rgba(14,165,233,.18);
  --gpt:#0369a1;--grk:#7c3aed;--cld:#b45309;--cmt:#0d9488;
  --txt:#0a1628;--txt2:#1e3a5f;--txt3:#3d6080;
  --ok:#047857;--err:#b91c1c;--warn:#b45309;
  --r:12px;--r-sm:7px;
}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:var(--txt);display:flex}

<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sb-w:118px;--sb-min:96px;--sb-max:260px;
  --sb-bg:#ede8df;--sb-bdr:rgba(140,110,70,.22);
  --sb-txt:#1e1208;--sb-txt2:#5c3d1a;--sb-txt3:#8a6535;
  --sb-acc:#b45309;--sb-acc-bg:rgba(180,83,9,.10);--sb-acc-bdr:rgba(180,83,9,.28);
  --sb-hover:rgba(0,0,0,.05);--sb-active:rgba(180,83,9,.10);
  --surface:rgba(255,255,255,.88);--surface2:rgba(255,255,255,.98);
  --bdr:rgba(14,165,233,.18);
  --gpt:#0369a1;--grk:#7c3aed;--cld:#b45309;--cmt:#0d9488;
  --txt:#0a1628;--txt2:#1e3a5f;--txt3:#3d6080;
  --ok:#047857;--err:#b91c1c;--warn:#b45309;
  --r:12px;--r-sm:7px;
}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:var(--txt);display:flex}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(14,165,233,.3);border-radius:2px}
#sidebar ::-webkit-scrollbar-thumb{background:rgba(140,110,70,.32)}

/* 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,.07);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(180,83,9,.10),rgba(180,83,9,.16),rgba(180,83,9,.10));border-radius:999px;z-index:24;box-shadow:inset 0 0 0 1px rgba(180,83,9,.16)}
#sb-resize::after{content:'';position:absolute;top:8%;bottom:8%;left:50%;transform:translateX(-50%);width:2px;border-radius:999px;background:rgba(140,110,70,.62)}
#sidebar.collapsed #sb-resize{display:none}

/* ハンバーガートグル — SynCoding風 */
#sb-toggle{position:fixed;top:9px;left:9px;z-index:30;width:22px;height:22px;background:rgba(30,38,50,.75);border:1px solid rgba(255,255,255,.1);border-radius:5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5px;transition:all .2s;box-shadow:0 1px 6px rgba(0,0,0,.2)}
#sb-toggle:hover{background:rgba(30,38,50,.9)}
#sb-toggle .bar{width:10px;height:1.2px;background:rgba(255,255,255,.8);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 7px;border-bottom:1px solid var(--sb-bdr);flex-shrink:0;margin-top:32px}
.sb-logo-row{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.sb-logo-mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#b45309,#d97706);display:flex;align-items:center;justify-content:center;font:800 12px 'Sora',sans-serif;color:#fff;box-shadow:0 2px 8px rgba(180,83,9,.3)}
.sb-logo-text{font:700 11px 'Sora',sans-serif;color:var(--sb-txt)}.sb-logo-text em{color:var(--sb-acc);font-style:normal}
.sb-tag{font:600 6.5px 'JetBrains Mono',monospace;color:var(--sb-txt3);margin-left:30px;line-height:1.25}
#sb-newbtn{margin:7px 7px 3px;padding:6px 7px;background:var(--sb-acc-bg);border:1px solid var(--sb-acc-bdr);border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;color:var(--sb-acc)}
.sb-newbtn-icon{width:13px;height:13px;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:6px 9px 2px;font:700 7px 'JetBrains Mono',monospace;color:var(--sb-txt2);letter-spacing:.6px;text-transform:uppercase}
#sb-sessions{flex:1;overflow-y:auto;padding:0 4px 4px}
.sb-sess{padding:5px 6px;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:13px;height:13px;min-width:13px;margin-top:2px;border-radius:4px;background:rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:7px}
.sb-sess-body{flex:1;min-width:0;padding-right:16px}
.sb-sess-title{font-size:8px;font-weight:600;color:var(--sb-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sess-meta{font:500 6.5px '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:.6;transition:opacity .13s;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:1px 5px;width:100%;outline:none}
#sb-bottom{flex-shrink:0;border-top:1px solid var(--sb-bdr);padding:6px 8px}
.sb-status-row{display:flex;align-items:center;gap:4px;margin-bottom:2px}
.sb-model-dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 5px var(--ok)}
.sb-model-name{font:600 6px 'JetBrains Mono',monospace;color:var(--sb-txt2)}
.sb-version{font:500 6px 'JetBrains Mono',monospace;color:var(--sb-txt3)}
#ctx-menu{position:fixed;z-index:999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;display:none;min-width:130px}
#ctx-menu.show{display:block}
.ctx-item{padding:7px 12px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:500;color:#1e293b;display:flex;align-items:center;gap:7px}.ctx-item:hover{background:#f1f5f9}.ctx-item.danger{color:var(--err)}

/* RIGHT COLUMN */
#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,.65),transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(196,221,250,.55),transparent 55%),linear-gradient(160deg,#ddeefa,#c8e4f5 50%,#d6ecfd)}
#app-header{flex-shrink:0;height:42px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(14,165,233,.2);display:flex;align-items:center;padding:0 10px 0 34px;gap:6px;box-shadow:0 1px 8px rgba(14,165,233,.08)}
#topbar-title{font:700 12.5px 'Sora',sans-serif;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.h-tag{font:600 9px 'JetBrains Mono',monospace;padding:2px 6px;background:rgba(3,105,161,.09);border:1px solid rgba(3,105,161,.25);border-radius:20px;color:var(--gpt)}
.hd-core-label{font:700 9px 'JetBrains Mono',monospace;color:var(--txt3);letter-spacing:.5px}
#mode-select{padding:3px 8px;border-radius:6px;border:1px solid rgba(3,105,161,.28);background:rgba(255,255,255,.88);font-size:11px;font-weight:600;color:var(--gpt);outline:none;cursor:pointer}
/* 忖度ゲージ */
.sontaku-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}
.sontaku-label{font:700 8px 'JetBrains Mono',monospace;color:var(--txt3);letter-spacing:.3px;white-space:nowrap}
#sontaku-slider{width:72px;height:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,rgba(100,116,139,.3) 0%,rgba(4,120,87,.5) 20%,rgba(4,120,87,.7) 40%,rgba(14,165,233,.7) 60%,rgba(124,58,237,.6) 80%,rgba(185,28,28,.6) 100%);border-radius:2px;outline:none;cursor:pointer}
#sontaku-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--gpt);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
#sontaku-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--gpt);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
#sontaku-val{font:700 11px 'JetBrains Mono',monospace;min-width:26px;text-align:center;padding:1px 4px;border-radius:4px;transition:all .2s}
.sv-std{color:var(--txt3);background:rgba(0,0,0,.05)}.sv-low{color:var(--ok);background:rgba(4,120,87,.08)}.sv-mid{color:var(--gpt);background:rgba(3,105,161,.08)}.sv-high{color:#7c3aed;background:rgba(124,58,237,.08)}
#route-badge{display:none;font:700 8.5px 'JetBrains Mono',monospace;padding:1px 7px;border-radius:9px;background:rgba(4,120,87,.09);border:1px solid rgba(4,120,87,.25);color:var(--ok)}
#route-badge.show{display:inline-block}
#g-status{display:flex;align-items:center;gap:4px;font:600 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 7px var(--ok);animation:gp 1.1s ease-in-out infinite}
@keyframes gp{0%,100%{opacity:1}50%{opacity:.35}}

#main{flex:1;display:flex;flex-direction:column;padding:5px 7px 4px;overflow:hidden;min-height:0}
#view-multi{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* Tab Bar */
#panel-tab-bar{display:flex;align-items:flex-end;gap:2px;padding:4px 0 0;flex-shrink:0}
.ptab{padding:4px 11px;border:1px solid rgba(0,0,0,.1);border-bottom:none;border-radius:7px 7px 0 0;background:rgba(255,255,255,.45);cursor:pointer;font:700 10.5px 'Sora',sans-serif;color:var(--txt3);display:flex;align-items:center;gap:4px;position:relative;user-select:none;transition:all .14s}
.ptab:hover{background:rgba(255,255,255,.72);color:var(--txt2)}
.ptab.active-both{background:rgba(255,255,255,.92);color:var(--txt2);border-color:rgba(0,0,0,.14)}
.ptab.active-gpt{background:rgba(255,255,255,.92);color:var(--gpt);border-color:rgba(3,105,161,.3)}
.ptab.active-grk{background:rgba(255,255,255,.92);color:var(--grk);border-color:rgba(124,58,237,.3)}
.ptab.active-cld{background:rgba(255,255,255,.92);color:var(--cld);border-color:rgba(180,83,9,.3)}
.ptab.active-cmt{background:rgba(255,255,255,.92);color:var(--cmt);border-color:rgba(13,148,136,.3)}
.ptab-icon{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
#ptab-both .ptab-icon{background:rgba(0,0,0,.06);color:var(--txt3)}
#ptab-gpt .ptab-icon{background:rgba(3,105,161,.12);color:var(--gpt)}
#ptab-grk .ptab-icon{background:rgba(124,58,237,.12);color:var(--grk)}
#ptab-cld .ptab-icon{background:rgba(180,83,9,.12);color:var(--cld)}
#ptab-cmt .ptab-icon{background:rgba(13,148,136,.12);color:var(--cmt)}
.ptab-dot{width:5px;height:5px;border-radius:50%;background:var(--ok);position:absolute;top:3px;right:5px;display:none}.ptab-dot.show{display:block}

/* 3AI Grid */
#ai-grid-area{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;transition:flex .25s}
#ai-grid-area.hide-area{display:none !important}
#ai-grid{display:grid;grid-template-columns:minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr);flex:1;min-height:0;border:1px solid rgba(14,165,233,.15);border-top:none;border-radius:0 var(--r) var(--r) 0;overflow:hidden}
#ai-grid.mode-gpt{grid-template-columns:minmax(0,1fr)}
#ai-grid.mode-grk{grid-template-columns:minmax(0,1fr)}
#ai-grid.mode-cld{grid-template-columns:minmax(0,1fr)}
#ai-grid.mode-gpt #panel-grk,#ai-grid.mode-gpt #panel-cld,#ai-grid.mode-gpt .resize-h{display:none !important}
#ai-grid.mode-grk #panel-gpt,#ai-grid.mode-grk #panel-cld,#ai-grid.mode-grk .resize-h{display:none !important}
#ai-grid.mode-cld #panel-gpt,#ai-grid.mode-cld #panel-grk,#ai-grid.mode-cld .resize-h{display:none !important}
.ai-panel{background:var(--surface);backdrop-filter:blur(12px);display:flex;flex-direction:column;overflow:hidden;min-height:0;transition:box-shadow .25s}
#panel-grk,#panel-cld{border-left:1px solid rgba(14,165,233,.15)}
/* ★ 選択時強調 */
.ai-panel.focused{animation:panelPulse .4s ease}
.ai-panel.focused.p-gpt{box-shadow:inset 0 0 0 2px rgba(3,105,161,.55),0 0 18px rgba(3,105,161,.12)}
.ai-panel.focused.p-grk{box-shadow:inset 0 0 0 2px rgba(124,58,237,.55),0 0 18px rgba(124,58,237,.12)}
.ai-panel.focused.p-cld{box-shadow:inset 0 0 0 2px rgba(180,83,9,.55),0 0 18px rgba(180,83,9,.12)}
@keyframes panelPulse{0%{filter:brightness(1)}50%{filter:brightness(1.04)}100%{filter:brightness(1)}}
.resize-h{display:flex;align-items:center;justify-content:center;cursor:col-resize;background:transparent;transition:background .2s;z-index:5}
.resize-h:hover{background:rgba(14,165,233,.18)}.resize-h::after{content:'';width:2px;height:28px;border-radius:2px;background:rgba(14,165,233,.4)}
.ph{flex-shrink:0;padding:6px 8px 0}
.ph-row{display:flex;align-items:center;gap:5px;padding-bottom:4px}
.ph-icon{width:20px;height:20px;min-width:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font:800 10px 'Sora',sans-serif}
.p-gpt .ph-icon{background:rgba(3,105,161,.12);color:var(--gpt);border:1px solid rgba(3,105,161,.28)}
.p-grk .ph-icon{background:rgba(124,58,237,.12);color:var(--grk);border:1px solid rgba(124,58,237,.28)}
.p-cld .ph-icon{background:rgba(180,83,9,.12);color:var(--cld);border:1px solid rgba(180,83,9,.28)}
.ph-name{font:700 11px 'Sora',sans-serif;flex:1}
.p-gpt .ph-name{color:var(--gpt)}.p-grk .ph-name{color:var(--grk)}.p-cld .ph-name{color:var(--cld)}
.ph-badge{font:700 8.5px 'JetBrains Mono',monospace;padding:2px 6px;border-radius:20px;transition:all .2s;white-space:nowrap}
.b-idle{background:rgba(0,0,0,.05);color:var(--txt3)}.b-run{background:rgba(180,83,9,.14);color:var(--warn)}.b-done{background:rgba(4,120,87,.14);color:var(--ok)}.b-err{background:rgba(185,28,28,.12);color:var(--err)}
.gauge-wrap{height:5px;background:rgba(0,0,0,.13);border-radius:3px;overflow:hidden}
.gauge-bar{height:100%;width:0%;border-radius:3px;transition:width .38s}
.p-gpt .gauge-bar{background:linear-gradient(90deg,#0369a1,#0ea5e9)}
.p-grk .gauge-bar{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.p-cld .gauge-bar{background:linear-gradient(90deg,#b45309,#f59e0b)}
.gauge-bar.glow{filter:brightness(1.3)}
.gauge-bar.shimmer{background-size:200%;animation:shimmer 1.1s linear infinite}
.p-gpt .gauge-bar.shimmer{background:linear-gradient(90deg,#0369a1 0%,#38bdf8 40%,#0369a1 100%);background-size:200%}
.p-grk .gauge-bar.shimmer{background:linear-gradient(90deg,#7c3aed 0%,#a78bfa 40%,#7c3aed 100%);background-size:200%}
.p-cld .gauge-bar.shimmer{background:linear-gradient(90deg,#b45309 0%,#fbbf24 40%,#b45309 100%);background-size:200%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:0 0}}
.p-msgs{flex:1;overflow-y:auto;padding:6px 8px 5px;display:flex;flex-direction:column;gap:6px;min-height:0}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:.4;pointer-events:none}
.empty-icon{font-size:18px}.empty-txt{font:600 10px 'JetBrains Mono',monospace;color:var(--txt3);text-align:center}
.msg-row{display:flex;gap:5px;animation:mi .16s ease}.msg-row.u{flex-direction:row-reverse}
@keyframes mi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.msg-av{width:18px;height:18px;min-width:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:800 8px 'Sora',sans-serif;margin-top:2px}
.msg-row.u .msg-av{background:rgba(67,56,202,.1);color:#4338ca;border:1px solid rgba(67,56,202,.25)}
.p-gpt .msg-row.ai .msg-av{background:rgba(3,105,161,.12);color:var(--gpt);border:1px solid rgba(3,105,161,.28)}
.p-grk .msg-row.ai .msg-av{background:rgba(124,58,237,.12);color:var(--grk);border:1px solid rgba(124,58,237,.28)}
.p-cld .msg-row.ai .msg-av{background:rgba(180,83,9,.12);color:var(--cld);border:1px solid rgba(180,83,9,.28)}
.msg-bubble{max-width:92%;padding:6px 28px 6px 10px;border-radius:9px;font-size:12.5px;line-height:1.7;word-break:break-word;color:var(--txt);min-height:32px}
.msg-row.u .msg-bubble{background:rgba(67,56,202,.08);border:1px solid rgba(67,56,202,.18);border-top-right-radius:3px;padding-right:10px}
.msg-row.ai .msg-bubble{background:var(--surface2);border:1px solid rgba(14,165,233,.18);border-top-left-radius:3px;position:relative}
.msg-copy{position:absolute;top:4px;right:4px;width:22px;height:22px;border:1px solid rgba(0,0,0,.1);border-radius:4px;background:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;z-index:2}
.msg-copy-bottom{position:absolute;bottom:4px;right:4px;top:auto;width:22px;height:22px;border:1px solid rgba(0,0,0,.1);border-radius:4px;background:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;z-index:2}
.msg-bubble:hover .msg-copy,.msg-bubble:hover .msg-copy-bottom{opacity:.7}
.msg-copy:hover,.msg-copy-bottom:hover{opacity:1 !important;background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.3)}
.msg-copy svg,.msg-copy-bottom svg{width:12px;height:12px;stroke:var(--txt3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg-copy.copied,.msg-copy-bottom.copied{opacity:1;background:rgba(4,120,87,.12);border-color:rgba(4,120,87,.3)}
.msg-copy.copied svg,.msg-copy-bottom.copied svg{stroke:var(--ok)}
.msg-copy.copied::after,.msg-copy-bottom.copied::after{content:'✓';position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:8px;padding:1px 5px;border-radius:3px;white-space:nowrap;font-family:'JetBrains Mono',monospace}
/* Scroll-to-bottom */
.scroll-bottom-btn{position:sticky;bottom:6px;align-self:center;width:30px;height:30px;border:1px solid rgba(0,0,0,.12);border-radius:50%;background:rgba(255,255,255,.92);cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:3;transition:all .15s;flex-shrink:0;margin-top:-36px}
.scroll-bottom-btn:hover{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.18);transform:scale(1.08)}
.scroll-bottom-btn svg{width:16px;height:16px;stroke:var(--txt2);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scroll-bottom-btn.show{display:flex}
.msg-bubble pre{background:rgba(0,0,0,.04);border-radius:5px;padding:6px 9px;overflow-x:auto;font-size:10.5px;margin:5px 0;border:1px solid rgba(0,0,0,.08);font-family:'JetBrains Mono',monospace}
.msg-bubble code{background:rgba(0,0,0,.06);border-radius:3px;padding:1px 4px;font-family:'JetBrains Mono',monospace;font-size:10.5px}
.msg-bubble pre code{background:none;padding:0}
.msg-bubble strong{color:#0c4a6e;font-weight:700}
.msg-bubble table{border-collapse:collapse;width:100%;margin:5px 0;font-size:11.5px}
.msg-bubble td,.msg-bubble th{border:1px solid rgba(0,0,0,.12);padding:3px 7px}
.thinking-row{display:flex;gap:5px;align-items:flex-start}
.thinking-bbl{padding:6px 10px;background:var(--surface2);border:1px solid rgba(14,165,233,.18);border-radius:9px 9px 9px 3px;display:flex;align-items:center;gap:4px}
.td{width:5px;height:5px;border-radius:50%;animation:tdb .85s infinite}
.p-gpt .td{background:var(--gpt)}.p-grk .td{background:var(--grk)}.p-cld .td{background:var(--cld)}
.td:nth-child(2){animation-delay:.18s}.td:nth-child(3){animation-delay:.36s}
@keyframes tdb{0%,80%,100%{transform:scale(.55)}40%{transform:scale(1)}}
.panel-input-row{flex-shrink:0;padding:4px 7px;background:rgba(255,255,255,.52);border-top:1px solid rgba(0,0,0,.07);display:flex;flex-wrap:wrap;gap:3px 4px;align-items:flex-end}
.panel-textarea{flex:1;min-width:0;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:4px 7px;color:var(--txt);font-size:11.5px;line-height:1.5;min-height:26px;max-height:80px;outline:none;resize:vertical;font-family:'Noto Sans JP',sans-serif}
.panel-textarea::placeholder{color:#7a96ae;font-size:11px}
.panel-textarea:focus{border-color:rgba(14,165,233,.55);box-shadow:0 0 0 3px rgba(14,165,233,.15),inset 0 0 0 1px rgba(14,165,233,.2);background:#fff}
.p-gpt .panel-textarea:focus{border-color:rgba(3,105,161,.55);box-shadow:0 0 0 3px rgba(3,105,161,.15),inset 0 0 0 1px rgba(3,105,161,.15)}
.p-grk .panel-textarea:focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 3px rgba(124,58,237,.12),inset 0 0 0 1px rgba(124,58,237,.15)}
.p-cld .panel-textarea:focus{border-color:rgba(180,83,9,.55);box-shadow:0 0 0 3px rgba(180,83,9,.12),inset 0 0 0 1px rgba(180,83,9,.15)}
.panel-file-badge{display:none;width:100%;padding:2px 6px;font:500 9px 'JetBrains Mono',monospace;color:var(--gpt);background:rgba(3,105,161,.06);border:1px solid rgba(3,105,161,.18);border-radius:4px;align-items:center;gap:4px}
.panel-file-badge.show{display:flex}
.panel-file-del{margin-left:auto;background:none;border:none;color:var(--txt3);cursor:pointer;font-size:10px}.panel-file-del:hover{color:var(--err)}
.panel-clip-btn{width:26px;height:26px;min-width:26px;border:1px solid rgba(0,0,0,.1);border-radius:5px;background:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--txt3);transition:all .15s}
.panel-clip-btn:hover{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.3);color:var(--txt2)}
.panel-send-btn{width:26px;height:26px;min-width:26px;border:none;border-radius:5px;cursor:pointer;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s}
.panel-send-btn:disabled{opacity:.35;cursor:not-allowed}
.p-gpt .panel-send-btn{background:linear-gradient(135deg,#0369a1,#0ea5e9)}
.p-grk .panel-send-btn{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.p-cld .panel-send-btn{background:linear-gradient(135deg,#b45309,#d97706)}
.dl-group{display:flex;align-items:center;gap:3px}
.dl-lbl{font:700 8.5px 'JetBrains Mono',monospace;color:var(--txt3)}
.dl-btn{padding:2px 6px;border-radius:4px;border:1px solid;font:700 8.5px 'JetBrains Mono',monospace;cursor:pointer;transition:all .14s;white-space:nowrap}
.dl-btn:disabled{opacity:.28;cursor:not-allowed}
.dl-md{border-color:rgba(180,83,9,.4);color:var(--cld);background:rgba(180,83,9,.07)}
.dl-xlsx{border-color:rgba(4,120,87,.35);color:var(--ok);background:rgba(4,120,87,.07)}
.dl-docx{border-color:rgba(3,105,161,.35);color:var(--gpt);background:rgba(3,105,161,.07)}
.dl-btn:not(:disabled):hover{filter:brightness(.88);transform:translateY(-1px)}

/* COMMENT PANEL */
#comment-panel{display:none;flex:1;min-height:0;background:var(--surface);backdrop-filter:blur(12px);border:1px solid rgba(13,148,136,.25);border-radius:var(--r);overflow:hidden;flex-direction:column}
#comment-panel.active{display:flex}
.cmt-header{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid rgba(13,148,136,.15);flex-shrink:0}
.cmt-icon{width:22px;height:22px;border-radius:6px;background:rgba(13,148,136,.12);border:1px solid rgba(13,148,136,.28);display:flex;align-items:center;justify-content:center;font:800 11px 'Sora',sans-serif;color:var(--cmt)}
.cmt-title{font:700 12px 'Sora',sans-serif;color:var(--cmt);flex:1}
.cmt-copy-btn{width:24px;height:24px;border:1px solid rgba(13,148,136,.25);border-radius:5px;background:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.cmt-copy-btn:hover{background:rgba(13,148,136,.1);border-color:rgba(13,148,136,.4)}
.cmt-copy-btn svg{width:13px;height:13px;stroke:var(--cmt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmt-copy-btn.copied{background:rgba(4,120,87,.12);border-color:rgba(4,120,87,.35)}
.cmt-copy-btn .cmt-copy-tip{display:none;position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:9px;padding:2px 7px;border-radius:4px;white-space:nowrap;font-family:'JetBrains Mono',monospace}
.cmt-copy-btn.copied .cmt-copy-tip{display:block}
.cmt-tabs{display:flex;gap:1px;background:rgba(0,0,0,.06);border-radius:5px;padding:2px}
.cmt-tab{padding:3px 10px;border-radius:4px;border:none;background:transparent;font:600 9px 'JetBrains Mono',monospace;color:#4a5568;cursor:pointer;transition:all .15s}
.cmt-tab.active{background:#fff;color:#0d7377;box-shadow:0 1px 4px rgba(0,0,0,.08);font-weight:700}
.cmt-body{flex:1;overflow-y:auto;padding:8px;min-height:0}
.cmt-section{display:none}.cmt-section.active{display:block;height:100%}
.cmt-memo{width:100%;height:100%;min-height:200px;background:rgba(255,255,255,.95);border:1px solid rgba(13,148,136,.22);border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.7;color:#1a2332;resize:vertical;outline:none;font-family:'Noto Sans JP',sans-serif;font-weight:500}
.cmt-memo::placeholder{color:rgba(13,148,136,.55);font-weight:400}.cmt-memo:focus{border-color:rgba(13,148,136,.5)}
.cmt-list-input-row{display:flex;gap:4px;margin-bottom:8px}
.cmt-list-input{flex:1;padding:5px 8px;background:#fff;border:1px solid rgba(13,148,136,.25);border-radius:6px;font-size:12px;outline:none;color:#1a2332;font-weight:500}.cmt-list-input:focus{border-color:rgba(13,148,136,.5)}
.cmt-add-btn{padding:5px 10px;background:rgba(13,148,136,.12);border:1px solid rgba(13,148,136,.3);border-radius:6px;color:var(--cmt);font:700 10px 'JetBrains Mono',monospace;cursor:pointer;white-space:nowrap}.cmt-add-btn:hover{background:rgba(13,148,136,.2)}
.cmt-list{list-style:none}
.cmt-list-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;margin-bottom:3px;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.08);font-size:12.5px;color:#1a2332}
.cmt-list-item:hover{background:rgba(13,148,136,.05)}
.cmt-check{width:14px;height:14px;border-radius:4px;border:1.5px solid rgba(13,148,136,.4);cursor:pointer;appearance:none;-webkit-appearance:none;flex-shrink:0;position:relative}
.cmt-check:checked{background:var(--cmt);border-color:var(--cmt)}.cmt-check:checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800}
.cmt-check:checked~.cmt-list-text{text-decoration:line-through;opacity:.5}
.cmt-list-text{flex:1;font-weight:600;color:#1a2332}
.cmt-list-tag{font:700 8.5px 'JetBrains Mono',monospace;padding:1px 6px;border-radius:3px;background:rgba(13,148,136,.15);color:#0a6b5e}
.cmt-list-del{background:none;border:none;color:#6b7280;cursor:pointer;font-size:12px;opacity:.5}.cmt-list-del:hover{opacity:1;color:var(--err)}
.skill-card{background:rgba(255,255,255,.9);border:1px solid rgba(13,148,136,.18);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.skill-card-title{font:700 10px 'JetBrains Mono',monospace;color:var(--cmt);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.skill-card-body{font-size:12px;line-height:1.6;color:#1a2332;font-weight:500}
.skill-input-row{display:flex;gap:4px;margin-bottom:8px}
.skill-name-input{width:100px;padding:4px 7px;background:#fff;border:1px solid rgba(13,148,136,.25);border-radius:5px;font-size:11px;outline:none;color:#1a2332;font-weight:500}
.skill-body-input{flex:1;padding:4px 7px;background:#fff;border:1px solid rgba(13,148,136,.25);border-radius:5px;font-size:11px;outline:none;color:#1a2332;font-weight:500}

/* Shared Input */
#shared-input-bar{flex-shrink:0;padding:4px 0 2px;position:relative}
#shared-resize{height:6px;cursor:row-resize;background:transparent;display:flex;align-items:center;justify-content:center;transition:background .2s;margin:0 20%}
#shared-resize:hover{background:rgba(14,165,233,.15);border-radius:3px}
#shared-resize::after{content:'';width:36px;height:2px;border-radius:2px;background:rgba(14,165,233,.35)}
/* Admin Panel */
#admin-panel{display:none;flex:1;min-height:0;background:var(--surface);border:1px solid rgba(185,28,28,.2);border-radius:var(--r);overflow-y:auto;flex-direction:column;padding:12px}
#admin-panel.active{display:flex}
.adm-title{font:700 13px 'Sora',sans-serif;color:var(--err);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.adm-section{margin-bottom:14px}
.adm-section-title{font:700 10px 'JetBrains Mono',monospace;color:var(--err);letter-spacing:.5px;margin-bottom:6px;padding-bottom:3px;border-bottom:1px solid rgba(185,28,28,.12)}
.adm-user-row{padding:8px 10px;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);border-radius:8px;margin-bottom:6px;font-size:12px}
.adm-user-uid{font:700 11px 'JetBrains Mono',monospace;color:#1a2332;background:rgba(0,0,0,.04);padding:1px 6px;border-radius:3px}
.adm-user-name{font-weight:600;color:#1a2332;font-size:12px}
.adm-user-meta{font:500 9px 'JetBrains Mono',monospace;color:var(--txt3);margin-left:auto}
.adm-user-role{font:700 8px 'JetBrains Mono',monospace;padding:1px 6px;border-radius:3px}
.adm-role-admin{background:rgba(185,28,28,.1);color:var(--err)}
.adm-role-user{background:rgba(3,105,161,.1);color:var(--gpt)}
.adm-limit-input{width:70px;padding:3px 6px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:11px;text-align:right;outline:none}
.adm-limit-input:focus{border-color:rgba(185,28,28,.4)}
.adm-edit-input{padding:3px 6px;border:1px solid rgba(0,0,0,.1);border-radius:4px;font-size:11px;outline:none;background:#fff;color:#1a2332}
.adm-edit-input:focus{border-color:rgba(14,165,233,.4);box-shadow:0 0 0 2px rgba(14,165,233,.08)}
.adm-btn{padding:3px 8px;border-radius:4px;border:1px solid;font-size:10px;font-weight:700;cursor:pointer;transition:all .14s;white-space:nowrap}
.adm-btn:hover{transform:translateY(-1px)}
.adm-btn-save{border-color:rgba(4,120,87,.3);color:var(--ok);background:rgba(4,120,87,.08)}.adm-btn-save:hover{background:rgba(4,120,87,.15)}
.adm-btn-del{border-color:rgba(185,28,28,.3);color:var(--err);background:rgba(185,28,28,.06)}.adm-btn-del:hover{background:rgba(185,28,28,.12)}
.adm-add-row{display:flex;gap:4px;flex-wrap:wrap}
.adm-add-input{padding:5px 7px;border:1px solid rgba(185,28,28,.2);border-radius:5px;font-size:11px;outline:none;background:#fff;color:#1a2332}
.adm-add-input:focus{border-color:rgba(185,28,28,.45)}
.adm-msg{font:600 11px 'JetBrains Mono',monospace;padding:4px 8px;border-radius:5px;margin-top:6px;display:none}
.adm-msg.show{display:block}
.adm-msg.ok{background:rgba(4,120,87,.08);color:var(--ok)}
.adm-msg.err{background:rgba(185,28,28,.08);color:var(--err)}
.adm-id-badge{font:600 8px 'JetBrains Mono',monospace;padding:1px 5px;border-radius:3px;background:rgba(14,165,233,.08);color:var(--gpt);border:1px solid rgba(14,165,233,.2)}
.adm-pw-badge{font:500 9px 'JetBrains Mono',monospace;color:var(--txt3);letter-spacing:1px}
.adm-login-badge{display:inline-flex;align-items:center;gap:3px;font:700 9px 'JetBrains Mono',monospace;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.22);color:#7c3aed;padding:1px 7px;border-radius:10px;white-space:nowrap}
.adm-usage-row{display:flex;align-items:center;gap:8px;margin-top:6px;width:100%;background:rgba(0,0,0,.025);border-radius:6px;padding:5px 8px}
.adm-usage-bar-wrap{flex:1;max-width:180px}
.adm-usage-label{font:700 8px 'JetBrains Mono',monospace;color:var(--txt3);white-space:nowrap;margin-bottom:2px;display:flex;justify-content:space-between}
.adm-usage-bar{width:100%;height:10px;background:rgba(0,0,0,.08);border-radius:5px;overflow:hidden;position:relative}
.adm-usage-fill{height:100%;border-radius:5px;transition:width .4s ease;position:relative}
.adm-bar-ok{background:linear-gradient(90deg,#047857,#34d399)}
.adm-bar-warn{background:linear-gradient(90deg,#b45309,#fbbf24)}
.adm-bar-danger{background:linear-gradient(90deg,#b91c1c,#f87171);animation:barPulse 1.5s ease infinite}
@keyframes barPulse{0%,100%{opacity:1}50%{opacity:.7}}
.adm-usage-stat{display:flex;flex-direction:column;gap:1px}
.adm-usage-text{font:700 10px 'JetBrains Mono',monospace;color:var(--txt2);white-space:nowrap}
.adm-usage-yen{font:500 8.5px 'JetBrains Mono',monospace;color:var(--txt3);white-space:nowrap}
.adm-btn-reset{padding:2px 7px;border-radius:4px;border:1px solid rgba(124,58,237,.3);color:#7c3aed;background:rgba(124,58,237,.07);font:700 9px 'JetBrains Mono',monospace;cursor:pointer;transition:all .14s;white-space:nowrap;margin-left:auto}.adm-btn-reset:hover{background:rgba(124,58,237,.15)}
#shared-input-bar.hide-area{display:none !important}
#file-badge{display:none;margin-bottom:4px;padding:3px 9px;background:rgba(3,105,161,.09);border:1px solid rgba(3,105,161,.25);border-radius:6px;font-size:10.5px;color:var(--gpt);align-items:center;gap:5px;font-family:'JetBrains Mono',monospace}
.file-del{margin-left:auto;background:none;border:none;color:var(--txt3);cursor:pointer;font-size:12px}.file-del:hover{color:var(--err)}
.ft-txt{background:rgba(3,105,161,.1);color:var(--gpt);font-size:8.5px;padding:1px 5px;border-radius:3px;font-weight:700}
.ft-xlsx{background:rgba(4,120,87,.1);color:var(--ok);font-size:8.5px;padding:1px 5px;border-radius:3px;font-weight:700}
.ft-img{background:rgba(124,58,237,.1);color:var(--grk);font-size:8.5px;padding:1px 5px;border-radius:3px;font-weight:700}
#input-wrap{display:flex;gap:5px;align-items:flex-end;background:rgba(255,255,255,.9);border:1px solid rgba(14,165,233,.22);border-radius:11px;padding:6px 8px;box-shadow:0 2px 14px rgba(14,165,233,.09);backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s;position:relative}
#input-wrap:focus-within{border-color:rgba(3,105,161,.5);box-shadow:0 2px 14px rgba(3,105,161,.15),inset 0 0 0 1px rgba(3,105,161,.12)}
#input-wrap.drag-over{border-color:rgba(4,120,87,.6);background:rgba(4,120,87,.04);box-shadow:0 0 0 2px rgba(4,120,87,.2),0 2px 14px rgba(4,120,87,.12)}
#input-wrap.drag-over::before{content:'📄 ファイルをドロップ';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,120,87,.06);border-radius:11px;font:700 12px 'Noto Sans JP',sans-serif;color:var(--ok);z-index:3;pointer-events:none}
.iw-btn{width:28px;height:28px;min-width:28px;border-radius:var(--r-sm);border:1px solid rgba(14,165,233,.22);background:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--txt2)}.iw-btn:hover{background:rgba(3,105,161,.09)}
#user-input{flex:1;background:none;border:none;outline:none;resize:vertical;color:var(--txt);font-size:12.5px;line-height:1.5;min-height:24px;max-height:200px;font-family:'Noto Sans JP',sans-serif}
#user-input::placeholder{color:#7a96ae;font-size:12px}
#integrate-btn{height:28px;padding:0 9px;background:rgba(180,83,9,.10);border:1px solid rgba(180,83,9,.35);border-radius:var(--r-sm);cursor:pointer;color:var(--cld);font:700 10.5px 'Sora',sans-serif;display:flex;align-items:center;gap:3px;white-space:nowrap}
#integrate-btn:hover:not(:disabled){background:rgba(180,83,9,.18);transform:translateY(-1px)}
#integrate-btn:disabled{opacity:.3;cursor:not-allowed}
#send-btn{width:28px;height:28px;min-width:28px;background:linear-gradient(135deg,#0369a1,#0ea5e9);border:none;border-radius:var(--r-sm);cursor:pointer;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .17s}
#send-btn:hover:not(:disabled){transform:scale(1.07);box-shadow:0 4px 12px rgba(3,105,161,.4)}
#send-btn:disabled{opacity:.35;cursor:not-allowed}
#input-hint{font:600 8.5px 'JetBrains Mono',monospace;color:var(--txt3);margin-top:2px;text-align:right;padding-right:2px}
/* ヘッダーUser名バッジ */
#header-user-badge{margin-left:6px;font:700 9px 'JetBrains Mono',monospace;color:var(--txt2);background:rgba(180,83,9,.09);border:1px solid rgba(180,83,9,.22);padding:2px 9px;border-radius:10px;white-space:nowrap;flex-shrink:0}
/* トークンバー */
.adm-token-bar-wrap{height:5px;background:rgba(0,0,0,.1);border-radius:3px;overflow:hidden;width:80px;flex-shrink:0}
.adm-token-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,#047857,#10b981);transition:width .3s}
.adm-token-bar.warn{background:linear-gradient(90deg,#b45309,#f59e0b)}
.adm-token-bar.over{background:linear-gradient(90deg,#b91c1c,#ef4444)}
/* ユーザーコメント欄 */
.adm-user-comment{width:100%;margin-top:5px;padding:4px 7px;border:1px solid rgba(0,0,0,.1);border-radius:5px;font-size:11px;color:#1a2332;background:rgba(255,255,255,.95);resize:none;min-height:36px;font-family:'Noto Sans JP',sans-serif;outline:none;display:block;line-height:1.5}
.adm-user-comment:focus{border-color:rgba(14,165,233,.4);box-shadow:0 0 0 2px rgba(14,165,233,.07)}
/* 更新ボタン */
.adm-refresh-btn{padding:2px 8px;border-radius:4px;border:1px solid rgba(3,105,161,.3);background:rgba(3,105,161,.07);color:var(--gpt);font:700 9px 'JetBrains Mono',monospace;cursor:pointer;margin-left:6px;transition:all .14s}.adm-refresh-btn:hover{background:rgba(3,105,161,.15)}
#file-loading{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);align-items:center;justify-content:center}
#file-loading.show{display:flex}
.fl-box{background:#fff;border-radius:12px;padding:18px 26px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.fl-spin{font-size:24px;animation:spin .8s linear infinite;display:block;margin-bottom:7px}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#pm-slot{flex-shrink:0}
.pm-bubble{margin:3px 8px;padding:4px 9px;background:rgba(180,83,9,.07);border-left:3px solid var(--cld);border-radius:0 6px 6px 0;font-size:11px;display:flex;align-items:center;gap:7px;animation:mi .25s ease}
.pm-msg{flex:1;color:var(--txt2);font-weight:500}
.pm-act{background:var(--cld);color:#fff;border:none;border-radius:4px;padding:2px 8px;cursor:pointer;font:700 9.5px 'Sora',sans-serif;white-space:nowrap}
.pm-close{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:12px;padding:0 2px}
</style>
