:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f7f8fa; color: #17202a; }
* { box-sizing: border-box; }
body { margin: 0; }
button, textarea { font: inherit; }
.shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.sidebar { border-right: 1px solid #d9dee7; background: #ffffff; padding: 16px; }
.new-chat, .send { border: 0; background: #174ea6; color: #ffffff; cursor: pointer; border-radius: 6px; font-weight: 650; }
.new-chat { width: 100%; padding: 10px 12px; }
.conversation-list { list-style: none; margin: 18px 0; padding: 0; }
.conversation-button { width: 100%; border: 0; background: transparent; color: #293241; cursor: pointer; padding: 10px 8px; text-align: left; border-radius: 6px; }
.conversation-button.active { background: #edf3ff; color: #123c7c; }
.brand { color: #6a7483; font-size: 12px; line-height: 1.45; }
.main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.topbar { border-bottom: 1px solid #d9dee7; background: #ffffff; padding: 14px 20px; }
.topbar h1 { margin: 0; font-size: 18px; }
.capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.capability { border: 1px solid #d9dee7; border-radius: 999px; color: #465568; font-size: 12px; padding: 4px 8px; background: #fafbfc; }
.thread { overflow: auto; padding: 20px; }
.message { display: flex; margin-bottom: 14px; }
.message.user { justify-content: flex-end; }
.bubble { max-width: min(760px, 86%); border: 1px solid #d9dee7; border-radius: 8px; background: #ffffff; padding: 12px 14px; white-space: pre-wrap; }
.message.user .bubble { background: #174ea6; color: #ffffff; border-color: #174ea6; }
.composer { border-top: 1px solid #d9dee7; background: #ffffff; padding: 14px 20px; }
.composer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.prompt { min-height: 46px; max-height: 180px; resize: vertical; border: 1px solid #cbd3df; border-radius: 6px; padding: 12px; }
.send { align-self: end; min-width: 84px; min-height: 46px; padding: 0 16px; }
.tiers { display: flex; gap: 12px; margin-top: 10px; color: #465568; font-size: 13px; }
@media (max-width: 760px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } .bubble { max-width: 100%; } }