/* Indiaexcite - Kazakhstan Representative, event interface.
   Desktop-first, usable on mobile. Calm, professional, no developer console. */

:root {
  --ink:            #10233a;
  --ink-soft:       #41566f;
  --ink-faint:      #6d819a;
  --line:           #dfe6ef;
  --line-soft:      #edf1f6;
  --page:           #f4f7fa;
  --panel:          #ffffff;
  --accent:         #0b5fa5;   /* steppe blue */
  --accent-dark:    #084d86;
  --accent-wash:    #eaf3fb;
  --gold:           #b8860b;
  --gold-wash:      #fdf6e6;
  --green:          #1f7a4d;
  --amber:          #b06a00;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow:         0 1px 2px rgba(16,35,58,.06), 0 8px 24px rgba(16,35,58,.06);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

/* Desktop: the shell owns the viewport height so the transcript scrolls inside
   the panel and the composer stays put. Mobile reverts to page scrolling. */
.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 20px;
  overflow: hidden;
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

.brand-mark {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent) 0%, #0a4f8a 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: .5px;
}

.brand-text { min-width: 0; }

.brand-text h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}

.brand-text p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.masthead-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* connection state */
.conn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* One indicator, one colour. */
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 8px; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}

.lang-btn {
  border: 0; background: transparent;
  padding: 6px 14px;
  font: inherit; font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.lang-btn:hover { background: var(--line-soft); }
.lang-btn.is-active { background: var(--accent); color: #fff; }

.btn-reset {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  padding: 7px 15px;
  border-radius: 999px;
  font: inherit; font-size: 13.5px;
  cursor: pointer;
}
.btn-reset:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- layout ---------- */
.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  padding-top: 20px;
  padding-bottom: 4px;
  flex: 1 1 auto;
  min-height: 0;
}

.conversation {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 0;
  overflow: hidden;
}

.transcript {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- messages ---------- */
.msg { display: flex; flex-direction: column; gap: 9px; max-width: 86%; }
.msg-bot { align-self: flex-start; }
.msg-user { align-self: flex-end; align-items: flex-end; }

.bubble {
  background: var(--accent-wash);
  border: 1px solid #d6e6f5;
  border-radius: var(--radius);
  border-top-left-radius: 4px;
  padding: 12px 15px;
  font-size: 15.5px;
  color: var(--ink);
}

.msg-user .bubble {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  border-top-left-radius: var(--radius);
  border-top-right-radius: 4px;
}

/* source card — what the delegation information says */
.card {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14.8px;
}

.card-source {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-soft);
}

.card-proposal {
  background: var(--gold-wash);
  border: 1px solid #f0e3c0;
  border-left: 4px solid var(--gold);
}

.card-proof {
  background: #f3f8f5;
  border: 1px solid #d9eae1;
  border-left: 4px solid var(--green);
}

.card-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.card-source   .card-label { color: var(--ink-soft); }
.card-proposal .card-label { color: var(--gold); }
.card-proof    .card-label { color: var(--green); }

.card-org { font-weight: 650; margin-bottom: 4px; }

.card-overview { margin: 0 0 10px; }

.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.fact-list li { display: flex; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.fact-key {
  flex: 0 0 82px;
  color: var(--ink-faint);
  text-transform: capitalize;
}
.fact-value { min-width: 0; overflow-wrap: anywhere; }

/* R6 CORRECTION A. A fact with no approved heading in the visitor's language
   carries no heading element at all. Without this rule the value would still
   sit in the second flex slot, leaving an 82px blank column where the English
   heading used to be - a dangling gap is exactly what the correction forbids. */
.fact-list li.fact-unlabelled { gap: 0; }


.chip-unverified {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff5e6;
  border: 1px solid #f0dcb8;
  color: var(--amber);
  font-size: 11.5px;
  font-weight: 600;
}

.card-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }

.warn-list { margin: 9px 0 0; padding-left: 18px; font-size: 13.2px; color: var(--amber); }

.proof-name { font-weight: 650; }

/* ---------- choices ---------- */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }

.choice {
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit; font-size: 14.2px;
  cursor: pointer;
  text-align: left;
}
.choice:hover { background: var(--accent); color: #fff; }

.choice-yes { background: var(--accent); color: #fff; }
.choice-yes:hover { background: #084d86; }

.choice-no, .choice-route {
  border-color: var(--line);
  color: var(--ink-soft);
}
.choice-no:hover, .choice-route:hover { border-color: var(--ink-soft); background: var(--line-soft); color: var(--ink); }

/* ---------- composer ---------- */
.composer {
  display: flex;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
}

.composer-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  font: inherit; font-size: 15.2px;
  color: var(--ink);
  background: #fbfcfe;
}
.composer-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11,95,165,.12);
}

.btn-send {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 11px 24px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.btn-send:hover { background: #084d86; }
.btn-send:disabled { background: #9db9d2; cursor: default; }

/* ---------- rail ---------- */
.rail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 16px;
}

.rail-heading {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.route-cards { display: grid; gap: 9px; }

.route-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: #fbfcfe;
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font: inherit;
  cursor: pointer;
}
.route-card:hover { border-color: var(--accent); background: var(--accent-wash); }
.route-card.is-active { border-color: var(--accent); background: var(--accent-wash); }

.route-card-label { display: block; font-size: 14.5px; font-weight: 620; color: var(--ink); }
.route-card-proof { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

.rail-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.rail-note { margin: 0; font-size: 12.4px; color: var(--ink-faint); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* Stacked layout: let the page scroll and give the transcript a real height. */
  .shell { height: auto; min-height: 100vh; overflow: visible; }
  .main { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .rail { position: static; order: 2; }
  .conversation { order: 1; height: 70vh; min-height: 420px; }
  .msg { max-width: 94%; }
}

@media (max-width: 560px) {
  .shell { padding: 0 12px 16px; }
  .masthead { padding: 14px 0 12px; gap: 12px; }
  .brand-text h1 { font-size: 16.5px; }
  .brand-text p { display: none; }
  .transcript { padding: 16px 14px 6px; }
  .composer { padding: 12px 12px 14px; }
  .btn-send { padding: 11px 18px; }
  /* R7 owner replay. A 66px heading column leaves the value about 150px at
     phone width, so "The Flower Business" wrapped into a narrow ribbon and
     the heading and value read as one run-on string. The pair stacks here
     instead. This rule lives in THIS block deliberately: an earlier block
     setting the same property would lose to the flex-basis below it. */
  .fact-list li { flex-direction: column; gap: 1px; }
  .fact-key { flex: 0 0 auto; }
}

/* ===================================================================
   KZ-DEMO-01 EVENT VOICE OVERLAY — R2
   Rewritten for R2 correction 8. The R1 block tinted buttons on hover but
   never changed anything a person could see at a glance, put the consent
   notice in the right rail (below the fold on a phone), hid the microphone
   entirely before consent, and let the rail run past the bottom of a
   1366x768 laptop so the lead form's Send button could not be reached.
   =================================================================== */

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Everything focusable gets the SAME visible ring. Someone working the stand
   by keyboard needs to see where they are without hunting for it. */
.btn-mic:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible,
.btn-stop:focus-visible, .btn-send:focus-visible, .btn-reset:focus-visible,
.lang-btn:focus-visible, .draft-text:focus-visible, .composer-input:focus-visible,
.lead input:focus-visible, .lead textarea:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* -- microphone ---------------------------------------------------- */
.btn-mic {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 0.65rem 1.15rem; font: inherit; font-weight: 600;
  background: #1d4ed8; color: #fff;
  transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
  min-height: 44px;
}
.btn-mic:hover:not(:disabled) {
  background: #1e40af;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35);
}
.btn-mic:active:not(:disabled) {
  background: #1e3a8a;
  transform: scale(0.96);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
}
.btn-mic:disabled {
  background: #cbd5e1; color: #64748b; cursor: not-allowed; box-shadow: none;
}
.btn-mic[data-voice="listening"] { background: #dc2626; animation: kzpulse 1.2s infinite; }
.btn-mic[data-voice="listening"]:hover:not(:disabled) { background: #b91c1c; }
.btn-mic[data-voice="processing"] { background: #6b7280; }
.btn-mic[data-voice="speaking"] { background: #059669; }
.mic-glyph { display: inline-flex; flex: 0 0 auto; }
@keyframes kzpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50%      { box-shadow: 0 0 0 0.6rem rgba(220, 38, 38, 0); }
}

/* -- voice bar ------------------------------------------------------ */
.voice-bar {
  display: flex; align-items: center; gap: 0.55rem;
  flex-wrap: wrap; padding: 0.45rem 0.1rem 0; min-height: 2.2rem;
}
.voice-state { font-size: 0.85rem; color: #6b7280; font-weight: 600; }
.voice-state[data-voice="listening"] { color: #dc2626; }
.voice-state[data-voice="speaking"]  { color: #059669; }
.voice-countdown {
  font-size: 0.85rem; font-weight: 700; color: #dc2626;
  font-variant-numeric: tabular-nums;
}
.voice-error {
  margin: 0.5rem 0 0; padding: 0.55rem 0.75rem;
  border-radius: 0.5rem; background: #fef2f2; border: 1px solid #fecaca;
  color: #991b1b; font-size: 0.88rem; font-weight: 600;
}

/* Stop and Cancel are RED and at least 40px tall. At an event they are
   pressed in a hurry, often on a phone, often by a visitor rather than by
   whoever is hosting, so they must not look like secondary text links. */
.btn-stop {
  border: 1px solid #dc2626; background: #fff; color: #b91c1c;
  border-radius: 0.5rem; padding: 0.4rem 0.85rem;
  font: inherit; font-size: 0.86rem; font-weight: 700;
  cursor: pointer; min-height: 40px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-stop:hover  { background: #fef2f2; border-color: #b91c1c; }
.btn-stop:active { background: #fee2e2; transform: scale(0.97); }

/* -- buttons -------------------------------------------------------- */
.btn-primary {
  border: 0; border-radius: 0.5rem; padding: 0.55rem 1rem;
  font: inherit; font-weight: 600; background: #1d4ed8; color: #fff;
  cursor: pointer; min-height: 40px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.08s;
}
.btn-primary:hover:not(:disabled) {
  background: #1e40af; box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
}
.btn-primary:active:not(:disabled) { background: #1e3a8a; transform: scale(0.98); }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }

.btn-ghost {
  border: 1px solid #cbd5e1; border-radius: 0.5rem;
  padding: 0.42rem 0.8rem; font: inherit; font-size: 0.85rem;
  background: #fff; color: #334155; cursor: pointer;
  text-decoration: none; display: inline-block; min-height: 36px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-ghost:hover {
  background: #eef2ff; border-color: #1d4ed8; color: #1e3a8a;
}
.btn-ghost:active { background: #e0e7ff; }
.btn-share { margin-left: auto; }

/* -- consent, now beside the composer ------------------------------- */
.consent {
  border: 1px solid #fcd34d; background: #fffbeb;
  border-radius: 0.75rem; padding: 0.8rem; margin: 0.6rem 0;
}
.consent-text { font-size: 0.86rem; line-height: 1.5; color: #78350f; margin: 0 0 0.7rem; }
.consent-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.consent-hint { font-size: 0.8rem; color: #92400e; }

/* -- draft ---------------------------------------------------------- */
.draft {
  border: 2px solid #1d4ed8; border-radius: 0.75rem;
  padding: 0.7rem 0.8rem; margin: 0.6rem 0; background: #f8fafc;
}
.draft-label {
  display: block; font-size: 0.78rem; font-weight: 700; color: #1d4ed8;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem;
}
.draft-text {
  width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1;
  border-radius: 0.45rem; padding: 0.5rem 0.6rem; font: inherit; resize: vertical;
}
.draft-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.draft-warn { margin: 0.5rem 0 0; font-size: 0.85rem; color: #b45309; font-weight: 600; }

/* -- contact and lead ----------------------------------------------- */
.contact {
  border: 1px solid #e2e8f0; border-radius: 0.75rem;
  padding: 0.85rem; margin-bottom: 1rem; background: #fff;
}
.contact-name { font-weight: 700; margin: 0.3rem 0 0.1rem; }
.contact-role { font-size: 0.82rem; color: #64748b; margin: 0 0 0.6rem; }
.contact-actions { display: flex; flex-direction: column; gap: 0.4rem; }

.lead-invite {
  border: 1px solid #bfdbfe; background: #eff6ff;
  border-radius: 0.75rem; padding: 0.85rem; margin-bottom: 1rem;
}
.lead-invite-text { margin: 0 0 0.7rem; font-size: 0.9rem; color: #1e3a8a; font-weight: 600; }
.lead-invite-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.lead {
  border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0.85rem;
  background: #fff; display: flex; flex-direction: column; gap: 0.3rem;
}
.lead-label { font-size: 0.8rem; font-weight: 600; color: #475569; margin-top: 0.35rem; }
.lead input[type="text"], .lead input[type="email"], .lead textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1;
  border-radius: 0.45rem; padding: 0.45rem 0.55rem; font: inherit; font-size: 0.88rem;
}
.lead-consent {
  display: flex; gap: 0.45rem; align-items: flex-start;
  font-size: 0.82rem; color: #475569; line-height: 1.4; margin-top: 0.5rem;
}
.lead-result { font-size: 0.85rem; font-weight: 600; color: #047857; margin: 0.4rem 0 0; }
.field-error { margin: 0.15rem 0 0; font-size: 0.78rem; color: #b91c1c; font-weight: 600; }

.msg-note { margin: 0.5rem 0; }
.note-bubble {
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 0.6rem;
  padding: 0.5rem 0.7rem; font-size: 0.86rem; color: #78350f;
}

/* -- 1366x768, the laptop this will actually run on ------------------
   The rail sat in normal flow, so on a 768px-tall screen the lead form's
   Send button fell below the viewport with no way to reach it: .shell
   fills the height so the PAGE does not scroll, and the rail had no
   scroller of its own. It gets one, and the form is allowed to compress. */
@media (min-width: 821px) {
  .rail {
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
  }
}
@media (max-height: 820px) {
  .lead { gap: 0.15rem; padding: 0.7rem; }
  .lead-label { margin-top: 0.2rem; font-size: 0.76rem; }
  .lead input[type="text"], .lead input[type="email"], .lead textarea {
    padding: 0.35rem 0.5rem; font-size: 0.84rem;
  }
  .lead textarea { min-height: 2.2rem; }
  .contact { padding: 0.7rem; margin-bottom: 0.7rem; }
}

/* -- phones ---------------------------------------------------------
   The mic LABEL is dropped but the icon stays, and Stop/Cancel keep their
   words: an unlabelled red square is not a control anyone trusts. */
@media (max-width: 820px) {
  .btn-mic { padding: 0.6rem 0.85rem; }
  .mic-label { display: none; }
  .voice-bar { gap: 0.4rem; }
  .btn-share { margin-left: 0; }
  .composer { gap: 0.4rem; }
}

/* R7 section 5: direct contact, expandable QR, vCard download. */
.contact-direct { margin-top: .6rem; display: flex; flex-direction: column;
                  gap: .3rem; }
.contact-direct-title { font-weight: 600; margin: .2rem 0; }
.contact-qr-actions { display: flex; flex-wrap: wrap; gap: .4rem;
                      margin-top: .4rem; }
.contact-qr-wrap { margin-top: .5rem; }
.contact-qr { width: 100%; max-width: 260px; height: auto; display: block;
              border-radius: 6px; }
@media (max-width: 480px) {
  .contact-qr { max-width: 100%; }
  .contact-qr-actions .btn-ghost { flex: 1 1 auto; text-align: center; }
}