:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-weight: var(--fw-body-2); display: flex; flex-direction: column; }

header { background: var(--mor-navy); color: var(--fg-on-dark); display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); }
header img { height: 34px; display: block; }
header .spacer { flex: 1; }
header .who { font-size: 13px; color: var(--fg-on-dark-2); }
header a, header button.link { color: var(--fg-on-dark); font: inherit; font-size: 13px; text-decoration: none; border: 0; border-bottom: 1px solid var(--mor-teal); background: none; padding: 0; cursor: pointer; }
header a:hover, header button.link:hover { color: var(--mor-teal); }

main { flex: 1; overflow-y: auto; padding: 0 clamp(16px, 4vw, 48px); }
.wrap { max-width: 820px; margin: 0 auto; padding: 32px 0 24px; }

.hello { text-align: center; padding: 24px 0 8px; }
.hello img { width: 88px; height: auto; }
.hello h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(32px, 6vw, 48px); line-height: var(--lh-display); margin: 12px 0 8px; color: var(--mor-blue); }
.hello p { margin: 0 auto; max-width: 540px; color: var(--fg-2); font-size: 17px; line-height: var(--lh-body); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
.chip { background: var(--mor-white); color: var(--mor-blue); border: 1px solid var(--mor-fog); border-radius: var(--radius-pill); padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.chip:hover { border-color: var(--mor-teal); box-shadow: var(--shadow-sm); }
.chip:focus-visible, button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--mor-teal); outline-offset: 2px; }

.msg { margin: 20px 0; display: flex; }
.msg.user { justify-content: flex-end; }
.bubble { max-width: 88%; padding: 14px 18px; line-height: var(--lh-body); font-size: 16px; }
.user .bubble { background: var(--mor-blue); color: var(--fg-on-dark); border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); }
.bot .bubble { background: var(--mor-white); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--mor-teal); }
.bot .bubble p { margin: 0 0 12px; } .bot .bubble p:last-child { margin-bottom: 0; }
.bot .bubble ul, .bot .bubble ol { margin: 0 0 12px; padding-left: 22px; } .bot .bubble li { margin: 4px 0; }
.bubble .meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { font-size: 12px; background: var(--mor-mist); color: var(--mor-graphite); border-radius: var(--radius-pill); padding: 3px 10px; text-transform: capitalize; }
.rate { margin-left: auto; display: flex; gap: 4px; }
.rate button { background: none; border: 1px solid var(--mor-mist); border-radius: var(--radius-pill); padding: 3px 10px; font: inherit; font-size: 12px; color: var(--mor-graphite); cursor: pointer; }
.rate button:hover { border-color: var(--mor-teal); }
.rate button.on { background: var(--mor-teal); border-color: var(--mor-teal); color: var(--mor-white); }
.bubble.err { border-top-color: var(--mor-pink); }

.typing { display: flex; align-items: center; gap: 12px; color: var(--fg-2); font-size: 15px; }
.typing img { width: 34px; }
.dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mor-teal); margin: 0 2px; animation: b 1s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes b { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots span { animation: none; } }

.notice { max-width: 820px; margin: 0 auto 10px; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--mor-mist); color: var(--mor-graphite); border-radius: var(--radius-md); padding: 8px 14px; font-size: 13px; }
.notice button { background: none; border: 0; color: var(--mor-blue); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; white-space: nowrap; }

footer { background: var(--mor-white); border-top: 1px solid var(--mor-mist); padding: 14px clamp(16px, 4vw, 48px) 10px; }
form.ask { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
textarea { flex: 1; resize: none; font: inherit; font-size: 16px; line-height: 1.4; padding: 12px 16px; border: 1px solid var(--mor-fog); border-radius: var(--radius-md); background: var(--mor-white); color: var(--fg-1); max-height: 160px; min-height: 48px; }
textarea::placeholder { color: var(--fg-3); }
.send, .btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-button); font-size: 15px; background: var(--mor-teal); color: var(--mor-white); border: 0; border-radius: var(--radius-pill); padding: 0 26px; height: 48px; cursor: pointer; transition: background .14s, transform .14s; display: inline-flex; align-items: center; text-decoration: none; }
.send:hover, .btn:hover { background: #008793; } .send:active, .btn:active { transform: scale(.98); } .send:disabled { background: var(--mor-fog); cursor: not-allowed; }
.note { max-width: 820px; margin: 8px auto 0; font-size: 12px; color: var(--fg-3); text-align: center; }

/* login */
.center { flex: 1; display: grid; place-items: center; padding: 24px; }
.card { background: var(--mor-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-top: 4px solid var(--mor-teal); padding: 36px; max-width: 420px; text-align: center; }
.card img { width: 80px; } .card h1 { font-family: var(--font-display); text-transform: uppercase; color: var(--mor-blue); margin: 12px 0 8px; font-size: 36px; }
.card p { color: var(--fg-2); line-height: var(--lh-body); margin: 0 0 20px; }
.card .error { background: #fbeaf2; color: #7a2551; border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 18px; font-size: 14px; }

/* admin */
.admin { max-width: 1100px; margin: 0 auto; padding: 28px 0; }
.admin h1 { font-family: var(--font-display); text-transform: uppercase; color: var(--mor-blue); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.stat { background: var(--mor-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 14px 16px; }
.stat b { display: block; font-family: var(--font-display); font-size: 28px; color: var(--mor-blue); } .stat span { font-size: 12px; color: var(--fg-2); }
.filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .filters a { text-decoration: none; }
table { width: 100%; border-collapse: collapse; background: var(--mor-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mor-mist); vertical-align: top; } th { background: var(--mor-paper); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mor-graphite); }
td.q { max-width: 380px; } details summary { cursor: pointer; color: var(--mor-blue); }
.pager { margin-top: 14px; display: flex; gap: 8px; align-items: center; font-size: 14px; }