:root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: Canvas; color: CanvasText; }
main { width: min(100%, 48rem); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid color-mix(in srgb, CanvasText 24%, Canvas); }
h1 { font-size: 1.35rem; } h2 { font-size: 1.05rem; margin: 1.2rem 0 .6rem; }
section { margin-top: 1rem; }
label { display: block; margin: .7rem 0 .25rem; font-weight: 600; }
select, textarea, button { width: 100%; min-height: 48px; padding: .65rem .75rem; border: 1px solid color-mix(in srgb, CanvasText 34%, Canvas); border-radius: .55rem; background: Canvas; color: CanvasText; font: inherit; }
textarea { resize: vertical; }
button { width: auto; min-width: 7rem; cursor: pointer; }
button:disabled, select:disabled { opacity: .58; }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
.section-title, .actions { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.section-title h2 { margin-right: auto; }
#conversation { display: grid; gap: .65rem; margin: 1rem 0; }
.message { padding: .75rem; border-radius: .65rem; background: color-mix(in srgb, CanvasText 7%, Canvas); overflow-wrap: anywhere; white-space: pre-wrap; }
.message[data-role="user"] { margin-left: 8%; }
.message[data-role="assistant"] { margin-right: 8%; }
.message-role { display: block; margin-bottom: .25rem; font-size: .85rem; font-weight: 700; }
.approval { margin: 1rem 0; padding: .75rem; border: 1px solid color-mix(in srgb, CanvasText 30%, Canvas); border-radius: .65rem; }
.approval p { white-space: pre-wrap; overflow-wrap: anywhere; }
.choice { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; }
.choice input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15rem; }
.choice label { margin: 0; font-weight: 400; }
.choice button { min-height: 48px; }
#notice { min-height: 1.5em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }