:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: rgba(24, 27, 37, .82);
  --panel-strong: rgba(30, 34, 47, .96);
  --line: rgba(255,255,255,.1);
  --text: #f7f8fc;
  --muted: #969cac;
  --blue: #3d93f2;
  --blue-soft: rgba(61,147,242,.17);
  --danger: #ff6b78;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f7;
  --panel: rgba(255,255,255,.82);
  --panel-strong: rgba(255,255,255,.96);
  --line: rgba(20,30,50,.12);
  --text: #182033;
  --muted: #697286;
  --blue-soft: rgba(61,147,242,.13);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 10% -10%, #24395d 0, transparent 36%), var(--bg); }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.glass { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.28); backdrop-filter: blur(24px); }

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 430px); border-radius: 30px; padding: 34px; }
.brand-mark, .brand-small { letter-spacing: -.07em; font-weight: 800; line-height: .8; }
.brand-mark { font-size: 58px; }
.brand-small { font-size: 30px; }
.eyebrow { margin: 30px 0 10px; color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 32px; letter-spacing: -.04em; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 28px 0 20px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.08); }
.segmented button { border: 0; border-radius: 10px; padding: 10px; color: var(--muted); background: transparent; }
.segmented button.active { color: var(--text); background: rgba(255,255,255,.13); }
.stack { display: grid; gap: 13px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
input { width: 100%; border: 1px solid transparent; outline: 0; border-radius: 13px; padding: 13px 14px; color: var(--text); background: rgba(255,255,255,.08); }
input:focus { border-color: rgba(61,147,242,.72); box-shadow: 0 0 0 3px rgba(61,147,242,.13); }
.primary-button, .secondary-button, .ghost-button { border: 0; border-radius: 13px; padding: 13px 16px; color: var(--text); }
.primary-button { margin-top: 7px; background: var(--blue); font-weight: 700; }
.primary-button:disabled { opacity: .6; cursor: wait; }
.secondary-button { background: rgba(255,255,255,.08); font-size: 13px; }
.ghost-button { color: var(--muted); background: transparent; font-size: 13px; }
.hint { margin: 18px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.app-screen { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; width: min(1440px, 100%); height: 100vh; padding: 14px; margin: auto; }
.sidebar, .conversation { min-height: 0; border-radius: 26px; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; padding: 18px 12px 12px; }
.sidebar-top, .conversation-header, .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sidebar-top { padding: 2px 8px 18px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(255,255,255,.08); font-size: 22px; line-height: 1; }
.search-box { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.search-box input { padding: 10px 0; border: 0; background: transparent; box-shadow: none; }
.chat-list { flex: 1; overflow: auto; padding-top: 8px; }
.chat-item { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 11px; width: 100%; border: 0; border-radius: 15px; padding: 10px 9px; color: var(--text); text-align: left; background: transparent; }
.chat-item:hover, .chat-item.active { background: var(--blue-soft); }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; color: white; background: linear-gradient(145deg, #5eafff, #3866d8); font-weight: 700; }
.chat-copy { min-width: 0; }
.chat-line { display: flex; justify-content: space-between; gap: 8px; }
.chat-name, .chat-time { font-size: 14px; }
.chat-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { color: var(--muted); white-space: nowrap; }
.chat-preview { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.sidebar-bottom button { flex: 1; }
.conversation { position: relative; background: rgba(13,16,23,.73); }
.empty-state { display: grid; place-content: center; height: 100%; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 22px; color: #9dcaff; background: var(--blue-soft); font-size: 32px; }
.conversation-layout { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.conversation-header { justify-content: flex-start; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.conversation-header h2 { margin: 0; font-size: 18px; }
.message-list { overflow: auto; padding: 22px clamp(14px, 5vw, 70px); }
.message-row { display: flex; margin: 6px 0; }
.message-row.mine { justify-content: flex-end; }
.bubble { max-width: min(75%, 600px); padding: 10px 13px; border-radius: 17px; background: rgba(255,255,255,.1); }
.mine .bubble { background: var(--blue); }
.bubble-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-time { display: block; margin-top: 4px; color: rgba(255,255,255,.55); font-size: 10px; text-align: right; }
.composer { display: flex; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--line); background: rgba(11,13,18,.55); }
.composer input { border-radius: 18px; }
.send-button { width: 48px; border: 0; border-radius: 16px; color: white; background: var(--blue); font-size: 20px; }
.mobile-only { display: none; }

.dialog { width: min(92vw, 460px); padding: 22px; border: 1px solid var(--line); border-radius: 24px; color: var(--text); background: var(--panel-strong); }
.dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(5px); }
.dialog h2 { margin: 0; font-size: 22px; }
.dialog-search { margin: 18px 0 10px; }
.user-results { min-height: 140px; max-height: 50vh; overflow: auto; }
.user-row { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; border-radius: 14px; padding: 10px; color: var(--text); text-align: left; background: transparent; }
.user-row:hover { background: rgba(255,255,255,.08); }
.user-meta { min-width: 0; }
.user-meta strong, .user-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.toast { position: fixed; z-index: 10; top: 18px; left: 50%; transform: translate(-50%, -16px); max-width: min(90vw, 420px); padding: 11px 15px; border: 1px solid var(--line); border-radius: 13px; opacity: 0; color: white; background: rgba(30,34,47,.95); pointer-events: none; transition: .2s ease; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 760px) {
  .app-screen { display: block; height: 100dvh; padding: 0; }
  .sidebar, .conversation { height: 100dvh; border: 0; border-radius: 0; }
  .conversation { position: fixed; inset: 0; z-index: 2; display: none; }
  .app-screen.chat-open .sidebar { display: none; }
  .app-screen.chat-open .conversation { display: block; }
  .mobile-only { display: inline-grid; place-items: center; }
  .conversation-header { padding-top: max(17px, env(safe-area-inset-top)); }
  .auth-card { padding: 26px 22px; }
}