/* V4: lighter visual weight; touch targets and viewport layout stay intact. */
header { padding: 18px 22px; border-bottom-color: #192633; gap: 12px; }
.brand { font-size: 1.15rem; font-weight: 550; letter-spacing: -.02em; }
#brand-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
#history { padding-top: 28px; }
.user { background: #20394d; border-color: #2b4559; border-radius: 20px 20px 5px 20px; padding: 12px 16px; }
.message { margin-bottom: 26px; }
.assistant { padding: 0 3px; }
.feedback-line { color: #dbe6ee; }
.message-content .feedback-line { margin: 0 0 5px; }
.composer-shell { padding-top: 10px; }
.composer { border-color: #2d4356; border-radius: 28px; padding: 6px; box-shadow: none; background: #111e2b; }
textarea { padding-left: 14px; }
.actions { gap: 2px; }
.icon-button { border-radius: 50%; background: transparent; color: #a7bece; }
.send { background: #a1e4f5; color: #102231; }
.composer-meta { font-size: .68rem; color: #8396a8; }
#welcome { margin-top: clamp(20px, 10vh, 90px); }
#welcome h1 { font-size: 1.8rem; font-weight: 550; }
.options button, .restore { border-radius: 18px; background: #142331; border-color: #30485c; }
#reply-context { display: flex; align-items: center; gap: 12px; padding-left: 12px; margin-bottom: 6px; border-left: 2px solid #80bacb; color: #b3c8d7; font-size: .8rem; }
#reply-context span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#cancel-reply { margin-left: auto; flex: none; min-width: 44px; background: transparent; border: 0; color: #a5bdce; font-size: 1.4rem; }
@media(max-width:420px) { .brand { font-size: 1.1rem; } }

/* V5: feedback cards, copying and waiting animation. */
.message { position: relative; padding-bottom: 22px; }
.user { padding-bottom: 32px; }
.copy-message { position: absolute; bottom: -4px; right: 0; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #91a9bb; font-size: 1rem; }
.user .copy-message { right: 4px; bottom: 0; }
.message-content { user-select: text; -webkit-user-select: text; }
.user .message-content { user-select: all; -webkit-user-select: all; }
.clarification-card { border: 1px solid #304557; background: #101c28; border-radius: 18px; padding: 16px; margin: 0 0 20px; }
.card-title { font-size: .8rem; color: #9bb6c8; overflow-wrap: anywhere; }
.clarification-card h2 { font-size: 1rem; font-weight: 550; line-height: 1.5; margin: 6px 0 12px; }
.options .danger, #recording-composer .danger { color: #ff9595; }
.inline-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline-picker input { min-height: 44px; max-width: 100%; min-width: 0; color: #e7edf5; background: #182938; border: 1px solid #496276; border-radius: 10px; padding: 8px; font: inherit; }
.inline-picker label { max-width: 100%; }
.inline-picker button { border: 1px solid #496276; border-radius: 12px; background: #203a4c; color: #dceef6; padding: 8px 12px; }
.selection-status { font-size: .85rem; line-height: 1.5; color: #a1e4f5; margin: 12px 0 0; overflow-wrap: anywhere; }
.selection-status:empty { display: none; }
.answered .options { display: none; }
.answered { padding-top: 12px; padding-bottom: 12px; }
.answered h2 { margin-bottom: 0; }
.loading { display: inline-flex; gap: 5px; letter-spacing: 0; }
.loading span { display: inline-block; animation: waiting-bounce 1.15s ease-in-out infinite; }
.loading span:nth-child(2) { animation-delay: .15s; }
.loading span:nth-child(3) { animation-delay: .3s; }
@keyframes waiting-bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .loading span { animation: none; } }