/* AtendeUBS — refinamento visual v0.5
   Camada aditiva: mantém os componentes e fluxos existentes. */

:root {
  --ink: #18213a;
  --muted: #667085;
  --bg: #f4f6fb;
  --line: #e5e8f0;
  --brand-blue: #245a80;
  --brand-blue-light: #4384ad;
  --brand-purple: #7658d6;
  --brand-purple-dark: #51399f;
  --brand-lilac: #f0edff;
  --brand-lilac-strong: #dfd8ff;
  --surface-soft: #f8f9fd;
  --surface-raised: #ffffff;
  --success: #168463;
  --warning: #b56b21;
  --danger: #bb4558;
  --shadow-sm: 0 1px 2px rgba(24,33,58,.04), 0 5px 16px rgba(32,44,82,.045);
  --shadow-md: 0 18px 45px rgba(39,45,86,.09);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --sidebar-width: 282px;
  --topbar-height: 78px;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 84% 4%, rgba(118,88,214,.07), transparent 28rem),
    radial-gradient(circle at 15% 95%, rgba(67,132,173,.055), transparent 26rem),
    var(--bg);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #fff; background: var(--brand-purple); }

/* Navegação principal */
.app-sidebar {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 9%, rgba(153,130,235,.34), transparent 13rem),
    radial-gradient(circle at 88% 83%, rgba(83,141,180,.25), transparent 15rem),
    linear-gradient(165deg, #183f60 0%, #263d68 48%, #46327f 100%);
  border-right: 0;
  box-shadow: 10px 0 34px rgba(28,40,73,.09);
  transition: width .22s ease, transform .2s ease;
}

.app-sidebar::before,
.app-sidebar::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.app-sidebar::before { width: 210px; height: 210px; top: -116px; right: -92px; }
.app-sidebar::after { width: 150px; height: 150px; right: -105px; bottom: 110px; }

.sidebar-brand {
  position: relative;
  min-height: 104px;
  padding: 23px 21px;
  gap: 13px;
  font-size: 21px;
  letter-spacing: -.025em;
}
.sidebar-brand:hover { background: rgba(255,255,255,.055); }
.sidebar-brand small { margin-top: 3px; color: rgba(255,255,255,.68); font-size: 11px; }
.brand-symbol {
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(18,25,57,.18);
}
.brand-symbol .ui-icon { width: 25px; height: 25px; stroke-width: 1.9; }
.sidebar-collapse {
  position: absolute;
  z-index: 4;
  top: 76px;
  right: 13px;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 14px rgba(13,24,54,.15);
  cursor: pointer;
  font: 800 15px/1 system-ui,sans-serif;
  transition: background .16s ease, transform .16s ease;
}
.sidebar-collapse:hover { transform: translateX(-1px); background: rgba(255,255,255,.19); }
.sidebar-collapse:focus-visible { outline-color: rgba(255,255,255,.72); }

.sidebar-nav { position: relative; gap: 4px; padding: 7px 14px 24px; }
.nav-section {
  margin: 20px 13px 7px;
  color: rgba(230,237,255,.58);
  font-size: 9px;
  letter-spacing: .16em;
}
.sidebar-link {
  min-height: 47px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 620;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar-link .ui-icon { width: 20px; height: 20px; color: rgba(224,218,255,.9); }
.sidebar-link:hover {
  transform: translateX(2px);
  color: #fff;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.075);
}
.sidebar-link.is-active {
  color: #fff;
  border-color: rgba(216,207,255,.2);
  background: linear-gradient(100deg, rgba(135,106,226,.62), rgba(107,83,190,.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 22px rgba(24,26,67,.15);
}
.sidebar-link.is-active::after {
  position: absolute;
  right: 11px;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #d9d0ff;
  box-shadow: 0 0 0 4px rgba(217,208,255,.12);
}
.sidebar-link.is-active { box-shadow: none; }
.sidebar-link-sub {
  min-height: 37px;
  margin-left: 19px;
  padding: 7px 12px 7px 27px;
  border-radius: 9px;
  color: rgba(239,242,255,.72);
  font-size: 11px;
}
.sidebar-link-sub::before { left: 9px; width: 8px; background: rgba(255,255,255,.32); }
.sidebar-footer {
  position: relative;
  padding: 13px;
  border-color: rgba(255,255,255,.09);
  background: rgba(14,24,54,.18);
  backdrop-filter: blur(10px);
}
.sidebar-account, .sidebar-logout { border-radius: 11px; }

/* Barra lateral recolhível em computadores */
body.sidebar-collapsed { --sidebar-width: 84px; }
.app-shell { transition: grid-template-columns .22s ease; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 12px; }
body.sidebar-collapsed .sidebar-brand > span:last-child,
body.sidebar-collapsed .sidebar-link > span,
body.sidebar-collapsed .sidebar-account > span,
body.sidebar-collapsed .sidebar-logout > span { display: none; }
body.sidebar-collapsed .sidebar-collapse { top: 78px; right: 27px; }
body.sidebar-collapsed .sidebar-nav { padding-inline: 12px; }
body.sidebar-collapsed .nav-section {
  height: 1px;
  margin: 17px 7px 8px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.13);
  color: transparent;
  font-size: 0;
}
body.sidebar-collapsed .sidebar-link:not(.sidebar-link-sub) { justify-content: center; padding-inline: 9px; }
body.sidebar-collapsed .sidebar-link.is-active::after { display: none; }
body.sidebar-collapsed .sidebar-link-sub { display: none; }
body.sidebar-collapsed .sidebar-footer { padding-inline: 12px; }
body.sidebar-collapsed .sidebar-account,
body.sidebar-collapsed .sidebar-logout { justify-content: center; padding-inline: 8px; }

/* Barra superior */
.app-topbar {
  height: var(--topbar-height);
  padding: 0 clamp(22px,3vw,42px);
  border-bottom-color: rgba(220,224,235,.82);
  background: rgba(255,255,255,.86);
  box-shadow: 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(16px) saturate(135%);
}
.unit-identity { display: flex; align-items: center; gap: 11px; }
.unit-mark {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 11px;
  color: var(--brand-purple);
  background: var(--brand-lilac);
}
.unit-mark .ui-icon { width: 18px; height: 18px; }
.unit-identity b { font-size: 14px; letter-spacing: .025em; }
.unit-identity small { color: #7b8496; font-size: 11px; }
.topbar-meta { gap: 11px; }
.mode-chip, .role-chip {
  min-height: 29px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .065em;
}
.topbar-user { display: flex; align-items: center; gap: 9px; padding-left: 11px; border-left: 1px solid var(--line); }
.topbar-user > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-blue-light), var(--brand-purple));
  box-shadow: 0 5px 13px rgba(89,66,162,.18);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.topbar-user b, .topbar-user small { display: block; }
.topbar-user b { max-width: 160px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user small { color: var(--muted); font-size: 9px; }
.mode-banner {
  padding: 7px 16px;
  border-bottom-color: #eaddba;
  color: #7b5615;
  background: linear-gradient(90deg,#fff9e8,#fff4d6,#fff9e8);
  font-size: 9px;
  letter-spacing: .13em;
}
.app-content { max-width: 1580px; padding: 31px clamp(22px,3vw,48px) 50px; }
.app-footer { background: rgba(255,255,255,.5); }

/* Componentes compartilhados */
.page-heading h1, .service-heading h1, .dashboard-heading h1 {
  color: var(--ink);
  font-weight: 780;
  letter-spacing: -.045em;
}
.page-heading p, .service-heading p, .dashboard-heading p { color: var(--muted); }
.eyebrow { color: var(--brand-purple); font-size: 10px; letter-spacing: .16em; }
.panel, .cards article, .table-wrap, .inspector-card {
  border-color: var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 22px; }
.button, .secondary, .danger-button {
  min-height: 43px;
  padding: 10px 17px;
  gap: 8px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button {
  border-color: #6c4dca;
  background: linear-gradient(140deg, #8163df, #6746c1);
  box-shadow: 0 7px 16px rgba(93,63,181,.17);
}
.button:hover {
  transform: translateY(-1px);
  background: linear-gradient(140deg, #7658d6, #5637ad);
  box-shadow: 0 10px 22px rgba(93,63,181,.22);
}
.button .ui-icon, .secondary .ui-icon, .danger-button .ui-icon { width: 17px; height: 17px; }
.secondary { display: inline-flex; align-items: center; justify-content: center; border-color: #d9d3eb; color: #59439a; background: #fff; }
.secondary:hover { transform: translateY(-1px); border-color: #b9ace6; background: #f8f6ff; }
.danger-button { border-color: #efcbd1; color: #a4394b; background: #fffafb; }
input, select, textarea {
  border-color: #d8dde8;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(24,33,58,.025);
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(118,88,214,.1); }
.badge { border-radius: 999px; }

/* Início */
.dashboard-welcome {
  position: relative;
  min-height: 225px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 18px;
  padding: clamp(27px,3.2vw,42px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(185,163,255,.32), transparent 13rem),
    radial-gradient(circle at 68% 100%, rgba(72,151,193,.25), transparent 16rem),
    linear-gradient(125deg,#183f60 0%,#334477 49%,#5b3aa0 100%);
  box-shadow: 0 22px 48px rgba(37,47,91,.16);
}
.dashboard-welcome::before {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -95px;
  top: -120px;
  content: "";
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.dashboard-welcome-copy { position: relative; z-index: 2; max-width: 670px; }
.dashboard-welcome .eyebrow { color: #d9d0ff; }
.dashboard-welcome h1 { margin: 7px 0 8px; color: #fff; font-size: clamp(32px,3.5vw,49px); }
.dashboard-welcome p { max-width: 560px; color: rgba(240,243,255,.78); font-size: 14px; }
.dashboard-welcome-actions { display: flex; gap: 10px; margin-top: 23px; }
.dashboard-welcome .button { border-color: rgba(255,255,255,.12); background: #fff; color: #4f3696; box-shadow: 0 9px 20px rgba(17,24,55,.2); }
.dashboard-welcome .secondary { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.dashboard-welcome .secondary:hover { background: rgba(255,255,255,.17); }
.dashboard-assistant { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; min-width: 230px; margin-right: 4%; }
.assistant-avatar {
  position: relative;
  z-index: 2;
  display: grid;
  width: 77px;
  height: 77px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 27px;
  color: #fff;
  background: linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px rgba(20,25,64,.2);
  backdrop-filter: blur(10px);
}
.assistant-avatar .ui-icon { width: 34px; height: 34px; }
.assistant-copy small, .assistant-copy b, .assistant-copy em { display: block; }
.assistant-copy small { color: rgba(255,255,255,.64); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.assistant-copy b { margin: 2px 0; color: #fff; font-size: 19px; }
.assistant-copy em { color: #d9f3e8; font-size: 10px; font-style: normal; }
.assistant-copy em::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; content: ""; border-radius: 50%; background: #62dda8; box-shadow: 0 0 0 4px rgba(98,221,168,.12); }
.assistant-orbit { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.assistant-orbit-one { width: 108px; height: 108px; left: -16px; }
.assistant-orbit-two { width: 135px; height: 135px; left: -29px; }

.provider-strip {
  justify-content: flex-start;
  padding: 13px 16px;
  border-color: #ddd7f3;
  border-radius: 14px;
  background: rgba(247,245,255,.9);
}
.provider-strip-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #fff; background: var(--brand-purple); }
.provider-strip-icon .ui-icon { width: 16px; height: 16px; }
.provider-strip-copy { display: block; flex: 1; }
.provider-strip-copy b, .provider-strip-copy > span { display: block; }
.provider-strip-copy > span { margin-top: 1px; color: #756a93; font-size: 10px; }
.provider-strip > a { color: #5d469e; font-size: 10px; font-weight: 750; text-decoration: none; }

.dashboard-kpis { gap: 16px; }
.dashboard-kpi {
  position: relative;
  min-height: 119px;
  grid-template-columns: 48px 1fr;
  gap: 3px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dashboard-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dashboard-kpi::after { position: absolute; inset: auto 0 0; height: 3px; content: ""; opacity: .72; background: var(--kpi-accent,#4384ad); }
.dashboard-kpi.kpi-blue { --kpi-accent:#4384ad; }
.dashboard-kpi.kpi-purple { --kpi-accent:#7658d6; }
.dashboard-kpi.kpi-amber { --kpi-accent:#dda24d; }
.dashboard-kpi.kpi-rose { --kpi-accent:#cf6c81; }
.dashboard-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--kpi-accent,#4384ad) !important;
  background: color-mix(in srgb,var(--kpi-accent,#4384ad) 11%,white) !important;
}
.dashboard-kpi small { font-size: 10px; }
.dashboard-kpi strong { margin-top: 4px; font-size: 32px; }
.dashboard-main { gap: 16px; }
.panel-title h2 { font-size: 16px; }
.operational-list { border-radius: 12px; }
.operational-item { min-height: 95px; background: linear-gradient(145deg,#fff,#fbfcff); }
.operational-item strong { color: #2d3652; }
.quick-action { min-height: 65px; border-color: #e3dff1; border-radius: 12px; }
.quick-action:hover { transform: translateX(2px); }
.dashboard-details > summary { border-radius: 14px; box-shadow: var(--shadow-sm); }
.dashboard-details[open] > summary { border-radius: 14px 14px 0 0; }
.dashboard-details-content { border-radius: 0 0 14px 14px; }

/* Login */
.app-public { background: #f5f6fb; }
.public-header {
  height: 78px;
  padding: 0 max(5vw,28px);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.public-header .brand { color: var(--ink); }
.public-header .brand span { color: var(--brand-purple); }
.public-header .brand small { color: var(--muted); }
.public-main { width: 100%; max-width: 1480px; padding: clamp(24px,5vw,70px); }
.login-shell {
  min-height: calc(100vh - 225px);
  grid-template-columns: minmax(0,1.2fr) minmax(380px,.72fr);
  gap: clamp(24px,5vw,76px);
  place-items: stretch;
  align-items: center;
}
.login-showcase {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(35px,5vw,64px);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%,rgba(179,156,255,.38),transparent 15rem),
    radial-gradient(circle at 20% 90%,rgba(63,144,185,.25),transparent 17rem),
    linear-gradient(145deg,#183f60,#303e72 52%,#583994);
  box-shadow: 0 28px 70px rgba(32,42,82,.18);
}
.login-showcase::after { position: absolute; width: 330px; height: 330px; right: -170px; bottom: -150px; content: ""; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.login-showcase-mark { display: grid; width: 59px; height: 59px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 20px; background: rgba(255,255,255,.12); }
.login-showcase-mark .ui-icon { width: 27px; height: 27px; }
.login-showcase .eyebrow { color: #d9d0ff; }
.login-showcase h1 { margin: 10px 0 14px; font-size: clamp(35px,4vw,57px); line-height: 1.02; letter-spacing: -.052em; }
.login-showcase p { max-width: 620px; color: rgba(240,243,255,.74); font-size: 15px; }
.login-benefits { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 27px 0 0; padding: 0; list-style: none; }
.login-benefits li { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.075); }
.login-benefits .ui-icon { width: 17px; height: 17px; color: #d8ceff; }
.login-benefits b, .login-benefits small { display: block; }
.login-benefits b { font-size: 10px; }
.login-benefits small { margin-top: 2px; color: rgba(255,255,255,.6); font-size: 8px; }
.login-card {
  width: min(440px,100%);
  justify-self: center;
  padding: clamp(28px,4vw,43px);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}
.login-card-symbol { display: grid; width: 47px; height: 47px; margin-bottom: 26px; place-items: center; border-radius: 15px; color: var(--brand-purple); background: var(--brand-lilac); }
.login-card-symbol .ui-icon { width: 21px; height: 21px; }
.login-card h2 { margin: 7px 0 6px; font-size: 29px; letter-spacing: -.035em; }
.login-intro { margin: 0 0 27px; color: var(--muted); font-size: 12px; }
.login-card label { color: #384157; font-size: 11px; }
.login-card input { min-height: 48px; padding: 12px 14px; }
.login-submit { width: 100%; min-height: 48px; margin-top: 3px; }
.login-help { display: block; margin-top: 17px; color: var(--muted); font-size: 9px; text-align: center; }

/* Central humana */
.service-heading { align-items: center; margin-bottom: 18px; }
.service-heading h1 { margin: 4px 0; font-size: clamp(29px,3vw,42px); }
.service-heading-status { display: flex; align-items: center; gap: 8px; }
.channel-chip, .live-chip { min-height: 34px; padding: 7px 11px; border-radius: 999px; font-size: 9px; }
.channel-chip { display: flex; align-items: center; gap: 6px; border: 1px solid #ddd7f2; color: #59439a; background: #f7f5ff; font-weight: 750; }
.channel-chip .ui-icon { width: 15px; height: 15px; }
.live-chip { color: #117255; border-color: #c9e9de; background: #effaf6; }
.live-chip i { width: 7px; height: 7px; background: #25a879; box-shadow: 0 0 0 4px rgba(37,168,121,.1); }
.service-layout {
  height: calc(100vh - 224px);
  min-height: 610px;
  grid-template-columns: 245px minmax(280px,340px) minmax(430px,1fr);
  border-color: #dfe3ec;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.queue-column, .ticket-column { background: #fbfcff; }
.column-title, .chat-header {
  min-height: 73px;
  justify-content: flex-start;
  gap: 10px;
  padding: 15px 17px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
}
.column-title-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--brand-purple); background: var(--brand-lilac); }
.column-title-icon .ui-icon { width: 17px; height: 17px; }
.column-title h2, .chat-header h2 { font-size: 14px; }
.column-title small, .chat-header p { font-size: 9px; }
.column-title .icon-button { margin-left: auto; }
.icon-button { border: 1px solid #e0dcf1; border-radius: 10px; background: #f7f5ff; transition: transform .18s ease; }
.icon-button:hover { transform: rotate(25deg); }
.queue-list, .ticket-list { padding: 10px; }
.queue-card, .ticket-card { border-radius: 13px; }
.queue-card { min-height: 66px; }
.queue-card b { font-size: 11px; }
.queue-card small, .ticket-card small { font-size: 8px; }
.queue-card strong { min-width: 29px; height: 29px; font-size: 10px; }
.queue-card:hover, .queue-card.is-active, .ticket-card:hover, .ticket-card.is-active { border-color: #ded7fa; background: linear-gradient(135deg,#f5f2ff,#faf9ff); }
.ticket-card { gap: 6px; padding: 13px; border: 1px solid transparent; }
.ticket-card.is-active { box-shadow: inset 3px 0 0 var(--brand-purple); }
.empty-avatar { width: 72px; height: 72px; border-radius: 26px; background: linear-gradient(145deg,#4384ad,#7658d6); box-shadow: 0 16px 32px rgba(79,70,151,.2); }
.empty-avatar .ui-icon { width: 31px; height: 31px; }
.center-empty b { color: #394259; }
.center-empty > span:not(.empty-avatar), .center-empty > small { max-width: 320px; font-size: 10px; }
.center-empty > small { color: #9299a7; }
.chat-actions { padding: 10px 15px; background: #fbfcff; }
.chat-actions .button, .chat-actions .secondary, .chat-actions .danger-button { min-height: 36px; padding: 8px 12px; font-size: 9px; }
.message-list {
  padding: 23px;
  background:
    radial-gradient(circle at 10% 15%,rgba(118,88,214,.035),transparent 16rem),
    linear-gradient(#f7f8fc,#f5f7fb);
}
.service-message { border-radius: 15px 15px 15px 5px; box-shadow: 0 4px 13px rgba(29,38,69,.055); }
.service-message.origin-usuario { border-color: #d9d0fa; border-radius: 15px 15px 5px 15px; background: #eeeaff; }
.service-message.origin-ia { border-left: 3px solid #7b5ddb; }
.service-message.origin-funcionario { border-left: 3px solid #3389a9; }
.reply-box { padding: 13px 15px 15px; box-shadow: 0 -8px 25px rgba(28,37,68,.035); }
.reply-box textarea { min-height: 48px; max-height: 140px; border-radius: 13px; }
.service-dialog { border: 1px solid rgba(255,255,255,.5); border-radius: 20px; }

/* Legibilidade das áreas administrativas */
.knowledge-answer-card h3,
.ai-test-case h3,
.staff-card h3 { font-size: 13px; }
.knowledge-answer-card p,
.ai-test-case blockquote,
.conversation-message p,
.homologation-contact h3 { font-size: 10px; }
.ai-test-case-meta span,
.ai-test-tags span,
.report-tags span,
.provider-badge,
.result-badge,
.comparison-badge,
.knowledge-status,
.knowledge-review-state,
.knowledge-disabled-state { font-size: 8px; }
.ai-run-controls label,
.ai-test-filters label,
.ai-test-editor label,
.homologation-report-filters label,
.homologation-note label,
.homologation-contact-editor label,
.homologation-rejection-editor label { font-size: 9px; }
.ai-run-controls select,
.ai-test-filters input,
.ai-test-filters select,
.ai-test-editor input:not([type="checkbox"]),
.ai-test-editor select,
.ai-test-editor textarea,
.homologation-report-filters select,
.homologation-note textarea,
.homologation-contact-editor input:not([type="checkbox"]),
.homologation-contact-editor textarea,
.homologation-rejection-editor textarea { font-size: 11px; }

@media (max-width: 1180px) {
  .dashboard-assistant { margin-right: 0; }
  .assistant-copy { display: none; }
  .login-benefits { grid-template-columns: 1fr; }
  .login-showcase { min-height: 600px; }
  .service-layout { grid-template-columns: 210px 285px minmax(390px,1fr); }
}

@media (max-width: 980px) {
  .topbar-user > span { display: none; }
  .dashboard-welcome { min-height: 210px; }
  .dashboard-kpis { grid-template-columns: repeat(2,1fr); }
  .login-shell { grid-template-columns: 1fr; }
  .login-showcase { min-height: 430px; }
  .login-benefits { grid-template-columns: repeat(3,1fr); }
  .login-card { margin: 0 auto; }
}

@media (max-width: 920px) {
  .sidebar-collapse { display: none; }
  body.sidebar-collapsed { --sidebar-width: 245px; }
}

@media (max-width: 850px) {
  .service-layout { height: auto; grid-template-columns: 1fr; }
  .service-heading-status { width: 100%; justify-content: space-between; }
  .queue-column, .ticket-column { max-height: 320px; }
}

@media (max-width: 760px) {
  .app-content { padding: 22px 15px 38px; }
  .app-topbar { padding: 0 14px; }
  .unit-mark, .mode-chip { display: none; }
  .unit-identity b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-user { padding-left: 0; border-left: 0; }
  .dashboard-welcome { align-items: flex-start; min-height: auto; padding: 27px 24px; }
  .dashboard-assistant { position: absolute; right: 20px; top: 20px; opacity: .22; }
  .assistant-avatar { width: 66px; height: 66px; }
  .dashboard-welcome-copy { padding-top: 34px; }
  .dashboard-welcome-actions { flex-direction: column; }
  .dashboard-welcome-actions a { width: 100%; }
  .provider-strip { align-items: flex-start; }
  .provider-strip > a { display: none; }
  .dashboard-kpis { grid-template-columns: 1fr; }
  .dashboard-main { grid-template-columns: 1fr; }
  .operational-list { grid-template-columns: 1fr 1fr; }
  .operational-item:nth-child(3n) { border-right: 1px solid var(--line); }
  .operational-item:nth-child(2n) { border-right: 0; }
  .operational-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .operational-item:nth-last-child(-n+2) { border-bottom: 0; }
  .login-showcase { min-height: 460px; padding: 34px 26px; }
  .login-showcase h1 { font-size: 37px; }
  .login-benefits { grid-template-columns: 1fr; }
  .service-heading-status { align-items: stretch; flex-direction: column; }
  .channel-chip, .live-chip { justify-content: center; }
  .chat-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Identidade fixa das equipes nos indicadores. */
.team-bars .fill.team-fill-amarela { background: #f4c542; }
.team-bars .fill.team-fill-vermelha { background: #d9535f; }
.team-bars .fill.team-fill-lilas { background: #8a63d2; }