/* ═══════════════════════════════════════════════════════════════════
   public.css  —  TIP360 Public Tip Portal
   Navy/gold government aesthetic, air-gap safe (no external fonts)
   Use Bootstrap 5 as base, all overrides below
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0b1628;
  --navy-mid:    #112040;
  --navy-light:  #1a3060;
  --steel:       #2a4a7f;
  --ice:         #c8daf5;
  --ice-dim:     #7fa8d8;
  --gold:        #c8a84b;
  --gold-dim:    #9a7a2e;
  --white:       #f0f4fb;
  --muted:       #8aa4c8;
  --danger:      #e05a5a;
  --success:     #4caf7d;
  --border:      rgba(200,218,245,0.12);
  --border-act:  rgba(200,218,245,0.35);
  --glass:       rgba(17,32,64,0.7);
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.public-surface {
  background: var(--navy);
  color: var(--white);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  position: relative;
}

body.public-surface::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(200,218,245,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,218,245,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index: 0;
}

body.public-surface::after {
  content: '';
  position: fixed; top: -40%; left: -20%; width: 80%; height: 80%;
  background: radial-gradient(ellipse, rgba(42,74,127,0.2) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
  position: relative; z-index: 20;
  background: rgba(11,22,40,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
}
.logo { display: flex; align-items: center; gap: 14px; }
.logo-shield { width: 36px; height: 40px; }
.logo-shield svg { width: 100%; height: 100%; }
/* New PNG-based logo. Crops the bottom 22% of the square source via
   object-position to hide the in-image caption text. */
.logo-img {
  width: 56px; height: 56px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 6px;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; }
.logo-agency {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--gold); text-transform: uppercase; line-height: 1;
  margin-bottom: 3px; font-variant: small-caps;
}
.logo-title {
  font-size: 15px; font-weight: 700;
  color: var(--white); letter-spacing: 0.02em;
}
.header-notice {
  display: flex; align-items: center; gap: 8px;
  background: rgba(200,168,75,0.08);
  border: 1px solid rgba(200,168,75,0.2);
  border-radius: 4px; padding: 6px 14px;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase;
}
.notice-dot {
  width: 7px; height: 7px;
  background: var(--gold); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* ── Main container ───────────────────────────────────────────────── */
.public-main { position: relative; z-index: 5; padding: 60px 0 80px; }
.public-container { max-width: 860px; margin: 0 auto; padding: 0 32px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { text-align: center; margin-bottom: 48px; animation: fadeUp .7s ease both; }
.hero-logo {
  display: block;
  width: 200px; height: 200px;
  margin: 0 auto 18px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(127, 168, 216, 0.25));
}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.hero-eyebrow {
  font-size: 10px; letter-spacing: 0.3em; color: var(--ice-dim);
  text-transform: uppercase; margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(24px, 4vw, 36px); font-weight: 700;
  color: var(--white); line-height: 1.2; margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.hero h1 em { font-style: italic; color: var(--ice); }
.hero p { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 520px; margin: 0 auto 24px; }

/* ── Anonymity pills ──────────────────────────────────────────────── */
.anon-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(200,218,245,0.05); border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 14px;
  font-size: 11px; color: var(--ice-dim);
}
.pill-icon { color: var(--success); }

/* ── Progress bar ─────────────────────────────────────────────────── */
.progress-bar {
  height: 2px; background: var(--border); border-radius: 2px;
  margin-bottom: 36px; overflow: hidden;
  animation: fadeUp .7s .1s ease both; opacity: 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--steel), var(--gold));
  border-radius: 2px; transition: width .4s ease;
}

/* ── Step nav ─────────────────────────────────────────────────────── */
.steps-nav {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 36px; animation: fadeUp .7s .15s ease both; opacity: 0;
}
.step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted); transition: all .3s;
}
.step-circle.active { border-color: var(--gold); color: var(--gold); background: rgba(200,168,75,.08); }
.step-circle.done   { border-color: var(--success); color: var(--success); background: rgba(76,175,125,.08); }
.step-label { font-size: 10px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.step-item.active .step-label { color: var(--gold); }
.step-item.done   .step-label { color: var(--success); }
.step-connector { width: 60px; height: 1px; background: var(--border); margin: 0 8px 22px; flex-shrink: 0; }
.step-connector.done { background: var(--success); opacity: .4; }

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 12px; padding: 36px; backdrop-filter: blur(20px);
  animation: fadeUp .7s .2s ease both; opacity: 0;
  position: relative; overflow: hidden; margin-bottom: 24px;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}
.card-title { font-size: 19px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.card-sub   { font-size: 13px; color: var(--muted); margin-bottom: 28px; }

/* ── Step content visibility ──────────────────────────────────────── */
.step-content { display: none; }
.step-content.active { display: block; }

/* ── Form elements ────────────────────────────────────────────────── */
.form-group { margin-bottom: 22px; }
.field-label {
  display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ice-dim);
  margin-bottom: 8px; font-weight: 500;
}
.req { color: var(--gold); margin-left: 3px; }
.opt { color: var(--muted); font-weight: 300; text-transform: none; letter-spacing: 0; font-size: 10px; margin-left: 6px; }

input[type="text"], input[type="email"], textarea, select {
  width: 100%; background: rgba(11,22,40,.6);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 11px 15px; color: var(--white);
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--border-act); box-shadow: 0 0 0 3px rgba(200,218,245,.05);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
select option { background: var(--navy-mid); }

/* ── Radio cards ──────────────────────────────────────────────────── */
.radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 10px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-card label {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; transition: all .2s;
  font-size: 12px; color: var(--muted); letter-spacing: 0; text-transform: none;
}
.radio-card .icon { font-size: 18px; line-height: 1; }
.radio-card .cat-name { font-size: 12px; color: var(--ice-dim); font-weight: 500; }
.radio-card input:checked + label { border-color: var(--gold); background: rgba(200,168,75,.07); }
.radio-card input:checked + label .cat-name { color: var(--gold); }
.radio-card label:hover { border-color: var(--border-act); background: rgba(200,218,245,.03); }

/* ── Char count ───────────────────────────────────────────────────── */
.char-count { text-align: right; font-size: 10px; color: var(--muted); margin-top: 5px; font-family: monospace; }

/* ── File drop ────────────────────────────────────────────────────── */
.file-drop {
  border: 1.5px dashed var(--border); border-radius: 8px;
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: all .2s; position: relative;
}
.file-drop:hover, .file-drop.dragover { border-color: var(--border-act); background: rgba(200,218,245,.02); }
.file-drop.dragover { border-color: var(--gold); background: rgba(200,168,75,.04); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-icon { font-size: 26px; margin-bottom: 8px; opacity: .5; }
.file-drop p { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.drop-hint { font-size: 10px; font-family: monospace; color: var(--steel); letter-spacing: .08em; text-transform: uppercase; }

.file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.file-item {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(200,218,245,.04); border: 1px solid var(--border);
  border-radius: 5px; padding: 7px 12px;
  font-size: 12px; font-family: monospace; color: var(--ice-dim);
}
.file-item button {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; transition: color .2s;
}
.file-item button:hover { color: var(--danger); }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: 12px; border-radius: 7px;
  padding: 13px 15px; margin-bottom: 22px;
  font-size: 12px; line-height: 1.6;
}
.alert-info { background: rgba(200,218,245,.05); border: 1px solid rgba(200,218,245,.12); color: var(--ice-dim); }
.alert-warn { background: rgba(200,168,75,.06); border: 1px solid rgba(200,168,75,.2); color: rgba(200,168,75,.9); }
.alert-success { background: rgba(76,175,125,.08); border: 1px solid rgba(76,175,125,.25); color: #6dd9a0; }
.alert-danger { background: rgba(224,90,90,.08); border: 1px solid rgba(224,90,90,.25); color: #f08080; }
.alert-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; }
.step-counter { font-size: 10px; color: var(--steel); font-family: monospace; letter-spacing: .1em; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 26px; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: .03em; cursor: pointer; border: none;
  transition: all .2s; text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: #d4b55a; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(200,168,75,.2); color: var(--navy); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { border-color: var(--border-act); color: var(--ice-dim); }
.btn-sm { padding: 7px 16px; font-size: 12px; }

/* ── Review table ─────────────────────────────────────────────────── */
.review-table { width: 100%; border-collapse: collapse; }
.review-key {
  width: 120px; padding: 10px 16px 10px 0; vertical-align: top;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border);
}
.review-val {
  padding: 10px 0; font-size: 13px; color: var(--ice-dim);
  line-height: 1.5; border-bottom: 1px solid var(--border);
}

/* ── TRC display ──────────────────────────────────────────────────── */
.trc-display { text-align: center; padding: 16px 0 8px; }
.trc-label { font-size: 10px; letter-spacing: .25em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.trc-code {
  display: inline-block; font-family: monospace;
  font-size: clamp(22px, 5vw, 32px); font-weight: 500; letter-spacing: .15em;
  color: var(--gold); background: rgba(200,168,75,.08);
  border: 1.5px solid rgba(200,168,75,.3); border-radius: 8px;
  padding: 14px 28px; margin-bottom: 12px;
}
.trc-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(200,168,75,.1); border: 1px solid rgba(200,168,75,.2);
  border-radius: 5px; padding: 7px 18px; font-size: 11px; color: var(--gold);
  cursor: pointer; font-family: monospace; letter-spacing: .08em;
  text-transform: uppercase; transition: all .2s;
}
.trc-copy-btn:hover { background: rgba(200,168,75,.18); }
.trc-warn { font-size: 12px; color: var(--muted); max-width: 380px; margin: 12px auto 0; line-height: 1.6; }
.trc-warn strong { color: var(--ice-dim); font-weight: 500; }

/* ── Confirmation checklist ───────────────────────────────────────── */
.confirmation-checklist { list-style: none; padding: 0; text-align: left; max-width: 400px; margin: 0 auto; }
.confirmation-checklist li { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.check { color: var(--success); }
.confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ── Return section ───────────────────────────────────────────────── */
.return-section { border-top: 1px solid var(--border); padding-top: 36px; animation: fadeUp .7s .35s ease both; opacity: 0; }
.return-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.badge { font-size: 9px; letter-spacing: .2em; color: var(--steel); background: rgba(42,74,127,.3); border: 1px solid rgba(42,74,127,.5); border-radius: 3px; padding: 3px 8px; text-transform: uppercase; }
.return-header h3 { font-size: 15px; font-weight: 700; color: var(--white); }
.return-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
.trc-input-row { display: flex; gap: 10px; }
.trc-input-row input { flex: 1; font-family: monospace; letter-spacing: .1em; text-transform: uppercase; }

/* ── Status page ──────────────────────────────────────────────────── */
.status-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.status-badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.status-new       { background: rgba(100,149,237,.15); color: #6495ed; border: 1px solid rgba(100,149,237,.3); }
.status-assigned  { background: rgba(255,200,0,.12); color: #ffc800; border: 1px solid rgba(255,200,0,.3); }
.status-active    { background: rgba(255,140,0,.12); color: #ff8c00; border: 1px solid rgba(255,140,0,.3); }
.status-pendinginfo { background: rgba(200,168,75,.12); color: var(--gold); border: 1px solid rgba(200,168,75,.3); }
.status-referred  { background: rgba(138,43,226,.12); color: #c88bff; border: 1px solid rgba(138,43,226,.3); }
.status-closed    { background: rgba(76,175,125,.12); color: #4caf7d; border: 1px solid rgba(76,175,125,.3); }
.status-unfounded { background: rgba(150,150,150,.12); color: #aaa; border: 1px solid rgba(150,150,150,.3); }

.message-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.message-bubble { border-radius: 8px; padding: 12px 16px; max-width: 90%; }
.message-from-investigator { background: rgba(42,74,127,.25); border: 1px solid rgba(42,74,127,.4); align-self: flex-start; }
.message-meta { font-size: 10px; color: var(--muted); margin-bottom: 6px; letter-spacing: .05em; }
.message-body { font-size: 13px; color: var(--ice-dim); line-height: 1.6; }

.trc-reminder { font-size: 11px; color: var(--muted); font-family: monospace; }
.trc-reminder code { color: var(--gold); }

/* ── Divider ──────────────────────────────────────────────────────── */
hr.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 5; text-align: center;
  padding: 18px; font-family: monospace; font-size: 10px;
  letter-spacing: .1em; color: var(--steel);
  border-top: 1px solid var(--border); text-transform: uppercase;
}

/* ── Validation ───────────────────────────────────────────────────── */
.field-validation-error { font-size: 11px; color: var(--danger); display: block; margin-top: 4px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .header-inner { padding: 14px 16px; }
  .header-notice { display: none; }
  .card { padding: 22px 16px; }
  .step-connector { width: 28px; }
  .radio-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Paste upload thumbnails (public) ────────────────────────────────────── */
.paste-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.paste-thumb {
    position: relative;
    width: 120px;
    border: 1px solid rgba(200,218,245,.2);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(15,30,53,.8);
}
.paste-thumb img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    display: block;
}
.paste-thumb-info {
    padding: 4px 6px;
    font-size: 10px;
    color: #8aa4c8;
    overflow: hidden;
}
.paste-thumb-remove {
    position: absolute;
    top: 3px; right: 3px;
    background: rgba(0,0,0,.6);
    border: none;
    color: #fff;
    font-size: 11px;
    width: 18px; height: 18px;
    border-radius: 50%;
    cursor: pointer;
}
.paste-loading-spinner {
    width: 24px; height: 24px;
    border: 2px solid rgba(200,168,75,.3);
    border-top-color: #c8a84b;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.paste-error {
    font-size: 11px;
    color: #e05a5a;
    padding: 6px;
    width: 100%;
}
.paste-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.paste-lightbox.active { display: flex; }
.paste-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    cursor: pointer;
}
.paste-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    background: #0f1e35;
    border-radius: 12px;
    overflow: hidden;
}
.paste-lightbox-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(200,218,245,.1);
    font-size: 12px;
    color: #8aa4c8;
}
.paste-lightbox-header button {
    background: none;
    border: none;
    color: #8aa4c8;
    cursor: pointer;
    font-size: 16px;
}
.paste-lightbox-content img {
    max-width: 90vw;
    max-height: calc(90vh - 44px);
    object-fit: contain;
    display: block;
}

/* ── Category selection grid ─────────────────────────────────────────────── */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1px solid rgba(200,218,245,.15);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: rgba(15,30,53,.6);
    text-align: center;
}

.category-card:hover {
    border-color: rgba(200,168,75,.4);
    background: rgba(200,168,75,.05);
}

.category-card.selected,
.category-card input:checked ~ * {
    border-color: #c8a84b;
    background: rgba(200,168,75,.1);
}

.category-card input[type="radio"] {
    display: none;
}

.cat-icon {
    font-size: 24px;
    line-height: 1;
}

.cat-label {
    font-size: 11px;
    color: #c8daf5;
    font-weight: 500;
    line-height: 1.3;
}

/* ── Agency picker (public submission) ───────────────────────────────────── */
.agency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.agency-card {
    position: relative;
    display: block;
    border: 1px solid rgba(200,218,245,.15);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: rgba(15,30,53,.6);
}

.agency-card:hover {
    border-color: rgba(200,168,75,.4);
    background: rgba(200,168,75,.05);
}

.agency-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.agency-card:has(input:checked) {
    border-color: #c8a84b;
    background: rgba(200,168,75,.1);
}

.agency-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.agency-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    overflow: hidden;
}

.agency-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.agency-logo-placeholder {
    font-size: 22px;
    line-height: 1;
}

.agency-text {
    flex: 1 1 auto;
    min-width: 0;
}

.agency-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
}

.agency-desc {
    font-size: 11px;
    color: #8fa3c2;
    line-height: 1.35;
    margin-top: 2px;
}

.agency-check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(200,218,245,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    transition: all .2s;
}

.agency-card:has(input:checked) .agency-check {
    background: #c8a84b;
    border-color: #c8a84b;
    color: #0f1e35;
    font-weight: 700;
}

/* ── iPhone-style chat thread ────────────────────────────────────────────── */
.message-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.thread-label {
    font-size: 11px;
    font-weight: 600;
    color: #4a6070;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
    margin-bottom: 4px;
}

.chat-row {
    display: flex;
    width: 100%;
}

.chat-row-left  { justify-content: flex-start; }
.chat-row-right { justify-content: flex-end; }

.chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.5;
}

/* Investigator → Tipster (left, gray) */
.chat-bubble-them {
    background: rgba(200,218,245,.1);
    border: 1px solid rgba(200,218,245,.15);
    border-bottom-left-radius: 4px;
    color: #c8daf5;
}

/* Tipster → Investigator (right, blue) */
.chat-bubble-me {
    background: #1a56a0;
    border: none;
    border-bottom-right-radius: 4px;
    color: #ffffff;
}

.chat-meta {
    font-size: 10px;
    opacity: .6;
    margin-bottom: 4px;
}

.chat-body {
    white-space: pre-wrap;
    word-break: break-word;
}
/* ═══════════════════════════════════════════════════════════════════
   public-geo-additions.css
   Append the contents of this file to the bottom of public.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Geo location capture row (below the Location field) ─────────── */
.geo-capture-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Status text shown after capture attempt */
.geo-status {
  font-size: 12px;
  line-height: 1.4;
}

.geo-status.geo-ok {
  color: var(--success);
}

.geo-status.geo-err {
  color: var(--danger);
}

/* Button state when location has been captured */
.btn.geo-captured {
  border-color: rgba(76,175,125,.4);
  color: var(--success);
  background: rgba(76,175,125,.08);
}

.btn.geo-captured:hover {
  background: rgba(224,90,90,.08);
  border-color: rgba(224,90,90,.3);
  color: var(--danger);
}

/* ── Address autocomplete (replaces geo capture button) ──────────── */
.location-autocomplete-wrap {
  position: relative;
}

.location-autocomplete-wrap input[type="text"] {
  width: 100%;
  padding-right: 36px;
}

/* Dropdown container */
.location-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--navy-mid);
  border: 1px solid var(--border-act);
  border-radius: 8px;
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  max-height: 320px;
  overflow-y: auto;
}

.location-dropdown.open {
  display: block;
}

/* Individual suggestion row */
.loc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid rgba(200,218,245,.06);
}

.loc-item:last-of-type {
  border-bottom: none;
}

.loc-item:hover,
.loc-item.focused {
  background: rgba(200,218,245,.06);
}

.loc-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.loc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.loc-primary {
  font-size: 13px;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-secondary {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Confirmation tick — hidden until hovered */
.loc-confirm-tick {
  font-size: 13px;
  color: var(--success);
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}

.loc-item:hover .loc-confirm-tick,
.loc-item.focused .loc-confirm-tick {
  opacity: 1;
}

/* Loading / empty / error states */
.loc-loading,
.loc-empty,
.loc-error {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.loc-error { color: var(--danger); }

/* Manual entry note at dropdown bottom */
.loc-manual {
  padding: 8px 14px;
  font-size: 10px;
  color: var(--steel);
  border-top: 1px solid var(--border);
  text-align: center;
  letter-spacing: .03em;
}

/* Status line below the input */
.location-status {
  font-size: 12px;
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.4;
}

.location-status.loc-status-ok {
  color: var(--success);
}

.location-status.loc-status-err {
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════
   Home page  —  Action cards + MOTD
   ═══════════════════════════════════════════════════════════════════ */

.header-nav-link {
  font-size: 12px; font-weight: 600;
  color: var(--ice-dim); text-decoration: none;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.header-nav-link:hover {
  color: var(--white);
  border-color: var(--border);
  background: rgba(200,218,245,.04);
}

/* Three-card grid of primary actions */
.home-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
  animation: fadeUp .7s .2s ease both;
  opacity: 0;
}
@media (max-width: 820px) {
  .home-actions { grid-template-columns: 1fr; }
}

.home-card {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
  min-height: 220px;
}
.home-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .35;
  transition: opacity .2s;
}
.home-card:hover {
  border-color: var(--border-act);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  background: rgba(17,32,64,0.85);
}
.home-card:hover::before { opacity: .9; }

/* Primary card (Submit a Tip) — slightly highlighted */
.home-card-primary {
  border-color: rgba(200,168,75,.28);
  background: linear-gradient(180deg, rgba(200,168,75,.05), var(--glass));
}
.home-card-primary::before { opacity: .8; }
.home-card-primary:hover { border-color: rgba(200,168,75,.55); }

.home-card-icon {
  font-size: 28px;
  margin-bottom: 14px;
  line-height: 1;
}
.home-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.home-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 14px;
}
.home-card-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-card-arrow {
  transition: transform .2s;
  display: inline-block;
}
.home-card:hover .home-card-arrow { transform: translateX(3px); }

/* TRC card — has its own form, not a link */
.home-card-trc { cursor: default; }
.home-card-trc:hover { transform: none; box-shadow: none; }

.home-trc-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.home-trc-input {
  width: 100%;
  background: rgba(11,22,40,.7);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 13px;
  color: var(--white);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.home-trc-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,168,75,.1);
}
.home-trc-input::placeholder {
  color: var(--muted);
  letter-spacing: .12em;
}
.home-trc-btn {
  background: rgba(200,168,75,.12);
  border: 1px solid rgba(200,168,75,.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.home-trc-btn:hover {
  background: rgba(200,168,75,.22);
  border-color: rgba(200,168,75,.65);
}

/* ═══ MOTD block ════════════════════════════════════════════════════ */
.motd-block {
  margin-top: 48px;
  padding: 22px 26px;
  border: 1px solid rgba(224,90,90,.35);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(224,90,90,.06), rgba(11,22,40,.5));
  animation: fadeUp .7s .35s ease both;
  opacity: 0;
}
.motd-emergency {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--white);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(224,90,90,.2);
}
.motd-emergency-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.motd-emergency strong {
  color: var(--danger);
  font-weight: 700;
}
.motd-classified {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1.5;
}
.motd-classified strong {
  display: block;
  margin-bottom: 3px;
  letter-spacing: .05em;
}
.motd-classified-sub {
  color: var(--ice-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.motd-notice {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Datetime picker  —  Styling for native datetime-local inputs
   ═══════════════════════════════════════════════════════════════════ */

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  width: 100%;
  background: rgba(11,22,40,.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 11px 15px;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  color-scheme: dark;
  cursor: pointer;
}
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border-color: var(--border-act);
  box-shadow: 0 0 0 3px rgba(200,218,245,.05);
}
/* Make the calendar / clock icon clearly visible on the dark theme and easier
   to hit (was near-invisible). The whole field also opens the picker on click. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  cursor: pointer;
  opacity: .95;
  transform: scale(1.25);
  margin-left: 4px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Date + time pair laid out side by side (date wider than time) */
.dt-dt-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  align-items: end;
}
@media (max-width: 480px) {
  .dt-dt-row { grid-template-columns: 1fr; }
}

/* Datetime mode toggle (single vs range) */
.dt-mode-toggle {
  display: inline-flex;
  background: rgba(11,22,40,.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 10px;
}
.dt-mode-toggle button {
  background: transparent;
  border: none;
  color: var(--ice-dim);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.dt-mode-toggle button.active {
  background: rgba(200,168,75,.12);
  color: var(--gold);
}
.dt-mode-toggle button:hover:not(.active) {
  color: var(--white);
}
.dt-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .dt-range-row { grid-template-columns: 1fr; }
}
.dt-field-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  display: block;
}
.dt-helper {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════
   Wanted Posters — Image Pair + Lightbox
   ═══════════════════════════════════════════════════════════════════ */

.poster-image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .poster-image-pair { grid-template-columns: 1fr; }
}

/* Lightbox modal — full-viewport overlay, hidden by default */
.img-lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 14, 26, 0.92);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  padding: 24px;
  flex-direction: column;
  cursor: zoom-out;
  animation: lightboxFade .15s ease-out;
}
.img-lightbox.open { display: flex; }
@keyframes lightboxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.img-lightbox img {
  max-width: 95vw;
  max-height: 85vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  cursor: default;
  background: #0a1320;
}

.img-lightbox-caption {
  margin-top: 14px;
  color: var(--ice-dim);
  font-size: 13px;
  text-align: center;
  max-width: 720px;
  line-height: 1.5;
  pointer-events: none;
}

.img-lightbox-close {
  position: absolute;
  top: 14px; right: 18px;
  width: 40px; height: 40px;
  background: rgba(11,22,40,.6);
  border: 1px solid rgba(200,218,245,.25);
  color: var(--white);
  border-radius: 50%;
  font-size: 24px; font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.img-lightbox-close:hover {
  background: rgba(11,22,40,.9);
  border-color: var(--gold);
}

/* ── Tip Status page background watermark ─────────────────────────────
   Fixed-position iris logo behind page content. Stays put when the user
   scrolls. Low opacity + scaled large so it reads as a subtle brand
   anchor without drawing attention from the actual status content.
   pointer-events:none keeps it from blocking clicks. */
.status-page-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/img/iris.png');
    background-repeat: no-repeat;
    background-position: center 55%;
    background-size: min(680px, 70vw) auto;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* Make sure the actual page content sits ABOVE the watermark. The
   _PublicLayout wraps content in .public-main / .public-container,
   so we lift those above z:0. */
.public-main, .public-container {
    position: relative;
    z-index: 1;
}

/* ── Step guide (agency-branded funnel, /a/{slug}/tip) ────────────────────
   Occupies the slot the agency picker holds on the generic form. Explains the
   three steps in plain language before the tipster commits to the first one.
   The live progress indicator remains the .steps-nav bar above the form. */
.scoped-agency-name {
  color: var(--white);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.step-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.step-guide-item {
  background: rgba(17, 32, 64, .45);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 15px 15px;
}

.step-guide-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 75, .55);
  background: rgba(200, 168, 75, .10);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}

.step-guide-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.step-guide-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ice-dim);
}

@media (max-width: 700px) {
  .step-guide { grid-template-columns: 1fr; }
}