/* SpeedNet Marketing — the marketing team's own app, /desk/marketing.
 * Vanilla CSS, no build, matching this codebase's own no-framework ethos
 * (see cable.css). Palette lifted from the operator's reference mockup:
 * a navy hero/login, white cards, one blue accent for every primary action.
 */

:root {
  --navy-900: #0b1f3a;
  --navy-800: #0f2a4a;
  --navy-700: #16345c;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --amber-500: #f59e0b;
  --amber-100: #fef3c7;
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --red-600: #dc2626;
  --red-100: #fee2e2;
  --ink-900: #0f172a;
  --ink-600: #475569;
  --ink-400: #94a3b8;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --card: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-900);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

a { color: inherit; }

.mk-dash { color: var(--ink-400); }

.mk-boot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 100vh; color: var(--ink-600);
}
.mk-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--blue-600);
  animation: mk-spin .7s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ── sign-in ─────────────────────────────────────────────────────────── */
.mk-login {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  padding: 56px 28px 32px;
}
.mk-login-brand { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
/* The real SpeedNet mark, not a generic glyph in a circle. A light backing
   chip in case a future logo revision needs one on a dark ground; today's
   mark already reads fine directly on navy (see marketing.js's own note). */
.mk-login-logo { width: 168px; max-width: 70vw; height: auto; margin-bottom: 22px; }
.mk-login h1 { font-size: 24px; margin: 0 0 10px; font-weight: 800; letter-spacing: .2px; }
.mk-login .mk-tagline-sub { font-size: 13.5px; color: rgba(255,255,255,.6); max-width: 280px; }
.mk-login .mk-strip { font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 26px; }

.mk-form { width: 100%; max-width: 360px; margin: 0 auto; }
.mk-field {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.mk-field input {
  background: none; border: 0; outline: 0; color: #fff; font-size: 15px; width: 100%;
}
.mk-field input::placeholder { color: rgba(255,255,255,.45); }
.mk-field svg { flex: none; opacity: .6; width: 18px; height: 18px; }
.mk-eye { cursor: pointer; opacity: .6; background: none; border: 0; padding: 0; }

.mk-error {
  background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.4);
  color: #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
}

.mk-btn {
  display: block; width: 100%; text-align: center; border: 0; border-radius: 12px;
  padding: 14px; font-size: 15.5px; font-weight: 700; cursor: pointer;
  background: var(--blue-600); color: #fff;
}
.mk-btn:active { background: var(--blue-700); }
.mk-btn[disabled] { opacity: .6; cursor: default; }
.mk-btn.mk-btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-900); }
.mk-btn.mk-btn-danger { background: var(--red-600); }
.mk-btn.mk-btn-outline { background: #fff; color: var(--blue-600); border: 1px solid var(--blue-600); }

.mk-forgot { text-align: center; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.55); }

/* ── install banner (mirrors cable's own) ───────────────────────────── */
#mk-install {
  display: none; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top,0px));
  background: var(--navy-900); color: #fff; font-size: 14px;
}
#mk-install a {
  flex: none; background: var(--blue-600); color: #fff; font-weight: 700;
  text-decoration: none; padding: 9px 15px; border-radius: 9px;
}
#mk-install button {
  flex: none; background: none; border: 0; color: rgba(255,255,255,.6);
  font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer;
}

/* ── shell (header + content + bottom nav) ──────────────────────────── */
.mk-topbar {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  color: #fff; padding: 18px 18px 22px;
  border-radius: 0 0 20px 20px;
}
.mk-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-topbar-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mk-topbar-logo { width: 26px; height: 26px; flex: none; object-fit: contain; }
.mk-topbar h2 { margin: 0; font-size: 19px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-topbar .mk-brand-sub { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 1px; }
.mk-back {
  background: rgba(255,255,255,.12); border: 0; width: 34px; height: 34px; border-radius: 10px;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mk-bell { position: relative; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; }
.mk-bell .mk-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-600); }

.mk-profile-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.mk-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
  flex: none;
}
.mk-profile-name { font-weight: 700; font-size: 15.5px; }
.mk-profile-role { font-size: 12.5px; color: rgba(255,255,255,.6); }
.mk-online { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 12px; color: #86efac; }
.mk-online .mk-dot-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }

.mk-content { padding: 16px; max-width: 560px; margin: 0 auto; }

/* ── stat cards ──────────────────────────────────────────────────────── */
/* No negative margin here on purpose — a previous version pulled these cards
   up over the hero with a fixed -34px guess, which overlapped and clipped
   the profile row on real phones where the hero renders taller than that
   guess (the department line under the username was hidden behind the
   cards). Cards now follow the hero in normal flow: never overlaps,
   whatever the hero's real height turns out to be on a given device. */
.mk-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.mk-stat {
  background: var(--card); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.mk-stat .mk-stat-icon {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.mk-stat .mk-stat-value { font-size: 22px; font-weight: 800; line-height: 1; }
.mk-stat .mk-stat-label { font-size: 12px; color: var(--ink-600); margin-top: 4px; }
.mk-stat .mk-stat-delta { font-size: 11px; color: var(--green-600); margin-top: 4px; font-weight: 700; }
.mk-ic-blue { background: #dbeafe; color: var(--blue-600); }
.mk-ic-amber { background: var(--amber-100); color: var(--amber-500); }
.mk-ic-green { background: var(--green-100); color: var(--green-600); }
.mk-ic-red { background: var(--red-100); color: var(--red-600); }

.mk-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 15px; border-radius: 14px; border: 0;
  background: var(--blue-600); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  width: 100%;
}

.mk-section-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.mk-section-head h3 { margin: 0; font-size: 15.5px; }
.mk-section-head a { font-size: 13px; color: var(--blue-600); font-weight: 700; text-decoration: none; }

/* ── ticket cards / rows ─────────────────────────────────────────────── */
.mk-ticket {
  background: var(--card); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
}
.mk-ticket-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #e2e8f0; color: var(--ink-600);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none;
}
.mk-ticket-body { flex: 1; min-width: 0; }
.mk-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-ticket-id { font-weight: 700; font-size: 13.5px; }
.mk-ticket-name { font-size: 13.5px; margin-top: 2px; color: var(--ink-900); }
.mk-ticket-meta { font-size: 12px; color: var(--ink-400); margin-top: 3px; }
.mk-ticket-time { font-size: 11px; color: var(--ink-400); white-space: nowrap; }

.mk-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.mk-badge-pending, .mk-badge-open { background: var(--amber-100); color: #92400e; }
.mk-badge-in_progress { background: #dbeafe; color: var(--blue-700); }
.mk-badge-completed, .mk-badge-resolved, .mk-badge-closed { background: var(--green-100); color: #166534; }
.mk-badge-rejected { background: var(--red-100); color: #991b1b; }

.mk-empty { text-align: center; color: var(--ink-400); padding: 40px 20px; font-size: 13.5px; }

/* ── tabs ────────────────────────────────────────────────────────────── */
.mk-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.mk-tab {
  flex: none; border: 1px solid var(--line); background: #fff; color: var(--ink-600);
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mk-tab.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.mk-search {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
}
.mk-search input { border: 0; outline: 0; flex: 1; font-size: 14px; background: none; }
.mk-search svg { opacity: .45; flex: none; width: 16px; height: 16px; }

/* ── forms ───────────────────────────────────────────────────────────── */
.mk-label { font-size: 12.5px; font-weight: 700; color: var(--ink-600); margin: 14px 0 6px; }
.mk-label .mk-req { color: var(--red-600); }
.mk-input, .mk-select, .mk-textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px;
  font-size: 14.5px; background: #fff; color: var(--ink-900); font-family: inherit;
}
.mk-textarea { resize: vertical; min-height: 72px; }
.mk-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

.mk-card { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(15,23,42,.05); }

/* ── daily report card ──────────────────────────────────────────────── */
.mk-report-card { padding: 4px 14px; }
.mk-report-half { padding: 12px 0; }
.mk-report-half-top { display: flex; align-items: center; gap: 8px; }
.mk-report-ic { color: var(--blue-600); flex: none; display: flex; }
.mk-report-label { font-weight: 700; font-size: 13.5px; flex: 1; }
.mk-report-note { font-size: 12.5px; color: var(--ink-600); margin-top: 6px; padding-left: 24px; line-height: 1.5; }
.mk-report-div { height: 1px; background: #f1f5f9; }
.mk-btn-tiny {
  border: 0; background: var(--blue-600); color: #fff; font-weight: 700; font-size: 12px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
}
.mk-loc-box {
  border: 1px dashed var(--line); border-radius: 12px; padding: 12px; margin-top: 8px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-600);
}
.mk-loc-box svg { color: var(--blue-600); flex: none; }
.mk-map-thumb {
  margin-top: 8px; height: 110px; border-radius: 12px;
  background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 10px, #e6ebf2 10px, #e6ebf2 20px);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.mk-map-thumb .mk-pin { color: var(--red-600); }

.mk-photo-row { display: flex; gap: 10px; margin-top: 8px; }
.mk-photo-preview {
  width: 76px; height: 76px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line);
}
.mk-photo-add {
  width: 76px; height: 76px; border-radius: 12px; border: 1.5px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-400); font-size: 10.5px; gap: 4px; cursor: pointer; background: #fff;
}

.mk-toggle-row { display: flex; gap: 8px; }
.mk-toggle {
  flex: 1; text-align: center; padding: 11px; border-radius: 11px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ink-600);
}
.mk-toggle.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ── ticket detail ───────────────────────────────────────────────────── */
.mk-detail-head { display: flex; align-items: center; justify-content: space-between; }
.mk-detail-head h2 { font-size: 19px; margin: 0; }
.mk-kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.mk-kv:last-child { border-bottom: 0; }
.mk-kv .mk-k { color: var(--ink-600); }
.mk-kv .mk-v { font-weight: 600; text-align: right; max-width: 60%; }

/* ── marketing lines / chart ─────────────────────────────────────────── */
.mk-chart-wrap { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 2px 8px rgba(15,23,42,.05); margin-top: 14px; }
.mk-chart-title { font-size: 13px; font-weight: 700; color: var(--ink-600); margin-bottom: 12px; }
.mk-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.mk-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.mk-bar { width: 100%; max-width: 26px; background: var(--blue-600); border-radius: 6px 6px 2px 2px; }
.mk-bar-label { font-size: 10px; color: var(--ink-400); }
.mk-period-tabs { display: flex; gap: 8px; margin-top: 12px; }

/* ── profile ─────────────────────────────────────────────────────────── */
.mk-profile-card { background: #fff; border-radius: 16px; padding: 20px; text-align: center; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.mk-profile-card .mk-avatar { width: 68px; height: 68px; font-size: 22px; background: var(--navy-800); color: #fff; margin: 0 auto 10px; }
.mk-menu { background: #fff; border-radius: 14px; margin-top: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.mk-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; font-size: 14px;
}
.mk-menu-item:last-child { border-bottom: 0; }
.mk-menu-item .mk-menu-ic { width: 30px; height: 30px; border-radius: 9px; background: #eef2f7; color: var(--ink-600); display: flex; align-items: center; justify-content: center; flex: none; }
.mk-menu-item .mk-menu-badge { margin-left: auto; background: var(--red-600); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 7px; }
.mk-menu-item.danger { color: var(--red-600); }
.mk-menu-item.danger .mk-menu-ic { background: var(--red-100); color: var(--red-600); }

/* ── bottom nav ──────────────────────────────────────────────────────── */
.mk-nav {
  position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 20;
}
.mk-nav a {
  flex: 1; text-decoration: none; color: var(--ink-400); display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 9px 4px 8px; font-size: 10.5px; font-weight: 600;
}
.mk-nav a.active { color: var(--blue-600); }
.mk-nav a svg { width: 21px; height: 21px; }

.mk-toast {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%);
  background: var(--ink-900); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; z-index: 50; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

@media (min-width: 480px) {
  .mk-content { padding: 20px 24px; }
}

/* ── BILL & OTC, and the What's-new card (2026-09-20) ──────────────────────
   Two money fields side by side, because a bill and a one-time charge are
   read together and stacking them costs a scroll on a phone. */
.mk-money-row { display: flex; gap: 10px; }
.mk-money { flex: 1 1 0; min-width: 0; display: block; }
.mk-money > span {
  display: block; font-size: 12px; font-weight: 600;
  color: #64748b; margin-bottom: 5px;
}
.mk-money .mk-input { width: 100%; }
.mk-hint { font-size: 12px; color: #64748b; margin-top: 6px; line-height: 1.45; }

/* The note that appears the first time somebody signs in after a shipment.
   A sheet from the bottom, the way this app's other full-width things come
   in, and dismissable by tapping the backdrop as well as the button. */
.mk-whatsnew-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 20, 35, .55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; animation: mk-wn-fade .18s ease-out;
}
.mk-whatsnew {
  width: 100%; max-width: 520px; box-sizing: border-box;
  background: #fff; border-radius: 18px 18px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow: auto;
  animation: mk-wn-up .22s cubic-bezier(.2, .8, .3, 1);
}
.mk-whatsnew-top h2 { margin: 10px 0 0; font-size: 19px; color: #0f2a4a; }
.mk-whatsnew-top p { margin: 6px 0 0; font-size: 13.5px; color: #64748b; line-height: 1.5; }
.mk-whatsnew-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #1d6f2f; background: #e8f6ea;
  border-radius: 999px; padding: 4px 10px;
}
.mk-whatsnew-list { margin: 14px 0 18px; padding: 0; list-style: none; }
.mk-whatsnew-list li {
  position: relative; padding: 0 0 0 22px; margin-top: 11px;
  font-size: 14px; line-height: 1.5; color: #1f2937;
}
.mk-whatsnew-list li::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: #84a41a;
}
@keyframes mk-wn-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mk-wn-up { from { transform: translateY(14px) } to { transform: none } }

/* ── THE CUSTOMER LOCATION PICKER (2026-09-21) ─────────────────────────────
   A real map replaces the grey placeholder that used to sit here. Tall enough
   to aim a pin on a phone and short enough that the rest of the form is still
   reachable without scrolling past it. */
.mk-map {
  height: 230px;
  border-radius: 10px;
  border: 1px solid #d8dee6;
  overflow: hidden;
  background: #eef2f6;
  /* Leaflet paints its panes above anything that follows unless it is told
     otherwise; this keeps the form's own controls clickable. */
  z-index: 0;
}
.mk-map .leaflet-container { font: inherit; }

.mk-mapsearch { display: flex; gap: 8px; margin-bottom: 8px; }
.mk-mapsearch .mk-input { flex: 1 1 auto; min-width: 0; }
.mk-mapsearch .mk-btn { flex: 0 0 auto; width: auto; padding-left: 16px; padding-right: 16px; }

/* The two location buttons sit side by side — they are alternatives to each
   other, not a sequence, and stacking them read as steps. */
.mk-locbtns { display: flex; gap: 8px; margin-top: 8px; }
.mk-locbtns .mk-btn { flex: 1 1 0; width: auto; }

.mk-hint {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin: 6px 0 0;
}

/* "You are here", green and bold, so it is never mistaken for the customer's
   pin sitting next to it. Leaflet's default tooltip is a pale grey box; this
   is the one label on the map that has to win the eye. */
.leaflet-tooltip.mk-here-tip {
  background: #1b7f3b;
  border: 1px solid #14572a;
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  white-space: nowrap;
}
/* Leaflet draws the little arrow with a border colour of its own — it has to
   follow the bubble or the tooltip grows a grey spike. */
.leaflet-tooltip.mk-here-tip.leaflet-tooltip-top::before { border-top-color: #1b7f3b; }

/* Desk comments on my tickets (2026-10-13) */
a.mk-bell { color: #fff; text-decoration: none; }
.mk-bell-n { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--red-600); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; }
.mk-bell-n[hidden] { display: none; }
.mk-ticket-cmt { margin-top: 4px; font-size: 12px; color: var(--blue-700); display: flex; gap: 4px; align-items: flex-start;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-ticket-cmt svg { vertical-align: -2px; }
.mk-thread.unseen { box-shadow: inset 3px 0 0 var(--blue-600); }
.mk-thread-who { font-size: 12px; font-weight: 700; color: var(--ink-600); margin-top: 2px; }
.mk-thread-text { white-space: normal; word-break: break-word; }
.mk-new { font-size: 10px; font-weight: 800; color: #fff; background: var(--red-600); border-radius: 6px; padding: 2px 6px; }
.mk-chat { background: #e7ecef; border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.mk-msg { max-width: 85%; padding: 7px 10px 5px; border-radius: 12px; box-shadow: 0 1px 1px rgba(15,23,42,.08); }
.mk-msg.them { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.mk-msg.me { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 4px; }
.mk-msg-who { font-size: 11.5px; font-weight: 800; color: var(--blue-700); margin-bottom: 2px; }
.mk-msg.me .mk-msg-who { color: var(--green-600); }
.mk-msg-text { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.mk-msg-at { font-size: 10.5px; color: var(--ink-400); text-align: right; margin-top: 2px; }
.mk-voice { width: 220px; max-width: 100%; height: 34px; margin-top: 4px; }
.mk-chat-empty { font-size: 12.5px; color: var(--ink-600); text-align: center; padding: 10px; }
.mk-msg-tag { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--ink-600); background: #f1f5f9; border-radius: 6px; padding: 1px 6px; margin-bottom: 3px; }