*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F0F2F5;--surface:#FFF;--border:#E2E6EA;
  --text-1:#0F172A;--text-2:#475569;--text-3:#94A3B8;
  --accent:#2563EB;--accent-h:#1D4ED8;--accent-l:#EFF6FF;
  --green:#10B981;--green-bg:#ECFDF5;--red:#EF4444;--red-bg:#FEF2F2;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
html,body{height:100%;font-family:var(--font);font-size:13px;color:var(--text-1);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased}
#app{display:flex;flex-direction:column;height:100vh}

/* ── Toolbar ─────────────────────── */
#toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:46px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:6px}
.tb-left,.tb-right{display:flex;align-items:center;gap:6px}
.logo{width:30px;height:30px;background:linear-gradient(135deg,#2563EB,#1D4ED8);border-radius:7px;display:flex;align-items:center;justify-content:center}
.app-name{font-weight:700;font-size:15px;letter-spacing:-.3px;margin-right:4px}
.tb-sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.tb-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text-2);font:500 12px var(--font);cursor:pointer;transition:all .15s;white-space:nowrap}
.tb-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}
.tb-chat-toggle{background:var(--accent);color:#fff;border-color:var(--accent)}
.tb-chat-toggle:hover{background:var(--accent-h)}

/* ── Main layout ─────────────────── */
#main{display:flex;flex:1;overflow:hidden}
#sheet-panel{flex:1;overflow:auto;background:var(--surface)}
#spreadsheet{height:100%}

/* jspreadsheet overrides */
.jexcel_container{font-family:var(--font)!important}
.jexcel{font-size:12px!important}
.jexcel td{border-color:#E8ECF0!important}
.jexcel thead td{background:#F8FAFC!important;font-weight:600!important;color:var(--text-2)!important;border-color:#E2E6EA!important}
.jexcel>tbody>tr>td:first-child{background:#F8FAFC!important;color:var(--text-3)!important;font-weight:500!important}
.jexcel td.highlight{background:#EFF6FF!important}

/* ── Chat panel ──────────────────── */
#chat-panel{width:380px;border-left:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;flex-shrink:0;transition:width .25s,opacity .25s}
#chat-panel:not(.open){width:0;overflow:hidden;opacity:0;border:none}
.cp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);font-weight:600;font-size:13px;flex-shrink:0}
.cp-reset{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.cp-reset:hover{color:var(--text-1);border-color:var(--text-3)}

#messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
#messages::-webkit-scrollbar{width:4px}
#messages::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:2px}

/* Messages */
.msg{display:flex;flex-direction:column;animation:fadeIn .3s ease}
.msg.user{align-self:flex-end;max-width:88%}
.msg.ai{align-self:flex-start;max-width:92%}
.bubble{padding:10px 14px;line-height:1.55;font-size:13px;word-wrap:break-word}
.msg.user .bubble{background:var(--accent);color:#fff;border-radius:14px 14px 4px 14px}
.msg.ai .bubble{background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 14px 4px}
.bubble p{margin-bottom:6px}.bubble p:last-child{margin-bottom:0}
.bubble strong{font-weight:600}
.bubble ul{margin:4px 0 6px 16px}
.badge{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 9px;border-radius:6px;font-size:11px;font-weight:500}
.badge.ok{background:var(--green-bg);color:#065F46}
.badge.err{background:var(--red-bg);color:#991B1B}

.welcome{background:linear-gradient(135deg,#EFF6FF,#F0FDF4);border:1px solid #DBEAFE;border-radius:14px;padding:16px;line-height:1.6;font-size:13px}
.welcome h3{font-size:14px;margin-bottom:8px}
.welcome ul{margin:0 0 0 16px;color:var(--text-2)}
.welcome li{margin-bottom:3px}
.welcome p{color:var(--text-2);margin-top:8px;font-size:12px}

.loading{display:flex;gap:4px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 14px 4px;width:fit-content}
.loading span{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:bounce 1.4s ease-in-out infinite}
.loading span:nth-child(2){animation-delay:.16s}
.loading span:nth-child(3){animation-delay:.32s}

/* Quick actions */
#quick-bar{display:flex;gap:5px;padding:8px 14px;overflow-x:auto;flex-shrink:0;border-top:1px solid var(--border);background:var(--surface)}
#quick-bar::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;padding:5px 11px;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--text-2);font:500 11.5px var(--font);cursor:pointer;transition:all .15s;white-space:nowrap}
.pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}

/* Input */
.cp-input{padding:10px 14px 14px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}
.input-wrap{display:flex;align-items:flex-end;gap:6px;border:2px solid var(--border);border-radius:12px;padding:3px 3px 3px 12px;transition:border-color .2s,box-shadow .2s}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
#chat-input{flex:1;border:none;outline:none;background:none;font:400 13px var(--font);color:var(--text-1);resize:none;line-height:1.5;max-height:100px;padding:6px 0}
#chat-input::placeholder{color:var(--text-3)}
#btn-send{width:32px;height:32px;border:none;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s}
#btn-send:hover:not(:disabled){background:var(--accent-h)}
#btn-send:disabled{background:#CBD5E1;cursor:default}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}