:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c0911; color: #f5edf9; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at top, #291936 0, #0c0911 48%); }
button,input,textarea { font: inherit; } button { color: inherit; }
.app-shell { width: min(1260px,100%); height: var(--app-height, 100dvh); margin: auto; display: grid; grid-template-columns: 310px 1fr; background: rgb(12 9 17 / .72); }
.sidebar { min-width: 0; border-right: 1px solid #3c2c47; padding: 20px 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.brand,.chat-header,.conversation-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
h1 { margin: 2px 0 0; font-size:1.25rem; }.eyebrow,.section-label { margin:0; color:#b99bc9; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.brand button,.chat-header button { border:0; border-radius:10px; background:#2b2133; width:38px; height:38px; font-size:1.35rem; cursor:pointer; }
.agent { color:#cbbbd4; font-size:.78rem; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; }
.push-toggle { display:flex; align-items:center; gap:8px; color:#cbbbd4; font-size:.78rem; }.push-toggle input { width:auto; accent-color:#a15bc8; }
.language-settings { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.language-settings label { display:grid; gap:4px; color:#cbbbd4; font-size:.72rem; }.language-settings select { min-width:0; width:100%; border:1px solid #4b3858; background:#17131f; color:inherit; border-radius:9px; padding:7px 8px; }
.sidebar-backdrop { display:none; }
input,textarea { width:100%; border:1px solid #4b3858; background:#17131f; color:inherit; border-radius:11px; padding:10px 12px; }
.conversation-list { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.conversation { position:relative; width:100%; border:1px solid transparent; background:transparent; border-radius:12px; display:grid; grid-template-columns:minmax(0,1fr) 34px; align-items:center; }
.conversation:hover,.conversation.active { background:#211927; border-color:#44324f; }.conversation-open { min-width:0; padding:10px; text-align:left; cursor:pointer; border:0; background:transparent; color:inherit; }.conversation strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.88rem; }.conversation small { color:#9f8aaa; flex:none; }.conversation-delete { width:30px; height:30px; border:0; border-radius:9px; background:transparent; color:#bda9c7; cursor:pointer; font-size:1.25rem; }.conversation-delete:hover,.conversation-delete:focus-visible { background:#5a2637; color:#ffdce5; }
.snippet { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#bba9c4; font-size:.77rem; margin-top:5px; }.unread { position:absolute; right:8px; bottom:8px; width:7px; height:7px; border-radius:50%; background:#d780ff; }
.list-empty { color:#927f9c; font-size:.82rem; padding:10px; }.chat-pane { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto; padding:16px 20px max(16px,env(safe-area-inset-bottom)); gap:12px; }
.load-more { border:1px solid #493656; background:#211927; border-radius:10px; padding:8px; cursor:pointer; font-size:.78rem; }
.toast { position:fixed; z-index:30; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:min(92vw,620px); padding:11px 16px; border-radius:12px; background:#2c2134; border:1px solid #684c78; box-shadow:0 10px 35px #0008; }.toast.error { background:#4a1d28; border-color:#93435a; }
.chat-header { justify-content:flex-start; border-bottom:1px solid #3b2d45; padding-bottom:12px; }.chat-header button { display:none; }.chat-header div { min-width:0; }.chat-header strong,.chat-header small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chat-header small { color:#8f7b99; font-size:.68rem; margin-top:3px; }
.messages { overflow-y:auto; padding:8px 2px; display:flex; flex-direction:column; gap:12px; }.empty-state { margin:auto; color:#9885a2; text-align:center; }
.message { display:flex; }.message.user { justify-content:flex-end; }.bubble { max-width:min(78%,680px); padding:11px 14px; border-radius:17px; white-space:pre-wrap; line-height:1.45; background:#211a29; border:1px solid #382c42; overflow:hidden; }.user .bubble { background:#743da0; border-color:#8f51bf; }.message.match .bubble { outline:2px solid #e2a2ff; }
.message-text { white-space:normal; min-width:0; }.user .message-text { white-space:pre-wrap; }.message-text p { margin:.45em 0; white-space:pre-wrap; }.message-text h1,.message-text h2,.message-text h3,.message-text h4,.message-text h5,.message-text h6 { margin:.7em 0 .35em; line-height:1.2; }.message-text ul,.message-text ol { margin:.45em 0; padding-left:1.4em; }.message-text blockquote { margin:.55em 0; padding:.15em 0 .15em .8em; border-left:3px solid #9c68b8; color:#d3c3dc; white-space:pre-wrap; }.message-text a { color:#e4b7ff; }.message-text :not(pre)>code { padding:.12em .35em; border-radius:5px; background:#100c15; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.code-block { margin:.6em 0; border:1px solid #493656; border-radius:10px; overflow:hidden; background:#100c15; }.code-block>div { display:flex; justify-content:space-between; align-items:center; padding:6px 9px; background:#2b2133; color:#bda9c7; font: .72rem ui-monospace,SFMono-Regular,Consolas,monospace; }.code-block button,.message-actions button,.table-toolbar button,.table-more { border:0; border-radius:7px; padding:5px 8px; background:#3b2c46; color:#eadcf0; cursor:pointer; }.code-block pre { margin:0; padding:12px; overflow-x:auto; white-space:pre; }.code-block code { font: .82rem/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
.message-actions { display:flex; justify-content:flex-end; margin-top:7px; }.message-actions button { opacity:.72; font-size:.67rem; background:transparent; }.message-actions button:hover { opacity:1; background:#3b2c46; }
.data-table { margin:.65em 0; min-width:0; white-space:normal; }.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px; color:#c8b5d1; font-size:.72rem; }.table-scroll { max-width:100%; overflow-x:auto; border:1px solid #493656; border-radius:9px; }.data-table table { width:max-content; min-width:100%; border-collapse:collapse; font-size:.78rem; }.data-table th,.data-table td { padding:7px 10px; border-right:1px solid #3e3047; border-bottom:1px solid #3e3047; text-align:left; vertical-align:top; white-space:pre-wrap; max-width:360px; }.data-table th { position:sticky; top:0; z-index:1; background:#34253e; color:#f7eafa; font-weight:700; }.data-table tr:nth-child(even) td { background:#19131f; }.tabular-preview { margin-top:8px; padding-top:6px; border-top:1px solid #493656; }.tabular-preview select { width:auto; max-width:100%; padding:7px 10px; }.table-more { margin-top:7px; }.table-limit { color:#b9a4c3; font-size:.72rem; }
.bubble time { display:block; text-align:right; color:#b8a8c0; font-size:.65rem; margin-top:7px; }.bubble img { display:block; max-width:260px; max-height:220px; object-fit:cover; border-radius:10px; margin-top:8px; }.bubble audio { display:block; max-width:100%; margin-top:8px; }.file-card { display:block; margin-top:8px; padding:10px; color:#f2dafe; background:#17131f; border:1px solid #5b4268; border-radius:10px; text-decoration:none; font-size:.78rem; }
.typing { color:#c7b3d1; font-size:.84rem; padding-left:10px; }.typing span { display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:#c79cdc; animation:blink 1.1s infinite alternate; }.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{to{opacity:.25;transform:translateY(-2px)}}
.attachment-preview { display:flex; align-items:center; gap:10px; padding:9px; border:1px solid #493656; border-radius:13px; background:#17131f; font-size:.82rem; }.attachment-preview img { width:52px; height:52px; object-fit:cover; border-radius:9px; }.attachment-preview button { margin-left:auto; border:0; background:transparent; cursor:pointer; }
.composer { display:grid; grid-template-columns:auto auto 1fr auto; align-items:end; gap:9px; }.composer textarea { resize:none; min-height:46px; max-height:150px; }.composer button,.attach { border:0; border-radius:12px; min-height:46px; display:grid; place-items:center; cursor:pointer; }.composer button { background:#a15bc8; color:#130817; padding:0 18px; font-weight:700; }.composer button:disabled{opacity:.45}.attach { width:46px; background:#28202f; font-size:1.4rem; }.composer .record { width:46px; padding:0; background:#332330; color:#ff9ab2; }.composer .record[aria-pressed="true"] { background:#8e263f; color:white; animation:pulse 1s infinite; }@keyframes pulse{50%{opacity:.62}}.attach input,.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:760px){body.sidebar-open{overflow:hidden}.app-shell{display:block}.sidebar{position:fixed;inset:0 18% 0 0;z-index:10;background:#100c16;transform:translateX(-105%);transition:transform .2s;box-shadow:15px 0 40px #000}.sidebar.open{transform:none}.sidebar-backdrop{display:block;position:fixed;inset:0;z-index:9;border:0;background:rgb(0 0 0 / .48);opacity:0;pointer-events:none;transition:opacity .2s}.sidebar-backdrop.open{opacity:1;pointer-events:auto}.chat-pane{height:var(--app-height,100dvh);padding:10px}.chat-header button{display:block}.bubble{max-width:90%}.composer{gap:6px}.composer button{padding:0 12px}}

.advanced { margin: 0 0 .75rem; }
.advanced summary { cursor: pointer; font-size: .8rem; opacity: .7; padding: .35rem 0; }
.advanced .hint { font-size: .72rem; line-height: 1.35; opacity: .6; margin: .35rem 0 .25rem; }

.deletion-pill { display:inline-block; margin-top:4px; font-size:.68rem; padding:2px 7px; border-radius:9px; background:#3a2a12; color:#e6c07a; }
.deletion-pill.blocked { background:#4a1f25; color:#f0a0a8; }

/* Mobile layout guard: a single unbreakable string used to widen the whole page,
   which pushed the send button past the right edge of the screen. */
html, body { max-width: 100%; overflow-x: hidden; }
.app-shell { max-width: 100vw; }
.chat-pane, .messages, .chat-header, .composer { min-width: 0; max-width: 100%; }
.composer textarea { min-width: 0; }
.bubble, .message-text, .snippet, .conversation-top strong { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 760px) {
  .composer { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .composer button { padding: 0 12px; white-space: nowrap; }
}

/* Composer polish for phones: one clean field, no inner scrollbar line, larger
   touch target and 16px text so mobile browsers do not zoom on focus. */
.composer textarea { scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .composer textarea { min-height: 52px; font-size: 16px; padding: 14px 14px; }
  .composer button, .attach { min-height: 52px; }
}

/* The hidden attribute must win over any display rule: an empty preview was
   still rendering as a 20px bordered strip above the composer. */
[hidden] { display: none !important; }

.messages { overflow-anchor: none; scroll-behavior: auto; }

.attachment-preview { max-height: 60px; overflow: hidden; }
.voice-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #493656; background: #2b2133; color: inherit; cursor: pointer; }
.voice-label { font-size: .8rem; }

.login-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:#0c0911; }
.login-card { width:min(100%,380px); display:grid; gap:16px; padding:30px; border:1px solid #493656; border-radius:18px; background:#17131f; }
.login-card h1 { font-size:1.5rem; }.login-card label { display:grid; gap:7px; color:#cbbbd4; }
.login-card button { border:0; border-radius:11px; padding:12px; background:#a15bc8; color:#130817; font-weight:700; cursor:pointer; }
.login-card button:disabled { opacity:.5; }.login-error { color:#ffabbc; margin:0; }
.logout { align-self:start; border:1px solid #493656; border-radius:9px; background:#211927; padding:7px; cursor:pointer; }

body:has(#loginScreen:not([hidden])) .app-shell { visibility: hidden; }