/* ═══════════════════════════════════════════════════════════════
   TransAshanti v6.0 — Reusable Component Styles
   Buttons · Forms · Cards · Badges · Modals · Tables · Toast
   ═══════════════════════════════════════════════════════════════ */

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 11px; border: none;
  font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: var(--tr); white-space: nowrap;
  font-family: var(--fn); position: relative;
  text-decoration: none;
}
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary   { background: linear-gradient(135deg, var(--tl), var(--tl2)); color: var(--bg0); font-weight: 700; }
.btn-primary:hover  { box-shadow: var(--stl); transform: translateY(-1px); }
.btn-secondary { background: var(--gl2); color: var(--t1); border: 1px solid var(--bd); }
.btn-secondary:hover { border-color: var(--bd2); }
.btn-amber     { background: linear-gradient(135deg, var(--am), #d97706); color: var(--bg0); font-weight: 700; }
.btn-amber:hover { box-shadow: var(--sam); transform: translateY(-1px); }
.btn-danger    { background: var(--re3); color: var(--re); border: 1px solid rgba(239,68,68,.22); }
.btn-danger:hover { background: rgba(239,68,68,.22); }
.btn-ghost     { background: transparent; color: var(--t2); border: 1px solid var(--bd); }
.btn-ghost:hover { color: var(--t1); border-color: var(--bd2); }
.btn-sm  { padding: 6px 13px; font-size: .77rem; border-radius: 8px; }
.btn-lg  { padding: 14px 32px; font-size: 1rem; border-radius: 13px; }
.btn-xl  { padding: 17px 44px; font-size: 1.05rem; border-radius: 14px; }
.btn-full { width: 100%; justify-content: center; }
.btn-loading::after {
  content: ''; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}

/* ── FORMS ────────────────────────────────────────────────── */
.form-group    { display: flex; flex-direction: column; gap: 7px; }
.form-label    { font-size: .72rem; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .09em; }
.form-input,
.form-select,
.form-textarea {
  background: rgba(255,255,255,.04); border: 1px solid var(--bd);
  border-radius: 11px; padding: 11px 14px; color: var(--t1);
  font-family: var(--fn); font-size: .895rem; outline: none;
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--tl);
  box-shadow: 0 0 0 3px rgba(226,164,0,.10);
}
.form-input::placeholder { color: var(--t3); }
.form-input.error { border-color: var(--re); }
.form-input.success { border-color: var(--gr); }
.form-select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a6080' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.form-select option { background: var(--bg2); }
.form-textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.form-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-full     { grid-column: 1 / -1; }
.form-error    { font-size: .75rem; color: var(--re); display: flex; align-items: center; gap: 5px; }
.form-hint     { font-size: .73rem; color: var(--t3); }

/* Password input wrapper */
.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--t3); cursor: pointer;
  font-size: .9rem; padding: 4px; font-family: var(--fn);
}
.pw-strength-bar { height: 3px; background: var(--bd); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.pw-strength-fill { height: 100%; border-radius: 3px; transition: width .3s, background .3s; }

@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--gl); border: 1px solid var(--bd);
  border-radius: var(--rL); padding: 24px;
  backdrop-filter: blur(20px);
  transition: border-color .2s;
}
.card:hover    { border-color: var(--bd2); }
.card-sm       { padding: 16px; border-radius: var(--rM); }
.card-teal     { background: var(--tl3); border-color: rgba(226,164,0,.18); }
.card-danger   { background: var(--re3); border-color: rgba(239,68,68,.2); }
.card-amber    { background: var(--am3); border-color: rgba(245,158,11,.2); }
.card-hover    { cursor: pointer; transition: transform .35s cubic-bezier(.23,1,.32,1), border-color .3s; }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(226,164,0,.22); }

/* ── KPI CARDS ──────────────────────────────────────────── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 28px;
}
.kpi-card {
  background: var(--gl); border: 1px solid var(--bd);
  border-radius: var(--rL); padding: 22px;
  backdrop-filter: blur(20px);
  transition: border-color .2s, transform .25s;
  position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--tl), transparent);
  opacity: 0; transition: opacity .3s;
}
.kpi-card:hover { border-color: var(--bd2); transform: translateY(-2px); }
.kpi-card:hover::before { opacity: 1; }
.kpi-icon  { font-size: 1.5rem; margin-bottom: 12px; }
.kpi-value { font-weight: 800; font-size: 1.95rem; line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; }
.kpi-label { font-size: .72rem; color: var(--t2); text-transform: uppercase; letter-spacing: .07em; }
.kpi-change { font-size: .73rem; font-weight: 600; margin-top: 5px; }
.kpi-change.up { color: var(--gr); }
.kpi-change.dn { color: var(--re); }

@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 100px;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-pending   { background: var(--am3); color: var(--am); }
.badge-confirmed { background: var(--bl3); color: #6da3f8; }
.badge-assigned  { background: var(--pu3); color: #c58bfa; }
.badge-en-route  { background: var(--tl3); color: var(--tl); }
.badge-completed { background: var(--gr3); color: var(--gr); }
.badge-cancelled { background: var(--re3); color: #ff8f8f; }
.badge-active    { background: var(--gr3); color: var(--gr); }
.badge-inactive  { background: rgba(74,96,128,.2); color: var(--t3); }
.badge-admin     { background: var(--re3); color: var(--re); }
.badge-driver    { background: var(--tl3); color: var(--tl); }
.badge-patient   { background: var(--bl3); color: var(--bl); }
.badge-paid      { background: var(--gr3); color: var(--gr); }
.badge-unpaid    { background: var(--am3); color: var(--am); }
.badge-failed    { background: var(--re3); color: var(--re); }
.badge-live      { background: var(--gr3); color: var(--gr); animation: pulse-badge 2s infinite; }
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table    { width: 100%; border-collapse: collapse; min-width: 600px; }
.data-table thead { background: rgba(255,255,255,.02); }
.data-table th {
  padding: 11px 16px; text-align: left;
  font-size: .69rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--t3);
  border-bottom: 1px solid var(--bd); white-space: nowrap;
}
.data-table td {
  padding: 13px 16px; font-size: .855rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,.014); }
.td-main { font-weight: 600; line-height: 1.3; }
.td-sub  { font-size: .75rem; color: var(--t2); margin-top: 2px; }
.td-mono { font-family: var(--fm); font-size: .77rem; color: var(--t3); }
[dir=rtl] .data-table th, [dir=rtl] .data-table td { text-align: right; }

.table-card    { background: var(--gl); border: 1px solid var(--bd); border-radius: var(--rL); overflow: hidden; backdrop-filter: blur(20px); }
.table-header  { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--bd); flex-wrap: wrap; gap: 12px; }
.table-title   { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }

/* Filter bar */
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
  padding: 5px 13px; border-radius: 100px; font-size: .72rem; font-weight: 700;
  cursor: pointer; border: 1px solid var(--bd); background: transparent;
  color: var(--t2); transition: var(--tr); font-family: var(--fn);
}
.filter-btn:hover, .filter-btn.active { background: var(--tl3); border-color: rgba(226,164,0,.3); color: var(--tl); }

/* Search input */
.search-input {
  padding: 7px 14px; border-radius: 9px; background: var(--gl2);
  border: 1px solid var(--bd); color: var(--t1); font-size: .81rem;
  font-family: var(--fn); outline: none; width: 180px; max-width: 100%;
  transition: border-color .2s;
}
.search-input:focus { border-color: var(--tl); }
@media (max-width: 600px) { .search-input { width: 100%; } .table-header { flex-direction: column; align-items: flex-start; } }

/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.77); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .25s; overflow-y: auto;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg1); border: 1px solid var(--bd);
  border-radius: var(--rX); padding: 32px;
  max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
  transform: translateY(20px); transition: transform .25s;
  box-shadow: var(--sL); flex-shrink: 0;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-box.danger { border-color: rgba(239,68,68,.3); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.modal-title  { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.modal-close  {
  background: none; border: none; color: var(--t2);
  font-size: 1.5rem; cursor: pointer; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: var(--tr); font-family: var(--fn);
}
.modal-close:hover { background: var(--gl2); color: var(--t1); }

/* ── TOASTS ──────────────────────────────────────────────── */
.toast-wrapper {
  position: fixed; top: 76px; right: 20px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 17px; border-radius: 13px;
  min-width: 280px; max-width: 380px;
  background: var(--bg2); border: 1px solid var(--bd);
  box-shadow: var(--sM); font-size: .85rem; pointer-events: all;
  animation: toast-in .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.toast.success { border-color: rgba(34,197,94,.3); }
.toast.error   { border-color: rgba(239,68,68,.3); }
.toast.info    { border-color: rgba(226,164,0,.3); }
.toast.warning { border-color: rgba(245,158,11,.3); }
.toast-icon    { font-size: 1.1rem; flex-shrink: 0; }
.toast-msg     { flex: 1; font-weight: 500; line-height: 1.4; }
.toast-close   { background: none; border: none; color: var(--t3); cursor: pointer; font-size: 1.1rem; padding: 0 2px; transition: color .2s; }
.toast-close:hover { color: var(--t1); }
@keyframes toast-in { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: translateX(0); } }

/* ── LOADING ─────────────────────────────────────────────── */
.spinner { width: 32px; height: 32px; border: 2.5px solid var(--bd); border-top-color: var(--tl); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px; color: var(--t2); font-size: .9rem; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state { padding: 60px 20px; text-align: center; color: var(--t2); }
.empty-icon  { font-size: 2.7rem; margin-bottom: 12px; opacity: .6; }

/* ── BAR CHART ──────────────────────────────────────────── */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; padding-bottom: 24px; }
.bar-wrap  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; min-width: 28px; }
.bar-col   { width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(to top, var(--tl2), var(--tl)); min-height: 4px; transition: height .6s cubic-bezier(.23,1,.32,1); }
.bar-val   { font-size: .67rem; font-weight: 700; color: var(--tl); }
.bar-lbl   { font-size: .65rem; color: var(--t3); position: absolute; bottom: -20px; white-space: nowrap; }

/* ── SOCKET STATUS ──────────────────────────────────────── */
.socket-status { display: flex; align-items: center; gap: 6px; font-size: .73rem; color: var(--t3); }
.socket-dot    { width: 7px; height: 7px; border-radius: 50%; background: var(--re); transition: background .3s; }
.socket-dot.connected { background: var(--gr); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 10px rgba(34,197,94,0)} }

/* ── STEP WIZARD ─────────────────────────────────────────── */
.step-bar { display: flex; background: var(--bg1); border: 1px solid var(--bd); border-radius: 13px; padding: 4px; gap: 4px; overflow-x: auto; margin-bottom: 32px; }
.step-item { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 10px; cursor: default; font-size: .75rem; font-weight: 700; color: var(--t3); transition: all .25s; white-space: nowrap; }
.step-item.active { background: var(--gl2); color: var(--tl); }
.step-item.done   { color: var(--gr); }
.step-num  { font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; }

/* Trip stepper */
.trip-stepper { display: flex; align-items: center; overflow-x: auto; padding: 12px 0; -webkit-overflow-scrolling: touch; }
.trip-step    { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 60px; }
.trip-step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; border: 2px solid var(--bd); background: var(--bg2); color: var(--t3); z-index: 1; flex-shrink: 0; }
.trip-step-circle.done   { background: var(--tl); border-color: var(--tl); color: var(--bg0); }
.trip-step-circle.active { background: var(--am); border-color: var(--am); color: var(--bg0); }
.trip-step-line { flex: 1; height: 2px; background: var(--bd); margin-top: -14px; }
.trip-step-line.done { background: var(--tl); }
.trip-step-label { font-size: .63rem; color: var(--t3); margin-top: 5px; text-align: center; white-space: nowrap; }
.trip-step-label.active { color: var(--am); }
.trip-step-label.done   { color: var(--tl); }

/* ── REVEAL ANIMATIONS ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left  { opacity: 0; transform: translateX(-26px); transition: opacity .65s, transform .65s; }
.reveal-left.visible  { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(26px); transition: opacity .65s, transform .65s; }
.reveal-right.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; } .delay-4 { transition-delay: .4s; }

/* ── SECTION LABELS ──────────────────────────────────────── */
.section-tag  { font-size: .71rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--tl); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-tag::before { content: ''; width: 20px; height: 1px; background: var(--tl); }
.section-h2   { font-weight: 900; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1.06; }
.section-h2 em { font-style: normal; color: var(--tl); }
.section-desc { color: var(--t2); font-size: .975rem; line-height: 1.7; font-weight: 300; margin-top: 10px; max-width: 500px; }

/* ── MAP PLACEHOLDER ─────────────────────────────────────── */
.map-box { height: 280px; border-radius: var(--rL); overflow: hidden; border: 1px solid var(--bd); position: relative; background: var(--bg2); }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(226,164,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(226,164,0,.04) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.map-pin  { font-size: 2.5rem; animation: map-pin 1.5s ease-in-out infinite; }
@keyframes map-pin { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── LIVE TRACKING MAP ───────────────────────────────────── */
.live-map { height: 380px; background: var(--bg2); border-radius: var(--rL); border: 1px solid var(--bd); position: relative; overflow: hidden; }
.live-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(226,164,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(226,164,0,.04) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.vehicle-icon { position: absolute; font-size: 1.4rem; transition: left 1.5s ease, top 1.5s ease; cursor: default; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gr); animation: pulse-dot 1.5s infinite; display: inline-block; }

/* ── LOADING SPLASH ──────────────────────────────────────── */
.page-loader { position: fixed; inset: 0; z-index: 9998; background: var(--bg0); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; transition: opacity .4s; }
.page-loader.hidden { opacity: 0; pointer-events: none; }
.page-loader-text { font-size: .9rem; color: var(--t2); }

/* ── GRADIENT TEXT ───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--tl) 0%, #00ffe0 40%, var(--am) 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s linear infinite;
}
@keyframes gradient-shift { to { background-position: 200% center; } }

/* ── RTL support ─────────────────────────────────────────── */
[dir=rtl] .section-tag::before { display: none; }
[dir=rtl] .section-tag::after  { content: ''; width: 20px; height: 1px; background: var(--tl); }

/* Light mode: darker badge text so it meets 4.5:1 on white */
body.light-mode .badge-pending   { color: #92400e; }
body.light-mode .badge-confirmed { color: #1d4ed8; }
body.light-mode .badge-assigned  { color: #7e22ce; }
body.light-mode .badge-en-route  { color: #0f766e; }
body.light-mode .badge-completed { color: #15803d; }
body.light-mode .badge-cancelled { color: #b91c1c; }

/* ---- Right-to-left (Arabic) ---- */
[dir=rtl] body { text-align: right; }
[dir=rtl] .data-table th, [dir=rtl] .data-table td { text-align: right; }
[dir=rtl] .toast-wrapper { right: auto; left: 20px; }
@keyframes toast-in-rtl { from { opacity:0; transform: translateX(-30px); } to { opacity:1; transform: translateX(0); } }
[dir=rtl] .toast { animation-name: toast-in-rtl; }
[dir=rtl] .form-select { background-position: left 12px center; padding-right: 14px; padding-left: 34px; }
[dir=rtl] .pw-toggle { right: auto; left: 12px; }
[dir=rtl] .pw-wrap .form-input { padding-right: 14px; padding-left: 40px; }
[dir=rtl] input[type=email], [dir=rtl] input[type=tel], [dir=rtl] input[type=number] { text-align: right; }

/* ── v7: chat, emergency, PIN, lists (logical properties so RTL works) ── */
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:10px;background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.chat-msg{max-width:82%;padding:8px 12px;border-radius:12px;background:var(--bg3);color:var(--t1);align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap}
.chat-msg.mine{align-self:flex-end;background:var(--tl3);border:1px solid var(--tl2)}
.chat-msg .tiny{margin-block-start:2px}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;margin-block:8px}
.chat-quick button{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--t1);cursor:pointer;font:inherit;font-size:.85rem}
.chat-quick button:hover,.chat-quick button:focus-visible{border-color:var(--tl);outline:none}
.sos-btn{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:900;min-width:48px;min-height:48px;padding:0 16px;border-radius:999px;border:2px solid #fff;background:var(--re);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.sos-btn:focus-visible{outline:3px solid var(--am);outline-offset:2px}
.plain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plain-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border-radius:10px}
.pin-box{display:inline-block;padding:6px 16px;border-radius:10px;background:var(--bg3);border:1px dashed var(--tl);font:700 1.6rem/1.2 ui-monospace,monospace;letter-spacing:.3em;color:var(--tl)}
@media (max-width:480px){.chat-msg{max-width:92%}}