:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #171717; background: #fff; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: #fff; }
button, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100dvh; }
.chat-panel { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: sticky; z-index: 2; top: 0; height: 68px; display: flex; justify-content: space-between; align-items: center; padding: 0 max(24px, calc((100% - 940px) / 2)); background: rgba(255,255,255,.92); border-bottom: 1px solid #ededed; backdrop-filter: blur(10px); }
.topbar h1 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.topbar p { margin: 4px 0 0; color: #777; font-size: 12px; }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #2a9d55; }
.clear-button { border: 1px solid #e3e3e3; border-radius: 8px; padding: 8px 11px; color: #555; background: #fff; font-size: 13px; }.clear-button:hover { background: #f7f7f7; color: #171717; }

.conversation { width: min(780px, calc(100% - 36px)); margin: 0 auto; padding: 44px 0 155px; display: flex; flex-direction: column; gap: 29px; }
.welcome { padding-top: min(14vh, 100px); text-align: center; }.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 19px; border-radius: 13px; background: linear-gradient(135deg, #e9d18d, #9c6d2c); color: #2a1d0c; font-family: Georgia, serif; font-size: 25px; font-weight: 700; }
.welcome h2 { margin: 0 0 9px; font-size: 27px; letter-spacing: -.04em; }.welcome p { max-width: 440px; margin: auto; color: #777; font-size: 15px; line-height: 1.55; }.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }.suggestion { border: 1px solid #dedede; border-radius: 999px; padding: 9px 13px; color: #4d4d4d; background: #fff; font-size: 13px; }.suggestion:hover { border-color: #bdbdbd; background: #fafafa; }
.message-row { display: flex; align-items: flex-start; gap: 13px; }.avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; font-size: 12px; font-weight: 700; }.user .avatar { color: #fff; background: #303030; }.assistant .avatar { color: #2a1d0c; background: linear-gradient(135deg, #e9d18d, #9c6d2c); font-family: Georgia, serif; font-size: 17px; }.bubble { max-width: 680px; padding: 5px 0; color: #292929; white-space: pre-wrap; font-size: 15px; line-height: 1.68; }.user .bubble { color: #171717; font-weight: 500; }.thinking { display: flex; align-items: center; height: 35px; gap: 4px; }.thinking i { width: 6px; height: 6px; border-radius: 50%; background: #999; animation: bounce 1s infinite ease-in-out; }.thinking i:nth-child(2) { animation-delay: .15s; }.thinking i:nth-child(3) { animation-delay: .3s; }@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.composer-wrap { position: fixed; bottom: 0; left: 0; right: 0; padding: 22px max(18px, calc((100% - 780px) / 2)) 15px; background: linear-gradient(transparent, #fff 32%); }.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 9px 8px 15px; border: 1px solid #d7d7d7; border-radius: 24px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.09); }.composer:focus-within { border-color: #aaa; box-shadow: 0 5px 20px rgba(0,0,0,.12); }textarea { width: 100%; max-height: 160px; resize: none; border: 0; outline: 0; padding: 6px 0; color: #202020; background: transparent; line-height: 1.45; }textarea::placeholder { color: #909090; }.send-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #202020; }.send-button:disabled { cursor: default; color: #9b9b9b; background: #e5e5e5; }.send-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.disclaimer { margin: 8px 0 0; color: #929292; text-align: center; font-size: 11px; }
@media (max-width: 600px) { .topbar { height: 60px; padding: 0 16px; }.topbar p { display: none; }.conversation { width: calc(100% - 28px); padding-top: 26px; }.welcome { padding-top: 8vh; }.welcome h2 { font-size: 23px; }.composer-wrap { padding: 15px 14px 12px; } }