/* Mobile-first base styles */
:root {
  --bg: #f6f8fb;
  --fg: #0f172a;
  --muted: #6b7280;
  --card: #ffffff;
  --primary: #0d6efd;
  --border: #e5e7eb;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.page { background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.container { padding: 16px; max-width: 1000px; margin: 0 auto; }
.container.wide { max-width: 1400px; }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.topbar .brand { font-weight: 700; letter-spacing: 0.5px; }
.topbar .spacer { flex: 1; }

.link { background: none; border: none; color: var(--primary); padding: 0; font: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.error { color: #b00020; }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin: 16px 0; overflow: hidden; }
.panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.panel-body { padding: 0; }
.panel.collapsed .panel-body { display: none; }
.panel-toggle { background: #f3f4f6; border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.panel.collapsed .panel-toggle::after { content: '+'; font-size: 18px; line-height: 1; }
.panel:not(.collapsed) .panel-toggle::after { content: '–'; font-size: 18px; line-height: 1; }
.panel-header h2 { margin: 0; font-size: 18px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.grid .col { display: flex; flex-direction: column; gap: 6px; }
.grid .col-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
label { font-size: 14px; color: var(--muted); }
input, textarea, select { padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
select { height: 44px; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(13,110,253,.25); border-color: #93c5fd; }
[disabled] { opacity: .6; cursor: not-allowed; }

.btn { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: #f3f4f6; cursor: pointer; }
.btn.primary { background: var(--primary); color: #fff; border: none; }

.dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 16px; background: #fafafa; text-align: center; }
.dropzone.dragover { background: #eef6ff; border-color: var(--primary); }
.file-list { list-style: none; padding-left: 0; margin-top: 8px; text-align: left; }
.file-list li { padding: 6px 0; border-bottom: 1px dashed #eee; display: flex; align-items: center; justify-content: space-between; }

.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 12px; transition: background .15s ease; }
.list-item:hover { background: #fafafa; }
.list-item .item-title { font-weight: 600; }
.list-item .item-sub { color: var(--muted); font-size: 14px; }
.badge { padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; }
.badge.new-claim { background: #e0f2fe; color: #0369a1; }
.badge.documents-received { background: #fef3c7; color: #92400e; }
.badge.claim-quote-submitted { background: #e0e7ff; color: #3730a3; }
.badge.authorisation-received { background: #dcfce7; color: #166534; }
.badge.invoice-submitted { background: #f3e8ff; color: #6b21a8; }
.badge.additional-information-requested { background: #fee2e2; color: #991b1b; }
.badge.additional-information-submitted { background: #fef9c3; color: #854d0e; }
.badge.claim-gone-for-clinical-review { background: #f5f3ff; color: #4c1d95; }
.badge.payment-recived { background: #dcfce7; color: #065f46; }
.badge.shortfall-received { background: #ffedd5; color: #9a3412; }
.badge.deliverd-to-facility { background: #e0f2fe; color: #075985; }
.badge.delivered-to-patient { background: #e0f2fe; color: #075985; }
.badge.claim-reversed { background: #fee2e2; color: #991b1b; }
.badge.deceased { background: #e5e7eb; color: #374151; }
.badge.claim-finalised { background: #d1fae5; color: #065f46; }
.badge.exgratia-claim-submitted { background: #ede9fe; color: #5b21b6; }
.badge.claim-declined { background: #fee2e2; color: #b91c1c; }
.badge.no-funds-available { background: #fef3c7; color: #92400e; }
.badge.query { background: #f1f5f9; color: #0f172a; }

.thumb { width: 48px; height: 48px; border-radius: 8px; background: #f3f4f6; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Chevron indicator on list links */
.item-link { position: relative; }
.item-link::after { content: "›"; margin-left: 8px; color: var(--muted); font-weight: 600; }

.pad { padding: 16px; }
.kv { display:flex; gap: 12px; padding: 6px 16px; }
.kv .k { width: 120px; color: var(--muted); }
.kv .v { flex: 1; }

.timeline { position: relative; padding: 8px 16px; }
.timeline-item { position: relative; display: flex; gap: 12px; padding: 12px 0 12px 0; }
.timeline-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-top: 8px; }
.timeline-content { flex: 1; }
.timeline-title { font-weight: 600; }
.timeline-sub { color: var(--muted); font-size: 12px; }
.timeline-notes { margin-top: 6px; }

/* PDF previews and text extraction blocks */
.pdf-preview { padding: 12px 16px; background: #fff; border: 1px solid var(--border); border-radius: 8px; margin: 0 16px 12px 16px; }
.pdf-preview canvas { width: 100%; height: auto; display: block; }
.text-extract { padding: 12px 16px; background: #fafafa; border: 1px dashed var(--border); border-radius: 8px; margin: 0 16px 12px 16px; }

/* Admin layout */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; display:flex; align-items:center; justify-content:space-between; }
.card-body { padding: 12px 16px; }
.card.collapsed .card-body { display: none; }
.card-toggle { background: #f3f4f6; border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.card.collapsed .card-toggle::after { content: '+'; font-size: 18px; line-height: 1; }
.card:not(.collapsed) .card-toggle::after { content: '–'; font-size: 18px; line-height: 1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; word-break: break-word; overflow-wrap: anywhere; }
th { position: sticky; top: 0; background: #f9fafb; z-index: 1; }
th.sortable { cursor: pointer; }
th.sortable::after { content: '\2195'; margin-left:6px; color: var(--muted); font-size:12px; }
th.sort-asc::after { content: '\2191'; }
th.sort-desc::after { content: '\2193'; }
.actions { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.caret { width: 16px; height: 16px; display:inline-block; transform: rotate(-90deg); transition: transform .15s ease; color: var(--muted); }
.caret.expanded { transform: rotate(0deg); }
.inline-preview td { background: #fafafa; }
.inline-preview .preview { padding: 8px 0; display:flex; gap:16px; align-items:flex-start; }
.preview .section { min-width: 180px; }
.preview .label { font-size: 12px; color: var(--muted); }
.preview .value { font-size: 14px; }
.actions .btn { padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; }
/* Keep table cells single-line with ellipsis, but allow actions to fully show */
.admin-grid table th,
.admin-grid table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-grid table td.actions { overflow: visible; white-space: nowrap; }
.actions { min-width: 140px; }
.btn.danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.btn.danger:hover { background: #fecaca; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid .field { display: flex; flex-direction: column; gap: 4px; }
.form-grid .field input, .form-grid .field textarea, .form-grid .field select { width: 100%; }

/* Stacked layout always; no side-by-side needed */

@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; }
}
.field-checkbox .checkbox { display: inline-flex; align-items: center; gap: 8px; height: 44px; }
.field-checkbox input[type="checkbox"] { width: 18px; height: 18px; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn.secondary { background: #f3f4f6; }

/* Drawer */
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,0.2); display: flex; justify-content: flex-end; z-index: 50; }
.drawer-content { width: min(420px, 95vw); height: 100%; background: #fff; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.drawer-body { padding: 12px 16px; overflow: auto; }

/* Kanban card status accent */
.kb-card { border-left: 4px solid transparent; }
.kb-card.status-new-claim { border-left-color: #0ea5e9; }
.kb-card.status-documents-received { border-left-color: #f59e0b; }
.kb-card.status-claim-quote-submitted { border-left-color: #6366f1; }
.kb-card.status-authorisation-received { border-left-color: #10b981; }
.kb-card.status-invoice-submitted { border-left-color: #8b5cf6; }
.kb-card.status-additional-information-requested { border-left-color: #ef4444; }
.kb-card.status-additional-information-submitted { border-left-color: #d97706; }
.kb-card.status-claim-gone-for-clinical-review { border-left-color: #7c3aed; }
.kb-card.status-payment-recived { border-left-color: #059669; }
.kb-card.status-shortfall-received { border-left-color: #d97706; }
.kb-card.status-deliverd-to-facility { border-left-color: #0284c7; }
.kb-card.status-delivered-to-patient { border-left-color: #0284c7; }
.kb-card.status-claim-reversed { border-left-color: #b91c1c; }
.kb-card.status-deceased { border-left-color: #6b7280; }
.kb-card.status-claim-finalised { border-left-color: #10b981; }
.kb-card.status-exgratia-claim-submitted { border-left-color: #6d28d9; }
.kb-card.status-claim-declined { border-left-color: #b91c1c; }
.kb-card.status-no-funds-available { border-left-color: #b45309; }
.kb-card.status-query { border-left-color: #334155; }

/* Kanban column header colors (matched to statuses) */
.kb-col .kb-head { background: #fff; }
.kb-col .kb-head .count { background: #f3f4f6; color: var(--muted); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.kb-col.drop-over { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kb-col.status-new-claim   .kb-head { background: #e0f2fe; color: #075985; }
.kb-col.status-documents-received .kb-head { background: #fef3c7; color: #92400e; }
.kb-col.status-claim-quote-submitted .kb-head { background: #e0e7ff; color: #3730a3; }
.kb-col.status-authorisation-received .kb-head { background: #dcfce7; color: #166534; }
.kb-col.status-invoice-submitted .kb-head { background: #f3e8ff; color: #6b21a8; }
.kb-col.status-additional-information-requested .kb-head { background: #fee2e2; color: #991b1b; }
.kb-col.status-additional-information-submitted .kb-head { background: #fef9c3; color: #854d0e; }
.kb-col.status-claim-gone-for-clinical-review .kb-head { background: #f5f3ff; color: #4c1d95; }
.kb-col.status-payment-recived .kb-head { background: #dcfce7; color: #065f46; }
.kb-col.status-shortfall-received .kb-head { background: #ffedd5; color: #9a3412; }
.kb-col.status-deliverd-to-facility .kb-head { background: #e0f2fe; color: #075985; }
.kb-col.status-delivered-to-patient .kb-head { background: #e0f2fe; color: #075985; }
.kb-col.status-claim-reversed .kb-head { background: #fee2e2; color: #991b1b; }
.kb-col.status-deceased .kb-head { background: #e5e7eb; color: #374151; }
.kb-col.status-claim-finalised .kb-head { background: #d1fae5; color: #065f46; }
.kb-col.status-exgratia-claim-submitted .kb-head { background: #ede9fe; color: #5b21b6; }
.kb-col.status-claim-declined .kb-head { background: #fee2e2; color: #b91c1c; }
.kb-col.status-no-funds-available .kb-head { background: #fef3c7; color: #92400e; }
.kb-col.status-query .kb-head { background: #e5e7eb; color: #0f172a; }

/* Toasts */
.toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #111827; color: #fff; padding: 10px 12px; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,.15); display:flex; align-items:center; gap:8px; min-width: 200px; max-width: 320px; animation: toast-in .2s ease-out; }
.toast.success { background: #065f46; }
.toast.info { background: #1f2937; }
.toast.error { background: #7f1d1d; }
.toast .close { background:none; border:none; color:#fff; cursor:pointer; margin-left:auto; opacity:.8; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Skeletons */
.skeleton { position: relative; overflow: hidden; background: #f3f4f6; border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-line { height: 12px; margin: 6px 0; border-radius: 6px; }
.skeleton-thumb { width: 48px; height: 48px; border-radius: 8px; flex: 0 0 auto; }
.skeleton-row { display:flex; align-items:center; gap:12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.skeleton-cell { height: 14px; border-radius: 6px; }


/* Age color scale */
.age-ok { color: #059669; font-weight:600; }
.age-warn { color: #d97706; font-weight:600; }
.age-bad { color: #ff1a1a; font-weight:700; }


/* List inline preview under My Claims */
.list-preview { background:#fafafa; border-bottom: 1px solid var(--border); padding: 10px 16px; }
.list-preview .row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.list-preview .section { min-width: 180px; }
.list-preview .label { font-size:12px; color:var(--muted); }
.list-preview .value { font-size:14px; }

/* Stage indicator */
.stage { display:flex; align-items:center; gap:8px; margin-top:4px; }
.stage.stage-sm { gap:6px; }
.stage .bar { --p:0; position:relative; height:6px; background:#e5e7eb; border-radius:6px; overflow:hidden; width:120px; }
.stage.stage-sm .bar { width:90px; height:5px; }
.stage .bar .fill { position:absolute; left:0; top:0; bottom:0; width:calc(var(--p) * 1%); background:#0d6efd; border-radius:6px; }
.stage .stage-label { font-size:12px; color: var(--muted); white-space:nowrap; }

/* Stage chip for Kanban cards */
.kb-card .card-meta { display:flex; align-items:center; gap:6px; }
.stage-chip { background:#eef2ff; color:#3730a3; border:1px solid #e5e7eb; padding:2px 6px; border-radius:999px; font-size:11px; line-height:1; }

/* ========================= */
/*  BEAUTIFY THEME OVERRIDES */
/* ========================= */

/* Enhanced palette */
:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --primary: #2563eb; /* richer blue */
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --border: #e6eaf3;
  --shadow: 0 6px 24px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
}

/* Smooth transitions */
* { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .08s ease; }

/* Panels & cards */
.panel { border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow); }
.panel-header { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,252,255,.9)); backdrop-filter: saturate(120%) blur(4px); }
.panel-header h2 { letter-spacing: .2px; }
.panel.collapsed { box-shadow: 0 2px 8px rgba(15,23,42,.06); }

/* Buttons */
.btn { background: #f6f8fc; border-color: var(--border); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(37,99,235,.12); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.primary { background: linear-gradient(92deg, var(--primary), var(--primary-600)); }
.btn.primary:hover { filter: brightness(1.03); box-shadow: 0 8px 18px rgba(37,99,235,.25); }

/* Inputs */
input, textarea, select { border-radius: 10px; border-color: var(--border); background: #fff; }
input::placeholder, textarea::placeholder { color: #9ca3af; }

/* List items */
.list-item { background: #fff; border-color: var(--border); }
.list-item:hover { background: #fafcff; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.item-title { letter-spacing: .1px; }

/* Badges */
.badge { border: 1px solid rgba(0,0,0,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* Kanban */
.kb-col { box-shadow: var(--shadow); }
.kb-head { font-weight: 700; letter-spacing: .2px; border-radius: 12px 12px 0 0; }
.kb-list { background: linear-gradient(180deg, #fff, #fcfdff); border-radius: 0 0 12px 12px; }
.kb-card { background: #fff; border-color: var(--border); box-shadow: 0 4px 12px rgba(15,23,42,.06); }
.kb-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }

/* Chips */
.stage-chip { background: #eef2ff; color: #312e81; border-color: #e0e7ff; }

/* Drawer */
.drawer .drawer-content { box-shadow: var(--shadow); border-radius: 14px; }
.drawer .drawer-head { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,250,255,.95)); }

/* Timeline */
.timeline-item { position: relative; }
.timeline-item .timeline-content { background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.timeline-title { font-weight: 700; }

/* Tables */
#claimsTable { width: 100%; border-collapse: separate; border-spacing: 0; }
#claimsTable thead th { position: sticky; top: 0; background: #f8fbff; z-index: 1; border-bottom: 1px solid var(--border); }
#claimsTable tbody tr:hover { background: #f9fbff; }
#claimsTable thead th.sortable { cursor: pointer; }
#claimsTable thead th.sortable::after { content: '↕'; font-size: 12px; opacity: .35; margin-left: 6px; }
#claimsTable thead th.sort-asc::after { content: '↑'; opacity: .7; }
#claimsTable thead th.sort-desc::after { content: '↓'; opacity: .7; }

/* Stage bar polish */
.stage .bar { background: #edf2ff; }
.stage .bar .fill { background: linear-gradient(90deg, var(--primary), var(--primary-700)); }
.stage .stage-label { color: #475569; font-weight: 600; }

/* Dropzone */
.dropzone { background: #fbfdff; border-color: #dbe4ff; }
.dropzone.dragover { background: #eef5ff; }

/* Toasts */
.toast { backdrop-filter: blur(4px); }

/* Subtle shadows for focus */
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.6) inset; }

/* Optional dark mode using system setting */
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b1220; --fg:#e5e7eb; --card:#0f172a; --border:#1f2937; --muted:#9aa4b2; }
  body.page { background: var(--bg); color: var(--fg); }
  .panel, .list-item, .kb-card, .timeline-item .timeline-content { background:#0f172a; border-color:#1f2937; }
  .panel-header, .drawer .drawer-head { background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.75)); }
  .btn { background:#111827; color:#e5e7eb; border-color:#1f2937; }
  .btn.primary { background: linear-gradient(92deg, #2563eb, #1d4ed8); color:#fff; }
  input, textarea, select { background:#0b1220; color:#e5e7eb; border-color:#1f2937; }
  .kb-list { background: linear-gradient(180deg, #0f172a, #0b1220); }
  .stage .bar { background:#1f2937; }
  .stage .stage-label { color:#9aa4b2; }
}

/* Guided tour */
.tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display:flex; align-items:flex-end; justify-content:center; }
.tour-card { background:#fff; color:var(--fg); width: min(720px, 90vw); margin: 16px; padding: 14px 16px; border-radius: 12px; box-shadow: var(--shadow); }
.tour-title { font-weight: 800; margin-bottom: 6px; }
.tour-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.tour-btn { padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:#f6f8fc; cursor:pointer; }
.tour-btn.primary { background: linear-gradient(92deg, var(--primary), var(--primary-600)); color:#fff; border:none; }
.tour-highlight { position: relative; z-index: 1001; box-shadow: 0 0 0 4px rgba(37,99,235,.25), 0 0 0 100vmax rgba(0,0,0,.25); border-radius: 10px; }

/* Support floating widget */
.support-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; display:flex; align-items:center; gap:10px; background: linear-gradient(92deg, #f59e0b, #fbbf24); color:#fff; border-radius:16px; padding:10px 14px; box-shadow: var(--shadow); cursor:pointer; }
.support-fab .icon { width:28px; height:28px; border-radius:999px; background:#fff; display:inline-flex; align-items:center; justify-content:center; color:#f59e0b; font-weight:800; }
.support-fab .badge { background:#ef4444; color:#fff; border-radius:999px; padding:2px 6px; font-size:11px; margin-left:6px; display:none; }
.support-fab.pulse { animation: support-pulse 1.8s ease-in-out infinite; }
@keyframes support-pulse {
  0% { transform: translateY(0) scale(1); box-shadow: 0 6px 24px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04); }
  50% { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 28px rgba(245,158,11,.35); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 6px 24px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04); }
}
.support-panel { position: fixed; right: 18px; bottom: 76px; z-index: 900; width: min(380px, 90vw); max-height: 70vh; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow); display:none; flex-direction:column; }
.support-panel.open { display:flex; }
.support-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.support-body { padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.support-msgs { border:1px solid var(--border); border-radius:10px; padding:10px; min-height:200px; max-height:45vh; overflow:auto; background:#fff; }
.support-row { display:flex; gap:8px; }
.support-row input[type=text] { flex:1 1 auto; }
.support-bubble { display:inline-block; padding:8px 10px; border-radius:10px; background:#eef2ff; color:#3730a3; margin:6px 0; }
.support-you { text-align:right; }
.support-you .support-bubble { background:#e2f3ff; color:#075985; }
@media (max-width: 640px){ .support-panel { right:0; left:0; bottom:0; width:auto; max-height: 80vh; } }

/* Tabs inside support panel */
.support-tabs { display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); }
.support-tab { padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#f6f8fc; cursor:pointer; }
.support-tab.active { background: #e0e7ff; border-color:#c7d2fe; color:#3730a3; }

/* Chips (reuse across app) */
.chip { display:inline-block; padding:4px 8px; font-size:12px; border:1px solid var(--border); border-radius:999px; background:#fff; margin:2px 4px 0 0; }

/* ------------------------------ */
/* Header system (across the app) */
/* ------------------------------ */
h1, h2, h3 { color: var(--fg); line-height: 1.2; letter-spacing: .2px; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 18px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; }

/* Panel headers get an accent underline under the title */
.panel-header { position: relative; }
.panel-header h2 { display: inline-block; position: relative; }
.panel-header h2::after { content: ""; display: block; height: 3px; width: 72px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-700)); }

/* Kanban column titles share the accent but smaller */
.kb-head .title { display: inline-block; position: relative; letter-spacing: .2px; }
.kb-head .title::after { content: ""; display: block; height: 2px; width: 40px; margin-top: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-700)); opacity: .65; }