/**
 * ChatCore — custom CSS (no Bootstrap). Indigo / slate theme + dark mode.
 */
:root {
  color-scheme: light;
  --accent: #00897b;
  --accent-hover: #00695c;
  --accent-soft: rgba(0, 137, 123, 0.12);
  --accent-ring: rgba(0, 137, 123, 0.35);
  --brand-rail: #047857;
  --brand-rail-deep: #1b4332;
  --rail-highlight: rgba(255, 255, 255, 0.14);
  --create-group-cta: #14b886;
  --create-group-cta-hover: #12a378;
  --ms-pill-blue: #1976d2;
  --ms-access-green: #2e7d32;
  --agent-pane-bg: #eef1f0;
  --ink: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --bg-page: #eef1f0;
  --surface: #ffffff;
  --surface-2: #FFFFFF;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --success: #059669;
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.12);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);
  --radius: 10px;
  --radius-lg: 14px;
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --chat-canvas: #efeae2;
  --chat-bubble-in: #ffffff;
  --chat-bubble-out: #d9fdd3;
  --chat-bubble-out-border: rgba(0, 105, 88, 0.2);
  --chat-timeline-pill: #e3eef5;
  --chat-timeline-pill-border: rgba(25, 118, 210, 0.12);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-target: 44px;
}

html.dark {
  color-scheme: dark;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --bg-page: #020617;
  --surface: #0f172a;
  --surface-2: #1e293b;
  --border: #334155;
  --border-strong: #475569;
  --brand-rail: #047857;
  --brand-rail-deep: #047857;
  --agent-pane-bg: #0c1210;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --chat-canvas: #0b141a;
  --chat-bubble-in: #1f2c34;
  --chat-bubble-out: #005c4b;
  --chat-bubble-out-border: rgba(0, 212, 170, 0.22);
  --chat-timeline-pill: rgba(30, 41, 59, 0.92);
  --chat-timeline-pill-border: rgba(148, 163, 184, 0.2);
}

html.dark select,
html.dark select option {
  background-color: var(--surface);
  color: var(--ink);
}

html.dark select {
  border-color: var(--border);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

#app-mount {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

button,
input,
select {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-offset: 2px;
}

.chatcore-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.layout-root {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  background: var(--bg-page);
  overflow: hidden;
  overflow-x: hidden;
}

.full-loading {
  display: grid;
  place-items: center;
  flex: 1;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.load-error {
  padding: 14px 18px;
  color: #991b1b;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  font-size: 13px;
}

html.dark .load-error {
  background: rgba(220, 38, 38, 0.15);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.25);
}

.app-error-fallback {
  box-sizing: border-box;
}

.app-error-fallback--viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, 4vmin);
  box-sizing: border-box;
  background: var(--bg-page);
}

.app-error-fallback--banner {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 16px 18px 0;
  background: transparent;
}

.app-error-fallback__card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px 36px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px -16px rgba(15, 23, 42, 0.18);
}

.app-error-fallback__card--banner {
  max-width: 560px;
  padding: 24px 22px 22px;
  border-radius: 14px;
  box-shadow: 0 4px 24px -8px rgba(15, 23, 42, 0.12);
  border-left: 4px solid var(--warn);
  background: linear-gradient(180deg, #fffbeb 0%, var(--surface) 42%);
}

.app-error-fallback__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #ca8a04;
}

.app-error-fallback__card--banner .app-error-fallback__icon {
  margin-bottom: 12px;
}

.app-error-fallback__icon svg {
  display: block;
}

.app-error-fallback__title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.app-error-fallback__card--banner .app-error-fallback__title {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.app-error-fallback__message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  word-break: break-word;
}

.app-error-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.app-error-fallback__card--banner .app-error-fallback__actions {
  margin-top: 18px;
}

html.dark .app-error-fallback__icon {
  color: #fbbf24;
}

html.dark .app-error-fallback__card {
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.45);
}

html.dark .app-error-fallback__card--banner {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.12) 0%, var(--surface) 45%);
  border-left-color: #f59e0b;
}

.app-error-fallback--banner {
  position: relative;
  z-index: 5;
}

.main-panel-query-error {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(360px, 55vh);
  padding: 20px 16px 28px;
  box-sizing: border-box;
}

.main-panel-query-error .app-error-fallback--banner {
  padding: 0;
  width: 100%;
  max-width: 520px;
}

.chat-inline-alert {
  margin-top: 10px;
  padding: 11px 14px 11px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}

.chat-inline-alert--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  color: #7f1d1d;
}

.chat-inline-alert__text {
  margin: 0;
}

html.dark .chat-inline-alert--danger {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(248, 113, 113, 0.35);
  border-left-color: #f87171;
  color: #fecaca;
}

.auth-flow {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom))
    max(16px, var(--safe-left));
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

html.dark .auth-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.auth-card {
  position: relative;
  width: min(420px, 100%);
  max-height: min(90dvh, 640px);
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px;
  -webkit-overflow-scrolling: touch;
}

.auth-theme-tgl {
  position: absolute;
  top: 16px;
  right: 16px;
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}

.auth-theme-tgl:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

.auth-theme-ico {
  width: 20px;
  height: 20px;
}

.auth-brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}

.auth-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
  margin-bottom: 6px;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  margin-bottom: 12px;
}

.auth-input--otp {
  letter-spacing: 0.35em;
  font-size: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-err {
  color: #b91c1c;
  font-size: 13px;
  margin: 0 0 12px;
  min-height: 1.2em;
}

html.dark .auth-err {
  color: #fca5a5;
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-back {
  width: 100%;
  margin-top: 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 8px;
}

.auth-back:hover {
  color: var(--accent);
}

.dev-otp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  border: 1px dashed var(--warn);
  color: var(--ink);
  font-size: 13px;
}

.dev-otp-code {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.sidebar-user {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}

.icon-slot {
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
}

.sidebar > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.iconbar {
  width: 64px;
  min-height: 100%;
  background: var(--brand-rail);
  color: #e8f5e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.iconbar .brand {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.iconbar .nav-item {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  opacity: 0.75;
  transition: background 0.15s, opacity 0.15s;
}

.iconbar .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

.iconbar .spacer {
  flex: 1;
  min-height: 8px;
}

.iconbar-tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.app-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4500;
  background: rgba(15, 23, 42, 0.35);
}

html.dark .app-menu-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.app-menu-popover {
  position: fixed;
  z-index: 4600;
  top: 52px;
  left: max(10px, var(--safe-left));
  min-width: 196px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.app-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.app-menu-item:hover {
  background: var(--surface-2);
}

.app-menu-item--muted {
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
}

.sidebar {
  width: min(300px, 34vw);
  min-width: 240px;
  max-width: 100%;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--shadow-sm);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 19px 10px;
}

.sidebar-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-btn {
  width: 32px;
    height: 27px;
    border: none;
    background: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.icon-btn:hover {
  /* outline: 2px solid #aaa; */
}

.search {
  padding: 0 14px 12px;
}

.search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
}

.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}

.search-wrap .ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  font-size: 13px;
}

/* .tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 12px;
  flex-wrap: wrap;
} */

.tab {
  padding: 6px 11px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
}

.tab:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ticket-groups {
  flex: 1;
  overflow-y: auto;
  padding: 2px 10px 14px;
}

.ticket-group-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  padding: 12px 8px 8px;
  font-weight: 700;
}

.ticket {
  display: flex;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  border: 1px solid transparent;
}

.ticket:hover {
  background: var(--surface-2);
}

.ticket.active {
  background: rgba(4, 120, 87, 0.12);
  border-color: rgba(4, 120, 87, 0.28);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--border);
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.ticket-content {
  flex: 1;
  min-width: 0;
}

.ticket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ticket-title {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 500;
}

.ticket-msg {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.ticket-meta {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 1px;
}

.badge {
  background: var(--accent);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  min-width: 24px;
  text-align: center;
  padding: 0;
}

.badge.muted {
  background: var(--muted-2);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  overflow: hidden;
}

.main .main-panel-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.main-chat-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ticket-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 12px 0;
  overflow: visible;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.ticket-tabs-strip {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: flex-end;
}

.ticket-tabs-strip::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ticket-tabs-more-wrap {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
}

.ttab-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid #e2e8f000;
  border-bottom: none;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.ttab-more:hover {
  background: var(--surface-2);
  color: #1d4ed8;
}

.ttab-more--open {
  background: var(--surface);
}


.ttab-more__chev {
  display: block;
  transition: transform 0.15s ease;
}

.ttab-more--open .ttab-more__chev {
  transform: rotate(180deg);
}

.ticket-tabs-overflow-menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: min(280px, calc(100vw - 24px));
  max-width: min(420px, calc(100vw - 16px));
  max-height: min(360px, 55vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 10px;
  margin: 0;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 4px 10px rgba(15, 23, 42, 0.06);
}

html.dark .ticket-tabs-overflow-menu {
  background: var(--surface-elevated, var(--surface));
  box-shadow: var(--shadow-lg);
}

.ticket-tabs-overflow-menu .ttab {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius) var(--radius) 0 0;
  text-align: left;
  justify-content: flex-start;
  margin-bottom: 0;
  white-space: normal;
  border: 1px solid transparent;
  border-bottom: none;
}

.ticket-tabs-overflow-menu .ttab:last-child {
  margin-bottom: 0;
}

.ticket-tabs-overflow-menu .ttab .ttab-topic {
  flex: 0 1 auto;
  min-width: 0;
}

.ticket-tabs-overflow-menu .ttab:hover {
  background: rgba(15, 23, 42, 0.05);
}

html.dark .ticket-tabs-overflow-menu .ttab:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ticket-tabs-overflow-menu .ttab.active {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

html.dark .ticket-tabs-overflow-menu .ttab.active {
  box-shadow: none;
}

.ttab {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
}

.ttab-id {
  flex-shrink: 0;
  font-weight: 600;
  color: #475569;
  letter-spacing: -0.01em;
}

.ttab.active .ttab-id {
  color: #047857;
}

.ttab-topic {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.ttab-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.ttab-badge--in_progress {
  color: #854d0e;
  background-color: #FEF9C3;
}

.ttab-badge--resolved {
  color: #5b21b6;
}

html.dark .ttab-id {
  color: #94a3b8;
}

html.dark .ttab.active .ttab-id {
  color: #6ee7b7;
}

html.dark .ttab-badge--in_progress {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}

html.dark .ttab-badge--resolved {
  background: rgba(124, 58, 237, 0.25);
  color: #c4b5fd;
}

html.dark .ttab-badge--new {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

.ttab:hover {
  color: var(--ink);
}

.ttab:hover .ttab-topic {
  color: var(--ink);
}

.ttab.active {
  color: var(--ink);
  background: #e0f2fe;
  border-color: #bfdbfe;
  border-top: 2px solid #14b8a6;
  position: relative;
  margin-bottom: -1px;
  padding: 9px 12px 11px;
  box-shadow: 0 1px 0 #fff inset;
}

html.dark .ttab.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  border-top-color: #2dd4bf;
  box-shadow: none;
}


.header {
  background: var(--surface);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
  .header.header--mobile-collapsed {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header.header--mobile-collapsed .tag-row {
    margin-top: 6px;
  }

  .btn-ticket-header-kebab--open {
    background: var(--surface-2);
    color: var(--accent);
  }

  html.dark .btn-ticket-header-kebab--open {
    background: rgba(51, 65, 85, 0.6);
    color: #5eead4;
  }
}

.header-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.identity {
  display: flex;
  gap: 0px;
  align-items: flex-start;
  min-width: 0;
}

.identity .name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.ticket-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ticket-pill--track {
  border-color: rgba(13, 148, 136, 0.4);
  color: #0f766e;
  background: #f0fdfa;
}

.ticket-pill--tag {
  color: rgb(234, 88, 12);
  height: 29px;
  max-width: 200px;
  text-overflow: ellipsis;
  border-style: dashed;
  border-color: rgba(249, 115, 22, 0.8);
  background: rgb(255, 247, 237);
  border-radius: 7px;
  white-space: nowrap;
  overflow: hidden;
}

.ticket-pill--add {
  border-style: dashed;
  border-color: #94a3b8;
  color: #475569;
  background: #f8fafc;
}

.ticket-pill--status {
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag {
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.tag.solid {
  border-color: transparent;
  background: var(--warn-soft);
  color: var(--warn);
}

html.dark .tag.solid {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  color: #475569;
  line-height: 1.15;
}

.meta-sep {
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
}

.assign {
  display: flex;
  align-items: center;
  gap: 6px;
}

.assign-ico {
  font-size: 14px;
  opacity: 0.9;
}

.assign .who {
  display: flex;
  align-items: center;
  gap: 4px;
}

.assign .who strong {
  color: #334155;
  font-weight: 700;
}

.assign-caret {
  color: #334155;
  font-size: 12px;
  line-height: 1;
}

.team-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 4px 10px;
}

.team-ico {
  color: #2563eb;
  font-size: 14px;
}

.team-caret {
  color: #2563eb;
  font-size: 12px;
  line-height: 1;
  margin-left: -25px;
  margin-top: -6px;
}

.avatar.sm {
  width: 26px;
  height: 26px;
}

select.team {
  padding: 0;
  border: none;
  background: transparent;
  color: #28252a;
  font-size: 13px;
  font-weight: 600;
  min-width: 112px;
  line-height: 1.1;
  appearance: none;
}

.priority-ico {
  color: #ef4444;
  font-size: 16px;
  line-height: 1;
  cursor: default;
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  /* line-height: 1.25; */
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

.badge-warn {
  background: var(--warn-soft);
  color: var(--warn);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timeline {
  margin: 14px 20px 0;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.timeline--feed {
  margin: 0 auto 12px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-self: center;
  background: var(--chat-timeline-pill);
  border: 1px solid var(--chat-timeline-pill-border);
  color: #334155;
}

.timeline--feed__check,
.timeline--feed__lead {
  color: var(--success);
  font-weight: 700;
}

.timeline--feed__dot {
  color: var(--muted-2);
  opacity: 0.9;
  user-select: none;
}

.timeline--feed__meta {
  color: var(--muted);
  font-weight: 500;
}

html.dark .timeline--feed {
  background: var(--chat-timeline-pill);
  border-color: var(--chat-timeline-pill-border);
  color: var(--muted);
}

html.dark .timeline--feed__check,
html.dark .timeline--feed__lead {
  color: #4ade80;
}

.ticket-scope-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.ticket-scope-bar__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  max-width: 100%;
}

.ticket-scope-bar__team {
  color: var(--accent);
}

.ticket-scope-bar__count {
  color: var(--muted);
  font-weight: 600;
}

.ticket-scope-bar__dot {
  color: var(--muted-2);
  opacity: 0.8;
}

.timeline--feed .timeline--feed__pill {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
}

.feed-block {
  width: 100%;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
  background-color: var(--chat-canvas);
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.04) 1px, transparent 0);
  background-size: 20px 20px;
  position: relative;
  transition: box-shadow 0.15s, background 0.15s;
}

.messages.messages--drop {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: var(--accent-soft);
  background-image: none;
}

html.dark .messages {
  background-color: var(--chat-canvas);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 20px 20px;
}

.messages-drop-hint {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}

.msg {
  display: flex;
  margin-bottom: 14px;
}

.msg.inbound {
  justify-content: flex-start;
}

.msg.outbound {
  justify-content: flex-end;
}

.bubble {
  max-width: min(560px, 82%);
  min-width: 180px;
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.main .bubble.bubble--in {
  background: var(--chat-bubble-in);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.bubble.agent.bubble--out {
  background: var(--chat-bubble-out);
  border-color: var(--chat-bubble-out-border);
  box-shadow: 0 1px 2px rgba(0, 105, 88, 0.08);
  border-radius: 14px 14px 8px 14px;
}

html.dark .main .bubble.bubble--in {
  background: var(--chat-bubble-in);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html.dark .bubble.agent.bubble--out {
  background: var(--chat-bubble-out);
  border-color: var(--chat-bubble-out-border);
  color: #e9edef;
  box-shadow: none;
}

html.dark .bubble.agent.bubble--out .body-text,
html.dark .bubble.agent.bubble--out .sender {
  color: #e9edef;
}

html.dark .bubble.agent.bubble--out .bubble-foot {
  color: rgba(233, 237, 239, 0.75);
}

.bubble-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.stars {
  color: #eab308;
  letter-spacing: 1px;
  font-size: 11px;
}

.bubble-star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  flex-shrink: 0;
}

.bubble-star {
  font-size: 13px;
  line-height: 1;
  color: #cbd5e1;
  font-weight: 600;
}

.bubble-star--filled {
  color: #eab308;
}

html.dark .bubble-star {
  color: rgba(148, 163, 184, 0.5);
}

html.dark .bubble-star--filled {
  color: #facc15;
}

.body-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

.list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}

.bubble-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted-2);
}

.read {
  color: inherit;
  font-weight: 700;
}
.read.read--seen {
  color: #34b7f1;
}

.bubble-media img {
  display: block;
  max-width: min(280px, 100%);
  height: auto;
  border-radius: 10px;
  margin-top: 4px;
}

.bubble-media-caption {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.bubble-voice audio {
  display: block;
  width: min(280px, 100%);
  margin-top: 4px;
}

.voice-meta {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

.bubble-doc {
  margin-top: 4px;
}

.doc-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}

.doc-link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.doc-icon {
  font-size: 20px;
  line-height: 1;
}

.doc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.doc-name {
  word-break: break-word;
  color: var(--ink);
}

.doc-size {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.bubble-location {
  margin-top: 4px;
}

.location-map-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.location-map-link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.location-pin {
  font-size: 16px;
}

.location-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.location-address {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.bubble-link {
  margin-top: 4px;
}

.link-anchor {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-anchor:hover {
  color: var(--accent-hover);
}

.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.composer-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.composer-icon:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.composer-icon--rec {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
}

.composer-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.composer-icon--svg {
  padding: 0;
  color: var(--ink);
}

.composer-svg-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.composer-more-toggle {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

.composer-more-toggle__icon--close {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.bubble-media--video video {
  display: block;
  max-width: min(100%, 280px);
  max-height: 50vh;
  border-radius: var(--radius);
  background: #000;
}

.camera-modal__hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.camera-modal__actions--stack {
  flex-direction: column;
  align-items: stretch;
}

.camera-modal__actions--stack .btn {
  width: 100%;
  justify-content: center;
}

.video-record-modal__record-btn--active {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
}

.dark .video-record-modal__record-btn--active {
  background: #b91c1c !important;
}

.recording-pill {
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
}

.recording-error {
  font-size: 11px;
  color: #b91c1c;
  flex: 1 1 100%;
}

.composer-inline-msg {
  font-size: 11px;
  flex: 1 1 100%;
}

.composer-inline-msg--err {
  color: #b91c1c;
}
.main .bubble {
  position: relative;
  padding-top: 28px;
  padding-left: 42px;
}

.main .msg-menu-trigger {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 18px;
  height: 21px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: 0.7;
}


.main .bubble--out .msg-menu-trigger {
  left: 8px;
  right: auto;
}

.main .msg-menu-panel {
  position: absolute;
  top: 4px;
  right: 4px;
  transform: translateY(-100%);
  z-index: 30;
  min-width: 300px;
  max-width: min(360px, 92vw);
  padding: 8px 0;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.main .bubble--out .msg-menu-panel {
  right: 4px;
  left: auto;
}

.main .msg-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

.main .msg-menu-item:hover {
  background: var(--surface-2);
}

.main .msg-menu-ico {
  width: 28px;
  text-align: center;
  color: var(--muted-2);
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.main .msg-menu-item > span:last-child {
  font-size: 14px;
}

.main .msg-menu-item--split-top {
  border-top: 1px solid var(--border);
}

.main .msg-menu-item--ticket,
.main .msg-menu-item--ticket .msg-menu-ico {
  color: #059669;
}

.main .msg-menu-item--danger {
  color: #dc2626;
}

.main .msg-menu-item--danger .msg-menu-ico {
  color: #dc2626;
}

html.dark .main .msg-menu-panel {
  background: var(--surface);
  border-color: var(--border);
}
.sidebar .tab.tab--st-all.active {
  background: #047857;
  border-color: #047857;
  color: #fff;
}

.sidebar .tab.tab--st-new.active {
  background: #3b82f6;
  border-color: #2563eb;
  color: #fff;
}

.sidebar .tab.tab--st-in_progress.active {
  background: #eab308;
  border-color: #ca8a04;
  color: #1e293b;
}

.sidebar .tab.tab--st-resolved.active {
  background: #7c3aed;
  border-color: #6d28d9;
  color: #fff;
}

.btn-wa-action {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}

.btn-wa-action:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
}

/* WA composer row */
.composer-bar--wa {
  position: relative;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  z-index: 5;
}

.composer-wa-clip-wrap,
.composer-wa-near-send {
  position: relative;
  flex-shrink: 0;
}

.composer-wa-attach,
.composer-wa-ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  /* background: var(--surface-2); */
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.composer-wa-attach:hover,
.composer-wa-ico:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface);
}

.composer-wa-svg {
  width: 22px;
  height: 22px;
  display: block;
}

.composer-wa-input-wrap {
  flex: 1;
  min-width: 0;
}

.composer-wa-field {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  outline: none;
}

.composer-wa-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.composer-wa-near-send {
  display: flex;
  align-items: center;
  gap: 4px;
}

.composer-wa-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  padding: 6px 0;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.composer-wa-pop--clip {
  left: 0;
  right: auto;
}

.composer-wa-pop__btn {
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

.composer-wa-pop__btn:hover {
  background: var(--surface-2);
}

.composer-wa-pop--clip {
  max-height: min(70vh, 380px);
  overflow-y: auto;
}

.composer-wa-pop--ticket {
  min-width: 260px;
  z-index: 400;
}

.composer-wa-pop__btn--ticket {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.composer-wa-pop__ico {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

.composer-wa-rec {
  flex: 1 1 100%;
  order: 20;
}

@media (max-width: 768px) {
  .composer-bar--wa {
    flex-wrap: nowrap;
    align-items: center;
    row-gap: 0;
    padding: 8px 10px 10px;
  }

  .composer-bar--wa .composer-wa-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .composer-wa-send__txt {
    display: none;
  }

  .composer-wa-send {
    padding: 0;
    min-width: 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    justify-content: center;
    gap: 0;
  }

  .composer-wa-send-ico {
    width: 22px;
    height: 22px;
  }

  .composer-wa-attach,
  .composer-wa-ico {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .composer-wa-pop--ticket {
    max-width: min(calc(100vw - 20px), 360px);
    min-width: min(260px, calc(100vw - 24px));
  }

  .composer-wa-pop__btn--ticket {
    white-space: normal;
    padding: 12px 14px;
    line-height: 1.35;
  }
}

[x-cloak] {
  display: none !important;
}

.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.camera-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
}

.camera-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: min(90dvh, 640px);
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.camera-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.camera-modal__video {
  width: 100%;
  max-height: 50dvh;
  border-radius: var(--radius);
  background: #000;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.camera-modal__err {
  margin: 0;
  font-size: 12px;
  color: #b91c1c;
}

.camera-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-modal__panel {
  width: min(100%, 460px);
}

.tag-modal__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  button,
  .nav-item,
  .btn,
  .icon-btn,
  .composer-icon {
    touch-action: manipulation;
  }

  body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  .layout-root {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
  }

  /* Was: icon-slot stretched full width but .iconbar stayed 64px → empty white band beside rail */
  .icon-slot {
    width: 100%;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    justify-content: stretch;
    padding-top: var(--safe-top);
  }

  .iconbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-height: unset;
    height: auto;
    padding: 8px max(10px, var(--safe-right)) 8px max(10px, var(--safe-left));
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .iconbar::-webkit-scrollbar {
    display: none;
  }

  .iconbar .nav-item {
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
  }

  .iconbar .brand,
  .iconbar .brand--round {
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
  }

  /* Vertical rail spacer — on mobile row layout it steals a full line; hide it */
  .iconbar .spacer {
    display: none;
  }

  /* Theme + settings tray on the right of the row */
  .iconbar-tray {
    flex-direction: row;
    margin-left: auto;
  }

  .chat-columns {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .chat-columns .sidebar {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }

  /* Full-width ticket list OR full-width thread (no side-by-side squeeze) */
  .chat-columns.chat-columns--mobile-list .sidebar {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .chat-columns.chat-columns--mobile-list .main {
    display: none !important;
  }

  .chat-columns.chat-columns--mobile-thread .sidebar {
    display: none !important;
  }

  .chat-columns.chat-columns--mobile-thread .main {
    flex: 1 1 auto;
    margin: 0 max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
    min-height: 0;
    width: auto;
    max-width: none;
    border-radius: var(--radius);
  }

  .sidebar .ticket-groups {
    -webkit-overflow-scrolling: touch;
  }

  .ticket-scope-bar {
    padding: 8px 10px 6px;
  }

  .ticket-scope-bar__inner {
    font-size: 12px;
    line-height: 1.35;
  }

  .ticket-tabs {
    padding: 8px 10px 0;
    align-items: center;
  }

  .ticket-tabs-strip {
    align-items: center;
  }

  .ticket-tabs-more-wrap {
    align-self: center;
    padding-bottom: 2px;
  }

  .ttab {
    padding: 9px 12px;
    flex-shrink: 0;
  }

  .ttab-more {
    min-height: 42px;
    padding: 8px 10px;
  }

  .header {
    padding: 12px 14px;
  }

  .header-row {
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
  }

  select.team {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 120px;
  }

  .actions {
    flex-shrink: 0;
  }

  .timeline {
    margin: 10px 14px 0;
  }

  .messages {
    padding: 12px 14px 16px;
    -webkit-overflow-scrolling: touch;
  }

  .composer-bar {
    padding: 10px max(10px, var(--safe-right)) max(10px, var(--safe-bottom)) max(10px, var(--safe-left));
    gap: 8px;
  }

  .composer-icon {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }

  .composer-bar .input {
    flex: 1 1 100%;
    min-width: 0;
    order: 10;
  }

  .composer-bar .composer-icon,
  .composer-bar .composer-extras {
    order: 1;
  }

  .composer-bar--mobile-collapsed .composer-extras {
    display: none;
  }

  .composer-more-toggle {
    order: 0;
  }

  .composer-bar .recording-pill,
  .composer-bar .composer-inline-msg {
    order: 5;
    flex: 1 1 100%;
  }

  /*
   * Mobile ticket thread: less chrome, more room for messages (desktop / other breakpoints unchanged).
   * Requires .chat-columns--mobile-thread from Alpine when list+thread split is active.
   */
  /* Mobile thread only: clearer “team context” + swipeable ticket chips */
  .chat-columns--mobile-thread .mobile-chat-nav {
    padding: 8px 12px 10px;
    display: flex;
    align-items: center;
    min-height: 48px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .chat-columns--mobile-thread .mobile-back-btn {
    min-height: 44px;
    padding: 8px 8px 8px 4px;
    border-radius: 10px;
  }

  .chat-columns--mobile-thread .mobile-back-btn:focus-visible {
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
  }

  .chat-columns--mobile-thread .ticket-scope-bar {
    padding: 10px 14px 12px;
    background: var(--surface);
    border-bottom: none;
  }

  .chat-columns--mobile-thread .ticket-scope-bar__inner {
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
  }

  .chat-columns--mobile-thread .ticket-scope-bar__dot {
    display: none;
  }

  .chat-columns--mobile-thread .ticket-scope-bar__team {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
  }

  .chat-columns--mobile-thread .ticket-scope-bar__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .chat-columns--mobile-thread .ticket-tabs {
    padding: 0 4px 0 0;
    gap: 0;
    align-items: flex-end;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .chat-columns--mobile-thread .ticket-tabs-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    padding: 10px 8px 12px 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .chat-columns--mobile-thread .ticket-tabs-strip::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .chat-columns--mobile-thread .ticket-tabs-strip .ttab {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 12px;
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--surface-2);
  }

  .chat-columns--mobile-thread .ticket-tabs-strip .ttab:not(.active) {
    opacity: 0.96;
  }

  .chat-columns--mobile-thread .ticket-tabs-strip .ttab.active {
    padding: 9px 14px 11px;
    border-radius: 12px 12px 0 0;
    z-index: 1;
    color: var(--ink);
    background: #e0f2fe;
    border: 1px solid #bfdbfe;
    border-bottom: none;
    border-top: 2px solid #14b8a6;
    box-shadow: 0 1px 0 #fff inset;
    opacity: 1;
  }

  html.dark .chat-columns--mobile-thread .ticket-tabs-strip .ttab.active {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    border-top-color: #2dd4bf;
    box-shadow: none;
  }

  .chat-columns--mobile-thread .ticket-tabs-more-wrap {
    padding-bottom: 0;
    align-self: flex-end;
    margin-right: 4px;
  }

  .chat-columns--mobile-thread .ttab-more {
    min-height: 46px;
    min-width: 44px;
    padding: 8px 10px;
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--surface-2);
    color: var(--accent);
  }

  html.dark .chat-columns--mobile-thread .ticket-tabs-strip .ttab:not(.active) {
    background: rgba(30, 41, 59, 0.65);
    border-color: var(--border);
  }

  html.dark .chat-columns--mobile-thread .ttab-more {
    background: rgba(30, 41, 59, 0.65);
  }

  .chat-columns--mobile-thread .header {
    padding: 8px 10px;
  }

  .chat-columns--mobile-thread .header.header--mobile-collapsed {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .chat-columns--mobile-thread .header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .chat-columns--mobile-thread .identity {
    gap: 10px;
    align-items: flex-start;
  }

  .chat-columns--mobile-thread .identity .avatar {
    width: 36px;
    height: 36px;
  }

  .chat-columns--mobile-thread .identity .name {
    font-size: 15px;
    line-height: 1.25;
  }

  .chat-columns--mobile-thread .tag-row {
    margin-top: 4px;
    gap: 6px;
  }

  .chat-columns--mobile-thread .tag-row .ticket-pill {
    padding: 4px 9px;
    font-size: 11px;
  }

  .chat-columns--mobile-thread .meta-row {
    margin-top: 6px;
    gap: 6px 8px;
    font-size: 11px;
    line-height: 1.35;
  }

  .chat-columns--mobile-thread select.team {
    min-width: 0;
    max-width: 128px;
    padding: 0;
    font-size: 11px;
  }

  .chat-columns--mobile-thread .actions {
    width: 100%;
    justify-content: stretch;
    gap: 8px;
    padding-top: 0;
  }

  .chat-columns--mobile-thread .actions .btn-primary {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
  }

  .chat-columns--mobile-thread .actions .btn-ghost {
    flex-shrink: 0;
    padding: 8px 10px;
  }

  .chat-columns--mobile-thread .timeline {
    margin: 6px 10px 0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    gap: 4px 6px;
  }

  .chat-columns--mobile-thread .messages {
    padding: 12px 12px 16px;
  }

  .chat-columns--mobile-thread .msg {
    margin-bottom: 16px;
  }

  .chat-columns--mobile-thread .bubble {
    max-width: min(520px, 92%);
    padding: 14px 16px;
    border-radius: 14px;
  }

  /* Allow composer dropdowns (ticket actions) to paint above the thread — overflow:hidden was clipping the popover */
  .chat-columns--mobile-thread .main {
    overflow: visible;
  }

  .chat-columns--mobile-thread .main .main-panel-wrap {
    border: 1px solid var(--border);
    overflow: visible;
  }

  .chat-columns--mobile-thread .main-chat-stack {
    overflow: visible;
  }

  .chat-columns--mobile-thread .composer-bar {
    padding: 6px max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
    gap: 6px;
  }

  .chat-columns--mobile-thread .composer-bar .composer-icon,
  .chat-columns--mobile-thread .composer-wa-attach,
  .chat-columns--mobile-thread .composer-wa-ico {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }

  .camera-modal {
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom))
      max(12px, var(--safe-left));
  }

  /* Standalone + agent routes */
  .page-standalone {
    -webkit-overflow-scrolling: touch;
  }

  .page-inner,
  .page-inner--wide {
    padding: 16px max(14px, var(--safe-right)) max(24px, var(--safe-bottom)) max(14px, var(--safe-left));
  }

  .page-title {
    font-size: clamp(17px, 4.5vw, 20px);
  }

  .page-head--split {
    gap: 12px;
  }

  .filter-bar {
    padding: 14px;
    gap: 10px;
  }

  .filter-field {
    flex: 1 1 140px;
    min-width: 0;
  }

  .report-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .report-card-go {
    margin-left: auto;
  }

  .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .data-table {
    min-width: 720px;
  }

  .month-strip-wrap {
    flex-wrap: wrap;
    gap: 8px;
  }

  .month-strip {
    flex: 1 1 100%;
    min-width: 0;
  }

  .page-create-group .create-group-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    min-width: 0;
  }

  .page-create-group .cg-icon-slot {
    justify-self: center;
  }

  .page-create-group .cg-fields {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }

  .cg-members-thead {
    display: none;
  }

  .cg-cell-label {
    display: block;
  }

  .cg-member-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }

  .cg-member-row:last-child {
    margin-bottom: 0;
  }

  .cg-member-cell--stars {
    align-items: flex-start;
  }

  .cg-member-cell--stars .cg-cell-label {
    text-align: left;
  }

  .cg-member-cell--action {
    padding-top: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .cg-stars {
    justify-content: flex-start;
  }

  .star-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }

  /* Create Group — mobile layout & readability */
  .page-full.page-create-group .page-inner {
    padding: 18px 16px 24px;
    border-radius: 14px;
  }

  .page-create-group .page-head {
    margin-bottom: 18px;
  }

  .page-create-group .create-group-grid {
    gap: 24px;
  }

  .page-create-group .cg-icon-circle {
    width: 104px;
    height: 104px;
    border-radius: 12px;
  }

  .page-create-group .cg-fields {
    gap: 22px;
  }

  .page-create-group .cg-fields > .field {
    gap: 8px;
  }

  .page-create-group .field-lbl {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted-2);
  }

  html.dark .page-create-group .field-lbl {
    color: var(--muted);
  }

  .page-create-group .field-suffix {
    display: none;
  }

  .page-create-group .field-input,
  .page-create-group .field-input--select .field-input {
    min-height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }

  .page-create-group .ms-box {
    border-radius: 12px;
  }

  .page-create-group .ms-box-inner {
    padding: 10px 12px;
  }

  .page-create-group .ms-pill-txt {
    max-width: min(280px, 85vw);
  }

  .page-create-group .field-err {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(185, 28, 28, 0.08);
    border-left: 3px solid #dc2626;
    font-size: 12px;
    line-height: 1.4;
    color: #b91c1c;
  }

  html.dark .page-create-group .field-err {
    background: rgba(248, 113, 113, 0.1);
    color: #fecaca;
    border-left-color: #f87171;
  }

  .page-create-group .cg-members {
    margin-top: 24px;
    padding-top: 18px;
  }

  .page-create-group .cg-members-head {
    align-items: flex-start;
    gap: 10px;
  }

  .page-create-group .cg-members-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .page-create-group .cg-members-head .icon-btn--add-member {
    flex-shrink: 0;
    align-self: flex-start;
  }

  .page-create-group .cg-members-count {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .page-create-group .cg-members-hint {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .page-create-group .cg-member-row {
    padding: 18px 16px;
    gap: 16px;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  }

  html.dark .page-create-group .cg-member-row {
    box-shadow: none;
  }

  .page-create-group .cg-cell-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }

  .page-create-group .page-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
  }

  .page-create-group .page-foot .btn-create-group {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
  }

  .page-create-group .page-foot .btn-link-cancel {
    text-align: center;
    padding: 12px 8px;
  }

  .page-full .page-inner,
  .page-full .page-inner--wide {
    margin: 8px 0 20px;
    padding: 20px 14px 24px;
  }

  /* Agent groups: same scroll behavior as .page-standalone — layout-root is overflow:hidden so this pane must scroll */
  .layout-root > .agent-layout {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .agent-layout {
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .agent-layout--mobile-list .agent-main {
    display: none !important;
  }

  .agent-layout--mobile-list .agent-list-panel {
    width: 100%;
    min-width: 0;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
  }

  .agent-layout--mobile-main .agent-list-panel {
    display: none !important;
  }

  .agent-layout--mobile-main .agent-main {
    margin: 0 max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
    min-height: 0;
    flex: 1 1 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .agent-layout--mobile-list .agent-templates {
    flex: none;
    overflow: visible;
  }

  /* hbar-row: base styles use label+count / full-width track; do not override grid here */

  .page-foot {
    position: static;
    padding: 16px 0 24px;
    text-align: right;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.input {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

@media (min-width: 769px) {
  .input {
    min-width: 200px;
  }
}

.input input {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
}

.input input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hx-strip {
  padding: 8px 18px;
  font-size: 11px;
  color: var(--muted-2);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.hx-strip code {
  color: var(--accent);
  font-size: 10px;
}

.empty-select-ticket {
  box-sizing: border-box;
  color: #3b4a54;
}

.empty-select-ticket__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 32px 20px;
  background: #f7f8fa;
}

.empty-select-ticket__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
}

.empty-select-ticket__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100px;
  height: 100px;
  padding: 12px 8px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  background: #f0f2f5;
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.empty-select-ticket__card:hover {
  background: #e6e9ed;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.empty-select-ticket__card:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

.empty-select-ticket__card--plus-only {
  gap: 0;
  padding: 0;
}

.empty-select-ticket__plus {
  display: block;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: #54656f;
  user-select: none;
}

html.dark .empty-select-ticket__plus {
  color: var(--muted);
}

.empty-select-ticket__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #54656f;
}

.empty-select-ticket__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: #54656f;
  letter-spacing: -0.01em;
}

html.dark .empty-select-ticket {
  color: var(--muted);
}

html.dark .empty-select-ticket__inner {
  background: var(--surface-2);
}

html.dark .empty-select-ticket__card {
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

html.dark .empty-select-ticket__card:hover {
  background: var(--surface-2);
}

html.dark .empty-select-ticket__ico {
  color: var(--muted);
}

html.dark .empty-select-ticket__label {
  color: var(--muted);
}

/* --- Multi-route layout: chat columns + standalone pages --- */
.chat-columns {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-width: 0;
  min-height: 0;
}

.layout-root > .page-standalone,
.layout-root > .agent-layout {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.layout-root > .page-standalone {
  flex-direction: column;
}

.layout-root > .agent-layout {
  flex-direction: row;
}

.iconbar .brand--round {
  border-radius: 999px;
  background: var(--brand-rail-deep);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.iconbar .brand--cs {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  display: grid;
  place-items: center;
}

.iconbar button.brand {
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.iconbar .nav-item.active {
  background: var(--rail-highlight);
  opacity: 1;
  color: #fff;
}


.iconbar .nav-ico--img {
  display: block;
  object-fit: contain;
  pointer-events: none;
}

/* Legacy: old single-line tab caption — tabs now use .ttab-id / .ttab-topic / .ttab-badge */
.ttab-cap {
  opacity: 0.8;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
}

.mobile-chat-nav {
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.mobile-back-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 4px;
  font-family: inherit;
}

.mobile-back-btn:active {
  opacity: 0.85;
}

.btn-outline {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 8px;
}

/* Standalone pages */
.page-standalone {
  background: var(--bg-page);
  overflow: auto;
}

/* Full-width shell pages (Create Group, Reports hub, Support Insights, etc.) */
.page-full {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
}

.page-full .page-inner,
.page-full .page-inner--wide {
  width: 100%;
  max-width: none;
  margin: 12px 0 28px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  padding: 28px clamp(16px, 3vw, 40px) 32px;
  box-sizing: border-box;
}

html.dark .page-full .page-inner,
html.dark .page-full .page-inner--wide {
  box-shadow: var(--shadow-md);
}

.page-create-group .field-input {
  padding: 12px 14px;
}

.page-create-group .page-foot {
  position: static;
  right: auto;
  bottom: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.page-create-group .field-lbl {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}

.page-create-group .field-lbl-optional {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.85;
}

html.dark .page-create-group .field-lbl {
  color: var(--muted-2);
}

.page-create-group .field-input,
.page-create-group .ms-box {
  border-radius: 6px;
}

.page-create-group .cg-fields > .field {
  min-width: 0;
}

.page-full.page-create-group .page-inner {
  min-width: 0;
  max-width: 100%;
}

.btn-link-cancel {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 8px;
  font-family: inherit;
}

.btn-link-cancel:hover {
  color: var(--ink);
}

.btn-create-group {
  background: var(--create-group-cta) !important;
  border: 1px solid var(--create-group-cta) !important;
  color: #fff !important;
  border-radius: 10px;
  font-weight: 600;
}

.btn-create-group:hover {
  background: var(--create-group-cta-hover) !important;
  border-color: var(--create-group-cta-hover) !important;
}

.field-prefix--ico {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 12px;
  opacity: 0.45;
  pointer-events: none;
}

.field-prefix--ico svg {
  display: block;
}

.ms-pill-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(25, 118, 210, 0.14);
  display: grid;
  place-items: center;
  color: #1565c0;
}

html.dark .ms-pill-ico {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

.page-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px 100px;
}

.page-inner--wide {
  max-width: 1280px;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.page-head--split {
  justify-content: space-between;
  flex-wrap: wrap;
}

.page-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-back {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
}

.page-back:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-export:hover {
  border-color: var(--border-strong);
}

.btn-lg {
  padding: 12px 28px;
  font-size: 15px;
}

.report-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.report-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.report-card:hover {
  border-color: rgba(0, 137, 123, 0.35);
  box-shadow: var(--shadow-md);
}

.report-card-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.report-card-body {
  flex: 1;
  min-width: 0;
}

.report-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--ink);
}

.report-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.report-card-go {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.report-card-go .arr {
  margin-left: 4px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: flex-end;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.field-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  outline: none;
}

.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field-suffix {
  position: absolute;
  right: 12px;
  opacity: 0.45;
}

.field-prefix {
  position: absolute;
  left: 11px;
  opacity: 0.45;
  font-size: 13px;
}

.field-input--select .field-input {
  padding-left: 36px;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.field-err {
  font-size: 11px;
  color: #b91c1c;
}

.create-group-main {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: cgmain;
}

.create-group-grid {
  display: grid;
  grid-template-columns: minmax(100px, 140px) 1fr;
  gap: 28px 32px;
  align-items: start;
  min-width: 0;
}

.cg-icon-circle {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: #D9D9D9;
  border: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 8px;
}

.cg-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  min-width: 0;
}


/* Create Group — stack when the *content column* is narrow (rail + main), not only by viewport width */
@container cgmain (max-width: 720px) {
  .create-group-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    min-width: 0;
  }

  .cg-icon-slot {
    justify-self: center;
    width: 100%;
    max-width: 100%;
  }

  .cg-fields {
    grid-template-columns: 1fr;
    gap: 20px 0;
    min-width: 0;
    width: 100%;
  }

  .create-group-grid .field,
  .create-group-grid .field-input-wrap,
  .create-group-grid .ms-field {
    min-width: 0;
    max-width: 100%;
  }

  /* Group members: same narrow-column fix — hide table header row, stack fields full width */
  .cg-members-table {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
  }

  .cg-members-thead {
    display: none !important;
  }

  .cg-cell-label {
    display: block;
  }

  .cg-member-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    align-items: stretch;
  }

  .cg-member-row:last-child {
    margin-bottom: 0;
  }

  .cg-member-cell {
    min-width: 0;
    width: 100%;
  }

  .cg-member-cell .field-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 48px;
  }

  .cg-member-cell--stars {
    align-items: flex-start;
    align-self: stretch;
  }

  .cg-member-cell--stars .cg-cell-label {
    text-align: left;
  }

  .cg-member-cell--action {
    padding-top: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
  }

  .cg-stars {
    justify-content: flex-start;
  }

  .star-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
}

/* Fallback when container queries are unavailable: full-width mobile / small window */
@media (max-width: 720px) {
  .page-create-group .create-group-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    min-width: 0;
  }

  .page-create-group .cg-icon-slot {
    justify-self: center;
    width: 100%;
    max-width: 100%;
  }

  .page-create-group .cg-fields {
    grid-template-columns: 1fr;
    gap: 20px 0;
    min-width: 0;
    width: 100%;
  }

  .page-create-group .field,
  .page-create-group .field-input-wrap,
  .page-create-group .ms-field {
    min-width: 0;
    max-width: 100%;
  }

  .page-create-group .cg-members-table {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
  }

  .page-create-group .cg-members-thead {
    display: none !important;
  }

  .page-create-group .cg-cell-label {
    display: block;
  }

  .page-create-group .cg-member-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    align-items: stretch;
  }

  .page-create-group .cg-member-row:last-child {
    margin-bottom: 0;
  }

  .page-create-group .cg-member-cell {
    min-width: 0;
    width: 100%;
  }

  .page-create-group .cg-member-cell .field-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 48px;
  }

  .page-create-group .cg-member-cell--stars {
    align-items: flex-start;
    align-self: stretch;
  }

  .page-create-group .cg-member-cell--stars .cg-cell-label {
    text-align: left;
  }

  .page-create-group .cg-member-cell--action {
    padding-top: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
  }

  .page-create-group .cg-stars {
    justify-content: flex-start;
  }

  .page-create-group .star-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
}

.ms-box {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  min-height: 48px;
}

.page-create-group .ms-box {
  border-color: var(--border-strong);
}

html.dark .ms-box {
  background: var(--surface);
  border-color: var(--border);
}

/* Primary multi-select: one bordered field — chips flow left, chevron / “Select template” on the right, same surface (no inner box) */
.ms-box-inner {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  align-items: center;
  gap: 6px 8px;
  padding: 6px 8px 6px 10px;
  min-height: 46px;
}

.ms-pills {
  /* display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start; */
  flex: 1 1 auto;
  /* min-width: 0; */
  padding: 0;
}

/* Select sits in the same row, pushed right — not a separate bordered cell */
.page-create-group .ms-box--primary .ms-box-select-wrap {
  flex: 0 1 auto;
  min-width: min(168px, 42vw);
  max-width: 220px;
  width: auto;
}

/* Strip native “second input” chrome so it matches reference: chips + one field outline */
.page-create-group .ms-box--primary .ms-box-select-wrap.field-input--select .field-input {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  background: transparent !important;
  min-height: 34px;
  padding: 4px 36px 4px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  width: 100%;
}

.page-create-group .ms-box--primary .ms-box-select-wrap.field-input--select .field-input:focus {
  border: none !important;
  box-shadow: none !important;
}

.page-create-group .ms-box--primary .ms-box-select-wrap.field-input--select .field-input:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

.field-lbl--with-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.field-info-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  color: var(--muted);
  cursor: default;
  line-height: 1;
}

.ms-pill {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 8px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(25, 118, 210, 0.28);
  width: fit-content;
  max-width: 100%;
}

html.dark .ms-pill {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.ms-pill-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(240px, 70vw);
}

.ms-pill-access {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(20, 184, 134, 0.2);
  color: #047857;
}

html.dark .ms-pill-access {
  background: rgba(20, 184, 134, 0.25);
  color: #6ee7b7;
}

.ms-pill-x {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 2px 6px;
}

.ms-pill-x:hover {
  opacity: 1;
}

@media (max-width: 520px) {
  .page-create-group .ms-box--primary .ms-box-select-wrap {
    margin-left: 0;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
}

.cg-members {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.cg-members-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.cg-members-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.cg-members-title-main {
  display: inline;
}

.cg-members-count {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: none;
}

.cg-members-hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.cg-members-table {
  width: 100%;
  min-width: 0;
}

.cg-members-thead {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(100px, auto) 44px;
  gap: 12px;
  align-items: end;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--border);
}

.cg-th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cg-th--stars {
  text-align: center;
}

.cg-th--action {
  width: 44px;
}

.cg-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(100px, auto) 44px;
  gap: 12px;
  align-items: start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}

.cg-member-row:last-child {
  border-bottom: none;
}

.cg-member-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cg-cell-label {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.cg-member-cell--stars {
  align-items: center;
  align-self: center;
}

.cg-member-cell--stars .cg-cell-label {
  text-align: center;
  width: 100%;
}

.cg-member-cell--action {
  align-items: center;
  justify-content: center;
  align-self: center;
}

.cg-stars {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.icon-btn--add-member {
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--accent);
}

.icon-btn--add-member:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.field--inline {
  min-width: 0;
}

.star-btn {
  border: none;
  background: none;
  color: #e2e8f0;
  cursor: pointer;
  font-size: 18px;
  padding: 0 2px;
}

.star-btn.on {
  color: #fbbf24;
}

.cg-remove {
  border: none;
  background: transparent;
  color: #dc2626;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
}

.page-foot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
}

.insights-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

/* Must come after the base rule above — otherwise desktop columns override the mobile block earlier in the file. */
@media (max-width: 768px) {
  .insights-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .insights-grid > * {
    min-width: 0;
    max-width: 100%;
  }
}

.insight-chart-card,
.insight-donut-card,
.volume-card,
.audit-overview,
.table-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-sm);
}

.insight-h {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.insight-sub {
  margin: -4px 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.chart-legend-ops--above {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.chart-legend-lines {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}

.chart-legend-lines .ln {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed;
  vertical-align: middle;
  margin-right: 4px;
}

.chart-legend-lines .ln.min {
  border-color: #43a047;
}

.chart-legend-lines .ln.avg {
  border-color: #fb8c00;
}

.chart-legend-lines .ln.max {
  border-color: #e53935;
}

.stack-chart {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  min-height: 200px;
  padding: 8px 0 4px;
}

.stack-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.stack-bar {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: var(--surface-2);
}

.stack-seg {
  width: 100%;
  min-height: 2px;
}

.stack-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-2);
  margin-top: 8px;
  text-align: center;
}

.chart-legend-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  margin-top: 12px;
  color: var(--muted);
}

.op-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
}

.donut-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.donut-visual {
  width: 160px;
  height: 160px;
  border-radius: 999px;
  position: relative;
  display: grid;
  place-items: center;
}

.donut-hole {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}

.donut-hole strong {
  font-size: 18px;
  color: var(--ink);
}

.donut-legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 12px;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  font-style: normal;
}

.audit-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 14px;
}

.audit-overview-head .hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.metric-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.metric-card {
  flex: 1;
  min-width: 100px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.metric-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.metric-lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.metric-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.table-card {
  margin-top: 16px;
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th,
.data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}

.link-id {
  color: #1565c0;
  font-weight: 600;
  text-decoration: none;
}

.link-id:hover {
  text-decoration: underline;
}

.sub {
  font-size: 11px;
  color: var(--muted-2);
}

.cell-op {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell-ok {
  color: var(--success);
  font-weight: 600;
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.pill--blue {
  background: #e3f2fd;
  color: #1565c0;
}

.pill--purple {
  background: #f3e5f5;
  color: #6a1b9a;
}

.pill--orange {
  background: #fff3e0;
  color: #e65100;
}

.pill--dashed {
  border: 1px dashed currentColor;
  background: transparent;
}

.pill--soft {
  background: #e3f2fd;
  color: #1565c0;
  margin-left: 8px;
}

.pill--agent {
  background: #e8f5f1;
  color: var(--accent-hover);
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-left: 10px;
}

html.dark .link-id {
  color: #93c5fd;
}

html.dark .pill--blue,
html.dark .pill--soft {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

html.dark .pill--purple {
  background: rgba(168, 85, 247, 0.22);
  color: #d8b4fe;
}

html.dark .pill--orange {
  background: rgba(234, 88, 12, 0.22);
  color: #fdba74;
}

html.dark .pill--agent {
  background: rgba(45, 212, 191, 0.15);
  color: #5eead4;
}

html.dark .agent-av.tone-blue,
html.dark .pill--admin {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
}

html.dark .agent-av.tone-green {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

html.dark .agent-av.tone-purple {
  background: rgba(168, 85, 247, 0.22);
  color: #d8b4fe;
}

html.dark .agent-av.tone-teal {
  background: rgba(45, 212, 191, 0.2);
  color: #5eead4;
}

.month-strip-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.month-strip {
  display: flex;
  flex: 1;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.month-chip {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 500;
}

.month-chip::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

.month-chip.active {
  color: var(--accent);
  font-weight: 600;
}

.month-chip.active::after {
  background: var(--accent);
}

.month-nav {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--muted);
}

.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.hbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label count'
    'track track';
  gap: 8px 12px;
  align-items: center;
}

.hbar-label {
  grid-area: label;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}

.hbar-track {
  grid-area: track;
  height: 14px;
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
  min-width: 0;
}

.hbar-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--accent);
}
.hbar-count {
  grid-area: count;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 520px) {
  .hbar-row {
    grid-template-columns: minmax(100px, 160px) minmax(0, 1fr) minmax(72px, 120px);
    grid-template-areas: 'label track count';
    gap: 12px;
  }

  .hbar-track {
    min-width: 0;
  }
}

.year-sel {
  width: auto;
  min-width: 88px;
}

/* Support Insights — mobile layout only (other report routes unchanged) */
@media (max-width: 768px) {
  .page-support-insights .page-head--split {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .page-support-insights .page-head--split .btn-export {
    width: 100%;
    justify-content: center;
  }

  .page-support-insights .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .page-support-insights .filter-bar .btn-primary {
    width: 100%;
  }

  .page-support-insights .filter-field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .page-support-insights .insight-chart-card,
  .page-support-insights .insight-donut-card {
    padding: 16px 14px 18px;
    min-width: 0;
  }

  .page-support-insights .insight-sub {
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 12px;
  }

  /* Resolution Trends — legend: readable grid, no tiny single-line cram */
  .page-support-insights .chart-legend-ops--above {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    font-size: 12px;
    line-height: 1.35;
    padding: 12px 12px;
  }

  .page-support-insights .chart-legend-ops--above > span {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .page-support-insights .chart-legend-ops--above .op-dot {
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Resolution Trends — horizontal chart: touch scroll + snap + clearer bars/labels */
  .page-support-insights .stack-chart {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
    margin: 0 -6px;
    padding: 8px 12px 14px;
    min-height: 188px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    scrollbar-width: thin;
    box-shadow: inset 0 -1px 0 var(--border);
  }

  .page-support-insights .stack-day {
    flex: 0 0 auto;
    width: 46px;
    min-width: 46px;
    scroll-snap-align: center;
  }

  .page-support-insights .stack-bar {
    height: 148px;
    border-radius: 8px 8px 0 0;
  }

  .page-support-insights .stack-lbl {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    padding: 0 1px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-align: center;
    color: var(--muted);
  }

  /* Tickets by Category — donut + scrollable legend for long lists */
  .page-support-insights .insight-donut-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .page-support-insights .donut-wrap {
    flex-shrink: 0;
    padding: 8px 0 6px;
  }

  .page-support-insights .donut-visual {
    width: min(204px, 84vw);
    height: min(204px, 84vw);
    max-width: 100%;
  }

  .page-support-insights .donut-hole {
    width: min(112px, 46vw);
    height: min(112px, 46vw);
  }

  .page-support-insights .donut-hole strong {
    font-size: clamp(17px, 4.5vw, 20px);
  }

  .page-support-insights .donut-legend {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(320px, 52vh);
    margin: 8px 0 0;
    padding: 10px 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
  }

  .page-support-insights .donut-legend li {
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .page-support-insights .donut-legend li:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .page-support-insights .donut-legend i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
    border-radius: 3px;
  }

  .page-support-insights .donut-legend li span {
    min-width: 0;
    word-break: break-word;
  }
}

@media (max-width: 380px) {
  .page-support-insights .chart-legend-ops--above {
    grid-template-columns: 1fr;
  }
}

/* Agent groups — split pane (reference: light list + white detail) */
.agent-layout {
  flex: 1;
  flex-direction: row;
  align-self: stretch;
  min-height: 0;
  background: var(--agent-pane-bg);
}

.agent-list-panel {
  width: min(340px, 38vw);
  min-width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.agent-search {
  padding: 0 16px 12px;
}

.agent-search .search input {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--ink);
}

.agent-list-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px 10px;
}

.agent-list-title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.agent-list-actions {
  display: flex;
  gap: 6px;
}

.agent-list-actions a.icon-btn--bare {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agent-list-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  padding: 8px 18px 6px;
  font-weight: 700;
}

.agent-templates {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 20px;
}

.agent-tpl {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  margin-bottom: 6px;
  transition: background 0.12s ease;
}

.agent-tpl:hover {
  background: var(--surface-2);
}

.agent-tpl.active {
  background: var(--accent-soft);
  border-color: transparent;
  box-shadow: inset -4px 0 0 0 var(--accent);
}

.agent-tpl-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.agent-tpl-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

/* Group logo in sidebar list */
.agent-tpl--with-logo {
  gap: 10px;
}

.agent-tpl-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}

/* Editable group name input in header */
.agent-main-title-input {
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  flex: 1;
  min-width: 0;
}

.agent-main {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.agent-main--detail {
  padding: 0;
  min-height: 0;
}

.agent-perm-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.agent-perm-form-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 20px 8px;
}

.agent-perm-foot {
  margin-top: auto;
}

/* Edit team — full form (Edit icon), data from selected template */
.agent-main--team-edit {
  padding: 0;
  min-height: 0;
}

.agent-team-edit-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-team-edit-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.agent-team-name-input {
  flex: 1;
  min-width: min(100%, 220px);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.agent-team-edit-icon-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.agent-team-edit-add-block {
  padding: 20px 20px 8px;
}

.agent-team-edit-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px 20px;
  align-items: end;
}

.field-input--phone91 .field-input {
  padding-left: 40px;
}

.agent-team-add-btn {
  white-space: nowrap;
}

.agent-main--team-edit .agent-subh {
  padding-left: 20px;
  padding-right: 20px;
}

.agent-team-edit-rows {
  padding: 4px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.agent-team-edit-member-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px 16px;
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.agent-team-row-remove {
  margin-bottom: 6px;
}

.agent-team-edit-foot {
  margin-top: auto;
  padding: 20px 20px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width: 768px) {
  .agent-team-edit-add-row,
  .agent-team-edit-member-row {
    grid-template-columns: 1fr;
  }

  .agent-team-add-btn {
    width: 100%;
  }

  .agent-team-edit-foot {
    justify-content: stretch;
  }

  .agent-team-edit-foot .btn {
    flex: 1 1 auto;
  }
}

.agent-main-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border);
}

.agent-main-head .agent-main-title {
  flex: 1;
  min-width: 0;
}

.agent-mobile-back {
  flex-shrink: 0;
  margin-right: 4px;
}

.agent-main-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.agent-main-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon-btn--round {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.icon-btn--bare {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}

.icon-btn--bare:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn--blue {
  color: #64b5f6;
  border: 1px solid rgba(100, 181, 246, 0.45);
  background: var(--surface);
}

.icon-btn--red {
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: var(--surface);
}

html:not(.dark) .icon-btn--blue {
  color: #1976d2;
  border: 1px solid #bbdefb;
  background: var(--surface);
}

html:not(.dark) .icon-btn--red {
  color: #c62828;
  border: 1px solid #ffcdd2;
  background: var(--surface);
}

.icon-btn--round.icon-btn--blue:hover,
.icon-btn--round.icon-btn--red:hover {
  filter: brightness(0.97);
}

.agent-subh {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  padding: 8px 28px 14px;
  font-weight: 700;
}

.agent-member-list {
  padding: 0 0 24px;
}

.agent-member-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.agent-member-row:hover {
  background: var(--surface-2);
}

.agent-member-row--readonly {
  cursor: default;
}

.agent-member-row--readonly:hover {
  background: transparent;
}

.agent-main--create-group-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.agent-main--create-group-form .create-group-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.page-foot--create-group-in-main {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 16px 20px 20px;
  background: var(--surface);
}

/* Create-group: hide list rail so the form uses full content width (icon bar only on the left). */
.layout-root > .agent-layout.agent-layout--create-fullpage {
  flex-direction: row;
}

.agent-layout--create-fullpage .agent-main--create-fullwidth {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.page-inner--create-group-full {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.agent-main--create-fullwidth .create-group-main {
  flex: 1;
  min-height: 0;
}

.page-head--create-group-embed {
  flex-shrink: 0;
}

.page-head--create-group-embed .agent-main-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .agent-layout--create-fullpage.agent-layout--mobile-main .agent-main--create-fullwidth {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

.agent-member-info {
  flex: 1;
  min-width: 0;
}

.agent-member-info strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.agent-av {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.agent-av.tone-blue {
  background: #e3f2fd;
  color: #1565c0;
}

.agent-av.tone-green {
  background: #e8f5e9;
  color: #2e7d32;
}

.agent-av.tone-purple {
  background: #f3e5f5;
  color: #6a1b9a;
}

.agent-av.tone-teal {
  background: #ccfbf1;
  color: #0f766e;
  font-weight: 800;
}

.pill--admin {
  background: #e3f2fd;
  color: #1565c0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.bc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.detail-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.perm-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 16px 0;
}

.perm-av {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #e3f2fd;
  color: #1565c0;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.perm-section {
  margin-top: 8px;
}

.perm-section-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.perm-section-h .t {
  font-weight: 700;
  font-size: 15px;
}

.perm-section-h .d {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.switch--toggle {
  position: relative;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  clip: rect(0, 0, 0, 0);
}

.switch__track {
  display: inline-block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.switch__thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.switch__input:checked + .switch__track {
  background: var(--accent);
}

.switch__input:checked + .switch__track .switch__thumb {
  transform: translateX(18px);
}

.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.perm-subh {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  margin: 20px 0 10px;
  font-weight: 700;
}

.perm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.perm-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0;
  cursor: pointer;
  align-items: flex-start;
}

.perm-t {
  font-weight: 600;
  font-size: 13px;
}

.perm-d {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.chev {
  color: var(--muted-2);
  font-size: 18px;
}

/* Tablet: balanced columns, no layout change to flow */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: min(280px, 34vw);
    min-width: 220px;
  }

  .main {
    margin: 10px 10px 10px 0;
  }

  .page-inner,
  .page-inner--wide {
    padding-left: 20px;
    padding-right: 20px;
  }

  .agent-list-panel {
    width: min(300px, 36vw);
    min-width: 240px;
  }

  .filter-bar .filter-field {
    flex: 1 1 160px;
    min-width: 0;
  }

  .metric-cards .metric-card {
    min-width: 90px;
  }
}

/* Large desktop: optional comfort width on very wide monitors (chat stays full width) */
@media (min-width: 1600px) {
  .page-inner--wide {
    max-width: 1400px;
  }

  .page-inner {
    max-width: 1200px;
  }

  .page-full .page-inner,
  .page-full .page-inner--wide {
    max-width: none;
  }
}

/* Small phones: tighter rhythm, stacked report actions */
@media (max-width: 480px) {
  .page-head--split .page-head-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .identity .name {
    font-size: 15px;
  }

  .ttab {
    font-size: 11px;
    padding: 8px 10px;
  }

  .btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .stack-chart {
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .stack-day {
    flex: 0 0 auto;
    min-width: 36px;
  }

  .donut-visual {
    width: min(160px, 70vw);
    height: min(160px, 70vw);
  }
}
/* --- Figma Ezee Tasks: Client Support shell (chat page only; .layout-root--client-support-shell from shell.html) --- */
/* Full-bleed: no outer gray gutter or rounded “card” frame — .layout-root uses default flex + bg. */

.layout-root--client-support-shell .iconbar {
  width: 64px;
  background: #047857;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  padding: 14px 0 12px;
  gap: 13px;
}

.layout-root--client-support-shell .iconbar .brand--round {
  background: linear-gradient(145deg, #2d6a4f, #1b4332);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.layout-root--client-support-shell .iconbar .nav-item {
  /* width: 44px;
  height: 44px; */
  border-radius: 50%;
  opacity: 0.88;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Figma: circular lighter highlight on hover (~12–15% white on forest bar) */
.layout-root--client-support-shell .iconbar .nav-item:hover {
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
}

.layout-root--client-support-shell .iconbar .nav-item.active {
  background: rgba(255, 255, 255, 0.16);
  opacity: 1;
}

.layout-root--client-support-shell .iconbar .nav-ico path,
.layout-root--client-support-shell .iconbar .nav-ico line {
  stroke-width: 2 !important;
}

.layout-root--client-support-shell .iconbar .nav-ico circle:not([fill]) {
  stroke-width: 2 !important;
}

html.dark .layout-root--client-support-shell .iconbar .nav-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

html.dark .layout-root--client-support-shell .iconbar .nav-item.active {
  background: rgba(255, 255, 255, 0.18);
}

.layout-root--client-support-shell .chat-columns .sidebar.sidebar--client-support {
  background: #FFFFFF;
  border-right: 1px solid #dfe7e3;
  box-shadow: none;
}

/* Client Support desktop: ticket list ~30% / thread ~70% (icon rail is separate). */
@media (min-width: 769px) {
  .layout-root--client-support-shell .chat-columns .sidebar.sidebar--client-support {
    flex: 0 0 30%;
    width: 28%;
    max-width: 30%;
    min-width: 0;
  }

  .layout-root--client-support-shell .chat-columns > .main {
    flex: 1 1 0;
    min-width: 0;
  }
}

html.dark .layout-root--client-support-shell .chat-columns .sidebar.sidebar--client-support {
  background: var(--surface);
  border-right-color: var(--border);
}

/* Client Support: ticket list stays visible with thread (override mobile-thread sidebar hide); clip menu overflow */
@media (max-width: 768px) {
  .layout-root--client-support-shell .chat-columns.chat-columns--mobile-thread {
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .layout-root--client-support-shell .chat-columns.chat-columns--mobile-thread .sidebar.sidebar--client-support {
    display: flex !important;
    flex: 0 1 auto;
    flex-direction: column;
    width: 100% !important;
    max-width: none;
    max-height: min(42vh, 320px);
    min-height: 148px;
    overflow: hidden;
    border-bottom: 1px solid #dfe7e3;
    border-right: none;
  }

  .layout-root--client-support-shell .chat-columns.chat-columns--mobile-thread .sidebar.sidebar--client-support > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }

  .layout-root--client-support-shell .chat-columns.chat-columns--mobile-thread .sidebar--client-support .ticket-groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .layout-root--client-support-shell .chat-columns.chat-columns--mobile-thread .main {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100% !important;
    max-width: none;
  }
}

html.dark .layout-root--client-support-shell .chat-columns.chat-columns--mobile-thread .sidebar.sidebar--client-support {
  border-bottom-color: var(--border);
}

/* Allow message menus to extend past the thread edge; bubbles already cap width + wrap */
.layout-root--client-support-shell .ezee-feed-iter {
  display: block;
  width: 100%;
}

/* Visual break between ticket blocks: gap + dotted rule (ref: separated cards on pattern) */
.layout-root--client-support-shell .ezee-feed-iter:not(:first-child)::before {
  content: '';
  display: block;
  height: 56px;
  margin: 3px -20px;
  background-color: #ffffff;
}

html.dark .layout-root--client-support-shell .ezee-feed-iter:not(:first-child)::before {
  border-top-color: rgba(148, 163, 184, 0.4);
}

.layout-root--client-support-shell .main .bubble .msg-menu-panel {
  z-index: 100;
}

/*
 * Ezee ticket messages: inbound bubbles sit on the left — default menu uses right:4px + min-width 300px,
 * so the panel grows left and gets clipped (overflow) / hides labels. Anchor inbound menus to the left
 * edge of the bubble; outbound stays right-aligned to the agent bubble.
 */
.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.bubble--in .msg-menu-panel {
  left: 0;
  right: auto;
  top: 4px;
  transform: translateY(-100%);
  min-width: min(300px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 16px));
  width: max-content;
  box-sizing: border-box;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.bubble--out .msg-menu-panel {
  left: auto;
  right: 10px;
  top: 4px;
  transform: translateY(-100%);
  min-width: min(300px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 16px));
  width: max-content;
  box-sizing: border-box;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble .msg-menu-item > span:last-child {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  text-align: left;
}

.layout-root--client-support-shell .sidebar--client-support .sidebar-title {
  text-transform: none;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0f172a;
}

html.dark .layout-root--client-support-shell .sidebar--client-support .sidebar-title {
  color: var(--ink);
}

.layout-root--client-support-shell .sidebar--client-support .sidebar-user {
  display: none;
}


html.dark .layout-root--client-support-shell .icon-btn--sidebar-head {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .icon-btn--sidebar-head:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.layout-root--client-support-shell .search--client-support {
  padding: 0 16px 14px;
}

.layout-root--client-support-shell .search--client-support .search-wrap .search-ico-svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.layout-root--client-support-shell .search--client-support input {
  padding: 7px 9px 9px 52px;
  border-radius: 8px;
  border: none;
  background: #e8eeeb;
  box-shadow: none;
}

.layout-root--client-support-shell .search--client-support input:focus {
  border: none;
  box-shadow: 0 0 0 2px rgba(29, 122, 95, 0.35);
  background: #fff;
}

html.dark .layout-root--client-support-shell .search--client-support input {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

html.dark .layout-root--client-support-shell .search--client-support input:focus {
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.layout-root--client-support-shell .sidebar--client-support .tabs {
  display: flex;
  align-items: center;
  gap: 33px;
  padding: 0px 38px 3px;
}

.img.ticket-header-pill-ico{
  margin-bottom: -7px;
}

.layout-root--client-support-shell .sidebar--client-support .tab {
  padding: 4px 12px 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  background: #F1F5F9;
  color: #334155;
}

.layout-root--client-support-shell .sidebar--client-support .tab:hover {
  background: #d5ded9;
  color: #0f172a;
}

.layout-root--client-support-shell .sidebar--client-support .tab.active {
  background: #00966b;
  color: #fff;
  border: none;
}

html.dark .layout-root--client-support-shell .sidebar--client-support .tab:not(.active) {
  background: var(--surface-2);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .sidebar--client-support .tab.active {
  background: #059669;
  color: #fff;
}

.layout-root--client-support-shell .sidebar--client-support .tab.tab--st-all.active,
.layout-root--client-support-shell .sidebar--client-support .tab.tab--st-new.active,
.layout-root--client-support-shell .sidebar--client-support .tab.tab--st-in_progress.active,
.layout-root--client-support-shell .sidebar--client-support .tab.tab--st-resolved.active {
  background: #10B981;
  border-color: transparent;
  color: #fff;
}

.layout-root--client-support-shell .sidebar--client-support .ticket-groups {
  padding: 2px;
}

.layout-root--client-support-shell .sidebar--client-support .ticket-group-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #64748B;
  padding: 8px 16px 8px 16px;
  background-color: #F8FAFC;
}

html.dark .layout-root--client-support-shell .sidebar--client-support .ticket-group-title {
  color: var(--muted-2);
}

.layout-root--client-support-shell .sidebar--client-support .ticket {
  position: relative;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  align-items: flex-start;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

/* Figma: bright green vertical rail on the left edge (hover + selected) */
.layout-root--client-support-shell .sidebar--client-support .ticket::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: calc(100% - 20px);
  max-height: 71px;
  border-radius: 2px;
  background: #059669;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.layout-root--client-support-shell .sidebar--client-support .ticket:hover {
  background: #ecfdf5;
}

.layout-root--client-support-shell .sidebar--client-support .ticket:hover::before {
  opacity: 1;
}

.layout-root--client-support-shell .sidebar--client-support .ticket:focus {
  outline: none;
}

.layout-root--client-support-shell .sidebar--client-support .ticket:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
}

/* Selected row: same mint canvas as ref; rail stays visible */
.layout-root--client-support-shell .sidebar--client-support .ticket.active {
  background: #ecfdf5;
  outline: none;
  box-shadow: none;
}

.layout-root--client-support-shell .sidebar--client-support .ticket.active::before {
  opacity: 1;
}

html.dark .layout-root--client-support-shell .sidebar--client-support .ticket:hover {
  background: rgba(16, 185, 129, 0.1);
}

html.dark .layout-root--client-support-shell .sidebar--client-support .ticket:hover::before,
html.dark .layout-root--client-support-shell .sidebar--client-support .ticket.active::before {
  background: #34d399;
  opacity: 1;
}

html.dark .layout-root--client-support-shell .sidebar--client-support .ticket.active {
  background: rgba(16, 185, 129, 0.14);
  border: none;
  outline: none;
  box-shadow: none;
}

.layout-root--client-support-shell .sidebar--client-support .ticket .avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.layout-root--client-support-shell .sidebar--client-support .ticket-title {
  font-size: 15px;
  font-weight: 700;
}

.layout-root--client-support-shell .sidebar--client-support .ticket-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

.layout-root--client-support-shell .sidebar--client-support .ticket-time {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.2;
}

.layout-root--client-support-shell .sidebar--client-support .ticket-msg {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}
 .layout-root--client-support-shell .sidebar--client-support .ticket {
    position: relative;
}
.layout-root--client-support-shell .sidebar--client-support .ticket .badge.badge--unseen {
    position: absolute;
    right: 12px;
    top: 68%;
    transform: translateY(-50%);
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    line-height: 22px;
    font-size: 11px;
    font-weight: 700;
    background: #34a853;
    color: #fff;
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Figma: ticket tab strip — green underline, no blue “card” fill ([Ezee Tasks](https://www.figma.com/design/9I6wJfV7eUjuMhuQpK3gcx/Ezee-Tasks?node-id=9528-70564)) */
.layout-root--client-support-shell .ticket-tabs--figma {
  align-items: flex-end;
  gap: 0;
  padding: 0px 30px;
  background: #FFFFFF;
  border-bottom: 1px solid #e3ebe6;
}

.layout-root--client-support-shell .ticket-tabs--figma .ticket-tabs-strip {
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.layout-root--client-support-shell .ticket-tabs--figma .ticket-tabs-strip::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Avoid stretched column beside overflow chevron (legacy OS scroll arrows) */
.layout-root--client-support-shell .ticket-tabs--figma .ticket-tabs-more-wrap {
  align-self: flex-end;
  overflow: hidden;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab {
  flex: 0 1 auto;
  padding: 5px 3px 5px 13px;
  margin: 0 2px -1px 0;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #64748b;
}

/* Figma 9528-70564: tab × + label cluster */
.layout-root--client-support-shell .ticket-tabs--figma .ttab--figma-with-close {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab-inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab-close:hover {
  background: rgba(15, 23, 42, 0.07);
  color: #475569;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.55);
}

/* Ref UI: active tab = white surface + teal underline */
.layout-root--client-support-shell .ticket-tabs--figma .ttab.active {
  color: #0f172a;
  background: #f1f5f9;
  border: none;
  border-bottom: 3px solid #0d9488;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  padding: 5px 5px 5px 9px;
  margin-bottom: -1px;
  border-radius: 10px 10px 0 0;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab.active .ttab-id {
  color: #10b891;
  font-weight: 700;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab-badge--new {
  background: #dbeafe;
  color: #1d4ed8;
  /* border: 1px solid rgba(37, 99, 235, 0.22); */
  font-weight: 700;
}

.add-issue-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  font-size: 10px;
  font-weight: 500;
  color: #4B5675;
  background-color: #f9fafb;
  border: 1.5px dashed #4B5675!important;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-issue-tag:hover {
  color: #374151;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab-badge--resolved {
  background: #7c3aed45;
  color: #7c3aed;
  /* border: 1px solid rgba(91, 33, 182, 0.35); */
  font-weight: 700;
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma {
  background: var(--surface-2);
  border-bottom-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab.active {
  background: var(--surface);
  color: var(--ink);
  border-bottom-color: #2dd4bf;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab.active .ttab-id {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab-badge--new {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab-badge--resolved {
  background: #7c3aed;
  color: #fff;
  border-color: rgba(196, 181, 253, 0.35);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab-badge--in_progress {
  background: #fcd34d;
  color: #171717;
  border-color: rgba(245, 158, 11, 0.5);
}

/* Ref UI: overflow control — blue chevron asset, light frame */
.layout-root--client-support-shell .ttab-more--figma {
  /* color: #2563eb;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  margin: 0 4px 8px 6px;
  min-height: 38px;
  height: auto;
  max-height: none;
  align-self: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.06); */
}

html.dark .layout-root--client-support-shell .ttab-more--figma {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ttab-more--figma:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: min(340px, calc(100vw - 32px));
  max-width: min(420px, calc(100vw - 16px));
  max-height: min(440px, 62vh);
  padding: 8px;
  gap: 4px;
  background: #fff;
  border: 1px solid #e5ebe8;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.06);
}

html.dark .layout-root--client-support-shell .ticket-tabs-overflow-menu--figma {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  border-bottom: none;
  background: #f9fbf9;
  white-space: nowrap;
  text-align: left;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab:hover {
  background: #eef5f1;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab.active {
  background: #e8f5ef;
  border-color: rgba(29, 122, 95, 0.25);
  box-shadow: none;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-topic {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-badge {
  margin-left: auto;
  flex-shrink: 0;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-badge--new {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.22);
  font-weight: 700;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-badge--resolved {
  background: #7c3aed;
  color: #fff;
  border: 1px solid rgba(91, 33, 182, 0.35);
  font-weight: 700;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-badge--in_progress {
  background: #fcd34d;
  color: #171717;
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-weight: 700;
}

@media (max-width: 768px) {
  .layout-root--client-support-shell .chat-columns--mobile-thread .ticket-tabs--figma {
    background: #f4f7f5;
    border-bottom-color: #e3ebe6;
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .ticket-tabs--figma .ticket-tabs-strip .ttab {
    border-radius: 0;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    box-shadow: none;
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .ticket-tabs--figma .ticket-tabs-strip .ttab.active {
    background: #fff;
    border: none;
    border-bottom: 3px solid #0d9488;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .main .header--ticket-figma .identity .avatar {
    width: 44px;
    height: 44px;
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .ttab-more--figma {
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    margin-bottom: 8px;
    color: #2563eb;
    background: #fff;
  }

  html.dark .layout-root--client-support-shell .chat-columns--mobile-thread .ticket-tabs--figma {
    background: var(--surface);
    border-bottom-color: var(--border);
  }

  html.dark .layout-root--client-support-shell .chat-columns--mobile-thread .ticket-tabs--figma .ticket-tabs-strip .ttab.active {
    background: var(--surface);
    border-bottom-color: #2dd4bf;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  }

  html.dark .layout-root--client-support-shell .chat-columns--mobile-thread .ttab-more--figma {
    background: var(--surface-2);
    border-color: rgba(96, 165, 250, 0.4);
    color: #60a5fa;
  }
}

/* Figma: ticket header — Mark Resolved + kebab menu ([9528-70564](https://www.figma.com/design/9I6wJfV7eUjuMhuQpK3gcx/Ezee-Tasks?node-id=9528-70564), [9650-26859](https://www.figma.com/design/9I6wJfV7eUjuMhuQpK3gcx/Ezee-Tasks?node-id=9650-26859)) */
.layout-root--client-support-shell .main .header--ticket-figma {
  background: #fafcfb;
  border-bottom: 1px solid #e3ebe6;
  padding: 0px 27px 0;
}

html.dark .layout-root--client-support-shell .main .header--ticket-figma {
  background: var(--surface);
  border-bottom-color: var(--border);
}


.gps-team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EFF6FF;
  border-radius: 16px;
  padding: 4px 10px;
  position: relative;
}

.gps-team .gps-label {
  color: #2f80ed;
  font-size: 13px;
  font-weight: 500;
}

/* Hide native select UI but keep functionality */
.gps-team .gps-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* caret alignment */
.gps-team .team-caret img {
  width: 10px;
  height: 10px;
}
/* Figma 9528-70564: two-row ticket header (title + tags | meta strip) + actions column */
.layout-root--client-support-shell .main .header--ticket-figma .header-row.ticket-header-figma-headerrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 1px;
}

.layout-root--client-support-shell .main .header--ticket-figma .header-row {
  padding-bottom: 14px;
}

.layout-root--client-support-shell .main .header--ticket-figma .identity.ticket-header-figma-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* gap: 1px; */
  flex: 1 1 auto;
  min-width: 0;
}

.layout-root--client-support-shell .main .ticket-header-row--r1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.layout-root--client-support-shell .main .ticket-header-identity-title-row--r1 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.layout-root--client-support-shell .main .ticket-header-tag-row--figma {
  margin-top: 0;
  flex: 1 1 200px;
  min-width: 0;
}

.layout-root--client-support-shell .main .ticket-pill--figma-issue,
.layout-root--client-support-shell .main .ticket-pill--figma-add {
  gap: 7px;
}
.ticket-header-pill-ico{
    /* width: 38px;
    height: 31px;
    object-fit: contain;
    margin-block-end: -11px; */
}
.layout-root--client-support-shell .main .ticket-header-pill-ico {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.layout-root--client-support-shell .main .ticket-header-row--r2 {
  margin-top: 2;
  gap: 0 2px;
  row-gap: 8px;
  align-items: center;
}

.layout-root--client-support-shell .main .ticket-header-row--r2 > * + *::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d1d5db;
  margin-right: 12px;
  flex-shrink: 0;
  align-self: center;
}

.layout-root--client-support-shell .main .assign--ticket-figma {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.layout-root--client-support-shell .main .assign--ticket-figma .who strong {
  color: #0f172a;
}

@media (max-width: 640px) {
  .layout-root--client-support-shell .main .ticket-header-row--r2 {
    padding-left: 0;
  }
}

.layout-root--client-support-shell .main .ticket-header-identity-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  row-gap: 6px;
  min-width: 0;
}

.layout-root--client-support-shell .main .ticket-header-identity-title-row .name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: #0f172a;
}

.layout-root--client-support-shell .main .ticket-header-status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.layout-root--client-support-shell .main .ticket-header-status-badge.ttab-badge--new {
  background: #dbeafe;
  color: #1d4ed8;
  border: 0px solid rgba(37, 99, 235, 0.22);
  border-style: dashed;
}

.layout-root--client-support-shell .main .ticket-header-status-badge.ttab-badge--resolved {
  /* background: #7c3aed; */
  color: #7c3aed;
  border: 1px solid rgba(91, 33, 182, 0.35);
}

.layout-root--client-support-shell .main .ticket-header-status-badge.ttab-badge--in_progress {
  background: #FEF9C3;
  color: #A16207;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.layout-root--client-support-shell .main .ticket-header-subbar--figma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 0;
  margin-left: -22px;
  margin-right: -22px;
  padding: 12px 22px 16px;
  border-top: 1px solid #eef2f0;
}

.layout-root--client-support-shell .main .ticket-header-subbar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.layout-root--client-support-shell .main .ticket-header-fchip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #64748b;
  background: #fff;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  line-height: 1.2;
}

.layout-root--client-support-shell .main .ticket-header-fchip:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #334155;
}

.layout-root--client-support-shell .main .ticket-header-fchip--active {
  background: #0d9488;
  color: #fff;
  border-color: #0d9488;
}

.layout-root--client-support-shell .main .ticket-header-subbar__siren {
  display: inline-flex;
  color: #ef4444;
  flex-shrink: 0;
}

.layout-root--client-support-shell .main .ticket-header-subbar__search-wrap {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 280px;
  margin-left: auto;
}

.layout-root--client-support-shell .main .ticket-header-subbar__search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e8eeeb;
}

.layout-root--client-support-shell .main .ticket-header-subbar__search::placeholder {
  color: #94a3b8;
}

.layout-root--client-support-shell .main .ticket-header-subbar__search:focus {
  outline: none;
  border-color: rgba(13, 148, 136, 0.45);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

html.dark .layout-root--client-support-shell .main .ticket-header-identity-title-row .name {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .assign--ticket-figma .who strong {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .ticket-header-status-badge.ttab-badge--new {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

html.dark .layout-root--client-support-shell .main .ticket-header-status-badge.ttab-badge--resolved {
  background: #7c3aed;
  color: #fff;
}

html.dark .layout-root--client-support-shell .main .ticket-header-status-badge.ttab-badge--in_progress {
  background: #fcd34d;
  color: #171717;
}

html.dark .layout-root--client-support-shell .main .ticket-header-subbar--figma {
  border-top-color: var(--border);
}

html.dark .layout-root--client-support-shell .main .ticket-header-fchip {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .main .ticket-header-fchip:hover {
  background: rgba(148, 163, 184, 0.18);
}

html.dark .layout-root--client-support-shell .main .ticket-header-fchip--active {
  background: #0d9488;
  color: #ecfdf5;
  border-color: #0d9488;
}

html.dark .layout-root--client-support-shell .main .ticket-header-subbar__search {
  background: rgba(15, 23, 42, 0.35);
  border-color: var(--border);
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .ticket-header-subbar__search::placeholder {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .main .ticket-header-subbar__search:focus {
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

@media (max-width: 768px) {
  .layout-root--client-support-shell .main .header.header--mobile-collapsed .ticket-header-subbar--figma {
    display: none;
  }

  .layout-root--client-support-shell .main .header--ticket-figma {
    padding-left: 16px;
    padding-right: 16px;
  }

  .layout-root--client-support-shell .main .header--ticket-figma .header-row {
    padding-bottom: 10px;
  }

  .layout-root--client-support-shell .main .ticket-header-subbar--figma {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 12px;
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .main .header--ticket-figma {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .main .header--ticket-figma.header--mobile-collapsed {
    padding-top: 6px;
  }

  .layout-root--client-support-shell .chat-columns--mobile-thread .main .ticket-header-subbar--figma {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.layout-root--client-support-shell .main .actions--ticket-figma {
  gap: 10px;
  align-items: center;
}

.layout-root--client-support-shell .main .btn-wa-action--figma {
    width: 162;
    height: 44;
    opacity: 1;
    border-radius: 12px;
}


.layout-root--client-support-shell .main .ticket-header-kebab-wrap {
  position: relative;
  flex-shrink: 0;
}

.layout-root--client-support-shell .main .btn-ticket-header-kebab--figma {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #dce5df;
  background: #fff;
  color: #475569;
}

.layout-root--client-support-shell .main .btn-ticket-header-kebab--figma:hover {
  border-color: #9ca89f;
  background: #f7faf8;
  color: #1b4332;
}

.layout-root--client-support-shell .main .btn-ticket-header-kebab--figma.btn-ticket-header-kebab--menu-open,
.layout-root--client-support-shell .main .btn-ticket-header-kebab--figma.btn-ticket-header-kebab--open {
  border-color: #1d7a5f;
  background: #ecfdf5;
  color: #065f46;
}

html.dark .layout-root--client-support-shell .main .btn-ticket-header-kebab--figma {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .main .btn-ticket-header-kebab--figma.btn-ticket-header-kebab--menu-open,
html.dark .layout-root--client-support-shell .main .btn-ticket-header-kebab--figma.btn-ticket-header-kebab--open {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
}

.layout-root--client-support-shell .main .ticket-header-overflow-menu--figma {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: min(280px, calc(100vw - 48px));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid #e5ebe8;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.06);
}

html.dark .layout-root--client-support-shell .main .ticket-header-overflow-menu--figma {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

.layout-root--client-support-shell .main .ticket-header-overflow-menu__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: #f9fbf9;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}

.layout-root--client-support-shell .main .ticket-header-overflow-menu__btn:hover {
  background: #eef5f1;
}

html.dark .layout-root--client-support-shell .main .ticket-header-overflow-menu__btn {
  background: var(--surface-2);
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .ticket-header-overflow-menu__btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.layout-root--client-support-shell .main .ticket-header-overflow-menu__ico {
  flex-shrink: 0;
  color: #64748b;
}

.layout-root--client-support-shell .main .ticket-header-overflow-menu__btn--muted {
  font-weight: 500;
  color: #64748b;
}

.layout-root--client-support-shell .main .ticket-header-overflow-menu__btn--muted:hover {
  background: #f1f5f4;
}

.layout-root--client-support-shell .main .ticket-pill--track .ticket-pill-ico {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Figma 9528-70564: larger header avatar; meta row rhythm; team + warning cluster */
.layout-root--client-support-shell .main .header--ticket-figma .identity .avatar {
  /* width: 52px;
  height: 52px; */
  border-radius: 999px;
  border: 1px solid #e8eeeb;
  /* box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); */
  margin-top: 4px;
}

.layout-root--client-support-shell .main .meta-row--ticket-figma {
  gap: 12px 14px;
  align-items: center;
}

.layout-root--client-support-shell .main .meta-row.meta-row--ticket-figma.ticket-header-row--r2 {
  gap: 0 4px;
  row-gap: 8px;
  margin-top: 2px;
  margin-bottom: 11px;
}

.layout-root--client-support-shell .main .team-priority-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-root--client-support-shell .main .priority-ico-wrap--figma-inline {
  margin: 0;
}

.layout-root--client-support-shell .main .assign-ico-svg {
  flex-shrink: 0;
  color: #64748b;
}


.layout-root--client-support-shell .main .team-ico-svg {
  flex-shrink: 0;
  color: #2563eb;
}

html.dark .layout-root--client-support-shell .main .team-wrap {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(96, 165, 250, 0.35);
}

html.dark .layout-root--client-support-shell .main select.team {
  color: #93c5fd;
}

.layout-root--client-support-shell .main .priority-ico-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
}

/* Ref UI: centered log pill — light gray bar + green check + green lead copy */
.layout-root--client-support-shell .main .timeline--feed {
  /* background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 500; */
}

.layout-root--client-support-shell .main .timeline--feed__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  /* background: #16a34a; */
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

.layout-root--client-support-shell .main .timeline--feed__lead {
  color: #15803d;
  font-weight: 600;
}

.layout-root--client-support-shell .main .timeline--feed__meta {
  color: #9ca3af;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.layout-root--client-support-shell .main .timeline--feed__dot {
  color: #cbd5e1;
}

html.dark .layout-root--client-support-shell .main .timeline--feed {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}

html.dark .layout-root--client-support-shell .main .timeline--feed__check {
  background: #22c55e;
  border: none;
  color: #fff;
}

html.dark .layout-root--client-support-shell .main .timeline--feed__lead {
  color: #4ade80;
}

html.dark .layout-root--client-support-shell .main .timeline--feed__meta {
  color: #94a3b8;
}

html.dark .layout-root--client-support-shell .main .timeline--feed__dot {
  color: #64748b;
}

@media (max-width: 768px) {
  .layout-root--client-support-shell .main .btn-wa-action--figma {
    padding: 10px 18px;
    font-size: 13px;
  }

  .layout-root--client-support-shell .main .btn-ticket-header-kebab--figma {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .layout-root--client-support-shell .chat-thread-canvas--ezee {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* --- Ezee Figma: full light Client Support workspace + ticket cards (matches frame 9528-70564) --- */
.layout-root--client-support-shell .ttab-more__chev--double {
  transform-origin: 50% 50%;
}

/* Figma 9650-26799: tab overflow uses PNG double-chevron assets (chat page only) */
.layout-root--client-support-shell .ttab-more--figma .ttab-more__asset {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
}

/* Ref UI: second-row focus — hide “Track Run” (not in reference header) */
.layout-root--client-support-shell .main .ticket-pill--track {
  display: none !important;
}

.layout-root--client-support-shell .main .priority-emergency-img,
.layout-root--client-support-shell .main .ticket-header-subbar__siren-img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Outer frame: let patterned chat background show through */
.layout-root--client-support-shell .chat-thread-canvas--ezee {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.layout-root--client-support-shell .chat-thread-canvas--ezee .messages--ezee-figma {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 11px;
}

/* Tiled / visible pattern (reference UI) */
.layout-root--client-support-shell .messages--ezee-figma {
  background-color: #FDFCF9;
  background-image: url('/assets/images/chat_background.png');
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 320px auto;
  background-attachment: local;
  padding: 18px 18px 24px;
}

/* One white ticket card per thread; spacing + dotted band above next ticket (see .ezee-feed-iter::before) */
.layout-root--client-support-shell .feed-block--ezee-ticket {
  margin: 0;
  padding: 16px 14px 14px;
  background:#fdfcf900 ;
  border: 1px solid #c5d0c9;
  border-radius: 16px;
}

.layout-root--client-support-shell .ezee-feed-iter:last-child .feed-block--ezee-ticket {
  margin-bottom: 2px;
}

.layout-root--client-support-shell .ezee-ticket-log {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
}

/* Centered pill metadata (not full-width strip) */
.layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill {
  width: fit-content;
  /* max-width: calc(100% - 8px); */
  margin: 0 auto;
  padding: 3px 4px;
  border-radius: 6px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  background: #eef2f0;
  /* border: 1px solid #dce5df; */
}

.layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__check {
  /* background: #16a34a; */
  /* border: none; */
  /* color: #fff; */
}

.layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__lead {
  color: #04B440;
  font-weight: 700;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__meta {
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__dot {
  color: #94a3b8;
}

.layout-root--client-support-shell .ezee-ticket-messages {
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
}

/* Empty thread (no messages yet) — card on existing patterned canvas */
.layout-root--client-support-shell .chat-empty-thread {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 12px 28px;
  box-sizing: border-box;
}

.layout-root--client-support-shell .chat-empty-thread--compact {
  padding: 10px 8px 14px;
  min-height: 0;
}

.layout-root--client-support-shell .chat-empty-thread__compact-text {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.layout-root--client-support-shell .chat-empty-thread__card {
  max-width: 340px;
  width: 100%;
  padding: 24px 20px 22px;
  background: #fff;
  border: 1px solid #d1d9d4;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.layout-root--client-support-shell .chat-empty-thread__card--solo {
  max-width: 360px;
}

.layout-root--client-support-shell .full-loading--empty-thread {
  padding: 24px;
}

/* WhatsApp-style home tiles (no open ticket / no group yet) */
.layout-root--client-support-shell .chat-home-actions {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 12px;
  box-sizing: border-box;
}

.layout-root--client-support-shell .chat-home-actions__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}

.layout-root--client-support-shell .chat-home-actions__card {
  flex: 1 1 140px;
  max-width: 200px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 14px;
  border-radius: 14px;
  background: #e8edef;
  border: 1px solid #d8dee4;
  box-sizing: border-box;
  text-align: center;
  color: #3d4f5c;
}

.layout-root--client-support-shell .chat-home-actions__card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.layout-root--client-support-shell .chat-home-actions__card--link:hover {
  background: #dfe6eb;
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 137, 123, 0.12);
}

.layout-root--client-support-shell .chat-home-actions__card--link:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 3px;
}

.layout-root--client-support-shell .chat-home-actions__card--soon {
  opacity: 0.72;
  cursor: default;
}

.layout-root--client-support-shell .chat-home-actions__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #546e7a;
}

.layout-root--client-support-shell .chat-home-actions__card--link .chat-home-actions__ico {
  color: var(--accent);
}

.layout-root--client-support-shell .chat-home-actions__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.layout-root--client-support-shell .chat-empty-thread__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.layout-root--client-support-shell .chat-empty-thread__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.layout-root--client-support-shell .chat-empty-thread__sub {
  margin: 0 0 6px;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  line-height: 1.4;
}

.layout-root--client-support-shell .chat-empty-thread__creator {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
}

.layout-root--client-support-shell .chat-empty-thread__hint {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.layout-root--client-support-shell .ezee-msg-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-root--client-support-shell .ezee-msg-shell {
  /* display: flex; */
  border-radius: 12px;
  padding: 7px 5px 7px;
}

.layout-root--client-support-shell .ezee-msg-shell--in {
  justify-content: flex-start;
  background: #fafcfb;
}

.layout-root--client-support-shell .ezee-msg-shell--out {
  justify-content: flex-end;
  /* background: #f4fff7;
  border-color: #c5e8d1; */
}

.layout-root--client-support-shell .ezee-msg-shell .msg {
  margin-bottom: 0;
  max-width: 100%;
}

/* White band between message rows (inside ticket card) */
.layout-root--client-support-shell .ezee-msg-white-gap {
  /* flex-shrink: 0;
  height: 10px;
  margin: 0 -12px;
  background: #fff; */
}

/* Bubbles: content-width only; shell provides outer card */
.layout-root--client-support-shell .feed-block--ezee-ticket .bubble {
  width: fit-content;
  max-width: min(520px, calc(100% - 4px));
  min-width: 0;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: none;
  padding-top: 28px;
  padding-right: 14px;
  padding-bottom: 10px;
  padding-left: 40px;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .ezee-msg-shell--in .bubble.bubble--in {
  background: #fff;
  border: 1px solid #c5cdd6;
}

/* Outbound agent bubble — reference: pale mint, no stroke, even corners, menu top-right, teal time + blue ticks */
.layout-root--client-support-shell .feed-block--ezee-ticket .ezee-msg-shell--out .bubble.agent.bubble--out {
  border-radius: 14px 1px 14px 14px;
  background: #e1f7e7;
  border: none;
  /* box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); */
  padding-top: 6px;
  padding-right: 39px;
  padding-bottom: 8px;
  padding-left: 13px;
}
/* Wrapper */
.ctp-select-wrap {
  position: relative;
  width: 100%;
}

/* Select */
.ctp-select {
  width: 100%;
  padding: 10px 36px 10px 12px;

  font-size: 14px;
  color: #111827;

  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;

  cursor: pointer;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Arrow */
.ctp-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;

  font-size: 12px;
  color: #6b7280;
}

/* Hover + focus */
.ctp-select:hover {
  border-color: #9ca3af;
}

.ctp-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .msg-menu-trigger {
  top: 2px;
  left: auto;
  right: 10px;
  width: 30px;
  height: 30px;
  opacity: 0.85;
}


.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .msg-menu-trigger img {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
  padding-right: 4px;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .sender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #14532d;
  font-weight: 700;
  font-size: 14px;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-agent-headset {
  display: inline-flex;
  align-items: center;
  color: #475569;
  flex-shrink: 0;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .body-text {
  color: #1e293b;
  font-size: 14px;
  line-height: 1.45;
}

/* Time + ticks on same flow as message text (reference: inline with last line) */
.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-inline-msg {
  margin: 0;
  padding: 0;
  line-height: 1.45;
  font-size: 14px;
  color: #1e293b;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-inline-msg > .body-text {
  display: inline;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-foot.bubble-foot--inline-tail {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 0 8px;
  padding: 0;
  vertical-align: baseline;
  white-space: nowrap;
  justify-content: flex-start;
  margin-top: 0;
  font-size: 12px;
  font-weight: 500;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-foot.bubble-foot--inline-tail > span:first-child {
  color: #0d9488;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-foot:not(.bubble-foot--inline-tail) {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-foot:not(.bubble-foot--inline-tail) > span:first-child {
  color: #0d9488;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .read {
  color: #64748b;
  font-weight: 700;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-foot--inline-tail .read {
  flex-shrink: 0;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble .body-text {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble-media img,
.layout-root--client-support-shell .feed-block--ezee-ticket .bubble-media--video video {
  max-width: 100%;
  height: auto;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble-top {
  margin-bottom: 8px;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma {
  background: #eef2f0;
  border: 1px solid #dce5df;
  padding: 10px;
  gap: 8px;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab {
  background: #fff !important;
  border: 1px solid #e4ebe7 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  padding: 14px 14px !important;
  min-height: 52px;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab:hover {
  border-color: #c5d4cc !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab.active {
  border-color: rgba(13, 148, 136, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.12);
  background: #f0fdfa !important;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-id {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-topic {
  font-size: 13px;
  color: #475569;
}

.layout-root--client-support-shell .composer-bar--wa {
  background: #fafcfb;
  border-top: 1px solid #e3ebe6;
}

.layout-root--client-support-shell .composer-wa-field {
  background: #f1f5f9;
}


/* .layout-root--client-support-shell .composer-wa-send {
  background: #0d9488;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.22);
} */

/* .layout-root--client-support-shell .composer-wa-send:hover {
  background: #0f766e;
} */

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.bubble--in .sender {
  color: #047857;
  font-weight: 700;
}

.layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .read.read--seen {
  color: #2563eb;
}

/* Client Support chat (html.dark): match global dark tokens — sidebar, tabs strip, main, thread, composer */
html.dark .layout-root--client-support-shell .chat-columns .sidebar.sidebar--client-support {
  background: var(--surface);
  border-right-color: var(--border);
}

html.dark .layout-root--client-support-shell .sidebar--client-support .sidebar-title,
html.dark .layout-root--client-support-shell .sidebar--client-support .ticket-title {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .sidebar--client-support .ticket-msg,
html.dark .layout-root--client-support-shell .sidebar--client-support .ticket-time {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .sidebar--client-support .tab:not(.active) {
  background: var(--surface-2);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .search--client-support .search-wrap .search-ico-svg {
  color: var(--muted-2);
}

html.dark .layout-root--client-support-shell .search--client-support input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

html.dark .layout-root--client-support-shell .ticket-scope-bar {
  background: var(--surface-2);
  border-bottom-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-scope-bar__inner,
html.dark .layout-root--client-support-shell .ticket-scope-bar__count {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-scope-bar__team {
  color: #34d399;
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma {
  background: var(--surface-2);
  border-bottom-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab.active {
  color: var(--ink);
  border-bottom-color: #2dd4bf;
}

html.dark .layout-root--client-support-shell .ticket-tabs--figma .ttab.active .ttab-id {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .header--ticket-figma {
  background: var(--surface);
  border-bottom-color: var(--border);
}

html.dark .layout-root--client-support-shell .main .identity .name,
html.dark .layout-root--client-support-shell .main .body-text,
html.dark .layout-root--client-support-shell .main .sender {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .meta-row {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .chat-thread-canvas--ezee {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__lead {
  color: #6ee7b7;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__meta {
  color: #94a3b8;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .timeline--feed--ezee-pill .timeline--feed__dot {
  color: #64748b;
}

html.dark .layout-root--client-support-shell .messages--ezee-figma {
  background-color: var(--chat-canvas);
  background-image: url('/assets/images/chat_background.png');
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 320px auto;
  background-attachment: local;
}

html.dark .layout-root--client-support-shell .main .bubble.bubble--in {
  background: var(--chat-bubble-in);
  border-color: var(--border);
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .bubble.agent.bubble--out {
  background: var(--chat-bubble-out);
  border-color: var(--chat-bubble-out-border);
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .bubble.agent.bubble--out .body-text,
html.dark .layout-root--client-support-shell .main .bubble.agent.bubble--out .sender,
html.dark .layout-root--client-support-shell .main .bubble.agent.bubble--out .bubble-foot {
  color: rgba(241, 245, 249, 0.92);
}

html.dark .layout-root--client-support-shell .main .bubble.bubble--in .bubble-foot {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

html.dark .layout-root--client-support-shell .chat-empty-thread__card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

html.dark .layout-root--client-support-shell .chat-empty-thread__title {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .chat-empty-thread__sub,
html.dark .layout-root--client-support-shell .chat-empty-thread__creator,
html.dark .layout-root--client-support-shell .chat-empty-thread__hint,
html.dark .layout-root--client-support-shell .chat-empty-thread__compact-text {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .chat-home-actions__card {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .chat-home-actions__card--link:hover {
  background: rgba(45, 212, 191, 0.08);
  border-color: var(--accent);
  box-shadow: none;
}

html.dark .layout-root--client-support-shell .chat-home-actions__ico {
  color: var(--muted-2);
}

html.dark .layout-root--client-support-shell .chat-home-actions__card--link .chat-home-actions__ico {
  color: var(--accent);
}

html.dark .layout-root--client-support-shell .ezee-msg-shell--in {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

html.dark .layout-root--client-support-shell .ezee-msg-shell--out {
  /* background: rgba(16, 185, 129, 0.08); */
  /* border-color: rgba(52, 211, 153, 0.25); */
}

html.dark .layout-root--client-support-shell .ezee-msg-white-gap {
  background: var(--surface);
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.bubble--in .sender {
  color: #6ee7b7;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .ezee-msg-shell--out .bubble.agent.bubble--out {
  background: rgba(16, 185, 129, 0.2);
  border: none;
  box-shadow: none;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .sender {
  color: #bbf7d0;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .body-text {
  color: rgba(241, 245, 249, 0.92);
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-foot > span:first-child {
  color: #2dd4bf;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .bubble-agent-headset {
  color: #94a3b8;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .read.read--seen {
  color: #60a5fa;
}

html.dark .layout-root--client-support-shell .feed-block--ezee-ticket .bubble.agent.bubble--out .read:not(.read--seen) {
  color: #94a3b8;
}

html.dark .layout-root--client-support-shell .composer-bar--wa {
  background: var(--surface);
  border-top-color: var(--border);
}

html.dark .layout-root--client-support-shell .composer-wa-field {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}

html.dark .layout-root--client-support-shell .composer-wa-attach,
html.dark .layout-root--client-support-shell .composer-wa-ico {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .main .msg-menu-panel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .msg-menu-item {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .main .msg-menu-item:hover {
  background: var(--surface-2);
}

html.dark .layout-root--client-support-shell .ticket-tabs-overflow-menu--figma {
  background: var(--surface-2);
  border-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

html.dark .layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-id {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .ticket-tabs-overflow-menu--figma .ttab .ttab-topic {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ttab-more--figma {
  background: var(--surface-2);
  border-color: rgba(96, 165, 250, 0.4);
  color: #60a5fa;
}

html.dark .layout-root--client-support-shell .ttab-more--figma:hover {
  background: var(--surface);
  color: #93c5fd;
}

html.dark .layout-root--client-support-shell .main .team-wrap {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(96, 165, 250, 0.35);
}

html.dark .layout-root--client-support-shell .main select.team {
  color: #93c5fd;
  background: transparent;
}

html.dark .layout-root--client-support-shell .main .team-ico-svg,
html.dark .layout-root--client-support-shell .main .team-caret {
  color: #93c5fd;
}

html.dark .layout-root--client-support-shell .icon-btn--sidebar-head {
  color: var(--muted);
}

/* Full-panel “more tickets” list (replaces small dropdown; same ticketOverflowOpen / openTabsOverflow) */
.main .main-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.layout-root--client-support-shell .main .main-panel-body > .empty-select-ticket {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

.layout-root--client-support-shell .main .main-panel-body > .empty-select-ticket .empty-select-ticket__inner {
  flex: 1;
  min-height: 200px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage {
  position: absolute;
  inset: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.composer-wa-send {
  background-color: #10B981;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: 0.2s ease;
}

.composer-wa-send:hover {
  background-color: #10B981;
}

.composer-wa-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.composer-wa-send-ico {
  width: 16px;
  height: 16px;
  fill: white;
}

/* ── Voice recording bar ──────────────────────────────────────────────────── */
.composer-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  min-height: 56px;
}

html.dark .composer-voice-bar {
  background: var(--surface, #1e293b);
  border-top-color: var(--border, #334155);
}

.composer-voice-bar--preview {
  background: #f8fafc;
}

html.dark .composer-voice-bar--preview {
  background: var(--surface-2, #1e293b);
}

/* Pulsing red dot */
.composer-voice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: voice-pulse 1s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.8); }
}

.composer-voice-timer {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #ef4444;
  min-width: 42px;
  flex-shrink: 0;
}

/* Animated waveform bars */
.composer-voice-waveform {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  overflow: hidden;
}

.composer-voice-wave-bar {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: #10b981;
  animation: wave-bounce 0.8s ease-in-out infinite alternate;
  min-height: 4px;
}

@keyframes wave-bounce {
  0%   { height: 4px; }
  100% { height: 24px; }
}

.composer-voice-audio {
  flex: 1;
  height: 36px;
  min-width: 0;
  border-radius: 20px;
  accent-color: #10b981;
}

/* Icon buttons (circle) */
.composer-voice-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

.composer-voice-icon-btn:active { transform: scale(0.92); }
.composer-voice-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.composer-voice-icon-btn--cancel {
  background: #f1f5f9;
  color: #64748b;
}

html.dark .composer-voice-icon-btn--cancel {
  background: var(--surface-2, #334155);
  color: var(--muted, #94a3b8);
}

.composer-voice-icon-btn--stop {
  background: #ef4444;
  color: #fff;
}

.composer-voice-icon-btn--send {
  background: #10b981;
  color: #fff;
  width: 42px;
  height: 42px;
}

/* ── Video recording bar ──────────────────────────────────────────────────── */
.composer-video-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: #0f172a;
  border-top: 1px solid #1e293b;
}

.composer-video-bar--preview {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

html.dark .composer-video-bar--preview {
  background: var(--surface-2, #1e293b);
}

.composer-video-preview {
  width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
}

.composer-video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  pointer-events: auto;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__sheet {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  /* border-radius: 18px 18px 0 0; */
  box-shadow: 0 -6px 32px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  pointer-events: auto;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__head {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #e8eeeb;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 10px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__back {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #00966b;
  cursor: pointer;
  padding: 6px 10px 6px 4px;
  border-radius: 10px;
  font-family: inherit;
  flex-shrink: 0;
  margin-top: 2px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__back:hover {
  background: #ecfdf5;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__identity-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__av {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #e8eeeb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.layout-root--client-support-shell .ticket-overflow-fullpage__identity-text {
  min-width: 0;
  flex: 1;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  row-gap: 6px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__client {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.25;
  white-space: pre-wrap;
  margin-top: 8px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status.ttab-badge--new {
  background: #dbeafe;
  color: #1d4ed8;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status.ttab-badge--resolved {
  background: #ede9fe;
  color: #5b21b6;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status.ttab-badge--in_progress {
  background: #fef3c7;
  color: #b45309;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__meta {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__subbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  /* padding: 0 16px 14px;
  border-bottom: 1px solid #eef2f0; */
}

.layout-root--client-support-shell .ticket-overflow-fullpage__filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.layout-root--client-support-shell .ticket-overflow-fchip {
  padding: 6px 12px;
  border-radius: 11px;
  color: #475569;
  background: #ffffff;
  border: 1px solid transparent;
}

.layout-root--client-support-shell .ticket-overflow-fchip--active {
  /* background: #00966b; */
  color: #00966b;
  border-color: #00966b;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__siren {
  display: inline-flex;
  color: #ef4444;
  flex-shrink: 0;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__search-faux-wrap {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 280px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 7px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__search-ico {
  flex-shrink: 0;
  color: #94a3b8;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__search-faux {
  font-size: 13px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  background: #eef2f0;
  -webkit-overflow-scrolling: touch;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__list-inner {
  padding: 16px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* max-width: 920px; */
  margin: 0 auto;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card {
  width: 100%;
  text-align: left;
  padding: 14px 16px 12px;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card--active {
  border-color: rgba(0, 150, 107, 0.45);
  box-shadow: 0 0 0 2px rgba(0, 150, 107, 0.14), 0 4px 14px rgba(15, 23, 42, 0.06);
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-top-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__tic-ico {
  display: inline-flex;
  color: #00966b;
  flex-shrink: 0;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-id {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__cat-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(234, 88, 12, 0.75);
  color: #c2410c;
  background: #fff7ed;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-top-right {
  /* display: flex; */
  /* flex-direction: column; */
  align-items: flex-end;
  /* gap: 6px; */
  flex-shrink: 0;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-created {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}

/* Figma: one row — status prefix + sender + quoted message (left) | clock + time (right) */
.layout-root--client-support-shell .ticket-overflow-fullpage__card-msg-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-msg-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.45;
  color: #0f172a;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix--in_progress {
  color: #a16207;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix--new {
  color: #1d4ed8;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix--resolved {
  color: #6d28d9;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__sender {
  flex-shrink: 0;
  font-weight: 700;
  color: #0f172a;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__quoted {
  flex: 1 1 180px;
  min-width: 0;
  color: #334155;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-msg-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__clock-ico {
  flex-shrink: 0;
  color: #94a3b8;
  opacity: 0.9;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__clock-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__card-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__mini-av {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  border: none;
  line-height: 1.2;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__badge.ttab-badge--new {
  background: #dbeafe;
  color: #1d4ed8;
  /* border-style: dashed; */
}

.gps2-ico{
  border-radius: 15px;
  color: #1e5dcb;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__badge.ttab-badge--resolved {
  background: #ede9fe;
  color: #5b21b6;
}

.layout-root--client-support-shell .ticket-overflow-fullpage__badge.ttab-badge--in_progress {
  background: #fef3c7;
  color: #92400e;
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__sheet {
  background: var(--surface);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__head {
  background: var(--surface);
  border-bottom-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__subbar {
  border-bottom-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__client {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__meta {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fchip {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fchip--active {
  background: rgba(16, 185, 129, 0.35);
  color: #ecfdf5;
  border-color: rgba(52, 211, 153, 0.5);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__search-faux-wrap {
  background: rgba(15, 23, 42, 0.35);
  border-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__search-faux {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__search-ico {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__list {
  background: rgba(15, 23, 42, 0.25);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card:hover {
  border-color: rgba(148, 163, 184, 0.35);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card--active {
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card-id {
  color: var(--text);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card-msg-main,
html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__sender {
  color: var(--ink);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__quoted {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix--in_progress {
  color: #fbbf24;
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix--new {
  color: #93c5fd;
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__status-prefix--resolved {
  color: #c4b5fd;
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card-msg-time,
html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__clock-ico {
  color: var(--muted-2);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__card-created {
  color: var(--muted);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__av {
  border-color: var(--border);
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__status.ttab-badge--new,
html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__badge.ttab-badge--new {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__status.ttab-badge--resolved,
html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__badge.ttab-badge--resolved {
  background: rgba(124, 58, 237, 0.25);
  color: #c4b5fd;
}

html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__status.ttab-badge--in_progress,
html.dark .layout-root--client-support-shell .ticket-overflow-fullpage__badge.ttab-badge--in_progress {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}

@media (max-width: 768px) {
  .layout-root--client-support-shell .ticket-overflow-fullpage__sheet {
    border-radius: 14px 14px 0 0;
  }

  .layout-root--client-support-shell .ticket-overflow-fullpage__list-inner {
    padding: 12px 12px 24px;
  }

  .layout-root--client-support-shell .ticket-overflow-fullpage__card {
    padding: 12px 14px 10px;
  }
}

/* ── Pending file preview (image/video/audio before send completes) ─────── */
.composer-file-preview {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px 6px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e2e8f0);
  flex-wrap: wrap;
}

html.dark .composer-file-preview {
  background: var(--surface, #1e293b);
  border-top-color: var(--border, #334155);
}

.composer-file-preview__img {
  max-height: 120px;
  max-width: 180px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border, #e2e8f0);
}

.composer-file-preview__video {
  max-height: 120px;
  max-width: 200px;
  border-radius: 8px;
  background: #000;
}

.composer-file-preview__audio {
  height: 36px;
  min-width: 180px;
  accent-color: #10b981;
}

.composer-file-preview__name {
  font-size: 13px;
  color: var(--ink, #0f172a);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-file-preview__uploading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.composer-file-preview__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #e2e8f0;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── CreateTicketPopup ────────────────────────────────────────────────────── */
.ctp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctp-modal {
  background: #fff;
  border-radius: 14px;
  padding: 28px 28px 24px;
  width: min(480px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

html.dark .ctp-modal {
  background: var(--surface, #1e293b);
  color: var(--ink, #f1f5f9);
}

.ctp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctp-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

html.dark .ctp-title { color: #f1f5f9; }

.ctp-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #64748b);
  padding: 0 4px;
}

.ctp-sub {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin: -8px 0 0;
}

.ctp-input {
  width: 100%;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  background: var(--surface-2, #f8fafc);
  color: var(--ink, #0f172a);
  box-sizing: border-box;
}

.ctp-input:focus { border-color: #10b981; }

html.dark .ctp-input {
  background: var(--surface-2, #334155);
  color: #f1f5f9;
  border-color: #475569;
}

.ctp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}

html.dark .ctp-label { color: #f1f5f9; }

.ctp-select-wrap {
  position: relative;
}

.ctp-select {
  width: 100%;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 11px 36px 11px 14px;
  font-size: 14px;
  appearance: none;
  background: var(--surface-2, #f8fafc);
  color: var(--ink, #0f172a);
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}

.ctp-select:focus { border-color: #10b981; }

html.dark .ctp-select {
  background: var(--surface-2, #334155);
  color: #f1f5f9;
  border-color: #475569;
}

.ctp-select-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted, #64748b);
  font-size: 13px;
}

.ctp-err {
  font-size: 12px;
  color: #ef4444;
  margin: -6px 0 0;
}

.ctp-submit {
  width: 100%;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.ctp-submit:hover:not(:disabled) { background: #059669; }
.ctp-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── MoveTicketPopup ──────────────────────────────────────────────────────── */
.mtp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mtp-modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px 24px 20px;
  width: min(540px, calc(100vw - 32px));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

html.dark .mtp-modal {
  background: var(--surface, #1e293b);
  color: var(--ink, #f1f5f9);
}

.mtp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mtp-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

html.dark .mtp-title { color: #f1f5f9; }

.mtp-sub {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin-top: 3px;
}

.mtp-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #64748b);
  padding: 0 4px;
  flex-shrink: 0;
}

.mtp-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--surface-2, #f8fafc);
}

html.dark .mtp-search-wrap {
  background: var(--surface-2, #334155);
  border-color: #475569;
}

.mtp-search-ico { font-size: 14px; flex-shrink: 0; }

.mtp-search {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  flex: 1;
  color: var(--ink, #0f172a);
}

html.dark .mtp-search { color: #f1f5f9; }

.mtp-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  max-height: 320px;
}

.mtp-empty {
  font-size: 13px;
  color: var(--muted, #64748b);
  text-align: center;
  padding: 24px 0;
}

.mtp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--surface-2, #f8fafc);
  cursor: pointer;
  text-align: left;
  gap: 10px;
  transition: border-color 0.12s, background 0.12s;
}

.mtp-row:hover { border-color: #10b981; background: #f0fdf4; }
.mtp-row--selected { border-color: #10b981; background: #ecfdf5; }

html.dark .mtp-row { background: var(--surface-2, #334155); border-color: #475569; }
html.dark .mtp-row:hover, html.dark .mtp-row--selected { border-color: #10b981; background: #064e3b; }

.mtp-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.mtp-code {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

html.dark .mtp-code { color: #f1f5f9; }

.mtp-tag {
  font-size: 11px;
  font-weight: 600;
  border: 1.5px dashed #f59e0b;
  color: #b45309;
  border-radius: 4px;
  padding: 1px 6px;
  background: #fffbeb;
}

.mtp-rel {
  font-size: 12px;
  color: var(--muted, #64748b);
}

.mtp-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 8px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.mtp-badge--new        { color: #2563eb; background: #eff6ff; }
.mtp-badge--inprogress { color: #d97706; background: #fffbeb; }
.mtp-badge--resolved   { color: #7c3aed; background: #f5f3ff; }

.mtp-err {
  font-size: 12px;
  color: #ef4444;
}

.mtp-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.mtp-cancel {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}

.mtp-cancel:hover { background: var(--surface-2, #f1f5f9); }

.mtp-move {
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.mtp-move:hover:not(:disabled) { background: #059669; }
.mtp-move:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Emoji Picker ─────────────────────────────────────────────────────────── */
.ep-trigger-wrap {
  position: relative;
  flex-shrink: 0;
}
.ep-trigger {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0.65;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}
.ep-trigger:hover { opacity: 1; }
.ep-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 340px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  z-index: 500;
  overflow: hidden;
}
html.dark .ep-panel {
  background: var(--surface, #1e293b);
  border-color: #334155;
}
.ep-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
html.dark .ep-search-wrap { border-bottom-color: #334155; }
.ep-search-ico { font-size: 13px; flex-shrink: 0; }
.ep-search {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  flex: 1;
  color: var(--ink, #0f172a);
}
html.dark .ep-search { color: #f1f5f9; }
.ep-cats {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ep-cats::-webkit-scrollbar { display: none; }
html.dark .ep-cats { border-bottom-color: #334155; }
.ep-cat-btn {
  background: none;
  border: none;
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s, background 0.12s;
  flex-shrink: 0;
}
.ep-cat-btn:hover { opacity: 1; background: var(--surface-2, #f1f5f9); }
.ep-cat-btn--active { opacity: 1; background: var(--accent-soft, #dcfce7); }
html.dark .ep-cat-btn:hover { background: #334155; }
html.dark .ep-cat-btn--active { background: #064e3b; }
.ep-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px 8px;
  overflow-y: auto;
  flex: 1;
}
.ep-emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 5px 3px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s, transform 0.1s;
}
.ep-emoji-btn:hover {
  background: var(--surface-2, #f1f5f9);
  transform: scale(1.2);
}
html.dark .ep-emoji-btn:hover { background: #334155; }
/* Keep input wrap flex so emoji button sits inside it */
.composer-wa-input-wrap {
  display: flex;
  align-items: center;
  position: relative;
}

/* ── Message menu panel — improved WhatsApp-style look ───────────────────── */
.main .msg-menu-panel,
.layout-root--client-support-shell .main .msg-menu-panel {
  border-radius: 14px;
  padding: 6px 0;
  min-width: 220px;
  max-width: min(280px, 92vw);
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.08);
}

html.dark .main .msg-menu-panel,
html.dark .layout-root--client-support-shell .main .msg-menu-panel {
  background: #1e293b;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.main .msg-menu-item {
  padding: 11px 18px;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: background 0.1s;
}

.main .msg-menu-item:first-child { border-radius: 14px 14px 0 0; }
.main .msg-menu-item:last-child  { border-radius: 0 0 14px 14px; }

.main .msg-menu-item:hover {
  background: #f0fdf4;
}

html.dark .main .msg-menu-item:hover { background: #0f2d1f; }

.main .msg-menu-ico {
  width: 22px;
  font-size: 16px;
  color: #64748b;
  flex-shrink: 0;
  text-align: center;
}

.main .msg-menu-item--split-top {
  border-top: 1px solid #f1f5f9;
  margin-top: 2px;
  padding-top: 11px;
}

html.dark .main .msg-menu-item--split-top { border-top-color: #334155; }

.main .msg-menu-item--ticket,
.main .msg-menu-item--ticket .msg-menu-ico {
  color: #059669;
}

.main .msg-menu-item--danger {
  color: #dc2626;
}

.main .msg-menu-item--danger .msg-menu-ico {
  color: #dc2626;
}

.main .msg-menu-item--danger:hover { background: #fff1f2; }
html.dark .main .msg-menu-item--danger:hover { background: #2d0a0a; }

/* ── Bubble media asset (image / video inside chat bubble) ───────────────── */
.bubble-media__asset {
  display: block;
  max-width: 260px;
  max-height: 220px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  background: #e2e8f0;
}

.bubble-media--block {
  display: block;
  line-height: 0;
}

/* Audio player inside bubble */
.bubble-media__audio {
  display: block;
  width: 100%;
  min-width: 200px;
  max-width: 280px;
  height: 36px;
  accent-color: #10b981;
}

/* ── Tag modal multi-select ──────────────────────────────────────────────── */
.tag-modal__select-wrap {
  position: relative;
  margin-bottom: 10px;
}

.tag-modal__select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tag-modal__select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: #6b7280;
}

.tag-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
}

.tag-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
}

.tag-modal__chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  padding: 0 2px;
  opacity: 0.7;
}

.tag-modal__chip-remove:hover { opacity: 1; }

/* ── Ticket tabs strip — full horizontal scroll matching ticket count ─────── */
.layout-root--client-support-shell .ticket-tabs--figma .ticket-tabs-strip {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex-wrap: nowrap;
}

.layout-root--client-support-shell .ticket-tabs--figma .ticket-tabs-strip::-webkit-scrollbar {
  display: none;
}

.layout-root--client-support-shell .ticket-tabs--figma .ttab {
  flex-shrink: 0;
}

/* ── Ticket group empty state ─────────────────────────────────────────────── */
.ticket-group-empty {
  padding: 8px 12px 10px;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-style: italic;
}

/* ── Group member star rating ─────────────────────────────────────────────── */
.agent-member-stars {
  display: flex;
  gap: 2px;
  margin-top: 3px;
}

.agent-member-star {
  font-size: 14px;
  color: #d1d5db;
  line-height: 1;
}

.agent-member-star--on {
  color: #f59e0b;
}

/* Edit mode — clickable stars */
.agent-member-stars--edit {
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.agent-member-star--btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 2px;
  line-height: 1;
  color: #d1d5db;
  transition: color 0.1s, transform 0.1s;
}

.agent-member-star--btn:hover,
.agent-member-star--btn.agent-member-star--on {
  color: #f59e0b;
}

.agent-member-star--btn:hover {
  transform: scale(1.15);
}