:root {
  color-scheme: light;
  --sidebar: #171717;
  --page: #f7f7f8;
  --card: #fff;
  --text: #202123;
  --muted: #6b6b6b;
  --line: #e5e5e5;
  --accent: #10a37f;
  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; color: var(--text); background: var(--page); }
button, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; height: 100dvh; overflow: hidden; }
.sidebar { width: 260px; flex: 0 0 260px; display: flex; flex-direction: column; padding: 14px 12px; color: #ececec; background: var(--sidebar); z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; }
.brand-mark, .avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; color: white; background: linear-gradient(135deg, #10a37f, #087f66); font-size: 12px; font-weight: 750; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 14px; }
.brand span { margin-top: 2px; color: #9b9b9b; font-size: 11px; }
.new-chat { width: 100%; padding: 11px 12px; border: 1px solid #404040; border-radius: 9px; color: #f5f5f5; background: transparent; text-align: left; transition: background .15s; }
.new-chat:hover { background: #292929; }
.new-chat span { margin-right: 8px; font-size: 18px; vertical-align: -1px; }
.history-label { padding: 22px 10px 8px; color: #858585; font-size: 11px; font-weight: 650; }
.history { overflow-y: auto; min-height: 0; }
.history-item { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0; padding: 9px 10px; border: 0; border-radius: 8px; color: #d8d8d8; background: transparent; text-align: left; }
.history-item:hover, .history-item.active { background: #2b2b2b; }
.history-item .title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.history-item .delete { opacity: 0; padding: 2px; color: #aaa; font-size: 15px; }
.history-item:hover .delete, .history-item.active .delete { opacity: 1; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 13px 10px 4px; border-top: 1px solid #333; color: #aaa; font-size: 12px; }
.sidebar-footer i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 9px #22c55e88; }
.main { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; height: 100dvh; }
.topbar { display: flex; align-items: center; min-height: 58px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(247,247,248,.9); backdrop-filter: blur(10px); }
.topbar div { flex: 1; text-align: center; }
.topbar strong, .topbar span { display: inline-block; }
.topbar strong { font-size: 14px; }
.topbar span { margin-left: 8px; color: var(--muted); font-size: 11px; }
.menu-button { display: none; padding: 7px; border: 0; background: transparent; font-size: 20px; }
.clear-button { padding: 7px 10px; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.messages { flex: 1; overflow-y: auto; padding-bottom: 150px; scroll-behavior: smooth; }
.welcome { display: grid; place-items: center; min-height: 70vh; padding: 40px 20px; text-align: center; }
.welcome .logo { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 17px; color: white; background: linear-gradient(135deg, #10a37f, #087f66); font-weight: 800; box-shadow: 0 10px 30px #10a37f33; }
.welcome h1 { margin: 0; font-size: 27px; letter-spacing: -.5px; }
.welcome p { max-width: 450px; margin: 10px auto 24px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); gap: 9px; }
.suggestion { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: #444; background: var(--card); text-align: left; font-size: 13px; box-shadow: 0 2px 8px #00000005; }
.suggestion:hover { border-color: #c8c8c8; background: #fcfcfc; }
.message { width: 100%; padding: 25px 20px; }
.message.assistant { background: #fff; border-block: 1px solid #eeeeee; }
.message-inner { display: flex; gap: 16px; max-width: 760px; margin: auto; }
.message.user .avatar { color: #343434; background: #e2e2e2; }
.content { min-width: 0; padding-top: 5px; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.content p { margin: 0 0 12px; }
.content p:last-child { margin-bottom: 0; }
.content pre { overflow-x: auto; padding: 14px; border-radius: 9px; color: #eee; background: #242424; }
.content code { padding: 2px 5px; border-radius: 4px; background: #ececec; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.content pre code { padding: 0; background: transparent; }
.typing::after { content: ""; display: inline-block; width: 7px; height: 16px; margin-left: 3px; background: var(--accent); vertical-align: -2px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer-wrap { position: absolute; right: 0; bottom: 0; left: 0; padding: 24px 20px 10px; background: linear-gradient(transparent, var(--page) 28%); }
.composer { display: flex; align-items: flex-end; gap: 10px; max-width: 760px; margin: auto; padding: 10px 10px 10px 16px; border: 1px solid #d1d1d1; border-radius: 16px; background: white; box-shadow: 0 5px 25px #00000012; }
.composer:focus-within { border-color: #aaa; box-shadow: 0 6px 28px #00000016; }
textarea { flex: 1; max-height: 180px; padding: 4px 0; resize: none; border: 0; outline: 0; color: var(--text); background: transparent; line-height: 1.5; }
textarea::placeholder { color: #999; }
.send-button { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 10px; color: white; background: var(--accent); }
.send-button:disabled { color: #aaa; background: #e5e5e5; cursor: default; }
.send-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.disclaimer { margin: 9px 0 0; color: #8a8a8a; text-align: center; font-size: 11px; }
.scrim { display: none; }
@media (max-width: 720px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .scrim { position: fixed; inset: 0; z-index: 10; background: #0006; }
  .scrim.show { display: block; }
  .menu-button { display: block; }
  .topbar { padding: 0 12px; }
  .suggestions { grid-template-columns: 1fr; width: min(100%, 360px); }
  .message { padding: 21px 14px; }
  .message-inner { gap: 11px; }
  .composer-wrap { padding-inline: 10px; }
}