/* Chat page (story ab32118f) */
.chat-page { padding-top: 16px; padding-bottom: 16px; }
.chat-shell { display: flex; gap: 16px; height: calc(100vh - 170px); min-height: 420px; }

.chat-sidebar { display: flex; flex-direction: column; width: 260px; min-width: 200px; }
.chat-conversation-list { overflow-y: auto; flex: 1 1 auto; }
.chat-conversation-item { border-radius: 8px; }
.chat-conversation-item.active { background: rgba(255, 255, 255, 0.08); }
.chat-conversation-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-model-select { flex: 0 0 auto; }

.chat-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.chat-thread { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px; }
.chat-empty { text-align: center; margin-top: 18vh; opacity: 0.7; }

.chat-turn { margin-bottom: 14px; max-width: 85%; }
.chat-turn.user { margin-left: auto; }
.chat-turn.assistant { margin-right: auto; }
.chat-turn-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin-bottom: 2px; }
.chat-turn.user .chat-turn-role { text-align: right; }
.chat-turn-body { border-radius: 12px; padding: 10px 14px; white-space: pre-wrap; word-break: break-word; }
.chat-turn.user .chat-turn-body { background: rgba(64, 119, 255, 0.18); }
.chat-turn.assistant .chat-turn-body { background: rgba(255, 255, 255, 0.05); white-space: normal; }

.markdown-body pre { position: relative; background: rgba(0, 0, 0, 0.45); border-radius: 8px; padding: 12px; overflow-x: auto; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; }
.markdown-body code { font-family: "JetBrains Mono", monospace; }
.markdown-body p:last-child { margin-bottom: 0; }

.code-copy-host .code-copy-btn { position: absolute; top: 6px; right: 6px; font-size: 0.7rem; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; }
.code-copy-host .code-copy-btn:hover { background: rgba(255, 255, 255, 0.18); }

.chat-cursor { animation: chat-cursor-blink 1s steps(1) infinite; }
@keyframes chat-cursor-blink { 50% { opacity: 0; } }

.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 4px 0 4px; }
.chat-composer { flex: 1 1 auto; resize: none; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; padding: 10px 14px; outline: none; }
.chat-composer:focus { border-color: rgba(118, 158, 255, 0.7); }

@media (max-width: 760px) {
    .chat-shell { flex-direction: column; height: auto; }
    .chat-sidebar { width: 100%; flex-direction: column-reverse; }
    .chat-thread { max-height: 55vh; }
}