:root {
    --ink: #172321;
    --muted: #6f7c79;
    --line: #dfe6e3;
    --panel: #f7f9f8;
    --green: #0a8f72;
    --green-dark: #06745d;
    --green-soft: #d9fdd3;
    --white: #fff;
    --shadow: 0 18px 60px rgba(31, 55, 49, .12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: #e9efec; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell { display: grid; grid-template-columns: 340px 1fr; width: min(1500px, 100%); height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.sidebar { z-index: 5; display: flex; min-width: 0; height: 100vh; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.sidebar-top { flex: 0 0 auto; }
.brand { display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px 14px 14px 4px; color: white; background: linear-gradient(145deg, #19ad8d, #08765f); box-shadow: 0 7px 18px rgba(10, 143, 114, .22); font-size: 20px; font-weight: 800; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 16px; letter-spacing: -.2px; }
.brand span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.connector-panel { padding: 20px 20px 10px; }
.project-panel { margin-top: 14px; }
.connector-panel label { display: block; margin: 0 0 7px 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.connector-status { margin: 7px 2px 0; color: #147860; font-size: 10px; font-weight: 700; }
.connector-status::before { margin-right: 5px; content: "●"; }
.connector-status.unavailable { color: #b54840; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; height: 44px; padding: 0 35px 0 36px; border: 1px solid #d8e1de; border-radius: 11px; outline: none; appearance: none; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%236b7875' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; font-weight: 600; }
.select-wrap select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(10,143,114,.1); }
.status-dot { position: absolute; z-index: 1; top: 18px; left: 15px; width: 9px; height: 9px; border-radius: 50%; background: #19b98f; box-shadow: 0 0 0 3px #dff7ef; }
.status-dot.unavailable { background: #cf5148; box-shadow: 0 0 0 3px #fde2df; }
.new-chat { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 10px 20px 22px; border: 0; border-radius: 11px; color: white; background: var(--green); cursor: pointer; font-weight: 700; box-shadow: 0 6px 16px rgba(10,143,114,.18); transition: .2s ease; }
.new-chat:hover { background: var(--green-dark); transform: translateY(-1px); }
.new-chat:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.new-chat span { font-size: 20px; font-weight: 400; }
.conversation-heading { display: flex; justify-content: space-between; padding: 0 22px 8px; color: #86918e; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.conversation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 15px; }
.conversation-item { display: grid; grid-template-columns: 39px minmax(0,1fr); gap: 11px; width: 100%; padding: 11px 12px; border: 0; border-radius: 11px; text-align: left; background: transparent; cursor: pointer; }
.conversation-item:hover { background: #edf2f0; }
.conversation-item.active { background: #e1f2ed; }
.conversation-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; color: var(--green-dark); background: #d7ebe5; font-size: 15px; font-weight: 800; }
.conversation-copy { min-width: 0; }
.conversation-copy strong, .conversation-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-copy strong { padding-top: 1px; font-size: 13px; }
.conversation-copy span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.empty-list { padding: 28px 18px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.sidebar-footer { flex: 0 0 auto; padding: 15px 20px 19px; border-top: 1px solid var(--line); }
.sidebar-footer small { display: block; margin-top: 14px; color: #98a29f; font-size: 10px; }
.debug-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12px; font-weight: 600; }
.debug-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle { position: relative; width: 34px; height: 19px; border-radius: 20px; background: #cbd4d1; transition: .2s; }
.toggle::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; content: ""; transition: .2s; }
.debug-toggle input:checked + .toggle { background: var(--green); }
.debug-toggle input:checked + .toggle::after { transform: translateX(15px); }
.debug-toggle input:disabled + .toggle { opacity: .45; }

.chat-panel { position: relative; display: flex; min-width: 0; height: 100vh; min-height: 0; flex-direction: column; overflow: hidden; background: #efeae2; }
.chat-panel::before { position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(circle at center, rgba(84,108,100,.12) 1px, transparent 1.2px); background-size: 24px 24px; content: ""; pointer-events: none; }
.chat-header { z-index: 2; display: flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 76px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: rgba(249,251,250,.96); backdrop-filter: blur(8px); }
.avatar { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, #20ae91, #08755f); font-size: 12px; font-weight: 800; }
.chat-title { min-width: 0; }
.chat-title strong, .chat-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title strong { font-size: 14px; }
.chat-title > span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.chat-title i { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #1aaf82; }
.header-badge { margin-left: auto; padding: 6px 10px; border: 1px solid #d6e4df; border-radius: 20px; color: var(--green-dark); background: #eff8f5; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mobile-menu { display: none; border: 0; background: transparent; cursor: pointer; font-size: 22px; }
.messages { z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 30px clamp(22px, 7vw, 100px) 22px; scroll-behavior: smooth; }
.welcome { display: grid; max-width: 540px; min-height: 100%; margin: auto; place-content: center; text-align: center; }
.welcome-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 18px; place-items: center; border: 1px solid #cfe2dc; border-radius: 23px 23px 23px 7px; color: var(--green); background: rgba(255,255,255,.82); box-shadow: 0 8px 28px rgba(40,65,58,.08); font-size: 26px; }
.welcome h1 { margin: 0 0 9px; font-size: clamp(24px, 3vw, 33px); letter-spacing: -.8px; }
.welcome p { max-width: 460px; margin: 0 auto 25px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.suggestions { display: grid; gap: 8px; }
.suggestions button { display: flex; justify-content: space-between; padding: 12px 15px; border: 1px solid #d9e2df; border-radius: 11px; text-align: left; background: rgba(255,255,255,.78); cursor: pointer; font-size: 12px; font-weight: 600; }
.suggestions button:hover { border-color: #9bc8bb; background: white; }.suggestions button:disabled { cursor: not-allowed; opacity: .5; }
.suggestions span { color: var(--green); }
.message-row { display: flex; margin: 0 0 14px; animation: message-in .22s ease-out; }
.message-row.user { justify-content: flex-end; }
.message-bubble { position: relative; max-width: min(690px, 80%); padding: 10px 13px 7px; border-radius: 4px 13px 13px; background: white; box-shadow: 0 1px 2px rgba(28,45,40,.12); font-size: 13.5px; line-height: 1.55; }
.message-row.user .message-bubble { border-radius: 13px 4px 13px 13px; background: var(--green-soft); }
.message-content p { margin: 0 0 7px; }
.message-content p:last-child { margin-bottom: 0; }
.message-content code { padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.07); font-size: .9em; }
.message-content a { color: var(--green-dark); }
.message-meta { display: flex; justify-content: flex-end; gap: 4px; margin: 3px 0 0 14px; color: #75817e; font-size: 9px; }
.message-row.user .message-meta::after { color: #178b73; content: "✓✓"; font-size: 10px; }
.sources { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e5e9e7; }
.sources > strong { display: block; margin-bottom: 6px; color: #61706c; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.source-card { display: block; margin-top: 5px; padding: 8px 9px; border: 1px solid #e1e7e5; border-radius: 7px; color: inherit; text-decoration: none; background: #f8faf9; }
.source-card strong { display: block; color: var(--green-dark); font-size: 11px; }
.source-card span { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.debug-panel { margin-top: 9px; }
.debug-panel summary { color: #7b5da7; cursor: pointer; font-size: 10px; font-weight: 700; }
.debug-panel pre { max-height: 230px; margin: 7px 0 0; padding: 9px; overflow: auto; border-radius: 6px; color: #d8f7e9; background: #23302c; white-space: pre-wrap; font-size: 9px; }
.typing-bubble { display: flex; gap: 5px; padding: 14px 16px; }
.typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: #92a09c; animation: typing 1s infinite ease-in-out; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }.typing-bubble i:nth-child(3) { animation-delay: .3s; }
.error-banner { z-index: 3; display: flex; flex: 0 0 auto; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 10px 12px; border: 1px solid #f4c0bd; border-radius: 9px; color: #8b2d28; background: #fff0ef; font-size: 12px; }
.error-banner[hidden] { display: none; }.error-banner > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: #cf5148; font-weight: 800; }.error-banner p { flex: 1; margin: 0; }.error-banner button { border: 0; background: transparent; cursor: pointer; font-size: 18px; }
.composer-area { z-index: 2; flex: 0 0 auto; padding: 10px clamp(20px, 6vw, 85px) 12px; background: rgba(246,248,247,.95); backdrop-filter: blur(7px); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 15px; border: 1px solid #d5ddda; border-radius: 15px; background: white; box-shadow: 0 5px 20px rgba(37,55,50,.06); }
.composer:focus-within { border-color: #91c6b8; box-shadow: 0 0 0 3px rgba(10,143,114,.08); }
.composer textarea { width: 100%; max-height: 130px; padding: 8px 0; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; line-height: 1.45; }
.composer textarea::placeholder { color: #9aa5a2; }.composer textarea:disabled { cursor: not-allowed; }
.send-button { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 11px; color: white; background: var(--green); cursor: pointer; transform: rotate(-8deg); }
.send-button:hover { background: var(--green-dark); }.send-button:disabled { cursor: not-allowed; opacity: .5; }
.composer-area > p { margin: 7px 0 0; color: #98a19f; text-align: center; font-size: 9px; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes message-in { from { transform: translateY(5px); opacity: 0; } }

@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: min(330px, 88vw); height: 100dvh; box-shadow: 12px 0 35px rgba(25,45,39,.2); transform: translateX(-105%); transition: transform .25s ease; }
    .app-shell.menu-open .sidebar { transform: translateX(0); }
    .chat-panel { height: 100dvh; }
    .mobile-menu { display: block; }
    .messages { padding: 22px 13px; }
    .message-bubble { max-width: 88%; }
    .composer-area { padding: 9px 10px 10px; }
    .header-badge { display: none; }
}