:root { color-scheme: light; font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #19242d; background: #edf1f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: linear-gradient(160deg, #f7f7f2 0%, #e7eeec 55%, #dbe7e5 100%); }
button, input, select, textarea { font: inherit; }
input { width: 100%; min-height: 44px; font-size: 1rem; border: 1px solid #adbbb7; border-radius: 10px; padding: .72rem; }
.topbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.1rem max(1rem, env(safe-area-inset-left)); color: white; background: #173f3a; }
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: .1rem; font-size: clamp(1.35rem, 4vw, 1.8rem); } h2 { font-size: 1.12rem; margin-bottom: .4rem; }
.eyebrow { font-size: .73rem; letter-spacing: .12em; opacity: .75; text-transform: uppercase; }
.disclaimer { margin: 0; max-width: 20rem; font-size: .8rem; opacity: .86; }
main { width: min(100%, 900px); margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)); }
.card { border: 1px solid #d0d9d6; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 32px rgba(26,56,51,.08); padding: 1rem; margin-bottom: 1rem; }
.setup { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: end; gap: .8rem; }
label { display: grid; gap: .35rem; font-size: .83rem; font-weight: 650; }
select, textarea { width: 100%; border: 1px solid #adbbb7; border-radius: 10px; background: white; color: inherit; padding: .72rem; }
textarea:focus, select:focus, button:focus-visible { outline: 3px solid rgba(24,113,100,.25); outline-offset: 2px; border-color: #187164; }
button { min-height: 44px; border: 0; border-radius: 10px; padding: .65rem 1rem; color: white; background: #176f62; font-weight: 700; cursor: pointer; }
button:hover { background: #105d52; } button:disabled { cursor: not-allowed; background: #9aaba8; }
button.secondary, button.quiet { color: #176f62; background: #edf5f3; } button.quiet { min-height: 38px; }
.status { margin: 0; font-size: .82rem; color: #596761; }.status.ready { color: #176f62; }.status.error { color: #9c3f35; }
.session-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.session-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.known-lead { margin-block: .7rem; padding: .7rem; background: #f1f6f5; border-radius: 10px; font-size: .82rem; overflow-wrap: anywhere; }
.known-lead dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; margin: 0; }
.known-lead dd { margin: 0; white-space: pre-wrap; }
.messages { height: min(52dvh, 520px); min-height: 270px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .7rem; padding: 1rem .25rem; border-block: 1px solid #e0e6e4; scroll-behavior: smooth; }
.message { max-width: 84%; margin: 0; padding: .72rem .86rem; border-radius: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.employee { align-self: flex-end; color: white; background: #176f62; border-bottom-right-radius: 4px; }
.message.customer { align-self: flex-start; background: #eef1ef; border-bottom-left-radius: 4px; }
.explanation { align-self: flex-start; max-width: 88%; color: #58645f; font-size: .82rem; }.explanation p { margin: .4rem 0 0; }
.pending { margin: .75rem 0; padding: .75rem; border-left: 4px solid #d18a28; background: #fff6e7; }.pending p { margin: .35rem 0; white-space: pre-wrap; }
.composer { position: sticky; bottom: 0; padding-top: .8rem; background: white; }.composer label { display: flex; justify-content: space-between; }.composer textarea { margin-top: .35rem; resize: vertical; }
.actions { display: flex; gap: .6rem; margin-top: .6rem; }.actions button:first-child { flex: 1; }
.judgment > p, .notice { color: #596761; }.judgment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }.judgment textarea { min-height: 70px; }
.review-row { padding: .8rem 0; border-top: 1px solid #e0e6e4; }.review-row h3 { margin-bottom: .35rem; }.review-row p { margin-bottom: .4rem; }
blockquote { margin: .4rem 0; padding: .55rem .7rem; border-left: 3px solid #84aaa3; background: #f1f6f5; }
.score { font-size: 1.35rem; font-weight: 800; color: #176f62; }.critical { padding: .7rem; color: #8c251d; background: #fdecea; font-weight: 800; border-radius: 10px; }
.replacement { margin: .8rem 0; padding: .85rem; background: #f2f0ff; border-radius: 12px; }.replacement p { margin-bottom: 0; }
@media (max-width: 700px) {
  .topbar { align-items: start; flex-direction: column; }.setup { grid-template-columns: 1fr 1fr; }.setup > div { grid-column: 1 / -1; }.setup button { grid-column: 1 / -1; }
  main { padding-inline: .65rem; }.card { border-radius: 14px; padding: .85rem; }.messages { height: 48dvh; }.judgment-grid { grid-template-columns: 1fr; }
}
@media (max-width: 390px) { .setup { grid-template-columns: 1fr; }.setup > div, .setup button { grid-column: auto; }.message { max-width: 92%; } }