:root {
  color-scheme: dark;
  --bg: #0a0f1c;
  --bg-2: #0c1224;
  --panel: rgba(17, 24, 39, 0.7);
  --panel-2: rgba(20, 29, 52, 0.78);
  --border: rgba(148, 163, 184, 0.14);
  --text: #e8eefc;
  --muted: #90a0bf;
  --accent: #4f7cff;
  --accent-2: #775cff;
  --user: #152342;
  --assistant: #121826;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, rgba(79,124,255,.14), transparent 30%), linear-gradient(180deg, #0b1020, #09111f 50%, #090d18); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
body { min-height: 100vh; }
button, textarea { font: inherit; }
.app { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--border); padding: 22px 18px; background: linear-gradient(180deg, rgba(8, 12, 24, 0.92), rgba(10, 14, 26, 0.78)); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand__logo { width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0 8px rgba(79,124,255,.12); }
.brand__name { font-size: 18px; font-weight: 700; }
.brand__sub { font-size: 12px; color: var(--muted); }
.new-chat-btn { width: 100%; border: 1px solid rgba(148,163,184,.18); background: linear-gradient(135deg, rgba(79,124,255,.16), rgba(119,92,255,.16)); color: #fff; padding: 14px 16px; border-radius: 16px; cursor: pointer; }
.session-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 240px); overflow: auto; }
.session-item-wrap { border-radius: 16px; background: rgba(255,255,255,.02); border: 1px solid transparent; overflow: hidden; }
.session-item-wrap--active { border-color: rgba(79,124,255,.18); background: rgba(79,124,255,.06); }
.session-item { width: 100%; text-align: left; padding: 12px 12px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.session-item:hover { background: rgba(255,255,255,.03); }
.session-item--active { background: transparent; }
.session-item__title { display: block; font-size: 13px; line-height: 1.5; }
.session-item__meta { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.session-item__actions { display: flex; gap: 6px; padding: 0 12px 10px; }
.session-action-btn { flex: 1; min-height: 28px; border-radius: 10px; border: 1px solid rgba(148,163,184,.12); background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; font-size: 12px; }
.session-action-btn:hover { color: var(--text); border-color: rgba(148,163,184,.2); }
.session-action-btn--danger:hover { color: #fca5a5; border-color: rgba(248,113,113,.26); }
.sidebar__hint { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.main { min-width: 0; display: flex; flex-direction: column; padding: 22px; }
.topline { width: min(900px, 100%); margin: 0 auto 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); }
.topline__left { display: flex; align-items: center; gap: 10px; }
.topline__title { color: var(--text); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.topline__meta { font-size: 12px; }
.mobile-menu-btn { display: none; min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(148,163,184,.16); background: rgba(255,255,255,.04); color: var(--text); }
.hero { width: min(900px, 100%); margin: auto; padding: 44px 8px 12px; }
.hero.hidden { display: none; }
.hero__eyebrow { color: #9fb0d7; letter-spacing: .16em; font-size: 12px; margin-bottom: 10px; }
.hero h1 { margin: 0; font-size: clamp(34px, 6vw, 58px); line-height: 1.05; letter-spacing: -.05em; max-width: 780px; }
.hero p { max-width: 760px; color: var(--muted); line-height: 1.85; margin: 14px 0 0; }
.suggestions { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.suggestion { padding: 20px; min-height: 98px; text-align: left; color: var(--text); border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(24,33,60,.82), rgba(17,24,39,.7)); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.suggestion:hover { border-color: rgba(79,124,255,.28); transform: translateY(-1px); }
.messages { width: min(900px, 100%); margin: 0 auto; padding: 10px 0 170px; display: flex; flex-direction: column; gap: 16px; }
.message { border: 1px solid var(--border); border-radius: 22px; padding: 18px 18px; line-height: 1.78; word-break: break-word; box-shadow: 0 20px 50px rgba(0,0,0,.18); max-width: 100%; }
.message--user { background: linear-gradient(180deg, rgba(24,35,66,.95), rgba(17,28,52,.88)); margin-left: auto; width: min(82%, 680px); }
.message--assistant { background: linear-gradient(180deg, rgba(18,24,38,.92), rgba(12,17,28,.88)); width: min(100%, 860px); }
.message__role { display: block; margin-bottom: 8px; color: #9fb0d7; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.message__body p { margin: 0 0 12px; }
.message__body p:last-child { margin-bottom: 0; }
.message__body ul, .message__body ol { margin: 0 0 12px 20px; padding: 0; }
.message__body li { margin: 6px 0; }
.inline-code { padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.07); color: #cbd8ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.rich-code-wrap { position: relative; margin: 0 0 12px; }
.copy-code-btn { position: absolute; right: 10px; top: 10px; z-index: 1; min-width: 54px; height: 28px; border-radius: 10px; border: 1px solid rgba(148,163,184,.12); background: rgba(255,255,255,.06); color: var(--text); font-size: 12px; cursor: pointer; }
.rich-code { margin: 0; padding: 44px 16px 14px; border-radius: 16px; background: rgba(3, 7, 18, .85); border: 1px solid rgba(148,163,184,.12); overflow: auto; }
.rich-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.7; color: #dbe7ff; }
.composer { position: sticky; bottom: 20px; width: min(900px, calc(100vw - 360px)); margin: auto auto 0; background: rgba(11,17,30,.88); border: 1px solid rgba(148,163,184,.18); border-radius: 24px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
textarea { width: 100%; min-height: 88px; max-height: 220px; resize: vertical; background: transparent; border: none; outline: none; color: var(--text); font-size: 16px; line-height: 1.75; }
textarea::placeholder { color: #7f8aa3; }
.composer__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(148,163,184,.1); }
.status { color: var(--muted); font-size: 13px; }
.send-btn { min-width: 88px; min-height: 42px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; cursor: pointer; box-shadow: 0 10px 24px rgba(79,124,255,.34); }
.send-btn:disabled { opacity: .6; cursor: wait; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 82vw; max-width: 320px; z-index: 30; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 20px 0 50px rgba(0,0,0,.35); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .main { padding: 14px; }
  .topline { margin-bottom: 2px; }
  .topline__meta { display: none; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .hero h1 { font-size: 36px; }
  .suggestions { grid-template-columns: 1fr; }
  .message--user, .message--assistant { width: 100%; }
  .composer { width: 100%; bottom: 10px; }
}