:root {
  --navy: #0f2742;
  --blue: #1f65d6;
  --blue-soft: #e9f1ff;
  --green: #16845b;
  --red: #c43c3c;
  --amber: #b36b00;
  --ink: #162334;
  --muted: #66758a;
  --border: #dfe6ef;
  --bg: #f4f7fb;
  --card: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top right, #dceaff, transparent 42%), linear-gradient(135deg, #f6f8fc, #e9eef7); }
.login-card { width: min(430px, 100%); background: white; padding: 34px; border-radius: 24px; box-shadow: 0 24px 70px rgba(15, 39, 66, .16); }
.brand-mark { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--navy); color: white; font-weight: 800; font-size: 24px; }
.login-card h1 { margin: 18px 0 4px; font-size: 32px; }
.login-card p { line-height: 1.6; }
label { display: block; font-weight: 650; margin: 15px 0 7px; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px; background: white; color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
button { border: 0; border-radius: 11px; padding: 10px 14px; background: #eef2f7; color: var(--ink); font-weight: 700; }
button.primary { width: 100%; margin-top: 18px; background: var(--blue); color: white; padding: 12px 16px; }
button.danger { background: #fff0f0; color: var(--red); }
button.success { background: #e8f7f1; color: var(--green); }
.demo-logins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.demo-logins button { font-size: 12px; }
.install-button { width: 100%; margin-top: 12px; border: 1px solid var(--blue); background: white; color: var(--blue); padding: 11px 14px; }
.install-button.ready { background: var(--blue-soft); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 235px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 20px 14px; background: var(--navy); color: white; display: flex; flex-direction: column; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; font-size: 20px; }
.small-mark { width: 34px; height: 34px; border-radius: 10px; background: white; color: var(--navy); font-size: 17px; }
#nav { display: grid; gap: 5px; }
#nav button { text-align: left; background: transparent; color: #c7d3e2; padding: 11px 12px; }
#nav button.active, #nav button:hover { background: rgba(255,255,255,.11); color: white; }
.logout { margin-top: auto; background: rgba(255,255,255,.08); color: white; }
main { min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; background: rgba(255,255,255,.88); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); }
.topbar h2 { margin: 0 0 4px; }
.topbar p { margin: 0; }
.user-pill { display: grid; justify-items: end; background: #f0f4fa; padding: 8px 12px; border-radius: 12px; }
.user-pill small { color: var(--muted); text-transform: capitalize; }
.content { padding: 26px 28px 50px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: 0 8px 26px rgba(27, 54, 88, .05); }
.metric span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.metric strong { font-size: 25px; }
.metric.positive strong { color: var(--green); }
.metric.negative strong { color: var(--red); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: white; border: 1px solid var(--border); border-radius: 17px; padding: 19px; box-shadow: 0 8px 26px rgba(27, 54, 88, .04); margin-bottom: 18px; overflow: hidden; }
.card h3 { margin: 0 0 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-head h3 { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid label { margin-top: 0; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 11px 10px; border-bottom: 1px solid #edf1f6; text-align: left; font-size: 13px; vertical-align: middle; }
th { color: var(--muted); font-weight: 750; background: #fafbfd; position: sticky; top: 0; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; text-transform: capitalize; background: #eef2f7; }
.badge.present, .badge.approved, .badge.paid, .badge.confirmed { background: #e4f6ee; color: var(--green); }
.badge.late, .badge.pending, .badge.draft { background: #fff4dc; color: var(--amber); }
.badge.rejected, .badge.inactive { background: #ffeded; color: var(--red); }
.progress { height: 8px; background: #edf1f6; border-radius: 99px; overflow: hidden; min-width: 100px; }
.progress span { display: block; height: 100%; background: var(--blue); }
.office-row { display: grid; grid-template-columns: 1.3fr repeat(6, 1fr); gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf1f6; font-size: 13px; }
.office-row:last-child { border: 0; }
.toast { position: fixed; right: 18px; bottom: 18px; max-width: 370px; padding: 12px 16px; border-radius: 12px; background: var(--navy); color: white; z-index: 100; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }
.empty { color: var(--muted); text-align: center; padding: 30px; }
.checkin-hero { padding: 30px; text-align: center; background: linear-gradient(135deg, #0f2742, #1f65d6); color: white; border-radius: 20px; margin-bottom: 18px; }
.checkin-hero h3 { font-size: 26px; margin: 0 0 8px; }
.checkin-hero button { margin-top: 16px; background: white; color: var(--navy); padding: 13px 26px; }
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(2, 1fr); } .form-grid { grid-template-columns: repeat(2, 1fr); } }
.topbar-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title { min-width: 0; }
.mobile-menu-btn, .mobile-nav-backdrop { display: none; }

@media (max-width: 760px) {
  body.mobile-nav-open { overflow: hidden; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(84vw, 320px);
    height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 18px 0 45px rgba(3, 18, 35, .28);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-brand { display: flex; padding-bottom: 16px; }
  #nav { display: grid; gap: 5px; width: 100%; }
  #nav button { width: 100%; font-size: 15px; white-space: normal; padding: 12px; }
  .logout { display: block; width: 100%; flex: 0 0 auto; }
  #changePinBtn { margin-top: auto; }
  #logoutBtn { margin-top: 8px; background: rgba(255,255,255,.14); }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(4, 15, 29, .52);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    backdrop-filter: blur(2px);
  }
  .mobile-nav-backdrop.show { opacity: 1; pointer-events: auto; }
  .mobile-menu-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: var(--navy);
    border-radius: 12px;
  }
  .mobile-menu-btn span { width: 20px; height: 2px; border-radius: 4px; background: white; }
  .topbar {
    padding: calc(10px + env(safe-area-inset-top)) 14px 12px;
    align-items: flex-start;
  }
  .topbar h2 { font-size: clamp(22px, 7vw, 30px); line-height: 1.12; }
  .topbar p { font-size: 14px; line-height: 1.35; }
  .content { padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
  .metrics, .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .user-pill { display: none; }
  .demo-logins { grid-template-columns: 1fr; }
  .office-row { grid-template-columns: 1fr 1fr; }
  .toast { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: none; }
}
button.primary.compact { width: auto; margin-top: 0; padding: 10px 14px; }
.notice { margin: 14px 0; padding: 12px 14px; border: 1px solid #f0d89b; border-radius: 12px; background: #fff8e7; color: #6d4b00; line-height: 1.5; }
.office-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fafbfd; }
.office-check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; border: 1px solid #e5ebf2; border-radius: 10px; background: white; cursor: pointer; }
.office-check input { width: auto; margin: 0; }
@media (max-width: 760px) { .office-check-grid { grid-template-columns: 1fr; } }

/* Sales funnel roles */
.sales-role-box {
  padding: 14px;
  border: 1px solid var(--border, #dbe3ec);
  border-radius: 12px;
  background: #f8fafc;
}
.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.check-line input { width: auto; margin: 0; }
.role-rate-grid { margin-top: 10px; }
.role-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f1fb;
  color: #174a75;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
input:disabled {
  background: #edf1f5;
  color: #7b8794;
  cursor: not-allowed;
}

/* Daily sales filters and tiered incentive editor */
.tier-role-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}
.tier-role-card h4 { margin: 0 0 10px; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.inline-field input { width: auto; min-width: 150px; }
.metric-small { font-size: 16px !important; line-height: 1.25; }
@media (max-width: 760px) {
  .inline-field { width: 100%; align-items: stretch; flex-direction: column; gap: 5px; }
  .inline-field input { width: 100%; }
  .card-head .actions { width: 100%; }
  .card-head .actions > button { flex: 1 1 150px; }
}


/* Global red announcements */
.announcement-bar {
  display: grid;
  gap: 10px;
  padding: 14px 28px 0;
  background: var(--bg);
}
.announcement-item {
  border: 2px solid #b91c1c;
  border-left-width: 8px;
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff1f2;
  color: #7f1d1d;
  box-shadow: 0 8px 22px rgba(185, 28, 28, .10);
}
.announcement-item strong { display: block; color: #991b1b; font-size: 17px; margin-bottom: 4px; }
.announcement-item p { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.45; }
.announcement-label { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: #dc2626; margin-bottom: 5px; }
.announcement-winner { display: inline-block; margin: 4px 0; padding: 5px 9px; border-radius: 999px; background: #b91c1c; color: white; font-weight: 900; }
@media (max-width: 760px) {
  .announcement-bar { padding: 12px 14px 0; }
  .announcement-item { padding: 12px 13px; }
}

/* Keep account controls visible on short Mac and laptop screens */
@media (min-width: 761px) {
  .sidebar { overflow: hidden; }
  #nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
  }
  #changePinBtn, #logoutBtn { flex: 0 0 auto; width: 100%; }
  #changePinBtn { margin-top: 10px; }
  #logoutBtn { margin-top: 8px; }
}

/* Attendance search and individual history */
.attendance-filter-card .form-grid { align-items: end; }
.attendance-filter-card .actions { padding-top: 4px; }
.badge.absent { background: #ffeded; color: var(--red); }
@media (max-width: 760px) {
  .attendance-filter-card .actions > button { width: 100%; flex: 1 1 100%; }
}


/* Hold calls and employee call performance */
select[multiple] { min-height: 120px; padding: 8px; }
select[multiple] option { padding: 7px 8px; border-radius: 6px; }
.reason-count { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.reason-count:last-child { border-bottom: 0; }
.badge.blank, .badge.prank, .badge.abusive, .badge.cancelled { background: #ffeded; color: var(--red); }
.badge.completed { background: #e4f6ee; color: var(--green); }
.badge.hold { background: #fff4dc; color: var(--amber); }
@media (max-width: 760px) { select[multiple] { min-height: 170px; } }

/* Real-time team chat */
.chat-shell {
  display: grid;
  grid-template-rows: auto minmax(420px, 64vh) auto auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
}
.chat-room-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 340px) 1fr;
  gap: 18px;
  align-items: end;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.chat-room-toolbar label { margin-top: 0; }
.chat-room-meta { display: flex; flex-direction: column; gap: 3px; padding-bottom: 5px; }
.chat-room-meta strong { color: var(--navy); font-size: 17px; }
.chat-room-meta span { color: var(--muted); font-size: 13px; }
.chat-messages {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  background: linear-gradient(180deg, #f5f8fc 0%, #eef4f9 100%);
}
.chat-message {
  width: min(78%, 680px);
  margin: 0 auto 12px 0;
  padding: 12px 14px;
  border: 1px solid #dbe5ef;
  border-radius: 6px 16px 16px 16px;
  background: white;
  box-shadow: 0 5px 16px rgba(15,39,66,.07);
}
.chat-message.mine {
  margin-left: auto;
  margin-right: 0;
  border-color: #b9d5ee;
  border-radius: 16px 6px 16px 16px;
  background: #eaf4ff;
}
.chat-message-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 7px; }
.chat-message-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.chat-message-head time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.chat-role-tag { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.chat-role-tag.admin { background: #fee2e2; color: #991b1b; }
.chat-role-tag.manager { background: #ede9fe; color: #5b21b6; }
.chat-role-tag.banker { background: #dbeafe; color: #1d4ed8; }
.chat-role-tag.closer { background: #dcfce7; color: #166534; }
.chat-message-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.chat-message-image { display: block; width: auto; max-width: 100%; max-height: 440px; margin-top: 10px; border-radius: 12px; background: #dce5ee; object-fit: contain; }
.chat-reply-preview { display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px; padding: 8px 10px; border-left: 4px solid #4d82b0; border-radius: 8px; background: rgba(15,39,66,.06); }
.chat-reply-preview strong { font-size: 12px; color: #315f85; }
.chat-reply-preview span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-actions { display: flex; gap: 10px; margin-top: 8px; }
.chat-message-actions button { width: auto; margin: 0; padding: 2px 0; border: 0; background: transparent; color: #376f9e; font-size: 12px; font-weight: 800; }
.chat-message-actions .danger-link { color: var(--red); }
.chat-deleted { color: var(--muted); font-style: italic; }
.chat-reply-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); background: #fff9e8; }
.chat-reply-bar > div { display: flex; min-width: 0; flex-direction: column; }
.chat-reply-bar span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-bar button { width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; }
.chat-composer { padding: 12px 16px 14px; border-top: 1px solid var(--border); background: white; }
.chat-composer textarea { min-height: 62px; max-height: 160px; resize: vertical; }
.chat-composer-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.chat-composer-actions .primary { width: auto; min-width: 90px; margin: 0 0 0 auto; }
.chat-image-button { display: inline-flex; width: auto; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #f7fafc; color: var(--navy); cursor: pointer; font-weight: 800; }
.chat-image-button input { display: none; }
.chat-room-admin-list { display: grid; gap: 8px; margin-top: 14px; }
.chat-room-admin-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.chat-room-admin-list span { display: flex; min-width: 0; flex-direction: column; }
.chat-room-admin-list small { color: var(--muted); }
.chat-room-admin-list button { width: auto; margin: 0; padding: 8px 12px; }
@media (max-width: 760px) {
  .chat-shell { grid-template-rows: auto minmax(360px, 58vh) auto auto; border-radius: 14px; }
  .chat-room-toolbar { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .chat-room-meta { display: none; }
  .chat-messages { padding: 12px 9px; }
  .chat-message { width: 91%; padding: 10px 11px; }
  .chat-message-head { flex-direction: column; gap: 3px; }
  .chat-message-head time { align-self: flex-end; }
  .chat-composer { padding: 10px; }
  .chat-composer-actions { flex-wrap: wrap; }
  .chat-composer-actions .primary { margin-left: auto; }
  #chatImageName { width: 100%; }
}


/* Batch daily call entry */
.batch-call-controls { align-items: end; margin-bottom: 14px; }
.batch-call-list { display: grid; gap: 10px; }
.batch-call-row { display: grid; grid-template-columns: 42px minmax(150px, .9fr) minmax(240px, 1.35fr) minmax(160px, 1fr); gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: #fafbfd; }
.batch-call-row label { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.batch-call-number { width: 34px; height: 34px; display: grid; place-items: center; align-self: center; border-radius: 10px; background: var(--navy); color: white; font-weight: 800; }
.batch-call-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.batch-call-actions .primary { margin-top: 0; }
@media (max-width: 760px) {
  .batch-call-row { grid-template-columns: 38px 1fr; align-items: start; }
  .batch-call-row > div:not(.batch-call-number) { grid-column: 2; }
  .batch-call-number { grid-row: 1 / span 3; margin-top: 22px; }
  .batch-call-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .batch-call-actions .primary { grid-column: 1 / -1; width: 100%; }
}

/* Multi-office and selected-member chat room controls */
.chat-room-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.multi-picker { position: relative; width: 100%; }
.multi-picker > summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--navy); cursor: pointer; font-weight: 700; list-style: none; }
.multi-picker > summary::-webkit-details-marker { display: none; }
.multi-picker > summary::after { content: '▾'; margin-left: 12px; color: var(--muted); }
.multi-picker[open] > summary { border-color: #6ea3cf; box-shadow: 0 0 0 3px rgba(47,117,181,.12); }
.multi-picker-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: 0 16px 36px rgba(15,39,66,.18); }
.multi-picker-option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.multi-picker-option:hover { background: #f2f7fb; }
.multi-picker-option.emphasized { margin-bottom: 5px; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; font-weight: 800; }
.multi-picker-option input, .chat-member-option input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.member-picker-menu { max-height: 390px; }
.member-picker-menu > input { position: sticky; z-index: 1; top: 0; margin: 0 0 8px; background: white; }
.chat-member-options { display: grid; gap: 4px; }
.chat-member-option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px; border-radius: 9px; cursor: pointer; }
.chat-member-option:hover { background: #f2f7fb; }
.chat-member-option > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.chat-member-option strong { color: var(--navy); }
.chat-member-option small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.chat-room-admin-list > div > span { gap: 2px; }
@media (max-width: 760px) {
  .multi-picker-menu { position: fixed; z-index: 80; top: 15vh; right: 14px; bottom: auto; left: 14px; max-height: 68vh; }
  .chat-room-admin-list > div { align-items: flex-start; }
}

/* Reliable chat sync, unread badge and notifications */
#nav button { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.nav-unread { display: inline-grid; min-width: 21px; height: 21px; padding: 0 6px; place-items: center; border-radius: 999px; background: #ef4444; color: white; font-size: 11px; font-weight: 900; }
.chat-shell { grid-template-rows: auto auto minmax(420px, 64vh) auto auto; }
.chat-live-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: #fff; }
.chat-live-tools > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.chat-live-tools button { width: auto; flex: 0 0 auto; margin: 0; padding: 8px 12px; border: 1px solid #b8c8d9; background: #f8fafc; color: var(--navy); }
.chat-live-tools button.enabled { border-color: #9bd3b8; background: #e8f7f1; color: var(--green); }
.chat-live-tools button:disabled { cursor: not-allowed; opacity: .58; }
.chat-live-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 850; }
.chat-live-status::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #94a3b8; content: ''; }
.chat-live-status.connected { color: var(--green); }
.chat-live-status.connected::before { background: var(--green); box-shadow: 0 0 0 4px rgba(22,132,91,.12); }
.chat-live-status.connecting::before, .chat-live-status.reconnecting::before { background: var(--amber); animation: chatPulse 1.2s infinite; }
.chat-live-status.polling::before { background: var(--blue); }
@keyframes chatPulse { 50% { opacity: .35; transform: scale(.75); } }
@media (max-width: 760px) {
  .chat-shell { grid-template-rows: auto auto minmax(360px, 58vh) auto auto; }
  .chat-live-tools { align-items: stretch; flex-direction: column; padding: 10px 12px; }
  .chat-live-tools button { width: 100%; }
}