:root {
  color-scheme: dark;
  --bg: #0d1118;
  --surface: #141a24;
  --surface-2: #1b2331;
  --surface-3: #222c3c;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(98, 231, 212, 0.28);
  --text: #f3f7fb;
  --muted: #a6b2c3;
  --faint: #78869a;
  --teal: #62e7d4;
  --blue: #6aa8ff;
  --danger: #ff8f9a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% -12%, rgba(106, 168, 255, 0.14), transparent 32rem),
    radial-gradient(circle at 8% 8%, rgba(98, 231, 212, 0.1), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-size: 15px;
}

button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  height: 100dvh;
}

.sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-inline-end: 1px solid var(--line);
  background: rgba(14, 19, 27, 0.93);
  backdrop-filter: blur(20px);
}

.sidebar-head {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.sidebar-brand {
  background: linear-gradient(110deg, #e9f6ff 12%, #6aa8ff 48%, #62e7d4 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 800;
  text-decoration: none;
}

.sidebar-brand span {
  font-family: inherit;
  font-size: 0.72em;
}

.sidebar-close { display: none; }

.new-chat {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin: 2px 13px 14px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: rgba(98, 231, 212, 0.075);
  color: #dffffa;
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.new-chat:hover { border-color: rgba(98, 231, 212, 0.48); background: rgba(98, 231, 212, 0.13); }
.new-chat span { font-size: 1.2rem; line-height: 1; }

.conversation-list {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  padding: 0 10px 16px;
  scrollbar-width: thin;
  scrollbar-color: #344052 transparent;
}

.conversation-link {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
}

.conversation-link:hover, .conversation-link.is-active { background: rgba(255,255,255,.055); color: var(--text); }
.conversation-link.is-active { border-color: var(--line); }
.conversation-link strong, .conversation-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-link strong { font-size: .82rem; font-weight: 700; }
.conversation-link span { color: var(--faint); font-size: .69rem; }
.conversation-empty { padding: 12px; color: var(--faint); font-size: .76rem; line-height: 1.6; }

.sidebar-user {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 34px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 13px;
  border-top: 1px solid var(--line);
}

.user-avatar, .message-avatar {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(98,231,212,.17), rgba(106,168,255,.13));
  color: #dffffa;
  font-weight: 850;
}
.user-avatar { width: 36px; height: 36px; border-radius: 12px; }
.user-copy { display: grid; min-width: 0; }
.user-copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.user-copy small { color: var(--faint); font-size: .66rem; text-transform: capitalize; }
.logout-link { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--faint); text-decoration: none; }
.logout-link:hover { background: rgba(255,255,255,.06); color: var(--text); }

.chat-area { position: relative; display: grid; min-width: 0; grid-template-rows: 70px minmax(0, 1fr) auto; }

.top-bar {
  position: relative;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(13,17,24,.76);
  backdrop-filter: blur(18px);
}

.menu-button, .sidebar-close, .top-actions button, .voice-button, .send-button {
  border: 0;
  cursor: pointer;
}

.menu-button {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: transparent;
}
.menu-button span { display: block; width: 18px; height: 2px; margin: 2px; border-radius: 2px; background: var(--muted); }

.chat-heading { display: grid; min-width: 0; justify-items: center; }
.chat-heading strong { max-width: min(100%, 560px); overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-heading span { color: var(--faint); font-size: .65rem; }

.top-actions { display: flex; align-items: center; gap: 6px; }
.delete-chat-form { margin: 0; }
.delete-chat-form button, .apps-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: transparent;
  color: var(--faint);
}
.delete-chat-form button:hover { background: rgba(255,143,154,.09); color: var(--danger); }

.apps-button { grid-template-columns: repeat(2, 4px); align-content: center; justify-content: center; gap: 4px; }
.apps-button span { width: 4px; height: 4px; border-radius: 1px; background: currentColor; }
.apps-button:hover { background: rgba(255,255,255,.06); color: var(--text); }

.messages { min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.messages-inner { width: min(calc(100% - 32px), 820px); min-height: 100%; margin: 0 auto; padding: 38px 0 150px; }

.welcome {
  display: grid;
  min-height: min(620px, calc(100dvh - 240px));
  align-content: center;
  justify-items: center;
  text-align: center;
}
.welcome-mark {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid rgba(98,231,212,.3);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(98,231,212,.17), rgba(106,168,255,.14));
  box-shadow: 0 22px 65px rgba(35,114,143,.18);
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 2.6rem;
  font-weight: 800;
}
.welcome h1 { margin: 22px 0 8px; font-size: clamp(1.65rem, 4vw, 2.25rem); letter-spacing: -.04em; }
.welcome > p { max-width: 590px; margin: 0; color: var(--muted); line-height: 1.7; }
.search-context { margin-top: 12px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--teal); font-size: .69rem; font-weight: 750; }
.starter-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; width: min(100%, 590px); margin-top: 25px; }
.starter-grid button { min-height: 48px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(21,27,38,.72); color: #d6dfec; cursor: pointer; font-size: .78rem; text-align: start; }
.starter-grid button:hover { border-color: var(--line-strong); background: rgba(29,38,52,.9); }

.message { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.065); }
.message-avatar { width: 34px; height: 34px; border-radius: 11px; font-size: .68rem; }
.message.user .message-avatar { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.07); color: #d9e1eb; }
.message-main { min-width: 0; }
.message-label { margin-bottom: 7px; color: #eef4fa; font-size: .76rem; font-weight: 850; }
.message-content { color: #d6dfeb; font-size: .91rem; line-height: 1.9; overflow-wrap: anywhere; white-space: normal; }
.message.user .message-content { color: #f1f5f9; }
.copy-message { margin-top: 9px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; font-size: .68rem; }
.copy-message:hover { background: rgba(255,255,255,.055); color: var(--muted); }

.composer-zone {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 20px 14px;
  background: linear-gradient(180deg, transparent, rgba(13,17,24,.9) 26%, var(--bg) 58%);
  pointer-events: none;
}
.composer { width: min(100%, 820px); margin: 0 auto; pointer-events: auto; }
.composer-box {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(24,31,42,.96);
  box-shadow: 0 18px 55px rgba(0,0,0,.3);
}
.composer-box:focus-within { border-color: rgba(98,231,212,.4); box-shadow: 0 0 0 3px rgba(98,231,212,.07), 0 18px 55px rgba(0,0,0,.3); }
#prompt { min-height: 42px; max-height: 180px; resize: none; overflow-y: auto; border: 0; outline: 0; padding: 10px 0 7px; background: transparent; color: var(--text); line-height: 1.55; }
#prompt::placeholder { color: #8290a4; }
.composer-actions { display: flex; align-items: center; gap: 5px; }
.voice-button, .send-button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; }
.voice-button { background: transparent; color: #9ba8ba; }
.voice-button:hover, .voice-button.is-listening { background: rgba(98,231,212,.1); color: var(--teal); }
.voice-button svg, .send-button svg { width: 20px; height: 20px; fill: currentColor; }
.send-button { background: linear-gradient(145deg, var(--teal), #54bede); color: #071213; }
.send-button:hover { filter: brightness(1.08); }
.send-button:disabled { cursor: wait; filter: grayscale(.5); opacity: .65; }
.char-count { display: none; color: var(--faint); font-size: .62rem; }
.composer-note { margin: 7px 0 0; color: #6f7b8d; font-size: .62rem; text-align: center; }
.error-banner { width: min(100%, 820px); margin: 0 auto 8px; padding: 9px 12px; border: 1px solid rgba(255,143,154,.28); border-radius: 12px; background: rgba(255,90,105,.08); color: #ffc2c8; font-size: .76rem; pointer-events: auto; }

.sidebar-backdrop { display: none; }
body.services-open, body.sidebar-open { overflow: hidden; }
.services-dialog { position: fixed; z-index: 100; inset: 0; display: grid; place-items: start end; padding: 70px 18px 18px; }
.services-dialog[hidden] { display: none; }
.services-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,6,12,.68); cursor: default; backdrop-filter: blur(5px); }
.services-panel { position: relative; width: min(360px, calc(100vw - 28px)); max-height: min(620px, calc(100dvh - 90px)); overflow-y: auto; border: 1px solid var(--line); border-radius: 22px; background: rgba(20,26,36,.98); box-shadow: 0 28px 90px rgba(0,0,0,.45); outline: none; }
.services-panel-header { display: flex; min-height: 46px; align-items: center; justify-content: flex-end; padding: 5px 8px; }
.services-close { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--faint); cursor: pointer; font-size: 1.35rem; }
.services-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 2px 12px 16px; }
.service-card { display: grid; min-width: 0; justify-items: center; gap: 8px; padding: 13px 7px 11px; border: 1px solid transparent; border-radius: 15px; color: var(--muted); text-align: center; text-decoration: none; }
.service-card:hover { border-color: var(--line); background: rgba(255,255,255,.05); color: var(--text); }
.service-logo { display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.055); }
.service-logo img { width: 32px; height: 32px; object-fit: contain; }
.service-title { width: 100%; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.services-loading { grid-column: 1/-1; padding: 25px 8px; color: var(--faint); font-size: .78rem; text-align: center; }

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 310px); transform: translateX(-105%); transition: transform 190ms ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.35rem; }
  .sidebar-backdrop { position: fixed; z-index: 25; inset: 0; border: 0; background: rgba(2,6,12,.68); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .chat-area { height: 100dvh; grid-template-rows: 62px minmax(0,1fr) auto; }
  .top-bar { grid-template-columns: 42px minmax(0,1fr) auto; padding: 0 12px; }
  .menu-button { display: grid; }
  .messages-inner { width: min(calc(100% - 24px), 820px); padding-top: 24px; }
  .welcome { min-height: calc(100dvh - 235px); }
  .welcome-mark { width: 62px; height: 62px; border-radius: 20px; font-size: 2.2rem; }
  .starter-grid { grid-template-columns: 1fr; }
  .message { grid-template-columns: 31px minmax(0,1fr); gap: 10px; }
  .message-avatar { width: 30px; height: 30px; border-radius: 10px; }
  .message-content { font-size: .86rem; }
  .composer-zone { padding-inline: 10px; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .composer-box { border-radius: 19px; padding-left: 13px; }
  .services-dialog { place-items: start center; padding: 62px 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.auth-page {
  overflow-y: auto;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 28px 16px;
}
.auth-shell { display: grid; width: min(100%, 430px); justify-items: center; }
.auth-brand { margin-bottom: 22px; background: linear-gradient(110deg,#e9f6ff,#6aa8ff 48%,#62e7d4); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Georgia,serif; font-size: 2rem; font-weight: 800; text-decoration: none; }
.auth-brand span { font-size: .72em; }
.auth-card { width: 100%; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: rgba(20,26,36,.9); box-shadow: 0 28px 90px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
.auth-icon { display: grid; width: 46px; height: 46px; margin: 0 auto 15px; place-items: center; border: 1px solid var(--line-strong); border-radius: 15px; background: linear-gradient(145deg,rgba(98,231,212,.16),rgba(106,168,255,.14)); color: var(--teal); font-size: .78rem; font-weight: 900; }
.auth-card h1 { margin: 0; font-size: 1.45rem; text-align: center; }
.auth-card > p { margin: 7px 0 20px; color: var(--muted); font-size: .8rem; text-align: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 18px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.045); }
.auth-tabs a { padding: 8px; border-radius: 10px; color: var(--faint); font-size: .76rem; font-weight: 750; text-align: center; text-decoration: none; }
.auth-tabs a.is-active { background: var(--surface-3); color: var(--text); box-shadow: 0 5px 18px rgba(0,0,0,.16); }
.auth-form { display: grid; }
.auth-form label { margin: 0 0 6px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.auth-form input { width: 100%; min-height: 44px; margin-bottom: 13px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: rgba(9,14,22,.52); color: var(--text); }
.auth-form input:focus { border-color: rgba(98,231,212,.45); box-shadow: 0 0 0 3px rgba(98,231,212,.07); }
.auth-form button { min-height: 45px; margin-top: 4px; border: 0; border-radius: 13px; background: linear-gradient(145deg,var(--teal),#54bede); color: #071213; cursor: pointer; font-weight: 850; }
.auth-error { margin-bottom: 14px; padding: 9px 11px; border: 1px solid rgba(255,143,154,.28); border-radius: 11px; background: rgba(255,90,105,.08); color: #ffc2c8; font-size: .74rem; }
.auth-search-link { margin-top: 18px; color: var(--faint); font-size: .72rem; text-decoration: none; }
.auth-search-link:hover { color: var(--teal); }