/* /mesazh: a voice note or a message, translated, and a reply sent back as audio. Loaded after static/d.css and
   static/read.css by templates/mesazh.html. Four steps down one column: bring it in, what came in, the translation,
   the reply. The translation is set large in Instrument Serif (what the person came for); everything else is Geist.
   Strict CSP: no inline style; static/mesazh.js only toggles attributes and classes. */

.msg-hero { background:
  radial-gradient(55% 85% at 92% 0%, #E9F1FB 0%, rgba(233,241,251,0) 70%),
  radial-gradient(45% 70% at 4% 12%, #FFF1D6 0%, rgba(255,241,214,0) 70%); }
.msg-hero .rd-h1 { max-width: 12ch; }

/* The steps keep a readable 760 px column on the hero's left edge: a centred 760 px wrapper put them 160-240 px to
   the right of the headline on a laptop (launch audit, design M9). */
.msg { padding-bottom: 104px; }
.msg > * { max-width: 760px; }
.msg-step { padding: 32px 0; border-top: 1px solid var(--line); }
.msg-step h2 { margin: 0 0 14px; font: 400 clamp(30px, 4vw, 42px)/1.05 var(--display); letter-spacing: -0.02em; color: var(--navy); }
.msg-how { margin: 0 0 20px; padding-left: 1.2em; display: grid; gap: 12px; font: 400 17px/1.55 var(--ui); color: var(--navy); }
/* the install button on its own line after its step, not mid-sentence (launch audit, design M9) */
.msg-how .msg-btn:not([hidden]) { display: flex; width: max-content; margin-top: 10px; }

.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.msg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 16px/1 var(--ui); color: var(--navy);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.msg-btn:hover { border-color: var(--navy); }
.msg-btn:active { transform: scale(.98); }
.msg-btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.msg-btn.primary:hover { background: #18254a; }
.msg-btn.ghost { background: transparent; }
.msg-btn[disabled], .msg-btn[aria-busy="true"] { opacity: .55; cursor: progress; }
.msg-btn.is-recording { background: var(--poppy); border-color: var(--poppy); color: #fff; }
.msg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--poppy); }
.is-recording .msg-dot { background: #fff; }
@media (prefers-reduced-motion: no-preference) { .is-recording .msg-dot { animation: msg-pulse 1.1s ease-in-out infinite; } }
@keyframes msg-pulse { 50% { opacity: .35; } }

/* the file input is the label's own: a real button for the keyboard, no visible native control */
.msg-file { position: relative; overflow: hidden; }
.msg-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.msg-file:focus-within { outline: 2px solid var(--cobalt); outline-offset: 3px; }

.msg-hint, .msg-private { margin: 14px 0 0; max-width: 40em; font: 400 15px/1.5 var(--ui); color: var(--navy-2); }
.msg-private::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }

audio#msg-audio { width: 100%; margin: 4px 0 0; }
.msg-quote { margin: 0; padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--mist); border-radius: 0 12px 12px 0;
  font: 400 18px/1.55 var(--ui); color: var(--navy); white-space: pre-wrap; overflow-wrap: anywhere; }

.msg-status { min-height: 1.5em; margin: 8px 0 0; font: 500 16px/1.4 var(--ui); color: var(--navy-2); }
.msg-status.is-error { color: var(--poppy); }
.msg-status:empty { min-height: 0; margin: 0; }

.msg-dir { margin: 0 0 10px; font: 600 13px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.msg-pair { display: grid; gap: 22px; }
@media (min-width: 760px) { .msg-pair { grid-template-columns: 1fr 1fr; gap: 40px; } }
.msg-k { display: block; margin: 0 0 8px; font: 500 14px/1.3 var(--ui); color: var(--navy-2); }
.msg-heard { margin: 0; font: 400 18px/1.6 var(--ui); color: var(--navy); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-trans { margin: 0; font: 400 clamp(26px, 3.2vw, 34px)/1.22 var(--display); letter-spacing: -0.01em; color: var(--navy);
  white-space: pre-wrap; overflow-wrap: anywhere; }

#msg-reply-text { width: 100%; min-height: 104px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
  font: 400 18px/1.5 var(--ui); color: var(--navy); resize: vertical; }
#msg-reply-text:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(27,79,168,.14); }
#msg-reply-out { margin-top: 22px; }
.msg [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .msg-btn { transition: none; } }