:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c0f0e; color: #f3f5f2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #24392f 0, #0c0f0e 42%); }
main { width: min(760px, 100%); min-height: 100vh; padding: 28px 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
header { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid #2c332f; }
.mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #e7b96f; color: #17130d; font: 800 22px Georgia, serif; }
h1 { font: 600 20px Georgia, serif; margin: 0; } header p { margin: 4px 0 0; color: #96a39b; font-size: 12px; }
.status { margin-left: auto; color: #96a39b; font-size: 12px; } .status.busy { color: #e7b96f; }
.messages { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 2px; }
.picker { margin: auto; width: min(520px, 100%); padding: 24px; border: 1px solid #2c332f; border-radius: 20px; background: #141816; text-align: center; }
.picker h2 { margin: 0 0 8px; font: 600 23px Georgia, serif; }
.picker p { color: #96a39b; font-size: 13px; line-height: 1.5; }
#restaurant-options { display: grid; gap: 10px; margin-top: 18px; }
.restaurant-option { padding: 14px; border: 1px solid #35443c; border-radius: 12px; background: #1a211d; color: #f3f5f2; cursor: pointer; font-weight: 700; }
.restaurant-option:hover { border-color: #e7b96f; color: #e7b96f; }
article { max-width: 78%; padding: 12px 15px; border-radius: 17px; line-height: 1.45; font-size: 15px; white-space: pre-wrap; }
article.assistant { align-self: flex-start; background: #1a211d; border: 1px solid #29332d; }
article.user { align-self: flex-end; background: #315d49; } article.error { align-self: center; color: #ffc8c8; background: #3a2020; }
article small { display: block; opacity: .6; margin-bottom: 4px; font-size: 10px; text-transform: uppercase; }
.controls { text-align: center; padding-top: 12px; border-top: 1px solid #2c332f; }
.controls.locked { opacity: .35; pointer-events: none; }
.live { width: min(360px, 100%); border: 1px solid #e7b96f; border-radius: 16px; padding: 14px 18px; background: #e7b96f; color: #201a11; font-weight: 800; cursor: pointer; }
.live span { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #315d49; }
.live.active { background: #d9605b; border-color: #d9605b; color: white; }
.live.active span { background: white; animation: pulse 1s infinite; }
.live-hint { margin: 8px 0 14px; color: #96a39b; font-size: 11px; }
.fallback-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; color: #606b65; font-size: 10px; }
.fallback-divider::before, .fallback-divider::after { content: ""; height: 1px; flex: 1; background: #2c332f; }
.record { border: 0; color: #f3f5f2; background: transparent; display: inline-flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; }
.record span { width: 72px; height: 72px; border-radius: 50%; background: #e7b96f; box-shadow: 0 0 0 8px #e7b96f1c; position: relative; }
.record span::after { content: ""; position: absolute; inset: 24px; border-radius: 4px; background: #201a11; }
.record.active span { background: #d9605b; box-shadow: 0 0 0 12px #d9605b20; animation: pulse 1.2s infinite; }
#hint { color: #7d8982; font-size: 11px; margin: 10px 0 16px; }
form { display: flex; gap: 8px; } input { flex: 1; border: 1px solid #303a34; border-radius: 12px; padding: 12px; background: #141816; color: inherit; }
form button { border: 0; border-radius: 12px; padding: 0 18px; background: #315d49; color: white; font-weight: 700; }
.reset { margin-top: 12px; border: 0; background: transparent; color: #7d8982; cursor: pointer; font-size: 11px; }
@keyframes pulse { 50% { transform: scale(1.05); } }
@media (min-width: 760px) { main { min-height: 760px; max-height: 92vh; } }