.overview-heading {
  padding: 30px 32px;
  border: 1px solid #4e426c;
  border-radius: 20px;
  background: radial-gradient(ellipse at 100% 0, #7764ca25, transparent 60%), linear-gradient(115deg, #1e243b, #111b2b);
  position: relative;
  overflow: hidden;
}
.overview-heading h1 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -1.6px; margin: 16px 0; }
.overview-heading .lede { max-width: 540px; font-size: 13px; }
.overview-heading .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 9px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #88dfbf; box-shadow: 0 0 0 4px #88dfbf15; }
.hero-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; flex-shrink: 0; }
.hero-actions .button { min-height: 45px; padding: 12px 22px; }
.hero-actions .small { font-size: 10px; }
.quick-find { display: flex; align-items: center; gap: 10px; border: 1px solid #2f3b53; border-radius: 8px; padding: 8px 10px; color: #a5b4cc; background: #131c2d; font-size: 11px; }
.quick-find svg { width: 15px; height: 15px; }
.quick-find:hover { border-color: #8270b6; color: #e5dcff; background: #20283d; }
 kbd { font: 9px ui-monospace, monospace; border: 1px solid #3c4762; border-radius: 4px; padding: 2px 4px; color: #a7a1ba; background: #0e1725; }
.pulse-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 22px; margin-bottom: 22px; }
.pulse-grid .panel { margin: 0; }
.chart-legend { display: flex; gap: 13px; font-size: 10px; color: #a7b7cd; white-space: nowrap; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend span:before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: #a28bff; }
.chart-legend span:last-child:before { background: #68c9b5; }
.volume-panel .panel-head { align-items: flex-start; margin-bottom: 30px; }
.volume-chart { width: 100%; overflow-x: auto; }
.volume-chart svg { width: 100%; min-width: 350px; display: block; overflow: visible; }
.chart-grid { fill: none; stroke: #29364b; stroke-width: .7; stroke-dasharray: 3 5; }
.chart-opened { fill: #a28bff; }
.chart-resolved { fill: #68c9b5; }
.chart-day { fill: #94a6c0; font-size: 11px; font-family: inherit; }
.chart-count { fill: #acbad0; font-size: 10px; font-family: inherit; }
.attention-panel .recent-row { min-height: 68px; padding: 11px; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.attention-panel .case-arrow { display: none; }
.attention-panel .case-avatar { width: 29px; height: 29px; font-size: 10px; border-radius: 8px; }
.attention-panel .recent-time, .attention-panel .case-badges .badge, .attention-panel .case-copy small { display: none; }
.attention-panel .case-row strong { font-size: 11px; }
.attention-panel .response-state { font-size: 10px; }
.attention-panel .empty { min-height: 160px; }
.attention-panel > .text-button { margin-top: 10px; }
.readiness { background: linear-gradient(145deg, #152438, #131b2b); }
.readiness-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid #2a384e; }
.readiness-row:last-child { border-bottom: 0; }
.readiness-row > span { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #7f6c493f; border-radius: 8px; color: #e0b76b; background: #e0b76b0c; }
.readiness-row.ready > span { color: #8ad7bf; border-color: #8ad7bf30; background: #8ad7bf0c; font-size: 11px; }
.readiness-row strong { display: block; font-size: 12px; font-weight: 550; }
.readiness-row small { display: block; color: #90a3bf; font-size: 11px; line-height: 1.6; margin-top: 3px; overflow-wrap: anywhere; }
.readiness > .text-button { display: block; margin-top: 12px; }
.queue-views { display: flex; gap: 7px; overflow-x: auto; padding: 3px 3px 12px; margin-bottom: 16px; scrollbar-width: thin; }
.queue-views button { border: 1px solid #2b3850; background: #121b2b; color: #99acc8; display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 9px 12px; white-space: nowrap; font-size: 11px; flex-shrink: 0; transition: background .15s, border-color .15s; }
.queue-views button:hover { border-color: #73649a; color: #e0d9f5; background: #1e263b; }
.queue-views button[aria-pressed=true] { background: #a28bff1c; border-color: #a28bff63; color: #d4c9ff; }
.queue-views button span { min-width: 20px; border-radius: 4px; padding: 0 4px; color: #b4bed2; background: #ffffff09; font-size: 10px; text-align: center; }
.queue-views button[data-queue-view=overdue] span { color: #ee9bad; }
.case-badges { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.priority-dot { font-size: 10px; color: #9cacc3; text-transform: capitalize; display: inline-flex; align-items: center; gap: 5px; }
.priority-dot:before { content: ""; width: 5px; height: 5px; background: #6a9ec0; border-radius: 50%; }
.priority-dot.high:before { background: #e1b06b; }
.priority-dot.urgent:before { background: #f4879d; }
.priority-dot.low:before { background: #7f8ba2; }
.response-state { display: inline-block; font-size: 10px; color: #a0b3ce; line-height: 1.5; white-space: nowrap; }
.response-state.overdue { color: #f1a0b2; }
.response-state.due-soon { color: #edc17d; }
.response-state.met { color: #8cd4bd; }
.response-state.closed { color: #7f91aa; }
.recent-row .response-state { font-size: 9px; }
.saved-reply-card { border: 1px solid #314059; border-radius: 12px; padding: 20px; margin-top: 18px; background: #0e1828; }
.reply-card-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 15px; }
.reply-card-head .eyebrow { margin: 0; font-size: 9px; }
.saved-reply-card .two-col, .saved-reply-card > label { margin-bottom: 18px; }
.saved-reply-card textarea { background: #101c2e; }
.saved-reply-card small { font-size: 10px; }
.placeholder-guide { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 12px; }
.placeholder-guide span { border: 1px solid #6e5c963b; border-radius: 5px; background: #a28bff0c; padding: 5px 8px; color: #c5b4fa; font: 11px ui-monospace, monospace; }
.reply-tools { padding: 15px 0 16px; border-top: 1px solid #303c53; border-bottom: 1px solid #303c53; margin-bottom: 20px; }
.reply-tools .button { width: 100%; margin-top: 10px; font-size: 11px; }
.reply-tools p { margin: 10px 0 0; font-size: 10px; line-height: 1.7; }
.ai-draft-button { border-color: #8c70c052; color: #c8b5ff; background: #a28bff0c; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -10px; }
.composer-footer .small { font-size: 9px; }
.over-limit { color: #ff9caf; }
.action-form textarea { min-height: 150px; }
.table-head { letter-spacing: .6px; }
@media(max-width:1250px) {
  .pulse-grid { grid-template-columns: minmax(0,1.4fr) minmax(240px,1fr); gap: 18px; }
  .chart-legend { flex-direction: column; gap: 5px; }
  .overview-heading { padding: 25px; }
  .quick-find kbd { display: none; }
}
@media(max-width:1000px) {
  .pulse-grid { grid-template-columns: 1fr; }
  .chart-legend { flex-direction: row; }
  .quick-find span { display: none; }
  .hero-actions .small:last-child { display: none; }
  .overview-heading { gap: 20px; }
}
@media(max-width:760px) {
  .overview-heading { padding: 24px 21px; border-radius: 15px; }
  .overview-heading h1 { font-size: 34px; letter-spacing: -1.2px; }
  .overview-heading .eyebrow { letter-spacing: 1px; font-size: 8px; }
  .hero-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
  .hero-actions .small:first-child { max-width: 85px; font-size: 9px; }
  .hero-actions .button { padding: 10px 12px; font-size: 11px; min-height: 41px; }
  .top-actions { gap: 8px; }
  .top-actions .text-button { display: none; }
  .top-actions .text-button[data-view=help] { display: block; font-size: 0; padding: 5px; min-width: 18px; }
  .top-actions .text-button[data-view=help]:after { content: "?"; font-size: 15px; }
  .top-actions .quick-find { padding: 8px; }
  .server-picker { max-width: 48%; }
  .pulse-grid { gap: 18px; margin-bottom: 20px; }
  .volume-panel .panel-head { margin-bottom: 20px; }
  .volume-panel h2 { font-size: 16px; }
  .chart-legend { flex-direction: column; gap: 4px; font-size: 9px; }
  .volume-chart svg { min-width: 0; }
  .volume-chart { margin-top: 25px; }
  .chart-count, .chart-day { font-size: 15px; }
  .saved-reply-card { padding: 16px; }
  .saved-reply-card .two-col { grid-template-columns: 1fr; gap: 15px; }
  .queue-views { margin-bottom: 12px; }
  .queue-views button { padding: 9px 11px; font-size: 10px; }
  .response-state { white-space: normal; }
  .mobile-response { display: inline-block; }
  .recent-row .response-state { white-space: nowrap; }
}
.mobile-response { display: none; }
.ai-mode-toggles { display: flex; flex-direction: column; gap: 12px; }
@media(max-width:760px) { .ai-mode-toggles { margin-top: 20px; } }
@media(max-width:760px) { .mobile-response { display: inline-block; } }