/* Vitmeet visual system: theme tokens, application shell, transcript, forms, mobile. */
:root {
  --primary:#8b5cf6;--primary-hover:#7c3aed;--accent:#b59aff;
  --bg-body:#121318;--bg-chat:#17181f;--bg-chat-area:#17181f;--bg-sidebar:#111218;
  --bg-input-area:#22232d;--bg-input:#22232d;--bot-bg:#22232d;--bot-text:#f0eff6;
  --user-bg:#292637;--user-text:#f4f1ff;--text-main:#eeedf5;--text-muted:#aaa9bc;
  --border:#34343f;--border-strong:#535061;--surface-elevated:#22232d;--surface-glass:#17181f;
  --shadow-soft:0 4px 18px #0002;--shadow-elevated:0 18px 60px #0003;
  --sidebar-width:280px;--chat-column:760px;--radius-md:12px;--radius-lg:18px;--radius-xl:22px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
[data-theme="light"] {
  --primary:#6d28d9;--primary-hover:#5b21b6;--accent:#6d28d9;
  --bg-body:#f8f8fb;--bg-chat:#fff;--bg-chat-area:#fff;--bg-sidebar:#f3f3f8;
  --bg-input-area:#fff;--bg-input:#fff;--bot-bg:#f6f6fa;--bot-text:#242333;
  --user-bg:#f0eafb;--user-text:#312344;--text-main:#242333;--text-muted:#626174;
  --border:#dddde7;--border-strong:#b5b1c5;--surface-elevated:#fff;--surface-glass:#fff;
  --shadow-soft:0 4px 18px #34245108;--shadow-elevated:0 18px 60px #34245114;
}
body {background:var(--bg-body);color:var(--text-main);font-family:Vazirmatn,system-ui,sans-serif;}
button,summary,select {touch-action:manipulation;}
button:not(:disabled),summary {cursor:pointer;}
:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
#layoutWrapper {height:100dvh;}
#layoutWrapper>div:last-child {padding:0;background:none;}
#chatContainer {max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;}
#chatContainer>header {background:var(--bg-chat);box-shadow:none;backdrop-filter:none;border-bottom:1px solid var(--border);padding:var(--space-4) 28px;}
.wordmark-vitmeet,.dark .wordmark-vitmeet {font-family:Vazirmatn,system-ui,sans-serif;background:none;color:var(--text-main);filter:none;letter-spacing:-.03em;font-size:20px;line-height:1.4;}
.demo-status {display:block;margin-top:2px;color:var(--text-muted);font-size:11px;font-weight:400;line-height:1.5;opacity:.85;max-width:min(100%,280px);}
/*
  Shared conversation column: stage sides absorb leftover width; rail is the
  column. Transcript and composer share #chat as one scrollport so their edges
  stay aligned with or without a classic scrollbar (no fixed offset).
*/
.chat-stage {flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) min(100%,var(--chat-column)) minmax(0,1fr);}
.chat-rail {grid-column:2;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;}
#chat {flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:clip;overflow-y:auto;padding-block:var(--space-6);padding-inline:0;scrollbar-gutter:stable;}
#chatInner {box-sizing:border-box;width:100%;gap:var(--space-5);}
#chatContainer:not(.is-chat-active) #chat {flex-grow:1;padding-block:clamp(12px,4vh,28px);justify-content:center;}
#chatContainer:not(.is-chat-active) #chatInner {flex:0 0 auto;min-height:0;}
#chatContainer:not(.is-chat-active) .composer-region {flex:0 0 auto;min-height:0;justify-content:flex-start;padding-block:0;margin:0;}
#chatContainer.is-chat-active .composer-region {flex:0 0 auto;position:sticky;bottom:0;}
.composer-region {overflow:visible;padding-inline:0;background:var(--bg-chat);}
.composer-stack {display:flex;flex-direction:column;box-sizing:border-box;width:100%;gap:0;}
#chatGreeting,.suggestion-chips,.composer-dock,.model-control,#filePreview {box-sizing:border-box;width:100%;}
.assistant-mark {display:grid;place-items:center;width:40px;height:40px;margin:0 auto var(--space-3);border:1px solid var(--border);border-radius:14px;color:var(--accent);background:var(--bg-input-area);box-shadow:none;}
.assistant-mark svg {width:22px;height:22px;}
#chatGreeting {padding-bottom:var(--space-2);}
#chatGreeting h1 {font-size:clamp(18px,2.2vw,24px);font-weight:600;line-height:1.45;letter-spacing:-.02em;}
#chatGreeting p {font-size:13px;line-height:1.7;max-width:380px;margin-inline:auto;margin-top:6px;}
.suggestion-chips {gap:var(--space-2);margin-block:var(--space-2) var(--space-3);width:100%;margin-inline:auto;justify-content:center;}
.suggestion-chip {border:1px solid var(--border);border-radius:999px;min-height:34px;padding:5px 12px;font-size:12px;line-height:1.4;background:transparent;box-shadow:none;color:var(--text-muted);white-space:normal;}
.suggestion-chip:hover {border-color:var(--border-strong);color:var(--text-main);background:var(--bg-input-area);transform:none;}
.model-control {display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;width:100%;margin:0 auto var(--space-2);padding:0;justify-content:flex-start;}
.model-control label {font-size:12px;color:var(--text-muted);flex:0 0 auto;}
.model-control select,.model-control-static {min-height:36px;flex:1 1 auto;max-width:100%;border:1px solid var(--border);border-radius:10px;background:var(--bg-input-area);color:var(--text-main);padding:5px 12px;font-size:13px;}
.model-control-static {display:inline-flex;align-items:center;color:var(--text-muted);}
.model-control-hint {width:100%;font-size:12px;color:var(--text-muted);margin:0;}
.composer-dock {width:100%;margin-inline:auto;padding-bottom:var(--space-3);background:var(--bg-chat);}
.composer-shell {box-sizing:border-box;display:grid;grid-template-columns:40px 1fr 40px 40px;gap:4px;width:100%;max-width:100%;padding:10px;border:1px solid var(--border-strong);border-radius:18px;background:var(--bg-input-area);box-shadow:var(--shadow-soft);align-content:start;}
.composer-shell:focus-within {border-color:var(--accent);box-shadow:var(--focus-ring);}
.composer-input {grid-row:1;grid-column:1/-1;width:100%;resize:none;border:0;background:transparent;font-size:15px;line-height:1.6;min-height:40px;max-height:140px;padding:4px 8px;color:var(--text-main);}
.composer-input::placeholder {color:var(--text-muted);}
.composer-input:focus {outline:none;}
.composer-tool {display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border-radius:var(--radius-md);background:transparent;color:var(--text-muted);}
.composer-tool:hover {background:color-mix(in srgb, var(--text-muted) 12%, transparent);color:var(--text-main);}
.composer-tool.hidden,#send.hidden,#stopBtn.hidden {display:none;}
#attachBtn {grid-row:2;grid-column:1;}
#micBtn {grid-row:2;grid-column:3;}
#send,#stopBtn {grid-row:2;grid-column:4;}
.composer-send:not(:disabled) {background:var(--primary);color:#fff;}
.composer-send:not(:disabled):hover {background:var(--primary-hover);color:#fff;}
.composer-send:disabled {opacity:.45;cursor:not-allowed;}
.composer-stop {background:#dc2626;color:#fff;}
.composer-stop:hover {background:#b91c1c;color:#fff;}
.composer-hints {display:none;margin-top:var(--space-2);padding-inline:4px;flex-wrap:wrap;gap:var(--space-3);font-size:11px;color:var(--text-muted);justify-content:flex-start;}
.composer-hints kbd {border:1px solid var(--border);border-radius:6px;background:var(--bg-input-area);padding:1px 6px;font-family:inherit;font-size:10px;}
/* Keyboard shortcut chrome: primary interaction type, not viewport width. */
@media (hover: hover) and (pointer: fine) {
  .composer-hints:not([hidden]) {display:flex;}
}
@media (hover: none), (pointer: coarse) {
  .composer-hints {display:none;}
}
#switchAction.auth-switch {min-height:44px;padding-block:10px;}
.file-preview {margin-inline:auto;}
#chatInner .msg-ai-bubble {background:transparent;border-color:transparent;box-shadow:none;padding-inline:0;}
#chatInner .msg-user-bubble {background:var(--user-bg);color:var(--user-text);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:none;padding:14px 18px;}
.message-enter[data-role]:hover .msg-ai-bubble,.message-enter[data-role]:hover .msg-user-bubble {transform:none;}
.rich-message {font-size:16px;line-height:1.95;}
.rich-message a {color:var(--accent);}
.rich-message h1,.rich-message h2,.rich-message h3 {color:var(--text-main);}
.rich-message code,.rich-message pre {direction:ltr;unicode-bidi:isolate;text-align:start;}
.conversation-actions,.msg-actions {gap:4px;font-size:12px;margin-top:10px;opacity:1;transform:none;flex-wrap:wrap;}
.conversation-actions>button,.msg-action {border-color:transparent;padding:8px;border-radius:10px;color:var(--text-muted);min-height:40px;}
.conversation-actions>button:hover,.msg-action:hover {background:var(--bot-bg);color:var(--text-main);}
.conversation-actions select {border-color:transparent;background:transparent;min-height:40px;font-size:12px;}
.conversation-actions label {margin-inline-start:8px;}
.history-panel {padding:14px;gap:12px;}
.history-list {gap:4px;}
.history-row {border:0;border-radius:var(--radius-md);}
.history-row:hover {background:var(--bg-input-area);}
.history-open {padding:12px;}
.history-open>span {font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-open[aria-current=true] {background:var(--user-bg);}
.history-menu>div {background:var(--bg-input-area);min-width:180px;}
.history-filters input,.history-filters select {min-height:44px;font-size:13px;background:var(--bg-sidebar);}
.history-pager {color:var(--text-muted);}
.conversation-dialog {background:var(--bg-chat);border-radius:20px;}
.conversation-dialog input,.conversation-dialog textarea {background:var(--bg-input-area);}
#authWrapper>div,#settingsModalPanel {background:var(--bg-chat);border:1px solid var(--border);border-radius:var(--radius-xl);}
#authWrapper input,#settingsModalPanel input,#settingsModalPanel select {min-height:46px;}
#authCloseBtn,#settingsCloseBtn {min-width:44px;min-height:44px;}
.auth-field-help {margin-top:6px;font-size:12px;line-height:1.7;color:var(--text-muted);}
.auth-field-error {margin-top:6px;font-size:12px;line-height:1.6;color:#ef4444;}
.auth-field-error[hidden],.auth-field-help[hidden] {display:none;}
/* Password eye must sit inside the field: wrap only input+toggle (not help/error). */
.auth-password-wrap {
  position:relative;
  display:block;
  width:100%;
}
.auth-password-wrap > input {
  padding-inline-end:2.75rem;
}
.auth-password-wrap > .auth-password-toggle,
#togglePasswordBtn,
#toggleConfirmPasswordBtn {
  position:absolute;
  inset-inline-end:0;
  top:0;
  bottom:0;
  z-index:2;
  display:inline-flex;
  width:2.75rem;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  align-items:center;
  justify-content:center;
  transform:none;
  pointer-events:auto;
}
.settings-panel {height:auto;min-height:0;}
.settings-panel.is-compact {max-width:440px;}
.settings-panel.is-compact > aside {width:100%;border-inline-end:0;border-bottom:1px solid var(--border);}
.settings-panel.is-compact #settingsTabList {flex-direction:row;}
.toast {min-width:0;max-width:calc(100vw - 32px);}
.toast-container {inset-inline-end:16px;right:auto;}
#sidebarToggle,#sidebarClose,#lightThemeBtn,#darkThemeBtn {min-width:44px;min-height:44px;border-radius:var(--radius-md);}
#adminUserSearch,#adminUserList,#adminUserQuota {color:var(--text-main);background:var(--surface-elevated);border-color:var(--border-strong);}
#adminUserList option {background:var(--surface-elevated);color:var(--text-main);}
.admin-selected-user {font-size:13px;color:var(--text-muted);margin-bottom:var(--space-3);}
@media(max-width:767px) {
  #chatContainer>header {padding:10px 16px;gap:8px;}
  .chat-stage {grid-template-columns:16px minmax(0,1fr) 16px;}
  #chat {padding-block:20px;}
  #chatGreeting h1 {font-size:18px;}
  #chatGreeting p {font-size:12px;}
  .suggestion-chips {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .suggestion-chip {font-size:12px;padding:7px 10px;min-height:36px;}
  .composer-shell {padding:8px;border-radius:16px;}
  #chatInner {gap:16px;}
  .rich-message {font-size:15px;}
  .composer-region {padding-bottom:env(safe-area-inset-bottom);}
  #chatContainer:not(.is-chat-active) .composer-region {justify-content:flex-start;padding-block:0;}
  .assistant-mark {width:36px;height:36px;margin-bottom:10px;border-radius:12px;}
  #headerLoginBtn {padding-inline:10px;font-size:12px;}
}
@media(min-width:768px) {
  #layoutWrapper.sidebar-open #sidebarToggle {display:none;}
}
@media (max-height:560px) {
  #chatContainer:not(.is-chat-active) .assistant-mark {display:none;}
  #chatGreeting p {display:none;}
  .suggestion-chips {margin-block:8px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
.rich-message,.msg-user-bubble {font-weight:400;}
#authWrapper label {color:var(--text-muted);}
#authSubmitBtn {background:var(--primary-hover);color:white;}
.thinking-dots {display:flex;gap:5px;}
.thinking-dots span {width:6px;height:6px;border-radius:50%;background:var(--accent);animation:thinking-pulse 1s ease-in-out infinite alternate;}
.thinking-dots span:nth-child(2){animation-delay:.15s;}
.thinking-dots span:nth-child(3){animation-delay:.3s;}
.thinking-label {color:var(--text-muted);font-size:13px;background:none;-webkit-text-fill-color:currentColor;animation:none;}
@keyframes thinking-pulse {to {opacity:.35;transform:translateY(-3px);}}
.message-enter:has([data-waiting]) .msg-actions {visibility:hidden;}
.is-streaming[data-waiting] {color:var(--text-muted);font-size:14px;}