/* ============================================================
   topdevphone — Police Access app styles
   Messaging-app layout: the Dispatch tab mirrors the Messages
   chat idioms (incoming/sent bubbles, day separators). Uses
   base.css tokens only — works in dark AND light theme.
   ============================================================ */

/* ---------- layout ---------- */
.pol-zone {
  flex: 1; min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  position: relative;
}

.pol-thread {
  flex: 1; overflow-y: auto;
  padding: 10px 14px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.pol-thread::-webkit-scrollbar { width: 0; }

/* ---------- day separators ---------- */
.pol-day {
  flex: 0 0 auto;
  text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 12px 0 6px;
}

/* ---------- chat bubbles ---------- */
.pol-b {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13.5px; line-height: 1.35;
  word-wrap: break-word; overflow-wrap: break-word;
  flex: 0 0 auto;
}

/* incoming (911 calls + flags) — status shown by a slim left border */
.pol-b.theirs {
  align-self: flex-start;
  background: var(--bg-tertiary); color: var(--text-primary);
  border-bottom-left-radius: 5px;
  border-left: 3px solid var(--text-tertiary);
  cursor: pointer;
}
.pol-b.theirs:active { filter: brightness(0.92); }
.pol-b.theirs.st-new { border-left-color: var(--accent-red); }
.pol-b.theirs.st-enroute { border-left-color: var(--accent-orange); }
.pol-b.theirs.st-resolved { border-left-color: var(--accent-green); }

/* sent-style officer replies (status changes / handled marks) */
.pol-b.mine {
  align-self: flex-end;
  background: var(--accent-blue); color: #fff;
  border-bottom-right-radius: 5px;
}
.pol-b.mine .pol-b-text { font-size: 12.5px; font-weight: 600; }
.pol-b.mine .pol-b-foot { color: rgba(255, 255, 255, 0.75); }

.pol-b-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.pol-b-name { font-size: 12px; font-weight: 700; min-width: 0; }
.pol-b-text { white-space: pre-wrap; }
.pol-b-foot { font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; }

/* source chip (911 / SNITCH / TWEEDER / HAGGLR / CLOUTGRAM) */
.pol-chip {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 8px;
  color: var(--chip, var(--text-secondary));
  background: color-mix(in srgb, var(--chip, #8e8e93) 16%, transparent);
}

/* ---------- "N new" pill ---------- */
.pol-newpill {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 134px; z-index: 5;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--accent-blue);
  border-radius: 14px; padding: 6px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pol-newpill:active { filter: brightness(0.85); }

/* ---------- filter bar (in place of a composer) ---------- */
.pol-filterbar {
  flex: 0 0 auto;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--separator);
  background: var(--bg-primary);
  margin-bottom: 74px;   /* clears the absolute-positioned .tabbar */
}
.pol-filterbar::-webkit-scrollbar { height: 0; }
.pol-filter {
  flex: 1 0 auto;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 6px 13px; border-radius: 14px;
  background: var(--bg-tertiary); color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.pol-filter.on { background: #0a3d91; color: #fff; }

/* ---------- action sheet bits ---------- */
.pol-sheet { margin-bottom: 12px; }
.pol-sheet-meta {
  text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 10px;
}
.pol-sheet-meta .mono { font-weight: 600; }
.pol-sheet-text {
  background: var(--bg-tertiary); border-radius: 12px; padding: 12px;
  font-size: 13.5px; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- roster ---------- */
.pol-roster-icon { background: linear-gradient(140deg, #0a3d91, #062a66); }
.pol-count {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 4px 9px; border-radius: 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
}
.pol-count.on {
  color: var(--accent-green);
  background: color-mix(in srgb, var(--accent-green) 16%, transparent);
}