/* =====================================================================
   RUNDOWN SUPPORT ASSISTANT · STYLES        (2026-07-28)
   Brand law: docs/21. Forest structure, cream paper, gold accent only as
   an accent. Bebas for the heading, Inter for body, JetBrains Mono for
   anything that is data. No third-party font request: the support page
   already self-hosts the faces.
   Loaded ONLY by landing/support.html. It is not on any player surface.
   ===================================================================== */

.rda {
  border: 1.5px solid rgba(11, 77, 60, 0.25);
  border-top: 4px solid var(--rd-forest, #0B4D3C);
  border-radius: 12px;
  background: #FFFDF8;
  margin: 24px 0 34px;
  overflow: hidden;
}

.rda-head {
  background: var(--rd-forest, #0B4D3C);
  color: var(--rd-cream, #F5F1E8);
  padding: 16px 20px 14px;
}
.rda-head h2 {
  font-family: var(--rd-display, 'Bebas Neue'), sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  color: var(--rd-cream, #F5F1E8);
}
/* The honesty line. It is not fine print and it does not get shrunk to
   fine print: "this is software, not a person" is the first thing a user
   reads, every time, before they type anything. */
.rda-what {
  font-family: var(--rd-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-gold, #F4C430);
  margin: 0;
}
.rda-scope {
  margin: 8px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.88);
}

.rda-log {
  padding: 16px 20px 4px;
  max-height: 460px;
  overflow-y: auto;
}
.rda-msg { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.rda-who {
  font-family: var(--rd-mono, monospace);
  /* 0.66rem measured 10.6px; 0.6875rem = 11px, the phone floor */
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rd-cool-gray, #6B7571);
}
.rda-bubble {
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 0;
}
.rda-msg--user .rda-bubble {
  background: var(--rd-cream-2, #EDE7D6);
  color: var(--rd-near-black, #0F1311);
}
.rda-msg--bot .rda-bubble {
  background: #FFFFFF;
  border: 1px solid rgba(11, 77, 60, 0.18);
  border-left: 3px solid var(--rd-gold, #F4C430);
  color: var(--rd-near-black, #0F1311);
}
/* The canon route is not an error state and is not styled as one. It is
   the product working, so it gets the forest band, not a red one. */
.rda-msg--canon .rda-bubble {
  border-left-color: var(--rd-forest, #0B4D3C);
  border-left-width: 4px;
  background: #F7FAF8;
}
.rda-diag {
  font-family: var(--rd-mono, monospace);
  font-size: 0.72rem;
  color: var(--rd-cool-gray, #6B7571);
  margin: 0;
  word-break: break-word;
}
.rda-notice {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #7A5A12;
  background: rgba(244, 196, 48, 0.16);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}

/* --- the handoff block. Same shape as the in-app report sheet on
   purpose: the whole message is printed BEFORE either door, so nothing
   can be sent that the user has not read. --- */
.rda-hand {
  margin: 10px 0 2px;
  padding: 12px 14px;
  border: 1px dashed rgba(11, 77, 60, 0.35);
  border-radius: 10px;
  background: #FBFAF5;
}
.rda-hand > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rd-forest, #0B4D3C);
}
.rda-pre {
  font-family: var(--rd-mono, monospace);
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--rd-cream, #F5F1E8);
  border-radius: 6px;
  padding: 10px;
  margin: 10px 0 0;
  max-height: 240px;
  overflow-y: auto;
}
.rda-doors { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.rda-btn {
  font-family: var(--rd-body, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 16px;
  border: 2px solid var(--rd-forest, #0B4D3C);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}
.rda-btn--primary { background: var(--rd-forest, #0B4D3C); color: var(--rd-cream, #F5F1E8); }
.rda-btn--primary:hover { background: var(--rd-forest-2, #0E5C48); }
.rda-btn--second { background: transparent; color: var(--rd-forest, #0B4D3C); }
.rda-btn--second:hover { background: rgba(11, 77, 60, 0.08); }
.rda-addr {
  font-size: 0.8rem;
  margin: 10px 0 0;
  color: var(--rd-cool-gray, #6B7571);
}
.rda-addr code {
  font-family: var(--rd-mono, monospace);
  font-weight: 700;
  color: var(--rd-forest, #0B4D3C);
  user-select: all;
}
.rda-state { font-size: 0.8rem; margin: 8px 0 0; color: var(--rd-forest, #0B4D3C); display: none; }
.rda-state.is-shown { display: block; }
.rda-state.is-warn { color: #8A3B22; }

/* --- composer --- */
.rda-form {
  border-top: 1px solid rgba(11, 77, 60, 0.16);
  padding: 14px 20px 18px;
  background: #FBFAF5;
}
.rda-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--rd-forest, #0B4D3C); margin: 0 0 6px; }
.rda-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--rd-body, sans-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1.5px solid rgba(11, 77, 60, 0.3);
  border-radius: 8px;
  background: #fff;
  color: var(--rd-near-black, #0F1311);
  resize: vertical;
  min-height: 76px;
}
.rda-input:focus { outline: 2px solid var(--rd-gold, #F4C430); outline-offset: 1px; }
.rda-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; flex-wrap: wrap; }
.rda-hint { font-size: 0.76rem; color: var(--rd-cool-gray, #6B7571); margin: 0; flex: 1 1 200px; }
.rda-btn[disabled] { opacity: 0.5; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .rda-msg { animation: rda-in 160ms ease-out; }
  @keyframes rda-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}