:root {
  color-scheme: dark;
  --bg: #0d0f12;
  --sidebar: #111419;
  --surface: #171b21;
  --surface-2: #1d222a;
  --surface-3: #252b34;
  --border: #2a3039;
  --text: #f2f4f7;
  --muted: #929ba8;
  --accent: #7c6df2;
  --accent-2: #5a4bd3;
  --success: #38c793;
  --danger: #ff7272;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
}

button, input, textarea { font: inherit; }
button { color: inherit; }

.sidebar {
  width: 284px;
  flex: 0 0 284px;
  display: flex;
  flex-direction: column;
  padding: 15px 12px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 7px 15px; }
.brand > div { display: grid; line-height: 1.2; }
.brand strong { font-size: 15px; }
.brand small, .sidebar-foot small { color: var(--muted); font-size: 11px; }

.logo, .hero-logo, .avatar {
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  background: linear-gradient(145deg, #8c7cff, #5547c7);
  box-shadow: inset 0 1px 0 #ffffff35, 0 8px 24px #5547c730;
}

.logo { width: 34px; height: 34px; border-radius: 10px; }
.hero-logo { width: 58px; height: 58px; margin: auto; border-radius: 17px; font-size: 24px; }

.new-chat {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  cursor: pointer;
  border: 1px solid #8377ed;
  border-radius: 11px;
  background: linear-gradient(180deg, #7869e8, #6153cd);
  box-shadow: 0 8px 24px #5a4bd32b;
  font-weight: 650;
}

.new-chat:hover { filter: brightness(1.08); }
.new-chat:disabled { opacity: .45; cursor: not-allowed; }
.new-chat span { font-size: 19px; line-height: 1; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 2px 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0d1014;
  color: var(--muted);
}

.search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.history { flex: 1; overflow: auto; scrollbar-width: thin; }
.history-group { padding: 10px 8px 5px; color: #697280; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.chat-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  color: #cfd4db;
  background: transparent;
}

.chat-item:hover { background: var(--surface); }
.chat-item.active { color: white; background: var(--surface-2); }
.chat-glyph { color: #747e8b; }
.chat-title { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { color: #616a76; font-size: 10px; }

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 8px 2px;
  border-top: 1px solid var(--border);
}

.sidebar-foot > div { display: grid; line-height: 1.25; }
.sidebar-foot strong { font-size: 12px; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #6c737d; }
.dot.online { background: var(--success); box-shadow: 0 0 10px #38c793aa; }

main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
header { height: 66px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--border); background: #0d0f12e8; }
.header-spacer { flex: 1; }
.menu { display: none; }

.model-picker { position: relative; }
.model-button {
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  background: transparent;
}

.model-button:hover, .model-button[aria-expanded="true"] { border-color: var(--border); background: var(--surface); }
.model-button:disabled { cursor: default; opacity: .75; }
.model-button span { display: grid; line-height: 1.15; }
.model-button small { color: #6f7884; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.model-button strong { max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.model-button b { color: var(--muted); }

.model-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 7px);
  left: 0;
  width: min(340px, 80vw);
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #171a20;
  box-shadow: 0 18px 55px #0009;
}

.model-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 8px; cursor: pointer; text-align: left; background: transparent; }
.model-option:hover { background: var(--surface-3); }
.model-option.active { color: #bdb5ff; background: #7566e51a; }
.model-option .check { width: 18px; color: #8c7cff; }

.connection-badge { padding: 5px 9px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-size: 11px; }
.connection-badge.online { color: #7ee3bc; border-color: #285b48; background: #15382b66; }
.icon-button { width: 38px; height: 38px; border: 0; border-radius: 9px; cursor: pointer; color: var(--muted); background: transparent; font-size: 18px; }
.icon-button:hover { color: white; background: var(--surface-2); }

.messages { flex: 1; overflow: auto; scroll-behavior: smooth; }
.empty { min-height: 100%; display: grid; place-content: center; text-align: center; padding: 30px; }
.empty h1 { margin: 19px 0 5px; font-size: clamp(25px, 4vw, 34px); letter-spacing: -.04em; }
.empty > p { margin: 0; color: var(--muted); }
.suggestions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; max-width: 720px; margin-top: 30px; }
.suggestions button { padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; color: #b6bdc7; background: var(--surface); font-size: 12px; }
.suggestions button:hover { color: white; border-color: #484f5a; background: var(--surface-2); }

.message { max-width: 880px; margin: auto; padding: 22px 24px; display: flex; gap: 14px; }
.message.user { justify-content: flex-end; }
.message.user .bubble { max-width: 75%; padding: 11px 16px; border: 1px solid #343a44; border-radius: 18px 18px 5px 18px; background: var(--surface-2); white-space: pre-wrap; }
.message.assistant .bubble { min-width: 0; flex: 1; padding-top: 3px; }
.avatar { flex: 0 0 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.message-body { word-break: break-word; }
.message-body p { margin: 0 0 13px; }
.message-body p:last-child { margin-bottom: 0; }
.message-body a { color: #9f95ff; }

.reasoning { margin: 0 0 15px; border: 1px solid var(--border); border-radius: 10px; background: #13161a; }
.reasoning summary { padding: 9px 12px; cursor: pointer; color: #aeb5bf; font-size: 12px; font-weight: 650; }
.reasoning-content { max-height: 260px; overflow: auto; padding: 0 12px 12px; white-space: pre-wrap; color: #8f98a5; font-size: 13px; }

.code-block { margin: 14px 0; overflow: hidden; border: 1px solid #303640; border-radius: 10px; background: #090b0e; }
.code-head { display: flex; justify-content: space-between; padding: 7px 11px; color: #8e97a3; background: #171a1f; font: 11px ui-monospace, monospace; }
.copy-code, .message-copy { border: 0; cursor: pointer; color: #aab2bd; background: transparent; }
.code-block pre { margin: 0; padding: 14px; overflow: auto; }
.code-block code { font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.message-actions { display: flex; gap: 8px; margin-top: 9px; opacity: 0; transition: opacity .15s; }
.message:hover .message-actions { opacity: 1; }
.message-copy { padding: 4px 0; font-size: 11px; }

.status { margin-top: 8px; color: var(--muted); font-size: 11px; }
.status.error { color: var(--danger); }
.typing-cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: #ececec; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

form { padding: 10px 20px 17px; background: linear-gradient(0deg, var(--bg) 72%, transparent); }
.composer-box { max-width: 830px; min-height: 56px; margin: auto; display: flex; align-items: flex-end; gap: 10px; padding: 9px 10px 9px 18px; border: 1px solid #353c47; border-radius: 17px; background: var(--surface); box-shadow: 0 12px 45px #0005; }
textarea { min-height: 34px; max-height: 190px; flex: 1; resize: none; padding: 6px 0; border: 0; outline: 0; color: var(--text); background: transparent; }
textarea::placeholder { color: #69727e; }
#send { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border: 0; border-radius: 10px; cursor: pointer; color: white; background: var(--accent); font-size: 20px; }
#send:hover { background: #8a7cf2; }
#send:disabled { opacity: .45; }
#send.stop { background: #f0f1f4; color: #111; }
#send.stop span { width: 10px; height: 10px; border-radius: 2px; background: #111; font-size: 0; }
.composer-meta { max-width: 830px; display: flex; justify-content: space-between; margin: 7px auto 0; color: #636c78; font-size: 10px; }

.backdrop { display: none; }

@media (max-width: 760px) {
  .sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; transform: translateX(-102%); transition: transform .2s; box-shadow: 18px 0 50px #000b; }
  .sidebar.open { transform: none; }
  .backdrop.open { position: fixed; z-index: 20; inset: 0; display: block; background: #0008; }
  .menu { display: grid; place-items: center; }
  header { padding: 0 10px; }
  .model-button { min-width: 0; max-width: 210px; }
  .connection-badge { display: none; }
  .suggestions { grid-template-columns: 1fr; width: min(360px, 85vw); }
  .message { padding: 18px 14px; }
  .message.user .bubble { max-width: 88%; }
  form { padding: 8px 10px 12px; }
  .composer-meta > span { display: none; }
  .composer-meta { justify-content: center; }
}