:root { color: #e8eaf0; background: #202123; font-family: Inter, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
.hidden { display: none !important; }
.app { display: flex; height: 100dvh; min-height: 0; }
.sidebar { background: #17181a; display: flex; flex: 0 0 260px; flex-direction: column; height: 100%; overflow: hidden; padding: 1.2rem .8rem; }
.brand { align-items: center; display: flex; font-weight: 700; gap: .65rem; padding: .5rem .7rem 1.5rem; }
.brand-mark { align-items: center; background: #6d5dfc; border-radius: 8px; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.new-chat { background: transparent; border: 1px solid #45464b; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; padding: .7rem; text-align: left; }
.new-chat:hover, .text-button:hover { background: #2c2d30; }
.history-search { display: block; margin-top: .75rem; }
.history-search input { background: #202123; border: 1px solid #45464b; border-radius: 7px; color: inherit; font: inherit; padding: .55rem .7rem; width: 100%; }
.history-search input:focus { border-color: #a9a0ff; outline: 1px solid #a9a0ff; }
.chat-list { display: flex; flex-direction: column; gap: .2rem; margin-top: 1rem; overflow-y: auto; }
.chat-list-item { border-radius: 7px; position: relative; }
.chat-list-item:hover, .chat-list-item.active { background: #2c2d30; color: #fff; }
.chat-title, .rename-chat, .delete-chat { background: transparent; border: 0; color: #c8c9d0; cursor: pointer; font: inherit; }
.chat-title { overflow: hidden; padding: .65rem 4.75rem .65rem .7rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.rename-chat, .delete-chat { border-radius: 5px; line-height: 1; padding: .25rem .45rem; position: absolute; top: 50%; transform: translateY(-50%); }
.rename-chat { font-size: 1rem; right: 2rem; }
.delete-chat { border-radius: 5px; font-size: 1.2rem; line-height: 1; padding: .25rem .45rem; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); }
.chat-title:hover, .rename-chat:hover, .delete-chat:hover { color: #fff; }
.rename-chat:hover, .delete-chat:hover { background: #45464b; }
.empty-chat-list { color: #858791; font-size: .8rem; margin: .5rem .7rem; }
.sidebar-spacer { flex: 1; }
.user-panel { border-top: 1px solid #36373b; color: #b7b9c1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem .7rem .2rem; }
.text-button { background: transparent; border: 0; border-radius: 6px; color: #b7b9c1; cursor: pointer; padding: .4rem; text-align: left; }
.chat-shell { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; width: 100%; }
.chat-header { align-items: center; border-bottom: 1px solid #343539; display: flex; flex: 0 0 auto; justify-content: space-between; padding: 1.25rem 2rem; }
.eyebrow { color: #a9a0ff; font-size: .75rem; font-weight: 700; letter-spacing: .12em; margin: 0; text-transform: uppercase; }
h1 { font-size: 1.1rem; margin: .25rem 0 0; }
.model-selector { align-items: center; color: #c8c9d0; display: flex; font-size: .8rem; gap: .5rem; }
.model-selector select { background: #202123; border: 1px solid #4b4c53; border-radius: 999px; color: #c8c9d0; font: inherit; padding: .35rem .7rem; }
.status { color: #a9abb4; flex: 0 0 auto; padding: 1rem 2rem; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 2rem; }
.message { display: flex; margin-bottom: 2rem; }
.message.user { justify-content: flex-end; }
.message.assistant { justify-content: flex-start; }
.message-body { line-height: 1.65; min-width: 0; width: 100%; }
.message.user .message-body { background: #343541; border-radius: 16px; max-width: 80%; padding: .75rem 1rem; width: auto; }
.message.assistant .message-body { max-width: 90%; }
.thinking { color: #858791; display: inline-block; }
.thinking::after { animation: pulse 1.2s infinite; content: '…'; display: inline-block; width: 1.2em; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.message-body p { margin: 0 0 .8rem; }
.message-body p:last-child { margin-bottom: 0; }
.message-body pre { background: #17181a; border-radius: 8px; overflow-x: auto; padding: 1rem; }
.message-body code { background: #34353a; border-radius: 4px; padding: .1rem .3rem; }
.message-body pre code { background: transparent; padding: 0; }
.usage { color: #858791; font-size: .72rem; margin-top: .7rem; }
.composer { background: #2b2c2f; border: 1px solid #4a4b51; border-radius: 14px; flex: 0 0 auto; margin: 0 2rem 1.5rem; padding: .8rem 1rem .55rem; }
.composer textarea { background: transparent; border: 0; color: #fff; font: inherit; max-height: 180px; outline: 0; resize: none; width: 100%; }
.composer-footer { align-items: center; color: #858791; display: flex; font-size: .7rem; justify-content: space-between; padding-top: .5rem; }
.attachment-control { align-items: center; display: flex; gap: .5rem; min-width: 0; }
.attachment-control input { height: 0; opacity: 0; position: absolute; width: 0; }
.attach-button { align-items: center; border: 1px solid #4a4b51; border-radius: 6px; color: #c8c9d0; cursor: pointer; display: inline-flex; font-size: 1rem; height: 28px; justify-content: center; transform: rotate(-45deg); width: 28px; }
.attach-button:hover { background: #34353a; color: #fff; }
.document-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments { color: #b7b9c1; font-size: .72rem; margin-top: .45rem; }
.visually-hidden { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
.send-button, .icon-button { align-items: center; background: #f4f4f5; border: 0; border-radius: 7px; color: #202123; cursor: pointer; display: inline-flex; font-size: 1.2rem; height: 32px; justify-content: center; width: 32px; }
.icon-button { background: #ef7777; color: #fff; font-size: .7rem; margin-right: .4rem; }
.landing { margin: 18vh auto; max-width: 620px; padding: 2rem; text-align: center; }
.landing h1 { font-size: clamp(2.3rem, 7vw, 4rem); }
.subtitle { color: #a9abb4; font-size: 1.1rem; margin-bottom: 2rem; }
.button { border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; padding: .8rem 1rem; }
.primary { background: #6d5dfc; color: white; }
@media (max-width: 700px) { .sidebar { display: none; } .messages { padding: 1.5rem 1rem; } .composer { margin: 0 1rem 1rem; } .chat-header { padding: 1rem; } }