:root {
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:#242a34;
  background:#181c24;
  font-size:14px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button {
  border:0;
  border-radius:7px;
  padding:8px 12px;
  background:#2864c5;
  color:white;
  cursor:pointer;
  font-weight:600;
  line-height:1.3
}
button:hover:not(:disabled) {
  filter:brightness(.95)
}
button:disabled {
  opacity:1;
  background:#eceef1;
  color:#8a919b;
  border:1px solid #e0e3e8;
  cursor:not-allowed
}
.subtle {
  background:#f7f8fa;
  border:1px solid #dce0e6;
  color:#334155
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid #3d75cc;
  outline-offset:2px
}
.hidden {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.error {
  color:#c00000
}
.hint {
  color:#6b6f78;
  font-size:12px;
  line-height:1.4
}
.wide {
  width:100%
}
.brand-logo { display:block; width:min(100%,280px); height:auto; }
.rail-brand {
  width:40px;
  height:40px;
  flex:none;
  background:url('/assets/patitasco-logo.png') no-repeat -5px -8px / 205px 68px;
  filter:invert(1)
}
.login-card {
  max-width:430px;
  margin:12vh auto;
  background:#fff;
  border-radius:14px;
  padding:32px;
  box-shadow:0 18px 60px #0003
}
.login-card h1 {
  margin:20px 0 8px
}
.login-card #google-login { margin-top:24px; min-height:44px; }
.login-card p {
  color:#6d6f79;
  line-height:1.5
}
.login-card form {
  display:grid;
  gap:10px;
  margin-top:24px
}
.auth-form { display:grid; gap:10px; }
.auth-form label,.auth-settings-form > label:not(.check-label) { font-size:13px; font-weight:600; }
.auth-form .error { margin:0; color:#a52222; }
.login-card #password-login-form { margin-top:20px; }
.auth-settings-form { display:grid; gap:10px; max-width:420px; }
.auth-settings-form .check-label { display:flex; align-items:center; gap:8px; }
.auth-settings-form .check-label input { width:auto; }
.auth-settings-form #auth-login-message-hint { margin:0; }
/* Configuración › Acceso: las personas se gestionan en «Equipo». */
.auth-team-link { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 16px; padding:10px 12px; border:1px solid #e3e6ec; border-radius:9px; background:#f7f8fa; font-size:13px; }
.auth-team-link button { padding:6px 10px; font-size:13px; }
.login-card input {
  width:100%
}
/* La pantalla de acceso conserva el lenguaje de la marca sin alterar la bandeja. */
body.auth-screen {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
  padding:24px 16px;
  background:#f5eadf;
}
body.auth-screen .login-card {
  width:min(100%,430px);
  margin:0;
  padding:36px 40px 32px;
  background:#fffefa;
  border:1px solid #ebe1d7;
  border-radius:18px;
  box-shadow:0 18px 52px #4f38251a;
  text-align:center;
}
body.auth-screen .login-internal-banner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:-36px -40px 28px;
  padding:13px 16px;
  border-radius:17px 17px 0 0;
  background:#4f3825;
  color:#fffefa;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
}
body.auth-screen .login-internal-banner svg {
  width:16px;
  height:16px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
}
.login-mark {
  position:relative;
  display:block;
  width:92px;
  height:92px;
  margin:0 auto 6px;
  overflow:hidden;
  border-radius:50%;
  background:#f5eadf;
  box-shadow:inset 0 0 0 1px #e1ccb6;
}
.login-mark img {
  position:absolute;
  width:140px;
  max-width:none;
  height:auto;
  left:-52px;
  top:-54px;
}
body.auth-screen .brand-logo {
  width:min(100%,92px);
  margin:28px auto 0;
}
body.auth-screen .login-card h1 {
  max-width:325px;
  margin:20px auto 0;
  color:#3a2f28;
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.02em;
}
body.auth-screen .login-card #login-copy {
  margin:13px auto 0;
  max-width:325px;
  color:#6f655e;
  font-size:13px;
}
body.auth-screen .login-card #login-message {
  margin:9px auto 0;
  max-width:320px;
  color:#4f3825;
  font-size:14px;
  font-weight:500;
}
body.auth-screen .login-card form { text-align:left; }
body.auth-screen .login-card label {
  color:#4f3825;
  font-size:13px;
  font-weight:600;
}
body.auth-screen .login-card input {
  min-height:43px;
  padding:10px 12px;
  border:1px solid #e1ccb6;
  border-radius:8px;
  background:#fffefa;
}
body.auth-screen .login-password-field { position:relative; display:block; }
body.auth-screen .login-password-field input { padding-right:51px; }
body.auth-screen #login-password-visibility {
  position:absolute;
  top:50%;
  right:2px;
  display:grid;
  place-items:center;
  width:42px;
  height:39px;
  padding:0;
  transform:translateY(-50%);
  border-radius:7px;
  background:transparent;
  color:#4f3825;
}
body.auth-screen #login-password-visibility:hover { background:#f5eadf; filter:none; }
body.auth-screen #login-password-visibility svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
}
body.auth-screen #login-password-visibility .eye-slash { display:none; }
body.auth-screen #login-password-visibility[aria-pressed="true"] .eye-slash { display:block; }
body.auth-screen .login-card input:focus {
  border-color:#a66c3c;
}
body.auth-screen .login-card input:focus-visible,
body.auth-screen .login-card button:focus-visible {
  outline-color:#8a5a34;
}
body.auth-screen .login-card form > button[type="submit"] {
  min-height:44px;
  margin-top:6px;
  border-radius:8px;
  background:#cc9966;
  color:#3a2f28;
}
body.auth-screen .login-card form > button[type="submit"]:hover:not(:disabled) {
  background:#4f3825;
  color:#fffefa;
  filter:none;
}
body.auth-screen #password-login-submit {
  width:100%;
  min-height:54px;
  background:#4f3825;
  color:#fffefa;
  font-size:16px;
  font-weight:700;
  box-shadow:0 6px 14px #4f382526;
}
body.auth-screen #password-login-submit:hover:not(:disabled) {
  background:#3a2f28;
  box-shadow:0 7px 16px #3a2f2833;
}
body.auth-screen .login-card form > button.subtle {
  background:#f5eadf;
  border:1px solid #e1ccb6;
  color:#4f3825;
}
body.auth-screen #login-form {
  padding-top:18px;
  border-top:1px solid #ebe1d7;
}
body.auth-screen #google-login {
  display:flex;
  justify-content:center;
  margin-top:24px;
}
body.auth-screen .login-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 0;
  color:#6f655e;
  font-size:12px;
  white-space:nowrap;
}
body.auth-screen .login-divider::before,
body.auth-screen .login-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:#e1ccb6;
}
body.auth-screen .login-divider + #password-login-form { margin-top:15px; }
body.auth-screen .login-card .error {
  min-height:1.4em;
  margin:14px 0 0;
  color:#a52222;
  font-size:13px;
  text-align:left;
}
body.auth-screen .login-card .error:empty { min-height:0; margin:0; }
@media (max-width:480px) {
  body.auth-screen .login-card { padding:28px 24px; }
  body.auth-screen .login-internal-banner { margin:-28px -24px 24px; }
}
input,select,textarea {
  border:1px solid #d8dde4;
  border-radius:7px;
  padding:8px 9px;
  background:#fffefa;
  color:#242a34
}
input:focus,select:focus,textarea:focus {
  border-color:#3d75cc
}
.app-shell {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  height:100dvh;
  min-height:480px;
  overflow:hidden
}
.icon-rail {
  position:relative;
  z-index:50;
  background:#181c24;
  color:#abb2be;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:6px 5px 12px;
  gap:13px;
  min-height:0
}
/* Ventanas bajas: las pestañas se desplazan en vez de quedar cortadas (las etiquetas flotantes
   solo se recortan en ese caso; el menú de producto y la cuenta quedan fuera del desplazamiento). */
@media (max-height:640px) {
  .icon-rail nav { flex:0 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
  .icon-rail nav button { flex-shrink:0; }
}
.icon-rail nav {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  width:100%
}
.icon-rail nav button {
  position:relative;
  width:42px;
  height:42px;
  padding:0;
  border-radius:8px;
  color:#a2a2a8;
  background:transparent;
  font-size:23px;
  font-weight:400;
  display:grid;
  place-items:center
}
.icon-rail nav button:hover,.icon-rail nav button.active {
  background:#303846;
  color:white;
  filter:none
}
.icon-rail nav button span {
  position:absolute;
  left:48px;
  top:7px;
  z-index:5;
  display:none;
  background:#303846;
  padding:6px 10px;
  border-radius:5px;
  color:white;
  font-size:12px;
  white-space:nowrap
}
.icon-rail nav button:hover span {
  display:block
}
.rail-avatar {
  margin-top:auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#c8a575;
  color:white;
  display:grid;
  place-items:center;
  font-weight:700
}
.rail-avatar:hover,.rail-avatar.active,.rail-avatar:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
  filter:none
}
.app-main {
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#181c24;
  padding-right:6px;
  padding-bottom:6px
}
.topbar {
  min-height:82px;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:5px 0 6px
}
.presence-banner {
  height:33px;
  border-radius:7px;
  background:#fff0ed;
  color:#873629;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:12px;
  font-weight:600
}
.presence-banner.available {
  background:#e7f4eb;
  color:#24563a
}
.presence-banner button {
  background:#fff;
  border:1px solid #d5e1d9;
  color:inherit;
  font-weight:650;
  padding:4px 10px;
  font-size:12px
}
.presence-banner.offline {
  background:#eceef2;
  color:#3d4250
}
/* Sin conexión: los datos se ven atenuados porque pueden estar desactualizados. */
.app-shell.stale-data main {
  opacity:.6;
  filter:grayscale(.6);
  transition:opacity .2s, filter .2s
}
.session-expiry {
  border-radius:7px;
  background:#fff6db;
  color:#6b4d00;
  border:1px solid #f0d58a;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  text-align:center
}
.topbar-lower {
  height:32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,420px) minmax(150px,1fr);
  align-items:center;
  gap:12px;
  position:relative;
  padding:0 10px
}
.alert-count {
  grid-column:1;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:11px;
  font-weight:650;
  padding-left:2px
}
#alert-wait-minutes { display:block; width:100px; margin:7px 0 12px; }
.global-search {
  grid-column:2;
  grid-row:1;
  height:32px;
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  background:#303846;
  border-radius:8px;
  color:#fff;
  padding:0 12px;
  font-size:22px
}
.global-search input {
  border:0;
  background:transparent;
  padding:0;
  color:#fff;
  width:100%;
  outline:none;
  font-size:13px
}
.global-search input::placeholder {
  color:#c1c8d3
}
.global-search:focus-within {
  outline:2px solid #9ebef2;
  outline-offset:2px
}
.identity {
  grid-column:3;
  grid-row:1;
  justify-self:end;
  height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#e8e8e8;
  font-size:12px;
  white-space:nowrap
}
.identity-profile {
  background:transparent;
  color:inherit;
  padding:5px;
  font-size:12px
}
.identity-profile:hover,.identity-profile:focus-visible {
  text-decoration:underline;
  filter:none
}
.exit-button {
  background:#303846;
  border:1px solid #515b6b;
  color:#fff;
  font-size:12px;
  padding:6px 9px
}
.workspace,.archive-workspace,.page-workspace {
  background:#fff;
  border-radius:11px;
  min-height:0;
  flex:1;
  overflow:hidden
}
.workspace {
  display:grid;
  /* One fixed right-panel width for Detalles and Conocimiento: switching tabs moves nothing. */
  grid-template-columns:minmax(250px,24%) minmax(350px,1fr) clamp(320px,26vw,440px);
  grid-template-rows:minmax(0,1fr)
}
.sidebar {
  min-width:0;
  border-right:1px solid #e6e6e9;
  display:flex;
  flex-direction:column;
  overflow:auto
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.sidebar>.section-head {
  min-height:50px;
  border-bottom:1px solid #e6e6e9;
  padding:0 14px
}
.section-head h2,.details #details-title {
  margin:0;
  font-size:16px;
  font-weight:680
}
.icon-button {
  background:transparent;
  color:#536070;
  padding:4px;
  font-size:20px;
  line-height:1
}
.filter-disclosure {
  border-bottom:1px solid #e6e6e9;
  padding:10px 14px
}
.filter-disclosure summary {
  cursor:pointer;
  font-weight:600;
  color:#54545b;
  font-size:12px;
  line-height:20px
}
.filters {
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  column-gap:10px;
  row-gap:8px;
  align-items:center;
  margin:12px 0
}
.filters label,.details label {
  color:#666873;
  font-size:12px
}
.filters > label {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.filters .check-label {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:visible
}
.filters .check-label input {
  margin:0;
  flex:none
}
.filters select {
  min-width:0;
  width:100%
}
.archived-date-filters { display:grid; grid-column:1 / -1; grid-template-columns:1fr; gap:6px; }
.archived-date-filters.hidden { display:none; }
.archived-date-filters input { width:100%; min-width:0; }
.list-count {
  margin:8px 0 4px;
  padding:0 14px
}
.conversation-list {
  overflow:auto;
  flex:1
}
.list-pager {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 12px;
  border-top:1px solid #e6e6e9;
}
.list-group-heading {
  padding:11px 14px 7px;
  font-weight:700;
  color:#26262b;
  font-size:13px;
  background:#fff;
  position:sticky;
  top:0;
  z-index:1
}
button.list-group-heading {
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  border-radius:0;
  text-align:left;
  line-height:1.3
}
button.list-group-heading:hover:not(:disabled) {
  filter:none;
  background:#f6f6f8
}
button.list-group-heading:focus-visible {
  outline-offset:-2px
}
.list-group-chevron {
  display:inline-block;
  width:12px;
  color:#666873;
  font-size:15px;
  line-height:1;
  text-align:center;
  transition:transform .12s ease
}
.list-group-heading[aria-expanded="true"] .list-group-chevron {
  transform:rotate(90deg)
}
.sidebar>.section-head h2 {
  margin-right:auto
}
.list-sort {
  width:auto;
  max-width:140px;
  padding:4px 6px;
  border:1px solid #dedee2;
  border-radius:6px;
  background:#fff;
  color:#3a3c43;
  font-size:12px
}
@media (prefers-reduced-motion:reduce) {
  .list-group-chevron { transition:none }
}
.conversation-item {
  display:flex;
  gap:10px;
  width:calc(100% - 12px);
  margin:2px 6px;
  padding:10px 11px;
  border-radius:8px;
  color:#222228;
  background:#fff;
  text-align:left;
  font-weight:400;
  min-width:0
}
.conversation-item:hover,.conversation-item.selected {
  background:#f0f4f9;
  filter:none
}
.conversation-item.selected {
  box-shadow:inset 3px 0 #3270c8
}
.list-avatar,.table-avatar {
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#9c6cf2;
  color:white;
  font-weight:700
}
/* Nivel de prioridad (1–8) en una bolita arriba a la derecha del avatar de la lista. El número va
   centrado con line-height = alto interior (17 px − 2 × 1,5 px de borde): medido en Chromium con
   DPR 1, 2 y 4, el centro de la tinta de 3 y 4 cae a ≤0,3 px del centro (antes, 1 px por debajo). */
.conversation-row .list-avatar { position:relative; }
.conversation-row .list-avatar[data-level]::after {
  content:attr(data-level); position:absolute; top:-5px; right:-6px; box-sizing:border-box;
  min-width:17px; height:17px; padding:0 2px; border:1.5px solid var(--level-ring, #ffffff);
  border-radius:999px; display:block; text-align:center;
  font:700 10px/14px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-variant-numeric:tabular-nums lining-nums; color:#ffffff; background:#5f6675;
  pointer-events:none;
}
/* The ring takes the colour of the row under it (white, or grey when hovered/selected). */
.conversation-row .conversation-item:hover .list-avatar,
.conversation-row .conversation-item.selected .list-avatar { --level-ring:#f1f2f4; }
.conversation-row .list-avatar[data-level="5"]::after { background:#c98a00; }
.conversation-row .list-avatar[data-level="6"]::after { background:#d9700f; }
.conversation-row .list-avatar[data-level="7"]::after { background:#d4461f; }
.conversation-row .list-avatar[data-level="8"]::after { background:#b91c1c; }
.list-avatar[data-topic="incident"] { box-shadow:0 0 0 3px #d94b49; }
.list-avatar[data-topic="nutrition"] { box-shadow:0 0 0 3px #d6ae20; }
.list-avatar[data-topic="shelter"] { box-shadow:0 0 0 3px #31a66b; }
.list-avatar[data-topic="community"] { box-shadow:0 0 0 3px #8063d2; }
.list-avatar[data-topic="other"] { box-shadow:0 0 0 3px #818a96; }
.list-content {
  min-width:0;
  flex:1
}
.conversation-title {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:14px;
  font-weight:650
}
.conversation-title>span:first-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.item-time {
  font-size:11px;
  font-weight:400;
  color:#6b6f78;
  white-space:nowrap
}
.conversation-secondary {
  font-size:12px;
  color:#686a75;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.conversation-preview {
  margin-top:3px;
  color:#565b67;
  font-size:12px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere
}
.list-country { flex:none; font-size:13px; line-height:16px; }
.region-shortcuts { display:flex; gap:6px; padding:8px 14px 0 }
.region-shortcuts button {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid #dedee2; background:#fff; color:#3a3c43;
  border-radius:999px; padding:4px 8px; font-size:12px; font-weight:650
}
.region-shortcuts button { min-width:0; }
@media(max-width:1050px) {
  .region-shortcuts { gap:4px; padding:8px 10px 0 }
  .region-shortcuts button { padding:4px 5px; gap:3px }
}
.region-shortcuts button[aria-pressed="true"] {
  background:#1f2329; color:#fff; border-color:#1f2329
}
.region-count {
  display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  border-radius:999px; background:#e8eefc; color:#1f4fb8; font-size:10.5px; font-weight:700;
  line-height:1; font-variant-numeric:tabular-nums
}
.region-shortcuts button[aria-pressed="true"] .region-count { background:rgba(255,255,255,.22); color:#fff }
.region-count[hidden] { display:none }
.region-count.zero { background:#f0f1f3; color:#6b6f78 }
.region-shortcuts button[aria-pressed="true"] .region-count.zero { background:rgba(255,255,255,.16); color:#fff }
#reading-weekly { margin-bottom:28px }
#reading-weekly .report-row { padding:10px 14px }
.reading-summary { font-size:15px; font-weight:650; color:#1f2329; margin:8px 0 4px }
.thermo-scale { position:relative; height:18px; border-radius:999px; margin:28px 8px 8px;
  background:linear-gradient(90deg,#2f6fed,#f0b429 55%,#d23b3b) }
.thermo-mark { position:absolute; top:-6px; width:14px; height:30px; margin-left:-7px;
  border-radius:7px; background:#1f2329; box-shadow:0 0 0 3px #fff }
.thermo-mark[data-when="end"] { background:#fff; box-shadow:0 0 0 3px #1f2329 }
.thermo-caption { display:flex; justify-content:space-between; color:#666873; font-size:12px }
.thermo-readout { display:flex; gap:18px; margin:12px 0 4px }
.thermo-readout strong { display:block; font-size:18px }
.mix-track { display:flex; height:22px; border-radius:999px; overflow:hidden; background:#e6e8ee; margin:10px 0 }
.mix-incidents { background:#d23b3b }
.mix-other { background:#2f6fed }
.person-card { border:1px solid #e6e6e9; border-radius:12px; padding:12px 14px; margin:8px 0 }
.person-card h3 { margin:0 0 4px; font-size:16px }
.person-meta { color:#666873; font-size:13px; margin:0 0 8px }
.reading-table { width:100%; border-collapse:collapse; margin:8px 0 22px }
.reading-table th, .reading-table td {
  text-align:left; padding:10px 12px; border-bottom:1px solid #e6e6e9; font-size:14px
}
.reading-table th { color:#666873; font-size:12px; font-weight:650 }
.reading-table td:not(:first-child), .reading-table th:not(:first-child) { text-align:right }
.reading-table td[data-delta^="+"] { color:#12643d; font-weight:700 }
.reading-table td[data-delta^="-"] { color:#8f2020; font-weight:700 }
.topic-badge {
  display:inline-flex; align-items:center; max-width:100%; width:max-content; min-height:20px;
  padding:2px 8px; border:1px solid transparent; border-radius:999px;
  font-size:11px; line-height:1.25; font-weight:750; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
}
.topic-badge[data-topic="incident"] { color:#8f2020; background:#fde6e4; border-color:#f4b9b4; }
.topic-badge[data-topic="nutrition"] { color:#735700; background:#fff3bf; border-color:#f0d66e; }
.topic-badge[data-topic="shelter"] { color:#12643d; background:#ddf4e6; border-color:#a8dfbd; }
.topic-badge[data-topic="community"] { color:#4e358a; background:#eee7ff; border-color:#c8b6f5; }
.topic-badge[data-topic="other"], .topic-badge[data-topic="none"] { color:#4f5662; background:#eceef1; border-color:#d5d9df; }
.conversation-metadata { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; margin-top:4px; }
.conversation-topic-badge { font-size:11px; }
.conversation-metadata .queue-tag { margin:0; }
.conversation-sender { overflow:hidden; text-overflow:ellipsis; }
.channel-mark {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:none;
  margin-right:5px;
  border-radius:50%;
  color:#fff;
  background:#20a86b;
  vertical-align:middle
}
.channel-mark-icon { display:block; width:14px; height:14px; }
.channel-mark.instagram { border-radius:5px; background:linear-gradient(135deg,#7753ce,#e34577,#f2a33a); }
.queue-tag {
  display:inline-block;
  background:#f1f1f3;
  color:#61616b;
  border-radius:12px;
  padding:2px 7px;
  margin-top:6px;
  font-size:11px
}
.thread {
  display:flex;
  min-width:0;
  min-height:0;
  overflow:hidden
}
.thread #thread-content {
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:0;
  overflow:visible
}
.empty {
  margin:auto;
  color:#90919a;
  text-align:center;
  padding:20px
}
/* Cabecera en una sola línea (≥1100 px): canal, nombre, urgencia, bandera, quién lo lleva y
   etiquetas (las que no caben, «+N»); estado, «+ Etiqueta», «Asignarme» y acciones a la derecha. */
.thread-header {
  position:relative;
  min-height:50px;
  box-sizing:border-box;
  border-bottom:1px solid #e8e8eb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px 12px;
  padding:6px 16px
}
.thread-heading { display:flex; align-items:center; min-width:0; flex:1 1 auto; }
.thread-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:none; }
.thread-title { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; white-space:nowrap; }
.thread-title .topic-badge { flex:0 0 auto; }
.thread-header h1 {
  font-size:15px;
  font-weight:600;
  margin:0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis
}
.thread-channel { display:inline-flex; flex:none; }
.channel-icon { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:#25a35a; }
.channel-icon[data-channel="instagram"] { border-radius:5px; background:linear-gradient(45deg,#f5a623 0%,#e1306c 50%,#833ab4 100%); }
.channel-icon svg { width:14px; height:14px; }
.thread-meta { color:#6b7280; font-size:12px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
.thread-meta:empty { display:none; }
.thread-owner { flex:0 0 auto; padding:2px 8px; border-radius:999px; background:#f0f0f3; color:#55555d; font-size:12px; font-weight:600; line-height:16px; white-space:nowrap; }
.thread-owner[data-owner="mine"] { background:#e5f4ea; color:#1d7a3c; }
.thread-owner[data-owner="none"] { background:#fff4e0; color:#8a5300; }
.thread-owner[data-owner="left"] { background:#fdecea; color:#a3261b; }
/* Etiquetas en la misma línea: ceden sitio antes que el nombre; lo que no cabe, «+N». */
.thread-title .chat-tags { flex:0 1000 auto; min-width:0; min-height:0; flex-wrap:nowrap; overflow:hidden; }
.thread-title .tag-chips { flex:0 1 auto; min-width:0; flex-wrap:nowrap; gap:4px; overflow:hidden; }
.thread-title .tag-chips .tag-chip { flex:none; font-size:11px; line-height:16px; padding:0 1px 0 6px; }
.thread-title .tag-chips .tag-chip .tag-remove { width:15px; height:15px; font-size:12px; }
.thread-title .tag-chips > [hidden] { display:none; }
.thread-title .chat-tags:has(.tag-chip) { min-width:30px; }
.thread-title .tag-chips .tag-more { padding:0 7px; background:#f0f2f5; color:#4b5260; border:1px solid #dfe2e7; font-weight:700; cursor:pointer; }
.thread-title .tag-more:hover { background:#e6e9ee; filter:none; }
.thread-title .chat-tags.expanded,.thread-title .chat-tags.expanded .tag-chips { flex-wrap:wrap; overflow:visible; }
.thread-title:has(.chat-tags.expanded) { flex-wrap:wrap; white-space:normal; }
/* The customer name keeps its room: the owner note gives way first. */
.thread-title h1 { flex:0 1 auto; min-width:3ch; }

.thread-header .badge { flex:none; padding:2px 8px; }
.thread-access { margin:0; padding:6px 16px; background:#eef7f0; color:#24563a; font-size:11px; font-weight:600; }
.thread-access.read-only { background:#fff4e4; color:#76501f; }
.thread-access.send-blocked { background:#fdeaea; color:#8a1f1f; font-size:12px; border-bottom:1px solid #f1c4c4; }
.thread-ownership-actions { display:flex; align-items:flex-start; gap:12px; padding:10px 16px; background:#f8fafc; border-bottom:1px solid #e8e8eb; flex-wrap:wrap; }
/* Sin acciones visibles (chat de otro agente) no queda una franja vacía. */
.thread-ownership-actions:not(:has(> :not(.hidden))) { display:none; }
.ownership-claim { min-width:180px; }
.ownership-transfer { position:relative; min-width:0; }
.ownership-claim button, .ownership-transfer summary { display:inline-block; cursor:pointer; border-radius:6px; padding:8px 12px; font-size:12px; font-weight:700; }
.ownership-transfer summary { background:#f7f9fc; border:1px solid #bac6d2; color:#273b50; list-style:none; white-space:nowrap; }
.ownership-transfer summary::-webkit-details-marker { display:none; }
.ownership-transfer summary::after { content:' ▾'; }
.ownership-transfer[open] summary::after { content:' ▴'; }
.ownership-transfer summary:focus-visible { outline:2px solid #3073b7; outline-offset:2px; }
.transfer-fields { position:absolute; z-index:25; top:calc(100% + 8px); right:0; display:grid; gap:7px; margin:0; padding:12px; background:#fff; border:1px solid #e1e5eb; border-radius:8px; min-width:230px; width:min(290px, calc(100vw - 90px)); box-shadow:0 8px 24px #17233724; }
.transfer-fields label { font-size:12px; font-weight:600; }
.transfer-fields select { width:100%; }
.transfer-fields button { margin-top:4px; }
.thread-ownership-actions .action-hint { margin:5px 0 0; }
@media(min-width:1100px) {
  .thread-header { flex-wrap:nowrap; }
}
/* La columna del chat se estrecha (panel de detalles, ventana de 1100 px): las acciones se
   compactan antes de que el nombre desaparezca. */
.thread-header { container-type:inline-size; container-name:thread-header; }
.thread-heading { min-width:120px; }
/* «Transferir este chat» y «Asignarme este chat» completos desde 1280 px; abreviados debajo. */
@media(max-width:1279px) {
  .thread-header .header-more { display:none; }
}
@container thread-header (max-width:760px) {
  .thread-header-actions { gap:6px; }
}
@container thread-header (max-width:560px) {
  .thread-title { gap:4px; }
  .thread-title h1 { min-width:5ch; }
  .thread-country { padding:1px 0; }
  .thread-header-actions { gap:4px; }
  .thread-owner,.thread-header .badge { padding-left:6px; padding-right:6px; }
  .thread-owner { font-size:11px; }
  .thread-title .chat-tags:has(.tag-chip) { min-width:26px; }
  /* «Transferir» solo con su icono (el nombre sigue en el title y para el lector). */
  .thread-header .ownership-transfer summary { font-size:0; padding:5px 8px; line-height:16px; }
  .thread-header .ownership-transfer summary::before { content:'⇄'; font-size:14px; font-weight:700; }
  .thread-header .ownership-transfer summary::after { content:none; }
  .thread-header .header-action { width:26px; height:26px; }
}
@media(max-width:1099px) {
  .thread-header { flex-wrap:wrap; }
}
@media(max-width:680px) {
  .thread-header { flex-wrap:wrap; gap:6px 8px; padding:6px 10px; }
  .thread-header-actions { flex-wrap:wrap; }
  .thread-header-actions { gap:6px; }
  .thread-header-actions .badge { align-self:flex-start; }
  .thread-header .ownership-transfer summary { padding:7px 8px; font-size:11px; }
  .transfer-fields { width:min(270px, calc(100vw - 72px)); }
}
.badge {
  background:#f0f0f3;
  border-radius:15px;
  padding:4px 9px;
  color:#55555d;
  font-size:11px;
  white-space:nowrap
}
.messages {
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fcfcfd
}
.message-history {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 18px;
  border-bottom:1px solid #e8e8eb
}
.message-history button { background:#f4f4f5; color:#202127; border:1px solid #dedee2; }
.message {
  max-width:min(75%,560px);
  border-radius:12px;
  padding:9px 11px;
  background:#eef1f5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.42
}
.message.in {
  align-self:flex-start
}
.message.out {
  align-self:flex-end;
  background:#2864c5;
  color:#fff
}
.message.note {
  align-self:center;
  background:#fff5dc;
  border:1px solid #eadfbe
}
.message-meta {
  font-size:11px;
  color:#707986;
  margin-top:5px;
  line-height:1.25
}
.message.out .message-meta {
  color:#d7e6ff
}
.message-actions {
  display:flex;
  gap:6px;
  margin-top:6px
}
.message-actions:empty {
  display:none
}
.message-reconcile {
  font-size:11px;
  padding:2px 8px;
  border-radius:4px;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer
}
/* «Deshacer (10 s)» bajo la burbuja propia, como enlace (prototipo «Bandeja limpia»). */
.message-actions .message-undo { padding:0; border:0; background:transparent; color:#2864c5; font-size:12px; font-weight:700; }
.message-actions .message-undo:hover:not(:disabled) { text-decoration:underline; filter:none; }
.message-actions .message-undo:disabled { background:transparent; border:0; color:#6b6f78; cursor:progress; }
.message.out .message-actions:has(.message-undo) { justify-content:flex-end; margin-top:2px; }
.message-body:empty {
  display:none
}
.message-attachments {
  display:grid;
  gap:9px;
  margin-top:6px
}
.message-attachments:empty {
  display:none
}
.attachment {
  display:grid;
  gap:6px;
  min-width:180px;
  max-width:100%
}
.attachment-label {
  font-size:11px;
  font-weight:650;
  overflow-wrap:anywhere
}
.attachment-status {
  font-size:12px;
  color:#666873
}
.message.out .attachment-status,.message.out .attachment-label {
  color:#fff
}
.message.out .attachment-status.error {
  color:#ffe0dc
}
.attachment video {
  display:block;
  max-width:100%;
  max-height:220px;
  border-radius:8px;
  object-fit:contain;
  background:#f5f5f6
}
.attachment-image-button { display:block; width:max-content; max-width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.attachment-image-button img { display:block; width:auto; height:auto; max-width:100%; max-height:220px; border-radius:8px; object-fit:contain; background:#f5f5f6; }
.attachment-image-button.attachment-sticker img { max-width:128px; max-height:128px; background:transparent; }
/* Medio cargado: solo se ve el medio y un enlace de descarga secundario. */
.message.media-ready .attachment-placeholder { display:none; }
.message.media-ready .message-attachments { margin-top:0; }
.attachment.attachment-ready { min-width:0; gap:3px; }
.attachment-ready .attachment-label { display:none; }
/* Fila de acciones del adjunto: «Descargar» · «Resumen» · «Procesar documento», todas iguales. */
.attachment-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.attachment .attachment-action { display:inline-flex; align-items:center; justify-content:center; gap:5px; box-sizing:border-box; min-height:28px; margin:0; padding:4px 10px; border:1px solid #c6c9d0; border-radius:7px; background:#fff; color:#202127; font-size:12px; font-weight:600; line-height:1.3; text-decoration:none; white-space:nowrap; cursor:pointer; opacity:1; }
.attachment .attachment-action:hover:not(:disabled) { background:#f3f5f8; filter:none; }
.attachment .attachment-action:focus-visible { outline:2px solid #3d75cc; outline-offset:2px; }
.attachment .attachment-action:disabled { background:#eceef1; color:#6b6f78; border-color:#e0e3e8; cursor:not-allowed; }
.attachment-image-button:focus-visible { outline:3px solid #2864c5; outline-offset:3px; }
.attachment audio {
  width:min(320px,100%);
  max-width:100%
}
.audio-transcript { display:grid; gap:3px; max-width:360px; padding:9px 11px;
  border-radius:9px; background:rgba(32,50,75,.07); white-space:pre-wrap;
  overflow-wrap:anywhere; line-height:1.4; font-size:13px; }
.audio-transcript-title { font-size:11px; font-weight:700; opacity:.72; }
.audio-transcript-pending { opacity:.75; }
.audio-transcript-error { color:#944032; }
.audio-summary-button.busy { opacity:.75; }
.audio-summary-icon { font-weight:700; }
.attachment-popup { position:fixed; z-index:46; top:0; left:0; display:flex; flex-direction:column; width:340px; max-height:480px; overflow:auto; padding:10px 12px 12px; border:1px solid #e1e4e9; border-radius:10px; background:#fff; color:#242a34; box-shadow:0 12px 32px rgba(20,24,33,.2); font-size:13px; line-height:1.4; }
.attachment-popup[hidden] { display:none; }
.attachment-popup-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.attachment-popup-header h2 { margin:0; font-size:13px; font-weight:700; }
.attachment-popup-close { flex:none; width:26px; height:26px; padding:0; border:0; border-radius:6px; background:transparent; color:#62636b; font-size:18px; line-height:1; }
.attachment-popup-body { display:grid; gap:8px; }
.attachment-popup-body p,.attachment-popup-body ul { margin:0; }
/* Pie fijo: «Cerrar» siempre visible aunque el resumen sea largo y haya que desplazarlo. */
.attachment-popup-footer { position:sticky; bottom:-12px; display:flex; justify-content:flex-end; margin:4px -12px -12px; padding:8px 12px 12px; background:#fff; border-top:1px solid #eef0f3; }
.attachment-popup-footer button { padding:6px 11px; font-size:12px; }
.attachment-popup-close:hover { background:#eef0f3; color:#242a34; filter:none; }
.audio-summary-warning { padding:6px 9px; border:1px solid #e9b949; border-radius:7px; background:#fff6dd; color:#6d4a00; font-weight:600; }
.audio-summary-lead { font-weight:600; }
.audio-summary-section h3 { margin:0 0 2px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#62636b; }
.audio-summary-who { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.audio-summary-tone { padding:1px 7px; border-radius:999px; font-size:11px; font-weight:650; background:#eef1f5; color:#3a4250; }
.audio-summary-tone.tone-preocupado { background:#fff1d6; color:#7a5200; }
.audio-summary-tone.tone-enfadado { background:#fde4e0; color:#944032; }
.audio-summary-peludos { display:grid; gap:4px; padding:0; list-style:none; }
.audio-summary-peludo { display:flex; align-items:flex-start; gap:6px; }
.audio-summary-species { flex:none; }
.audio-summary-peludo-detail { display:grid; }
.audio-summary-muted { color:#62636b; font-size:12px; }
.audio-summary-asks { padding-left:18px; }
.audio-summary-data-label { font-weight:600; }
.audio-summary-status.error { color:#944032; }
.attachment a {
  color:inherit;
  overflow-wrap:anywhere
}
.attachment-load {
  justify-self:start;
  padding:7px 10px;
  font-size:12px;
  background:#fff;
  color:#202127;
  border:1px solid #c6c9d0
}
.composer-notice { display:flex; align-items:center; gap:10px; margin:8px 14px 0; padding:6px 10px; border:1px solid #dfe6f2; border-radius:8px; background:#f3f6fb; color:#2f3d55; }
.composer-notice[hidden] { display:none; }
.composer-notice-text { flex:1 1 auto; min-width:0; }
.composer-notice .hint { margin:0; color:inherit; font-size:12.5px; line-height:1.35; }
.composer-notice .hint[hidden] { display:none; }
.composer-notice-action { flex:none; padding:5px 10px; border-radius:7px; font-size:12px; font-weight:700; white-space:nowrap; }
.composer-notice-action[hidden] { display:none; }
.composer {
  margin:6px 14px 12px;
  border:1px solid #d8dde5;
  border-radius:12px;
  box-shadow:0 1px 5px #15223810;
  padding:0;
  background:#fff
}
.composer:focus-within {
  border-color:#7fa3d9;
  box-shadow:0 0 0 2px #dfeafb
}
/* Estilo LiveChat: el texto arriba (64 px que crecen con el contenido hasta 220 px; lo ajusta
   autosizeComposer) y una sola barra de iconos debajo, con Enviar a la derecha. */
.composer textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  border:0;
  outline:0;
  resize:none;
  min-height:64px;
  max-height:220px;
  overflow-y:auto;
  padding:10px 12px 4px;
  border-radius:12px 12px 0 0;
  background:transparent;
  font-size:14px;
  line-height:1.4
}
.composer {
  position:relative;
  container-type:inline-size;
  container-name:composer
}
.composer-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:2px
}
.composer-toolbar { padding:2px 6px 6px; }
.composer-toolbar[hidden] { display:none; }
.composer-actions button {
  flex:none;
  white-space:nowrap;
  font-size:12px;
  padding:5px 9px
}
.composer-input-row { display:block; }
.composer-input-row[hidden] { display:none; }
.composer-input-row textarea { min-width:0; }
/* Iconos de 30 px con nombre al pasar el ratón (data-tip) y aria-label. */
.composer-actions .composer-icon { position:relative; display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:#5c6370; }
.composer-actions .composer-icon:hover:not(:disabled),.composer-actions .composer-icon:focus-visible,.composer-actions .composer-icon[aria-expanded="true"] { background:#eef2f8; color:#202127; filter:none; }
.composer-actions .composer-icon:disabled { background:transparent; border:0; color:#5c6370; opacity:.4; cursor:default; }
.composer-icon svg,.composer-mode svg,.mode-menu svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Un único aviso flotante para todos los [data-tip] (static/tooltip.js): nunca dos a la vez. */
.ui-tip { position:fixed; z-index:80; top:0; left:0; max-width:240px; padding:3px 7px; border-radius:6px; background:#202127; color:#fff; font-size:11px; font-weight:500; line-height:16px; white-space:nowrap; pointer-events:none; }
.ui-tip[hidden] { display:none; }
/* Foco del teclado discreto en los iconos (solo :focus-visible; un clic no deja marco). */
.composer-actions .composer-icon:focus { outline:none; }
.composer-actions .composer-icon:focus-visible { outline:none; box-shadow:inset 0 0 0 2px #3d75cc8c; }
/* «Mensaje ▾»: elige mensaje al cliente o nota interna (sustituye a la casilla). */
.mode-anchor { position:relative; flex:none; margin-right:4px; }
.composer-actions .composer-mode { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:#202127; font-size:13px; font-weight:600; }
.composer-actions .composer-mode:hover:not(:disabled),.composer-actions .composer-mode[aria-expanded="true"] { background:#eef2f8; filter:none; }
.composer-actions .composer-mode:disabled { background:transparent; border:0; opacity:.45; cursor:default; }
.composer-mode-icon { display:inline-grid; place-items:center; color:#5c6370; }
.composer-mode-icon[hidden] { display:none; }
.composer-mode-chev { font-size:10px; color:#5c6370; }
.mode-menu { position:absolute; z-index:30; left:0; bottom:calc(100% + 6px); display:grid; min-width:190px; padding:4px; border:1px solid #d8dde5; border-radius:10px; background:#fff; box-shadow:0 10px 24px #1522382e; }
.mode-menu[hidden] { display:none; }
.composer-actions .mode-menu button { display:flex; align-items:center; gap:8px; padding:7px 10px; border:0; border-radius:7px; background:transparent; color:#202127; font-size:13px; font-weight:500; text-align:left; }
.composer-actions .mode-menu button:hover,.composer-actions .mode-menu button:focus-visible { background:#eef2f8; filter:none; }
.composer-actions .mode-menu button[aria-checked="true"] { font-weight:700; }
.composer-draft { margin-left:auto; margin-right:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#6b6f78; }
.composer-actions #send { flex:none; margin-left:auto; min-width:72px; padding:6px 14px; border-radius:9px; font-size:13px; }
.composer-draft:not(:empty) + #send { margin-left:0; }
.composer-locked { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:8px; padding:10px 12px; border:1px dashed #cfd5de; border-radius:9px; background:#f7f8fa; color:#4b5260; font-size:13px; }
.composer-locked[hidden] { display:none; }
.composer-locked-text { flex:1 1 220px; }
.composer-locked-actions { display:flex; gap:6px; flex:none; }
.composer-locked-actions button { padding:7px 12px; font-size:12px; }
.composer.locked { background:#fbfbfc; }
/* Respuestas guardadas: el icono ⚡ abre la lista con un buscador encima; «#atajo» en el texto
   abre la misma lista sin buscador. Ambos se anclan al redactor entero. */
.saved-reply-picker { position:static; flex:none; display:flex; }
.saved-reply-picker input[hidden] { display:none; }
.saved-reply-picker input:not([hidden]) { position:absolute; z-index:21; bottom:calc(100% + 6px); left:8px; box-sizing:border-box; width:min(420px,calc(55% - 12px)); padding:7px 10px; border:1px solid #7fa3d9; border-radius:9px; background:#fff; box-shadow:0 8px 24px #15223826; font-size:13px; }
.saved-reply-picker input:not([hidden]) ~ .saved-reply-list { bottom:calc(100% + 46px); }
.composer-bar .emoji-picker { position:static; margin-right:0; }
@container composer (max-width:420px) {
  .composer-draft { display:none; }
  .composer-actions .composer-mode #mode-label { display:none; }
}
/* Modo «Nota interna»: el texto se pone amarillo y la etiqueta lo dice para no confundirse. */
.composer.note-mode { border-color:#e6c65c; }
.composer.note-mode:focus-within { border-color:#c9a227; box-shadow:0 0 0 2px #f6e7a8; }
.composer.note-mode textarea { background:#fff8db; }
.composer.note-mode .note-mode-label:not([hidden]) ~ .composer-input-row textarea { border-radius:0; }
.composer.note-mode .note-mode-label { background:#fff8db; }
.note-mode-label { margin:0; padding:6px 12px 0; border-radius:12px 12px 0 0; font-size:12px; font-weight:700; color:#6b4d00; }
.note-mode-label[hidden] { display:none; }
#send[aria-busy="true"] { cursor:progress; }
.saved-reply-list {
  position:absolute;
  /* Anchored to the whole composer: opens above it at full width, never clipped by the
     details column whatever the position of the search box. */
  bottom:calc(100% + 6px);
  left:8px;
  z-index:20;
  width:min(420px,calc(55% - 12px));
  max-height:320px;
  overflow:auto;
  margin:0;
  padding:4px;
  list-style:none;
  background:#fff;
  border:1px solid #d8dde5;
  border-radius:9px;
  box-shadow:0 8px 24px #15223826
}
.saved-reply-list[hidden] { display:none; }
.saved-reply-option { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1px 8px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.saved-reply-option .saved-reply-detail { grid-column:1 / -1; }
.saved-reply-option.active,.saved-reply-option:hover { background:#e8f0fc; }
.saved-reply-title { font-size:13px; font-weight:600; color:#202127; overflow-wrap:anywhere; }
.saved-reply-detail { font-size:11px; color:#5c606b; overflow-wrap:anywhere; }
.saved-reply-empty { padding:6px 8px; font-size:12px; color:#5c606b; }
.saved-reply-actions { display:flex; gap:6px; padding:6px 4px 2px; border-top:1px solid #e5e8ed; }
.saved-reply-actions button { padding:5px 7px; font-size:11px; }
.saved-reply-preview { position:absolute; z-index:21; bottom:calc(100% + 6px); right:8px; display:grid; gap:3px; width:min(360px,calc(45% - 12px)); max-height:320px; overflow:auto; padding:10px 12px; border:1px solid #d8dde5; border-radius:9px; background:#fff; box-shadow:0 8px 24px #15223826; font-size:12px; }
.saved-reply-preview[hidden] { display:none; }
.saved-reply-preview strong { font-size:13px; overflow-wrap:anywhere; }
.saved-reply-preview-aliases { color:#5c606b; font-size:11px; overflow-wrap:anywhere; }
.saved-reply-preview p { margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; color:#30343c; }
.saved-reply-badge { justify-self:start; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:600; line-height:16px; white-space:nowrap; background:#eef0f4; color:#3d4452; }
.saved-reply-badge[data-kind="livechat"] { background:#fff1e0; color:#8a4b00; }
.saved-reply-badge[data-kind="team"] { background:#e6f1ea; color:#20633a; }
.saved-reply-badge[data-kind="mine"] { background:#e8eefc; color:#2a4c9a; }
#save-reply-open { flex:0 0 auto; }
.media-upload { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 10px; border:1px solid #ccd6e6; border-radius:8px; background:#f6f9ff; }
.media-upload.hidden { display:none; }
.media-preview { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border-radius:6px; background:#e7edf7; color:#40516b; font-size:10px; text-align:center; }
.media-preview img { width:100%; height:100%; object-fit:cover; }
.media-preview.media-preview-wide { width:min(200px, 35vw); height:auto; min-height:54px; overflow:visible; }
.media-preview audio { width:100%; min-height:54px; }
.media-preview video { display:block; width:100%; max-height:112px; border-radius:6px; background:#18202b; }
.media-upload strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.media-upload .hint { margin:2px 0 0; }
.media-upload button { margin:0; }
.composer.drag-over { outline:2px dashed #2864c5; outline-offset:-5px; background:#f5f9ff; }
.composer .hint {
  margin:5px 0 0
}
.composer .media-upload { margin:4px 8px; }
.composer .hint:empty { display:none; }
.details {
  border-left:1px solid #e6e6e9;
  min-width:0;
  overflow:auto
}
.details #details-title {
  height:50px;
  border-bottom:1px solid #e6e6e9;
  display:flex;
  align-items:center;
  padding:0 15px
}
.detail-tabs { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:8px 10px 0; border-bottom:1px solid #e8ded4; background:#fbf8f4; }
.detail-tab { min-width:0; padding:10px 5px 11px; border:0; border-bottom:3px solid transparent; border-radius:7px 7px 0 0; background:transparent; color:#6b584c; font-weight:650; font-size:12px; cursor:pointer; }
.detail-tab:hover:not(:disabled) { background:#f1e8de; }
.detail-tab[aria-selected="true"] { border-bottom-color:#73482f; color:#3d2d24; background:#f4e9dc; }
.detail-tab:disabled { opacity:.55; cursor:not-allowed; }
.detail-tab:focus-visible,.knowledge-panel button:focus-visible,.knowledge-panel input:focus-visible,.knowledge-panel select:focus-visible,.knowledge-panel a:focus-visible { outline:2px solid #875d3f; outline-offset:2px; }
.details [role="tabpanel"][hidden],.knowledge-panel [hidden] { display:none !important; }
.knowledge-panel { padding:0 14px 24px; min-width:0; color:#352d29; background:#faf8f5; }
.knowledge-heading { margin:0 -14px 16px; padding:20px 17px 16px; background:#fffdfb; border-bottom:1px solid #e9dfd5; }
.knowledge-brand { display:block; color:#80583a; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.knowledge-heading h2 { margin:5px 0 0; font-size:21px; line-height:1.2; letter-spacing:-.03em; }
.knowledge-heading p { margin:5px 0 0; color:#756b65; font-size:12px; line-height:1.4; }
.knowledge-search { display:flex; gap:6px; margin-bottom:20px; }
.knowledge-search input { flex:1; min-width:0; padding:9px 10px; border:1px solid #d7c9bd; border-radius:8px; background:#fff; font:inherit; font-size:13px; }
.knowledge-search button { flex:none; padding:8px 10px; border:0; border-radius:8px; background:#65452f; color:#fff; font-size:12px; font-weight:650; cursor:pointer; }
.knowledge-search #knowledge-clear { background:#efe6dc; color:#65452f; }
.knowledge-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 12px; }
.knowledge-section-head h3 { margin:0; font-size:15px; line-height:1.3; }
.knowledge-section-head span { color:#8a7769; font-size:11px; }
.knowledge-status { min-height:1.3em; margin:6px 0; color:#6d625c; font-size:12px; line-height:1.45; }
.knowledge-status:empty { display:none; }
.knowledge-category-cards { display:grid; gap:12px; }
.knowledge-category-card { min-width:0; padding:13px 13px 7px; border:1px solid #e4dcd3; border-radius:11px; background:#f2f0ed; }
.knowledge-category-card.is-child { margin-left:9px; }
.knowledge-card-head h4 { margin:0 0 5px; }
.knowledge-card-parent { margin:0 0 3px; color:#8b796e; font-size:10px; }
.knowledge-card-title { border:0; padding:0; background:none; color:#4d3224; text-align:left; font-size:14px; font-weight:750; cursor:pointer; }
.knowledge-card-title:hover,.knowledge-view-all:hover,.knowledge-crumbs button:hover { text-decoration:underline; }
.knowledge-card-status { margin:9px 0; color:#756b65; font-size:11px; }
.knowledge-card-retry { margin:2px 0 8px; padding:5px 8px; font-size:11px; }
.knowledge-preview-list,.knowledge-results { list-style:none; padding:0; margin:0; }
.knowledge-preview-list li { border-top:1px solid #e1dbd5; }
.knowledge-preview-row { display:block; width:100%; border:0; padding:9px 1px; background:transparent; color:#4d4741; text-align:left; font-size:12px; font-weight:500; line-height:1.35; cursor:pointer; overflow-wrap:anywhere; }
.knowledge-preview-row:hover { color:#754730; }
.knowledge-view-all { width:100%; border:0; border-top:1px solid #e1dbd5; padding:10px 1px 5px; background:none; color:#754730; text-align:left; font-size:11px; font-weight:750; cursor:pointer; }
.knowledge-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:2px 0 17px; color:#89796e; font-size:11px; line-height:1.4; }
.knowledge-crumbs button { border:0; padding:0; background:none; color:#754730; font:inherit; cursor:pointer; }
.knowledge-crumbs [aria-current] { color:#695e56; overflow-wrap:anywhere; }
.knowledge-results { display:grid; gap:7px; }
.knowledge-results li { min-width:0; }
.knowledge-list-item { display:block; width:100%; padding:11px 12px; border:1px solid #e4dcd3; border-radius:9px; background:#fff; color:#3e332d; text-align:left; font-size:13px; font-weight:650; line-height:1.35; cursor:pointer; overflow-wrap:anywhere; }
.knowledge-list-item:hover { border-color:#b79170; background:#fffaf4; }
.knowledge-list-item small { display:block; margin-top:5px; color:#83756b; font-size:11px; font-weight:400; }
.knowledge-pager { display:flex; align-items:center; justify-content:space-between; gap:4px; margin-top:12px; font-size:11px; }
.knowledge-pager button { padding:6px 8px; font-size:11px; }
.knowledge-pager button:disabled { opacity:.4; }
.knowledge-reader { padding-top:14px; }
.knowledge-back { border:0; padding:0 0 13px; background:none; color:#754730; font-size:12px; font-weight:700; cursor:pointer; }
.knowledge-article-card { padding:17px 16px 18px; border:1px solid #e4dcd3; border-radius:11px; background:#fff; box-shadow:0 2px 12px #3f261b0b; }
.knowledge-reader h3 { margin:5px 0 6px; font-size:19px; line-height:1.3; overflow-wrap:anywhere; }
.knowledge-meta { margin:0 0 16px; color:#7b6d63; font-size:11px; line-height:1.4; }
.knowledge-article-body { font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.knowledge-article-body :is(h2,h3,h4) { margin:16px 0 6px; line-height:1.3; }
.knowledge-article-body p { margin:0 0 11px; }
.knowledge-article-body :is(ul,ol) { padding-left:20px; }
.knowledge-article-body img { display:block; max-width:100%; height:auto; margin:8px 0; border-radius:5px; }
.knowledge-article-body pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:8px; background:#f7f1e9; border-radius:5px; }
.knowledge-article-body table { display:block; width:100%; overflow:auto; border-collapse:collapse; }
.knowledge-article-body :is(th,td) { border:1px solid #e7dcd0; padding:4px; }
.knowledge-article-body a,.knowledge-external a { color:#754730; text-decoration:underline; }
.knowledge-full-link { display:block; margin:18px 0 0; padding:12px 0 0; border-top:1px solid #e8ded3; font-size:12px; font-weight:650; color:#754730; text-decoration:underline; }
.knowledge-external { padding:18px 2px; font-size:12px; line-height:1.5; }
.contact-card {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  box-sizing:border-box;
  padding:8px 15px;
  border-bottom:1px solid #e6e6e9
}
.contact-text { min-width:0; }
.contact-avatar,.welcome-avatar {
  width:43px;
  height:43px;
  margin:auto;
  border-radius:50%;
  background:#a46cf5;
  color:white;
  display:grid;
  place-items:center;
  font-size:19px
}
.contact-card .contact-avatar {
  flex:none;
  width:32px;
  height:32px;
  margin:0;
  font-size:14px
}
.contact-card h3 {
  margin:0 0 1px;
  font-size:14px;
  line-height:1.25;
  overflow-wrap:anywhere
}
.contact-card p {
  margin:0;
  color:#5f6170;
  font-size:12px;
  line-height:1.3;
  overflow-wrap:anywhere
}
.detail-section {
  padding:8px 15px;
  border-bottom:1px solid #e6e6e9
}
.detail-section h3 {
  margin:0 0 7px;
  font-size:13px;
  color:#343e4c
}
.topic-section select { width:100%; }
.topic-section .hint { min-height:1em; margin:6px 0 0; }
.details dl {
  display:grid;
  grid-template-columns:79px 1fr;
  gap:7px;
  font-size:12px;
  margin:0
}
.details dt {
  color:#6c6e78
}
.details dd {
  margin:0;
  overflow-wrap:anywhere
}
.details label {
  display:block;
  margin:7px 0 3px
}
.details select {
  width:100%
}
.detail-section button {
  margin-top:8px
}
.action-hint { margin:6px 0 0; }
.page-workspace {
  overflow:auto
}
.page-content {
  max-width:1180px;
  margin:0 auto;
  padding:48px 34px
}
.page-content h1 {
  font-size:25px
}
.page-content h2 {
  font-size:17px;
  margin:34px 0 12px
}
.profile-content { max-width:none; }
.profile-columns {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  margin-top:20px
}
.profile-column {
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0
}
@media(min-width:1100px) {
  .profile-columns { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
}
.profile-card {
  background:#f7f7f8;
  border:1px solid #e5e5e8;
  border-radius:12px;
  padding:18px 22px;
  margin:0
}
.profile-card h2 { margin:0 0 16px; }
.profile-card dl { display:grid; grid-template-columns:minmax(130px,35%) 1fr; gap:12px 18px; margin:0; }
.profile-card dt { color:#62636b; }
.profile-card dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.profile-card button { margin-top:8px; }
#template-dialog {
  width:min(560px,calc(100vw - 24px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border:1px solid #dddde3;
  border-radius:14px;
  padding:24px;
  box-shadow:0 24px 70px #0005
}
#template-dialog::backdrop { background:#0009; }
#image-dialog { width:calc(100vw - 32px); height:calc(100dvh - 32px); max-width:none; max-height:none; padding:0; border:0; border-radius:12px; overflow:hidden; background:#17181c; color:#fff; }
#image-dialog::backdrop { background:#000c; }
.image-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:#24252a; }
.image-dialog-header h2 { margin:0; font-size:14px; }
.image-dialog-header div { display:flex; gap:8px; }
.image-dialog-header button { padding:7px 10px; color:#fff; background:#3a3c43; border:1px solid #60626a; }
.image-dialog-content { width:100%; height:calc(100% - 52px); overflow:auto; display:flex; justify-content:center; align-items:center; }
.image-dialog-content img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
#image-dialog.image-original-size .image-dialog-content { display:block; }
#image-dialog.image-original-size .image-dialog-content img { max-width:none; max-height:none; }
#template-form { display:grid; gap:10px; }
#template-form h2 { margin:0; font-size:21px; }
#template-form h3 { margin:10px 0 0; font-size:14px; }
#template-form label { font-weight:600; font-size:13px; }
#template-form select,#template-form input[type="text"],#template-form input[type="tel"] { width:100%; }
#template-form .hint { margin:0; }
#template-archive-fields,#template-parameters { display:grid; gap:9px; }
#template-archive-fields { padding:12px; border:1px solid #e4e4e8; border-radius:8px; }
#template-archive-fields .check-label { display:flex; align-items:flex-start; gap:8px; font-weight:500; }
.template-mode { background:#f2f3f6; border-radius:7px; padding:10px; margin:0; }
.template-sender-label { margin:0; font-size:13px; font-weight:600; }
.template-sender { margin:0; padding:8px 10px; border:1px solid #d8dde4; border-radius:7px; background:#f7f7f8; font-weight:600; color:#242a34; }
#template-queue:empty { display:none; }
.template-preview { white-space:pre-wrap; background:#f8f8f9; border:1px solid #e4e4e8; border-radius:8px; padding:12px; min-height:72px; margin:0; overflow-wrap:anywhere; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
#saved-reply-dialog { width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #dddde3; border-radius:14px; padding:24px; box-shadow:0 24px 70px #0005; }
#saved-reply-dialog::backdrop { background:#0009; }
.saved-reply-form { display:grid; gap:8px; }
.saved-reply-form h2 { margin:0 0 4px; font-size:20px; }
.saved-reply-form label { font-weight:600; font-size:13px; margin-top:4px; }
.saved-reply-form input,.saved-reply-form select,.saved-reply-form textarea { width:100%; }
.saved-reply-form textarea { resize:vertical; min-height:110px; }
.note-revision-form { display:grid; gap:10px; width:min(520px,calc(100vw - 48px)); }
.note-revision-form h2 { margin:0; font-size:20px; }
.note-revision-form label { font-size:13px; font-weight:650; }
.note-revision-form textarea { width:100%; min-height:160px; resize:vertical; }
.note-revision-original { border:1px solid #e1e4e9; border-radius:8px; padding:9px 12px; font-size:12px; }
.note-revision-original summary { cursor:pointer; color:#3157a2; font-weight:650; }
.note-revision-original h3 { margin:12px 0 4px; font-size:12px; }
.note-revision-original p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-revision-original ol { max-height:180px; margin:5px 0 0; padding-left:22px; overflow:auto; }
.note-revision-original li + li { margin-top:8px; }
.note-revision-original li strong { display:block; font-weight:650; }
.saved-reply-form .hint { margin:0; }
.saved-replies-card { margin-top:20px; }
.saved-replies-card .section-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.saved-replies-card .section-title-row h2 { margin:0; }
.saved-replies-card .section-title-row button { margin-top:0; }
.saved-replies-manage { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.saved-replies-manage:empty { display:none; }
.saved-reply-manage-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:start; background:#fff; border:1px solid #e3e5ea; border-radius:9px; padding:10px 12px; }
.saved-reply-manage-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.saved-reply-manage-head strong { overflow-wrap:anywhere; }
.saved-reply-manage-head code { font-size:12px; background:#f2f3f6; border-radius:5px; padding:1px 6px; }
.saved-reply-manage-body { grid-column:1; margin:0; font-size:13px; color:#4a4f5a; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.saved-reply-manage-actions { grid-column:2; grid-row:1 / span 2; display:flex; gap:6px; }
.saved-reply-manage-actions button { margin-top:0; padding:5px 10px; font-size:12px; }
.saved-replies-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:8px 12px; margin:14px 0; }
.saved-replies-toolbar label { font-size:12px; font-weight:600; }
.saved-replies-toolbar input,.saved-replies-toolbar select { min-height:34px; }
.saved-replies-toolbar input { min-width:min(300px,100%); }
.saved-replies-page .section-head { align-items:flex-start; }
.saved-replies-page .section-head > button { flex:none; }
.saved-replies-page .saved-replies-toolbar { align-items:center; gap:12px; }
.saved-replies-tabs { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid #dfe3ea; border-radius:9px; background:#f2f3f6; }
.saved-replies-tab { margin:0; padding:7px 12px; border:0; border-radius:6px; background:transparent; color:#525966; font-size:13px; font-weight:650; }
.saved-replies-tab.active { background:#fff; color:#1b4fe8; box-shadow:0 1px 3px rgba(20,24,33,.12); }
.saved-replies-page .saved-replies-toolbar input { flex:1 1 240px; min-width:min(220px,100%); }
.saved-replies-page .saved-replies-manage { gap:0; border:1px solid #e3e5ea; border-radius:10px; overflow:hidden; }
.saved-replies-page .saved-reply-manage-row { grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; border:0; border-radius:0; border-bottom:1px solid #e8e9ed; padding:15px 18px; }
.saved-replies-page .saved-reply-manage-row:last-child { border-bottom:0; }
.saved-reply-manage-shortcuts { display:flex; flex-wrap:wrap; align-items:center; gap:5px; grid-column:1; }
.saved-reply-manage-shortcuts code { display:inline-block; padding:2px 7px; border:1px solid #dee5f5; border-radius:5px; background:#eef3ff; color:#2652a4; font-size:12px; }
.saved-reply-manage-preview { grid-column:1; min-width:0; }
.saved-reply-manage-body.expanded { display:block; overflow:visible; }
.saved-reply-expand { margin:3px 0 0; padding:0; border:0; background:transparent; color:#1b4fe8; font-size:12px; font-weight:600; }
.saved-reply-manage-actions { grid-column:2; grid-row:1 / span 3; align-self:center; }
@media (max-width:640px) {
  .saved-replies-page .section-head { align-items:flex-start; flex-wrap:wrap; }
  .saved-replies-page .saved-reply-manage-row { grid-template-columns:1fr; }
  .saved-reply-manage-actions { grid-column:1; grid-row:auto; justify-self:start; }
}
.subtle.danger { color:#a3261b; border-color:#efc9c4; }
.welcome {
  display:flex;
  gap:15px;
  align-items:center;
  margin:6px 0 34px
}
.welcome-avatar {
  margin:0;
  background:#c8a575
}
.welcome h1 {
  margin:0 0 4px
}
.welcome p {
  margin:0;
  color:#6b6f78
}
.summary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px
}
.metric-card {
  padding:22px 20px;
  background:#f5f5f6;
  border-radius:9px;
  min-height:142px;
  display:flex;
  flex-direction:column;
  gap:9px
}
.metric-card span {
  font-weight:600;
  font-size:13px
}
.metric-card strong {
  font-size:42px;
  line-height:1.1
}
.metric-card small {
  color:#6b6f78
}
.wide-content {
  max-width:none
}
.table-wrap {
  overflow:auto;
  border-top:1px solid #e6e6e9;
  margin-top:20px
}
table {
  border-collapse:collapse;
  width:100%;
  text-align:left
}
th {
  font-size:12px;
  color:#767782;
  font-weight:500
}
th,td {
  padding:14px;
  border-bottom:1px solid #e8e8eb
}
td {
  font-size:13px
}
.team-name {
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:650
}
.table-avatar {
  width:30px;
  height:30px
}
.is-available {
  color:#008748
}
.is-unavailable {
  color:#a2a2aa
}
.report-list {
  border:1px solid #e6e6e9;
  border-radius:9px
}
.report-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:16px;
  border-bottom:1px solid #e6e6e9
}
.report-row:last-child {
  border:0
}
.report-row span {
  color:#6b6f78
}
.reports-content { max-width:1240px; }
.reports-content .section-head { align-items:start; gap:18px; }
.reports-content h2 { margin:28px 0 8px; }
.reports-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; margin:24px 0 12px;
  padding:16px; border:1px solid #e5dfd8; border-radius:12px; background:#faf8f5; }
.reports-filters label { display:grid; gap:6px; color:#5d554d; font-size:12px; font-weight:650; }
.reports-filters select,.reports-filters input { width:100%; min-width:0; padding:8px 10px; border:1px solid #d5cbc0;
  border-radius:7px; color:#29231e; background:#fff; }
.reports-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 18px; border-bottom:1px solid #ded5ca; }
.reports-tabs button { border-radius:7px 7px 0 0; padding:10px 16px; color:#5b5147; background:transparent; }
.reports-tabs button[aria-selected="true"] { color:#3e2f22; background:#f2e9dc; box-shadow:inset 0 -3px #84633e; }
.reports-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; margin:14px 0 18px; }
.reports-metric,.reports-info { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:112px;
  padding:16px; border:1px solid #e4d9ca; border-radius:10px; text-align:left; color:#332a22; background:#fffdfb; }
.reports-metric:hover { border-color:#9f805c; background:#faf5ed; filter:none!important; }
.reports-metric strong,.reports-info strong { font-size:27px; line-height:1.1; font-weight:700; color:#332a22; }
.reports-metric-label { font-size:13px; font-weight:650; }
.reports-metric small,.reports-info small { color:#73695f; font-size:12px; line-height:1.35; }
.reports-list-button { display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%;
  padding:12px 16px; border-bottom:1px solid #e8dfd5; border-radius:0; text-align:left;
  color:#332a22; background:#fff; font-weight:400; }
.reports-list-button:last-child { border-bottom:0; }
.reports-list-button:hover { background:#faf5ed; filter:none!important; }
.reports-list-button span,.reports-list-button small { color:#706961; font-size:12px; }
.reports-team-row { padding:16px; border-bottom:1px solid #e8dfd5; }
.reports-team-row:last-child { border-bottom:0; }
.reports-team-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:10px; }
.reports-team-actions .reports-metric { min-height:95px; }
.reports-empty { margin:0; padding:16px; color:#706961; }
.reports-cases { margin-top:30px; padding:20px; border:1px solid #dbcbb8; border-radius:12px; background:#faf8f5; }
.reports-cases .section-head h2 { margin:0; }
.reports-pager { display:flex; justify-content:center; align-items:center; gap:16px; margin:16px 0 0; }
.reports-usage { margin-top:30px; padding-top:16px; border-top:1px solid #e6ded4; }
.reports-usage summary { cursor:pointer; font-weight:650; color:#5a432e; }
.report-usage-heading { padding:10px 16px; font-size:12px; font-weight:650; color:#5a432e; background:#faf8f5; }
.report-usage-purpose { padding:10px 16px; font-size:13px; flex-wrap:wrap; }
.archive-workspace {
  display:grid;
  grid-template-columns:minmax(290px,30%) 1fr
}
.conversation-archive-list { display:grid; gap:6px; margin:8px 0; }
.conversation-archive-list button { text-align:left; white-space:normal; overflow-wrap:anywhere; }
.conversation-archive-events { display:grid; gap:8px; margin:10px 0; max-height:380px; overflow:auto; }
.conversation-archive-event { padding:8px; border:1px solid #e4e4e8; border-radius:8px; overflow-wrap:anywhere; }
.conversation-archive-event small { color:#666873; }
.conversation-archive-event p { margin:5px 0 0; white-space:pre-wrap; }
.archive-workspace .sidebar {
  padding:16px
}
.archive-workspace .sidebar h2 {
  margin:0 0 16px;
  font-size:18px
}
.archive-search {
  display:grid;
  gap:8px
}
.archive-search.hidden { display:none }
#recovery-controls { display:grid; gap:8px; margin-bottom:14px }
#recovery-controls.hidden { display:none }
#recovery-actions { display:grid; gap:8px; margin:12px 0 }
#recovery-actions.hidden { display:none }
.recovery-sidebar-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.recovery-sidebar-heading h2 { margin:0; }
.recovery-workspace .conversation-item { width:100%; display:grid; gap:5px; padding:11px 12px; border-bottom:1px solid #ececef; border-radius:0; text-align:left; }
.recovery-workspace .conversation-item.selected { background:#eef0f4; box-shadow:inset 3px 0 #2864c5; }
.recovery-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.recovery-item-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recovery-workspace .conversation-secondary { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#666f7d; line-height:1.4; }
.recovery-help-toggle { flex:none; width:28px; height:28px; padding:0; border:1px solid #cbd3de; border-radius:50%; background:#fff; color:#385a86; font-family:Georgia,serif; font-size:16px; font-weight:700; }
.recovery-help { margin:0 0 14px; padding:10px 11px; border:1px solid #dbe5f2; border-radius:8px; background:#f4f8fe; line-height:1.4; }
.recovery-help[hidden] { display:none; }
.recovery-detail { min-width:0; min-height:0; overflow:hidden; }
.recovery-detail h1 { font-size:20px; }
#recovery-chat-detail:not(.hidden) { display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,30%,380px); height:100%; min-height:0; }
.recovery-thread-panel { min-width:0; min-height:0; display:flex; flex-direction:column; }
.recovery-thread-header { padding:14px 20px; border-bottom:1px solid #ececef; }
.recovery-detail #recovery-threads { display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px; margin:0; border-bottom:1px solid #ececef; }
.recovery-detail #recovery-threads button { padding:5px 10px; border-radius:999px; font-size:12px; }
.recovery-detail #recovery-threads button[aria-current="true"] { color:#1f3f86; background:#e8eefb; border-color:#bdcdeb; }
.recovery-detail .messages { flex:1; min-height:0; overflow:auto; padding:16px 20px; }
.recovery-context { min-width:0; overflow:auto; padding:18px 16px; border-left:1px solid #ececef; background:#fafafb; }
.recovery-context h2 { margin:0 0 12px; font-size:14px; }
.recovery-context .hint { margin:8px 0; line-height:1.4; overflow-wrap:anywhere; }
.recovery-context button { width:100%; }
.recovery-send-action { padding-top:12px; border-top:1px solid #e4e7ec; }
@media(max-width:1050px) {
  #recovery-chat-detail:not(.hidden) { grid-template-columns:minmax(0,1fr); overflow:auto; }
  .recovery-detail .messages { flex:none; min-height:45vh; max-height:60vh; }
  .recovery-context { border-left:0; border-top:1px solid #ececef; }
}
.archive-search label {
  font-size:12px;
  color:#666873
}
.archive-heading {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px
}
.archive-heading h1 { margin:0 }
.archive-channel-badge {
  display:inline-flex;
  width:max-content;
  align-items:center;
  border:1px solid #d8dce4;
  border-radius:999px;
  padding:2px 8px;
  background:#f3f5f8;
  color:#46505e;
  font-size:11px;
  font-weight:650;
  line-height:1.5
}
.archive-channel-badge svg { width:17px; height:17px; display:block; fill:currentColor; }
.archive-channel-badge:has(svg) { width:26px; height:26px; justify-content:center; padding:3px; font-size:0; }
.archive-channel-badge[data-channel="whatsapp"] {
  border-color:#b8dfc8;
  background:#eaf7ef;
  color:#276a40
}
.archive-channel-badge[data-channel="instagram"] {
  border-color:#e5c9e0;
  background:#fbf0f8;
  color:#7c3e73
}
.archive-channel-badge[data-channel="messenger"] {
  border-color:#c5d9f4;
  background:#eef5ff;
  color:#315f98
}
.archive-channel-badge[data-channel="web"] {
  border-color:#c8dce5;
  background:#eef7fa;
  color:#366477
}
.archive-workspace .conversation-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px
}
.archive-workspace .conversation-item strong {
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.archive-workspace .conversation-secondary {
  max-width:100%;
  margin-top:0;
  font-size:12px
}
.archive-pager {
  display:flex;
  justify-content:center;
  gap:8px;
  padding:12px
}
.archive-detail {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden
}
.archive-detail h1 {
  font-size:20px
}
.toast {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  background:#2a2a30;
  color:white;
  padding:11px 16px;
  border-radius:8px;
  box-shadow:0 6px 20px #0003;
  max-width:90vw;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer
}
.toast.hidden { display:none; }
/* Error: rojo y se queda hasta que se cierra (× o clic en el aviso). */
.toast.error { background:#8f1d14; color:#fff; padding-right:8px; }
.toast-text { overflow-wrap:anywhere; }
.toast-close { display:none; flex:none; width:26px; height:26px; padding:0; border-radius:6px; background:transparent; color:inherit; font-size:18px; line-height:1; }
.toast.error .toast-close { display:inline-grid; place-items:center; }
.toast-close:hover:not(:disabled) { background:#ffffff26; filter:none; }
@media(max-width:1050px) {
  .workspace,.workspace.knowledge-open {
    grid-template-columns:260px minmax(320px,1fr);
    grid-template-rows:minmax(0,1fr) minmax(180px,35%)
  }
  .details {
    display:block;
    grid-column:1/-1;
    max-height:none;
    border-left:0;
    border-top:1px solid #e6e6e9
  }
  .page-content {
    padding:32px 24px
  }
}
@media(max-width:680px) {
  .app-shell {
    grid-template-columns:48px 1fr
  }
  .icon-rail nav button {
    width:38px
  }
  .topbar {
    min-height:116px
  }
  .presence-banner {
    height:44px;
    padding:5px 8px;
    font-size:11px;
    gap:7px;
    text-align:center
  }
  .presence-banner button {
    font-size:11px;
    padding:7px
  }
  .identity-profile {
    display:none
  }
  .topbar-lower {
    height:54px;
    grid-template-columns:minmax(0,1fr) 64px;
    grid-template-rows:32px 18px;
    gap:4px 8px;
    padding:0 8px
  }
  .global-search {
    grid-column:1;
    grid-row:1;
    width:100%
  }
  .alert-count {
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    padding-left:0;
    font-size:11px
  }
  .identity {
    grid-column:2;
    grid-row:1;
    justify-self:end;
    height:32px
  }
  .workspace {
    display:flex;
    flex-direction:column;
    overflow:auto
  }
  .workspace .sidebar {
    max-height:40vh;
    min-height:170px
  }
  .thread {
    height:56vh;
    min-height:350px;
    flex:none
  }
  .details {
    flex:none;
    overflow:visible
  }
  .archive-workspace {
    display:block;
    overflow:auto
  }
  .archive-workspace .sidebar {
    max-height:40vh
  }
  .page-content {
    padding:24px 16px
  }
  .summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metric-card {
    padding:15px;
    min-height:120px
  }
  .metric-card strong {
    font-size:32px
  }
}
.presence-banner button:disabled {
  background:#eceef1;
  color:#8a919b;
  border-color:#e0e3e8
}
.icon-rail nav button svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.local-badge {
  position:absolute;
  left:15px;
  top:-28px;
  color:#b7b7bf;
  font-size:11px;
  border:1px solid #59595e;
  border-radius:12px;
  padding:3px 8px
}
.channel-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#19ba65; margin-right:5px }
.empty-list {
  margin:0;
  padding:12px 14px
}
.conversation-item .queue-tag {
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere
}
@media(max-width:680px) {
  .local-badge {
    display:none
  }
}
#lifecycle-settings { margin-top: 24px; }
#lifecycle-form { display: grid; grid-template-columns: minmax(180px, 240px) minmax(180px, 240px); gap: 10px 18px; align-items: end; }
#lifecycle-form label { font-weight: 600; }
#lifecycle-form label, #lifecycle-form input, #lifecycle-form select { grid-column: 1 / -1; }
#lifecycle-form button { grid-column: 1; }
#lifecycle-status { grid-column: 1 / -1; }
#audio-transcription-settings { margin-top:24px; }
#audio-transcription-form,#audio-summary-form { display:grid; gap:10px; max-width:520px; }
#audio-summary-form .check-label { display:flex; align-items:center; gap:8px; }
#audio-summary-form .check-label input { width:auto; margin:0; }
#audio-summary-form .check-label:has(input:disabled) { opacity:.65; }
#audio-summary-form > label:not(.check-label) { font-size:13px; font-weight:600; }
#audio-summary-threshold { max-width:140px; }
#audio-transcription-form .check-label { display:flex; align-items:center; gap:8px; }
#audio-transcription-form .check-label input { width:auto; margin:0; }
#audio-transcription-form .check-label:has(input:disabled) { opacity:.65; }
.unread-badge { display:inline-flex; min-width:18px; height:18px; padding:0 5px; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:#2f6fed; font-size:11px; font-weight:650; }
#rescue-reason { width:100%; resize:vertical; }
.catalog-tags { display:grid; gap:8px; max-height:240px; overflow:auto; margin:10px 0; }
.catalog-tags label { display:flex; align-items:flex-start; gap:8px; }
.catalog-tags small { display:block; color:#696969; }
.message-body a { color:#0648be; text-decoration:underline; }
.shared-contact { display:grid; gap:3px; margin-top:7px; padding:7px 9px; border:1px solid #d8dbe1; border-radius:6px; }
.message-selection { display:block; font-weight:700; margin-bottom:4px; }

/* Selector de espacios Chats / Base de conocimiento */
.product-switcher { position:relative; z-index:50; flex:none; isolation:isolate; }
button.product-switch { position:relative; border:0; padding:0; cursor:pointer; color:inherit; font:inherit; transition:background-color .16s ease; }
button.product-switch:focus-visible { outline:2px solid #e8c49d; outline-offset:2px; }
.product-switch-caret { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:16px; height:16px; border:2px solid #26232a; border-radius:50%; background:#e5c7a6; box-shadow:0 2px 5px #0004; }
.product-switch-caret::before { content:""; width:5px; height:5px; margin-top:-2px; border-right:1.6px solid #573b2c; border-bottom:1.6px solid #573b2c; transform:rotate(45deg); transition:transform .16s ease,margin-top .16s ease; }
button.product-switch[aria-expanded="true"] .product-switch-caret::before { margin-top:2px; transform:rotate(225deg); }
.product-menu {
  position:absolute; top:0; left:calc(100% + 12px); z-index:1000;
  display:grid; gap:3px; width:306px; max-width:calc(100vw - 82px); padding:10px;
  border:1px solid #e2d2bf; border-radius:14px; background:#fffaf4; color:#3d3026;
  box-shadow:0 18px 45px #1b130f42,0 3px 10px #1b130f24;
  animation:product-switch-in .17s cubic-bezier(.2,.7,.2,1) both;
}
.product-menu[hidden] { display:none; }
@keyframes product-switch-in { from { opacity:0; transform:translate(-7px,4px); } to { opacity:1; transform:translate(0,0); } }
.product-menu-heading { padding:7px 10px 6px; color:#987e68; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.product-menu-item { display:flex; align-items:center; gap:11px; min-height:62px; padding:9px; border-radius:9px; color:inherit; text-decoration:none; }
.product-menu-item:hover,.product-menu-item:focus-visible { background:#f5e9dc; }
.product-menu-item:focus-visible { outline: 2px solid #b68960; outline-offset: -2px; }
.product-menu-item[aria-current="page"] { background:#f4e9dc; }
.product-menu-icon { display:grid; place-items:center; width:39px; height:39px; flex:none; border-radius:10px; background:#e9d6bf; color:#725039; }
.product-menu-icon-kb { background:#ece3d6; color:#795745; }
.product-menu-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.product-menu-copy { display:grid; gap:3px; min-width:0; flex:1; }
.product-menu-copy strong { color:#382c23; font-size:13px; font-weight:750; line-height:1.2; }
.product-menu-copy small { color:#806f61; font-size:11px; line-height:1.3; }
.product-menu-active { flex:none; padding:4px 6px; border-radius:999px; color:#785335; background:#e8d4bc; font-size:10px; font-weight:750; }
@media (prefers-reduced-motion:reduce) {
  .product-menu { animation:none; }
  button.product-switch,.product-switch-caret::before { transition:none; }
}

.icon-rail .product-switcher { width:44px; height:44px; }
.icon-rail button.product-switch.rail-brand { width:44px; height:44px; border-radius:11px; background:#ffffff12; filter:none; }
.icon-rail button.product-switch.rail-brand::before { content:""; position:absolute; inset:2px; background:url('/assets/patitasco-logo.png') no-repeat -5px -8px / 205px 68px; filter:invert(1); }
.icon-rail button.product-switch:hover,.icon-rail button.product-switch[aria-expanded="true"] { background:#49362d; }

.customer-section .section-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.customer-section .section-title-row h3 { margin:0; }
.customer-section .section-title-row button { margin-top:0; font-size:18px; }
.customer-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.customer-name { font-size:14px; overflow-wrap:anywhere; }
.customer-badge { background:#fff4d6; color:#7a5200; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:600; }
.customer-line { margin:3px 0 0; font-size:12px; line-height:1.35; color:#4b4d57; overflow-wrap:anywhere; }
.customer-contact-link, .contact-section .contact-phone { color:inherit; text-decoration:underline; text-decoration-color:#b8bcc8; text-underline-offset:2px; }
.customer-contact-link:hover, .contact-section .contact-phone:hover { color:#2864c5; text-decoration-color:currentColor; }
.customer-contact-link:focus-visible, .contact-section .contact-phone:focus-visible { outline:2px solid #2563eb; outline-offset:1px; border-radius:2px; }
.customer-profile { color:#7a7c86; cursor:help; }
.customer-profile-level-on { color:#4b4d57; }
.customer-profile-level-off { color:#7a7c86; opacity:.35; }
.customer-empty { margin:0; font-size:12px; color:#666873; }
.customer-order { margin-top:8px; }
.customer-order-head { display:flex; align-items:baseline; justify-content:space-between; gap:2px 8px; flex-wrap:wrap; }
.customer-order-title { font-size:12px; overflow-wrap:anywhere; }
.customer-order h4,.customer-results h4 { margin:0 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6c6e78; }
.customer-order-head h4 { margin:0; }
.customer-products { margin:4px 0 0; padding-left:16px; font-size:12px; line-height:1.35; }
.customer-products li { margin:1px 0; overflow-wrap:anywhere; }
.customer-products .customer-more { list-style:none; margin-left:-16px; }
.customer-footer { margin-top:6px; }
.customer-odoo { font-size:12px; color:#0659ed; font-weight:600; }
.customer-sync { margin:6px 0 0; font-size:12px; line-height:1.35; }
.customer-sync.sync-synced { color:#1d7a3e; }
.customer-sync.sync-pending,.customer-sync.sync-disabled { color:#6b6f78; }
.customer-sync.sync-failed { color:#c00000; }
.customer-actions { display:flex; gap:6px; margin-top:8px; }
.customer-actions button { margin-top:0; flex:1; padding:6px 10px; }
/* Un cliente con varios chats: aviso sin bloquear, con enlaces a los chats que se pueden abrir. */
.customer-related { margin:8px 0 0; padding:7px 9px; border:1px solid #ecd9a3; border-radius:6px; background:#fffaeb; font-size:12px; line-height:1.35; color:#5c4a14; }
.customer-related p { margin:0; }
.customer-related-list { margin:4px 0 0; padding:0; list-style:none; display:grid; gap:2px; }
.customer-related-list .link-button { margin:0; padding:0; font-size:12px; text-align:left; }
.customer-related .customer-related-hidden { margin-top:3px; font-size:11.5px; }
.customer-search .customer-change-cancel { grid-column:1 / -1; justify-self:end; margin:0; padding:0 4px; font-size:12px; }
.customer-search { margin-top:0; margin-bottom:8px; display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; }
.customer-search input { min-width:0; padding:6px 8px; border:1px solid #dedee2; border-radius:7px; font-size:13px; }
.customer-search button { margin-top:0; padding:6px 10px; }
.customer-results { margin:0 0 8px; }
.customer-candidates-hint { margin:0 0 6px; }
.customer-options { list-style:none; margin:0 0 6px; padding:0; display:grid; gap:4px; }
.detail-section .customer-option { width:100%; margin-top:0; padding:6px 8px; text-align:left; background:#f4f4f5; color:#202127; border:1px solid #dedee2; display:grid; gap:1px; font-weight:400; line-height:1.35; }
.customer-option strong { font-weight:600; overflow-wrap:anywhere; }
.customer-option span { font-size:12px; color:#666873; overflow-wrap:anywhere; }
.detail-section .link-button { background:transparent; color:#0659ed; padding:0; margin:0; font-size:12px; text-decoration:underline; }
.customer-badge-cache { background:#eef0f4; color:#4b4d57; font-weight:500; }
.customer-unavailable { margin:0 0 8px; }

/* Pedidos del cliente */
.customer-orders { margin-top:8px; }
.customer-orders-head { display:flex; align-items:baseline; justify-content:space-between; gap:2px 8px; flex-wrap:wrap; margin-bottom:4px; }
.customer-orders-head h4 { margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6c6e78; }
.customer-orders-count { font-size:12px; color:#4b4d57; }
.customer-orders .hint { margin:2px 0 0; font-size:12px; }
.customer-order-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.detail-section .customer-order-row { width:100%; margin-top:0; padding:6px 8px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 8px; text-align:left; background:#f7f8fa; color:#202127; border:1px solid #e3e5ea; font-weight:400; line-height:1.3; }
.detail-section .customer-order-row:hover { background:#eef2fa; border-color:#cfd8ea; filter:none; }
.customer-order-name { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-order-meta { font-size:11px; color:#6c6e78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-order-amount { font-size:12px; font-weight:600; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.customer-order-row .order-delivery { justify-self:end; }
.order-delivery { display:inline-block; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:600; white-space:nowrap; background:#eef0f4; color:#4b4d57; }
.order-delivery.delivery-done { background:#e3f4e8; color:#1d6b38; }
.order-delivery.delivery-partial { background:#fff4d6; color:#7a5200; }
.order-delivery.delivery-assigned { background:#e6effd; color:#1f4f9e; }
.order-delivery.delivery-waiting { background:#fdeee3; color:#8a4510; }
.order-delivery.delivery-cancel { background:#fbe5e5; color:#9b1c1c; }
.detail-section .customer-orders-more { margin-top:6px; }
.customer-orders-error { margin:6px 0 0; font-size:12px; }
.order-dialog { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #dddde3; border-radius:14px; box-shadow:0 24px 70px #0005; overflow:hidden; }
.order-dialog[open] { display:flex; }
.order-dialog::backdrop { background:#0009; }
.order-dialog-panel { display:flex; flex-direction:column; width:100%; max-height:calc(100dvh - 34px); min-height:0; }
.order-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 12px; border-bottom:1px solid #ececef; }
.order-dialog-header h2 { margin:0; font-size:17px; overflow-wrap:anywhere; }
.order-dialog-meta { margin:3px 0 0; font-size:12px; color:#6c6e78; overflow-wrap:anywhere; }
.order-dialog-close { padding:6px 10px; flex:none; }
.order-dialog-body { flex:1 1 auto; min-height:80px; overflow:auto; padding:8px 18px; }
.order-dialog-body > .hint, .order-dialog-body > .error { margin:12px 0; }
.order-dialog-retry { margin-bottom:12px; }
.order-lines { width:100%; border-collapse:collapse; font-size:13px; }
.order-lines th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6c6e78; text-align:left; padding:6px 6px; border-bottom:1px solid #ececef; }
.order-lines td { padding:6px; border-bottom:1px solid #f0f0f2; vertical-align:middle; }
.order-lines tr:last-child td { border-bottom:0; }
.order-lines .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.order-lines th.order-line-photo-cell, .order-lines td.order-line-photo-cell { width:68px; padding-left:0; }
.order-line-name { overflow-wrap:anywhere; }
.order-line-photo { display:block; width:56px; height:56px; border-radius:8px; background:#f0f1f4; border:1px solid #e3e5ea; overflow:hidden; }
.order-line-photo img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.order-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:12px 18px 16px; border-top:1px solid #ececef; background:#fafafb; }
.order-dialog-summary { display:grid; gap:4px; min-width:0; }
.order-dialog-total { margin:0; font-size:14px; }
.order-dialog-total strong { font-size:16px; font-variant-numeric:tabular-nums; }
.order-dialog-status { margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; }
.order-invoice { color:#4b4d57; font-weight:600; }
.order-invoice.invoice-invoiced, .order-invoice.invoice-upselling { color:#1d6b38; }
.order-invoice.invoice-to-invoice { color:#8a4510; }
.order-dialog-odoo { display:inline-block; padding:8px 14px; border-radius:7px; background:#2864c5; color:#fff; font-weight:600; text-decoration:none; }
.order-dialog-odoo:hover { filter:brightness(.95); }
.order-dialog-odoo:focus-visible { outline:2px solid #3d75cc; outline-offset:2px; }
.order-dialog-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.order-dialog-incident { padding:8px 12px; }
/* «Gestionar» (incidencia) dentro de la tarjeta del pedido (abajo a la derecha, en la línea de fecha y
   estado): la fila le reserva hueco junto a la etiqueta de entrega, así la tarjeta no crece. */
.customer-order-item { position:relative; }
.detail-section .customer-order-row.with-incident .order-delivery { margin-right:92px; }
.detail-section .customer-order-incident { position:absolute; right:8px; bottom:6px; width:86px; margin:0; padding:1px 6px; display:inline-flex; align-items:center; justify-content:center; gap:3px; border:1px solid #cfd3dc; border-radius:999px; background:#fff; color:#2f3a4f; font-size:11px; font-weight:600; line-height:16px; white-space:nowrap; }
.detail-section .customer-order-incident:hover { background:#eef2fa; border-color:#b8c3d9; filter:none; }
.detail-section .customer-order-incident:focus-visible { outline:2px solid #2563eb; outline-offset:1px; }
.customer-order-incident-icon { width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* LOLA (asistente de incidencias de admin) en un iframe: docs/lola-widget.md */
.lola-dialog { width:min(980px,calc(100vw - 24px)); height:calc(100dvh - 32px); }
.lola-panel { height:100%; max-height:none; }
.lola-tools { display:flex; align-items:center; gap:10px; flex:none; }
.lola-open { font-size:13px; font-weight:600; color:#2864c5; text-decoration:none; white-space:nowrap; }
.lola-open:hover { text-decoration:underline; }
.lola-open:focus-visible { outline:2px solid #3d75cc; outline-offset:2px; }
.lola-hint { margin:0; padding:8px 18px; background:#fff4d6; color:#7a5200; font-size:13px; border-bottom:1px solid #f1e2b4; }
.lola-frame { flex:1 1 auto; width:100%; min-height:0; border:0; background:#fff; }

/* Hilo de la bandeja con el aspecto del histórico de LiveChat: autor encima del grupo, avatar de 28 px
   junto a la primera burbuja, burbujas apiladas sin repetir autor y hora HH:MM pequeña debajo.
   La conversación continua del histórico (#archive-events) usa las mismas reglas. */
:is(#messages,#archive-events) { gap:0; padding:10px 18px 14px; background:#fff; }
:is(#messages,#archive-events) > .message {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-self:stretch;
  max-width:none;
  margin-top:14px;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  color:#1f2329;
  white-space:normal
}
:is(#messages,#archive-events) > .message.out { align-items:flex-end; }
:is(#messages,#archive-events) > .message.note { align-items:center; }
:is(#messages,#archive-events) > .message.continued { margin-top:3px; }
:is(#messages,#archive-events) > :first-child { margin-top:0; }
:is(#messages,#archive-events) .message-author { margin:0 38px 3px; font-size:11px; line-height:1.3; color:#6b6f78; }
:is(#messages,#archive-events) .message.continued .message-author { display:none; }
:is(#messages,#archive-events) .message-row { display:flex; align-items:flex-start; gap:10px; max-width:68%; min-width:0; }
:is(#messages,#archive-events) .message.out .message-row { flex-direction:row-reverse; }
:is(#messages,#archive-events) .message-avatar {
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1b4fe8;
  color:#fff;
  font-size:12px;
  font-weight:600
}
:is(#messages,#archive-events) .message.out .message-avatar { background:#c8a575; }
:is(#messages,#archive-events) .message.out .message-avatar.automatic { background:#8a8f99; }
:is(#messages,#archive-events) .message.note .message-avatar { display:none; }
:is(#messages,#archive-events) .message.continued .message-avatar { visibility:hidden; }
:is(#messages,#archive-events) .message-bubble {
  min-width:0;
  padding:8px 12px;
  border-radius:10px;
  background:#f0f1f3;
  color:#1f2329;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.5
}
:is(#messages,#archive-events) .message.out .message-bubble { background:#1b4fe8; color:#fff; }
:is(#messages,#archive-events) .message.note .message-bubble { background:#fff5dc; border:1px solid #eadfbe; }
:is(#messages,#archive-events) .message.out .message-body a,:is(#messages,#archive-events) .message.out .attachment a { color:#fff; text-decoration:underline; }
:is(#messages,#archive-events) .message-meta { margin:2px 38px 0; font-size:11px; line-height:1.3; color:#6b6f78; }
:is(#messages,#archive-events) .message.note .message-author,:is(#messages,#archive-events) .message.note .message-meta { margin-left:0; margin-right:0; }
:is(#messages,#archive-events) .message.media-ready .message-bubble { padding:4px; }
:is(#messages,#archive-events) .message.media-ready .attachment-actions { margin:0 6px 2px; }
.day-separator {
  display:flex;
  align-items:center;
  gap:8px;
  margin:18px 0 4px;
  color:#4b4f58;
  font-size:11px
}
.day-separator::before,.day-separator::after { content:''; flex:1; border-top:1px solid #e3e5e8; }
.day-separator span { padding:2px 10px; border-radius:999px; background:#f0f1f3; line-height:1.5; }

/* Histórico LiveChat v2: lista con búsqueda, «Añadir filtro», orden y elementos al estilo del archivo de LiveChat. */
.archive-workspace .archive-sidebar { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.archive-sidebar-head { display:grid; gap:9px; padding:14px 14px 6px; border-bottom:1px solid #ececef; }
.archive-workspace .archive-sidebar h2 { margin:0; font-size:17px; }
.archive-search-row { display:grid; grid-template-columns:minmax(0,1fr) 36px; align-items:start; gap:8px; }
.archive-search-row .archive-search { min-width:0; }
.archive-search input { width:100%; padding:8px 10px; border:1px solid #d6d9df; border-radius:7px; background:#fff; }
.archive-filter-anchor { position:relative; justify-self:end; }
.archive-add-filter { width:36px; height:36px; display:grid; place-items:center; background:#fff; color:#1f2329; border:1px solid #cfd3da; padding:7px; }
.archive-add-filter svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.archive-filter-popover {
  position:absolute;
  z-index:20;
  top:calc(100% + 6px);
  right:0;
  width:min(280px,calc(100vw - 44px));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:12px;
  border:1px solid #dfe2e7;
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 28px rgba(20,24,33,.16)
}
.archive-filter-popover[hidden] { display:none; }
.archive-filter-popover label { margin-top:4px; font-size:12px; font-weight:600; color:#4b4f58; }
.archive-filter-popover input,.archive-filter-popover select { width:100%; padding:6px 8px; border:1px solid #d6d9df; border-radius:6px; background:#fff; }
.archive-filter-popover .error { margin:2px 0 0; font-size:12px; }
.archive-filter-popover .error:empty { display:none; }
.archive-active-filters { display:flex; flex-wrap:wrap; gap:6px; }
.archive-active-filters:empty { display:none; }
.archive-filter-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 9px; border-radius:999px; background:#e8eefb; color:#1f3f86; font-size:12px; font-weight:600; }
.archive-chip-remove { padding:0 6px; border-radius:999px; background:transparent; color:inherit; font-size:14px; line-height:1.2; }
.archive-chip-remove:hover:not(:disabled) { background:rgba(31,63,134,.12); }
.archive-list-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.archive-list-head .hint { margin:0; }
.archive-sort { background:transparent; color:#1f2329; padding:4px 6px; font-weight:650; font-size:13px; }
.archive-list { padding:0 0 4px; }
.archive-workspace .archive-item {
  position:relative;
  display:grid;
  gap:3px;
  width:100%;
  margin:0;
  padding:10px 14px;
  border-radius:0;
  border-bottom:1px solid #eeeff2
}
.archive-workspace .archive-item.selected { background:#eef0f4; box-shadow:inset 3px 0 #2864c5; }
.archive-item-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.archive-item-name { display:flex; align-items:center; gap:6px; min-width:0; }
.archive-item-indicators { display:inline-flex; align-items:center; gap:5px; flex:none; }
.archive-note-icon { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:5px; background:#fff1c4; color:#684e12; font-size:16px; line-height:1; }
.archive-note-popover { position:absolute; z-index:25; top:calc(100% - 2px); right:8px; width:min(280px,calc(100% - 16px)); padding:8px 10px; border:1px solid #e8d49c; border-radius:8px; background:#fff9e8; box-shadow:0 8px 22px #1d243128; color:#513f15; font-size:12px; font-weight:500; line-height:1.4; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; opacity:0; pointer-events:none; transform:translateY(-3px); }
.archive-item:hover .archive-note-popover,.archive-item:focus-visible .archive-note-popover { opacity:1; transform:none; }
.archive-workspace .archive-item-name strong { width:auto; font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-channel-badge.compact { flex:none; width:22px; height:22px; padding:2px; }
.archive-channel-badge.compact svg { width:15px; height:15px; }
.archive-item-agents { font-size:12px; color:#6b6f78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-item-groups { font-size:11px; color:#536175; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reopen-pending-badge { display:inline-flex; align-items:center; border-radius:999px; padding:2px 7px; background:#fff1ce; color:#705116; font-size:11px; font-weight:650; }
.archive-item-snippet-row { display:flex; align-items:center; gap:8px; min-width:0; }
.archive-item-snippet { flex:1; min-width:0; font-size:12px; color:#3b3f47; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-item-count { flex:none; min-width:20px; padding:0 6px; border-radius:999px; background:#e6e8ec; color:#3b3f47; font-size:11px; font-weight:600; text-align:center; line-height:18px; }
.archive-item-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.archive-tag { display:inline-flex; align-items:center; gap:2px; padding:1px 7px; border-radius:5px; background:#e9eaee; color:#33363d; font-size:11px; font-weight:600; line-height:1.5; }
.archive-tag.more { background:transparent; color:#6b6f78; }
.archive-item-note { display:flex; gap:4px; min-width:0; padding:3px 7px; border-radius:5px; background:#fff7e0; color:#5d4a14; font-size:11px; }
.archive-item-note-label { flex:none; font-weight:700; }
.archive-item-note-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-list-empty { padding:16px 14px; }
.archive-pager { align-items:center; border-top:1px solid #ececef; padding:8px 12px; }
.archive-pager .hint { min-width:60px; text-align:center; }

/* Chat abierto del histórico: cabecera fija y una sola conversación con scroll propio. */
.archive-chat { flex:1; min-height:0; display:flex; flex-direction:column; }
.archive-chat.hidden { display:none; }
.archive-chat-header { display:grid; gap:6px; padding:14px 20px 12px; border-bottom:1px solid #ececef; }
.archive-chat-header p { margin:0; }
.archive-start { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
.archive-chat-body { flex:1; min-height:0; display:flex; }
.archive-conversation { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.archive-history { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; padding:6px 12px; }
.archive-history:not(:has(:not(.hidden):not(:empty))) { display:none; }
/* El ancla al anteponer mensajes la calcula archive.js; sin el anclaje automático del navegador. */
.archive-detail #archive-events { flex:1; min-height:0; overflow:auto; overflow-anchor:none; }
.archive-timeline-empty { margin:auto; }
.thread-separator {
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 6px;
  color:#3b3f47;
  font-size:11px;
  font-weight:600
}
.thread-separator::before,.thread-separator::after { content:''; flex:1; border-top:1px solid #d9dce2; }
.thread-separator span { padding:3px 12px; border:1px solid #d9dce2; border-radius:999px; background:#fff; line-height:1.5; }
#archive-events > .thread-separator:first-child,#archive-events > .day-separator:first-child { margin-top:4px; }
#archive-events > .message.system { align-items:center; }
#archive-events .message.system .message-author,#archive-events .message.system .message-avatar { display:none; }
#archive-events .message.system .message-row { max-width:80%; }
#archive-events .message.system .message-bubble { background:transparent; color:#6b6f78; font-size:12px; font-style:italic; text-align:center; padding:2px 8px; }
#archive-events .message.system .message-meta { margin:0; }
/* Líneas de sistema del hilo de la bandeja (app.js renderSystemEvent): mismo gris que el histórico. */
#messages > .system-event { display:flex; flex-direction:column; align-items:center; gap:4px; margin:6px 0; }
#messages .system-event-start { align-self:stretch; margin:14px 0 2px; }
#messages .system-event-line { display:flex; align-items:baseline; justify-content:center; gap:8px; max-width:80%;
  color:#6b6f78; font-size:12px; text-align:center; }
#messages .system-event-text { font-style:italic; }
#messages .system-event-time { color:#8a8e96; font-size:11px; font-variant-numeric:tabular-nums; }
/* Etiquetas del chat (las de agente se pueden quitar), notas internas y navegación por cliente. */
.archive-tags-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.archive-tag-list { display:flex; flex-wrap:wrap; gap:5px; }
.archive-tag-list:empty { display:none; }
.archive-tag-list .archive-tag { font-size:12px; padding:2px 8px; }
.archive-tag-list .archive-tag.agent { padding-right:2px; background:#e3ecfc; color:#1f3f86; }
.archive-tag-list .archive-chip-remove { font-size:13px; padding:0 5px; }
.archive-tag-form { display:flex; gap:6px; }
.archive-tag-form input { width:170px; padding:4px 8px; border:1px solid #d6d9df; border-radius:6px; }
.archive-tag-form button { padding:4px 10px; }
#archive-tags-status:empty { display:none; }
.archive-notes { flex:none; width:clamp(280px,30%,380px); display:flex; flex-direction:column; gap:8px; min-height:0; overflow:auto; padding:14px 16px; border-left:1px solid #ececef; background:#fafafb; }
.archive-notes h2 { margin:0; font-size:14px; }
.archive-notes > .hint { margin:0; }
.archive-note-form { display:grid; gap:6px; }
.archive-note-form textarea { width:100%; resize:vertical; padding:7px 9px; border:1px solid #d6d9df; border-radius:7px; background:#fff; }
.archive-note-form button { justify-self:end; }
.archive-note-form .hint { margin:0; }
.archive-note-form .hint:empty { display:none; }
.archive-notes-list { display:grid; gap:8px; }
.archive-note { padding:8px 10px; border:1px solid #eadfbe; border-radius:8px; background:#fff8e6; }
.archive-note-meta { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:#6b5a26; }
.archive-note-body { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.45; }
.archive-note-edited { display:block; margin-top:4px; color:#685a7a; font-size:11px; }
.archive-note .note-edit-button { margin-top:7px; padding:3px 8px; font-size:11px; }
#archive-events .message.note .note-edit-button { display:block; margin:6px 0 0 auto; padding:2px 8px; font-size:11px; line-height:1.4; white-space:nowrap; }
.archive-note .note-edit-button { display:block; margin-left:auto; }
/* «Editar nota» dentro de la tarjeta de la nota, abajo a la derecha: las acciones comparten
   celda de rejilla con la fila de la nota (sin mover nodos: send-delay.js usa children[3]). */
#messages > .message.note { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; }
#messages > .message.note > .message-author { justify-self:stretch; }
#messages > .message.note > .message-row { grid-row:2; grid-column:1; }
#messages > .message.note > .message-meta { grid-row:3; }
#messages > .message.note > .message-actions { grid-row:2; grid-column:1; align-self:end; z-index:1; box-sizing:border-box; width:min(640px,90%); margin:0; padding:0 8px 7px 0; justify-content:flex-end; pointer-events:none; }
#messages > .message.note > .message-actions > * { pointer-events:auto; }
#messages > .message.note:has(> .message-actions:not(:empty)) .message-bubble { padding-bottom:32px; }
#messages .message.note .note-edit-button { padding:2px 8px; border-radius:6px; font-size:11px; line-height:1.4; white-space:nowrap; }
.archive-customer-nav { background:#fff; color:#1b4fe8; border:1px solid #d6def0; border-radius:999px; padding:4px 14px; font-size:12px; box-shadow:0 1px 3px rgba(20,24,33,.08); }
@media(max-width:1050px) {
  .archive-chat-body { flex-direction:column; }
  .archive-notes { width:auto; border-left:0; border-top:1px solid #ececef; }
  .archive-detail { overflow:visible; }
  .archive-detail #archive-events { flex:none; height:65vh; }
}
/* Selector de emojis del compositor (static/emoji.js). */
.emoji-picker { position:relative; flex:none; margin-right:auto; }
.emoji-toggle,.emoji-option,.emoji-tab,.emoji-char {
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}
.composer-actions .emoji-toggle { background:transparent; color:#536070; padding:3px 6px; font-size:18px; line-height:1; }
.composer-actions .emoji-toggle:hover:not(:disabled),.composer-actions .emoji-toggle[aria-expanded="true"] { background:#eef2f8; filter:none; }
.composer-actions .emoji-toggle:disabled { background:transparent; border-color:transparent; opacity:.45; }
.emoji-popover {
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;
  z-index:30;
  width:min(344px,calc(100vw - 32px));
  padding:8px;
  background:#fff;
  border:1px solid #d8dde5;
  border-radius:11px;
  box-shadow:0 10px 28px #15223830
}
.emoji-popover[hidden],.emoji-suggest[hidden],.emoji-empty[hidden],.emoji-frequent[hidden] { display:none; }
.emoji-frequent { margin-top:7px; padding-bottom:4px; border-bottom:1px solid #eceef1; }
.emoji-frequent-grid { max-height:none; overflow:visible; }
.emoji-search { width:100%; box-sizing:border-box; padding:6px 9px; font-size:13px; border:1px solid #d8dde5; border-radius:7px; }
.emoji-tabs { display:flex; justify-content:space-between; gap:2px; margin:7px 0 4px; border-bottom:1px solid #eceef1; padding-bottom:4px; }
.composer-actions .emoji-tab { flex:1 1 0; padding:4px 0; font-size:17px; line-height:1.2; background:transparent; border-radius:6px; }
.composer-actions .emoji-tab:hover:not(:disabled) { background:#f1f4f8; filter:none; }
.composer-actions .emoji-tab[aria-selected="true"] { background:#e8f0fc; box-shadow:inset 0 -2px 0 #2864c5; }
.emoji-category-title { margin:2px 2px 4px; font-size:11px; font-weight:700; color:#5c606b; text-transform:uppercase; letter-spacing:.03em; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-height:216px; overflow-y:auto; }
.composer-actions .emoji-option { padding:0; height:36px; font-size:22px; line-height:36px; background:transparent; border-radius:6px; }
.composer-actions .emoji-option:hover,.composer-actions .emoji-option:focus-visible { background:#e8f0fc; filter:none; }
.composer-actions .emoji-option:focus-visible,.composer-actions .emoji-tab:focus-visible { outline:2px solid #3d75cc; outline-offset:-2px; }
.emoji-empty { margin:10px 4px; font-size:12px; color:#5c606b; }
.emoji-suggest {
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;
  z-index:30;
  min-width:220px;
  max-width:min(360px,70vw);
  margin:0;
  padding:4px;
  list-style:none;
  background:#fff;
  border:1px solid #d8dde5;
  border-radius:9px;
  box-shadow:0 8px 24px #15223826
}
.emoji-suggestion { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer; font-size:13px; color:#202127; }
.emoji-suggestion .emoji-char { font-size:18px; }
.emoji-suggestion.active,.emoji-suggestion:hover { background:#e8f0fc; }

/* ---------- Paridad LiveChat (lista, cabecera, hilo, etiquetas, contacto) ---------- */

/* Lista: avatar de color con inicial, icono del canal + nombre, hora, vista previa de una línea,
   no leídos y chip de la cola. Acciones (⋯ y ×) al pasar el ratón, sin botones anidados. */
.conversation-row { position:relative; margin:1px 6px; }
.conversation-row .conversation-item { width:100%; margin:0; padding:10px 12px; gap:12px; align-items:flex-start; border-radius:8px; }
.conversation-row .conversation-item:hover,.conversation-row .conversation-item.selected { background:#f1f2f4; }
.conversation-row .conversation-item.selected { box-shadow:none; }
.conversation-row .list-avatar { width:36px; height:36px; font-size:15px; font-weight:600; background:#8e5cf2; margin-top:1px; }
.conversation-row .list-content { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
.conversation-row .conversation-title { align-items:center; justify-content:flex-start; gap:6px; font-size:14px; font-weight:600; line-height:1.35; color:#1f2329; }
.conversation-row .conversation-title > .conversation-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-row .list-channel { flex:none; width:14px; height:14px; }
.conversation-row .list-channel svg { width:10px; height:10px; }
.conversation-row .item-time { flex:none; margin-left:auto; font-size:12px; color:#6b6f78; }
.conversation-preview-row { display:flex; align-items:center; gap:8px; min-width:0; }
.conversation-row .conversation-preview { display:block; flex:1 1 auto; min-width:0; margin:0; color:#2b2f36; font-size:13.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
.conversation-row .unread-badge { flex:none; min-width:16px; height:16px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:#2f6fed; font-size:10.5px; font-weight:650; line-height:16px; }
.conversation-row .conversation-title > .conversation-name.unread { font-weight:750; color:#11141a; }
.conversation-row .queue-tag { justify-self:start; margin:2px 0 0; padding:1px 6px; border-radius:4px; background:#f0f1f3; color:#5c616b; font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.conversation-row .conversation-metadata { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.conversation-row .list-tag-pill.fixed-tag { border-color:var(--tag-color); font-weight:750; }
.conversation-row .list-tag-pill { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:1px 6px; border:1px solid color-mix(in srgb,var(--tag-color) 34%,#fff); border-radius:999px; background:color-mix(in srgb,var(--tag-color) 10%,#fff); color:var(--tag-color); font-size:10.5px; font-weight:650; }
.list-item-actions { position:absolute; bottom:8px; right:8px; display:flex; align-items:center; gap:2px; padding:2px; border-radius:7px; background:#fff; box-shadow:0 1px 3px rgba(20,24,33,.14); visibility:hidden; }
.conversation-row:hover .list-item-actions,.conversation-row:focus-within .list-item-actions { visibility:visible; }
.list-item-actions > button { width:26px; height:24px; padding:0; border-radius:5px; background:transparent; color:#4b5260; font-size:16px; line-height:1; }
.list-item-actions > button:hover:not(:disabled) { background:#eef0f3; filter:none; }
.list-item-release { font-size:18px; }
.conversation-list .empty-list { padding:28px 16px; color:#8b909a; font-size:13px; text-align:center; }

/* Cabecera: icono del canal, nombre, punto de urgencia y bandera; acciones a la derecha. */
.urgency-dot { flex:none; width:9px; height:9px; border-radius:50%; background:#e6e8ee; box-shadow:inset 0 0 0 1px rgba(20,24,33,.18); }
.country-anchor { position:relative; flex:none; display:inline-flex; }
.thread-country { display:inline-flex; align-items:center; gap:4px; padding:1px 5px; border:1px solid transparent; border-radius:6px; background:transparent; color:#4b5260; font-size:16px; line-height:20px; }
/* «Cambiar» aparece encima, sin reservar hueco en la línea de la cabecera. */
.thread-country { position:relative; }
.thread-country .country-edit { position:absolute; left:calc(100% + 2px); top:50%; transform:translateY(-50%); z-index:2; padding:1px 5px; border-radius:5px; background:#fff; box-shadow:0 1px 4px #0002; font-size:11px; font-weight:650; line-height:16px; color:#2a5bd7; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; }
.thread-country:hover:not(:disabled),.thread-country:focus-visible,.thread-country[aria-expanded="true"] { border-color:#dfe2e7; background:#f6f7f9; filter:none; }
.thread-country:hover .country-edit,.thread-country:focus-visible .country-edit,.thread-country[aria-expanded="true"] .country-edit { opacity:1; }
.thread-country:focus-visible { outline:2px solid #3073b7; outline-offset:1px; }
.thread-country.manual-region .thread-flag { box-shadow:0 2px 0 -1px #b77900; }
.country-popover { position:absolute; z-index:30; top:calc(100% + 6px); left:0; display:grid; gap:6px; width:min(290px,calc(100vw - 40px)); padding:12px; border:1px solid #e1e4e9; border-radius:9px; background:#fff; box-shadow:0 10px 28px rgba(20,24,33,.18); white-space:normal; font-size:13px; }
.country-popover[hidden] { display:none; }
.country-popover h2 { margin:0; font-size:13px; }
.country-popover .hint { margin:0; }
.country-popover label { font-size:12px; font-weight:600; }
.country-popover select { width:100%; }
.country-popover-actions { display:flex; justify-content:flex-end; gap:6px; }
.country-popover-actions button { padding:6px 10px; font-size:12px; }
.flag-code { display:inline-block; padding:0 4px; border:1px solid #c9ced6; border-radius:4px; background:#f6f7f9; color:#30343c; font-size:10.5px; font-weight:700; line-height:15px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.state-anchor { position:relative; flex:none; }
.state-badge { border:1px solid transparent; font-weight:600; cursor:pointer; }
.state-badge:not(:disabled)::after { content:' ▾'; }
.state-badge:hover:not(:disabled),.state-badge[aria-expanded="true"] { border-color:#c9ced6; background:#e8eaee; filter:none; }
.state-badge:disabled { cursor:default; color:#55555d; background:#f0f0f3; border-color:transparent; opacity:1; }
.state-menu { position:absolute; z-index:30; top:calc(100% + 6px); right:0; display:grid; gap:2px; width:min(290px,calc(100vw - 40px)); padding:6px; border:1px solid #e1e4e9; border-radius:9px; background:#fff; box-shadow:0 10px 28px rgba(20,24,33,.18); }
.state-menu[hidden] { display:none; }
.state-menu button { display:grid; gap:1px; padding:7px 9px 7px 26px; border:0; border-radius:6px; background:transparent; color:#1f2329; text-align:left; position:relative; white-space:normal; }
.state-menu button strong { font-size:13px; }
.state-menu button span { color:#5c606b; font-size:11.5px; font-weight:400; line-height:1.35; }
.state-menu button[aria-checked="true"]::before { content:'✓'; position:absolute; left:9px; top:7px; color:#2a5bd7; font-weight:700; }
.state-menu button:hover:not(:disabled),.state-menu button:focus-visible { background:#e8f0fc; filter:none; }
.state-menu button:disabled { color:#8a8e96; cursor:default; }
.state-menu button:disabled span { color:#9aa0aa; }
.state-menu button[aria-checked="true"]:disabled { color:#1f2329; }
.state-menu-note { margin:4px 6px 2px; color:#6b6f78; font-size:11px; }
.thread-header .ownership-claim { min-width:0; }
.thread-header .ownership-claim button { padding:6px 10px; font-size:12px; font-weight:700; border-radius:7px; white-space:nowrap; }
.thread-title .thread-channel .channel-icon { width:16px; height:16px; }
.thread-title .thread-channel .channel-icon svg { width:11px; height:11px; }
.reopen-chat { flex:none; padding:7px 10px; border-radius:7px; font-size:12px; font-weight:700; white-space:nowrap; }
.header-action { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border-radius:7px; background:transparent; color:#4b5260; }
.header-action:hover:not(:disabled) { background:#f0f2f5; filter:none; }
.header-action:disabled { border:0; background:transparent; color:#b4b9c2; }
.header-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.close-chat-anchor { position:relative; display:flex; }
.inline-confirm { position:absolute; z-index:26; top:calc(100% + 6px); right:0; display:grid; gap:8px; width:230px; padding:10px 12px; border:1px solid #e1e4e9; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,24,33,.18); font-size:13px; color:#1f2329; }
.inline-confirm[hidden] { display:none; }
.inline-confirm > div { display:flex; justify-content:flex-end; gap:6px; }
.inline-confirm button { padding:6px 10px; font-size:12px; }
.inline-confirm #close-chat-confirm-button { background:#c93c3c; }

/* Hilo (16.png): grupos separados, autor encima, burbujas redondeadas gris/azul, HH:MM debajo. */
:is(#messages,#archive-events) { padding:12px 22px 18px; }
:is(#messages,#archive-events) > .message { margin-top:18px; }
:is(#messages,#archive-events) > .message.continued { margin-top:4px; }
:is(#messages,#archive-events) .message-author { margin:0 40px 4px; font-size:12px; color:#6b6f78; }
:is(#messages,#archive-events) .message-row { gap:12px; max-width:72%; }
:is(#messages,#archive-events) .message-bubble { position:relative; padding:9px 14px; border-radius:16px; background:#f1f2f4; font-size:14px; line-height:1.5; }
:is(#messages,#archive-events) .message.out .message-bubble { background:#1b4fe8; }
:is(#messages,#archive-events) .message-meta { margin:3px 40px 0; font-size:11px; color:#6b6f78; }
:is(#messages,#archive-events) .message-meta:empty,:is(#messages,#archive-events) .message-meta[hidden] { display:none; }
#messages > .message-block { display:flex; flex-direction:column; align-self:stretch; min-width:0; margin-top:18px; }
#messages > .message-block:first-child { margin-top:0; }
#messages .message-block > .message { display:flex; flex-direction:column; align-items:flex-start; align-self:stretch; max-width:none; padding:0; border:0; border-radius:0; background:none; color:#1f2329; white-space:normal; }
#messages .message-block.out > .message { align-items:flex-end; }
#messages .message-block > .message + .message { margin-top:4px; }
#messages .message-image-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:6px; align-self:flex-start; width:min(72%,720px); min-width:0; }
#messages .message-block.out .message-image-gallery { align-self:flex-end; }
#messages .message-image-gallery > .message { display:flex; flex-direction:column; align-items:flex-start; min-width:0; max-width:100%; margin:0; padding:0; border:0; background:none; color:#1f2329; }
#messages .message-image-gallery > .message.continued { padding-top:20px; }
#messages .message-block.out .message-image-gallery > .message { align-items:flex-end; }
#messages .message-image-gallery .message-row { max-width:100%; width:100%; min-width:0; }
#messages .message-image-gallery .message-bubble { flex:1; width:0; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; }
#messages .message-image-gallery .message-attachments { width:100%; min-width:0; }
#messages .message-image-gallery .attachment { width:100%; min-width:0; }
#messages .message-image-gallery .attachment-image-button { width:100%; }
#messages .message-image-gallery .attachment-image-button img { width:100%; height:180px; object-fit:cover; }
@media (max-width:700px) {
  #messages .message-image-gallery { width:100%; }
  #messages .message-image-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #messages .message-image-gallery .attachment-image-button img { height:clamp(110px,28vw,180px); }
}
.message.flash .message-bubble { animation:message-flash 1s ease-out; }
@keyframes message-flash { 0%,35% { box-shadow:0 0 0 3px #ffd75e; } 100% { box-shadow:0 0 0 3px rgba(255,215,94,0); } }
@media (prefers-reduced-motion:reduce) { .message.flash .message-bubble { animation:none; box-shadow:0 0 0 3px #ffd75e; } }

/* Nota interna (LiveChat): bloque amarillo suave entre líneas discontinuas con «Nota interna · autor · hora».
   `.dashed-separator` es el patrón reutilizable de línea discontinua con texto centrado. */
.dashed-separator { display:flex; align-items:center; gap:10px; color:#8a6d1f; font-size:11.5px; font-weight:600; }
.dashed-separator::before,.dashed-separator::after { content:''; flex:1; border-top:1px dashed #d9c27a; }
:is(#messages,#archive-events) > .message.note { align-items:stretch; padding:0 0 10px; border-bottom:1px dashed #d9c27a; }
:is(#messages,#archive-events) > .message.note.continued { margin-top:12px; }
:is(#messages,#archive-events) .message.note .message-author { display:flex; margin:0 0 8px; }
:is(#messages,#archive-events) .message.note .message-row { max-width:none; align-self:center; width:min(640px,90%); }
:is(#messages,#archive-events) .message.note .message-bubble { flex:1; background:#fff8db; border:0; border-radius:8px; color:#3f3417; font-size:13px; }
:is(#messages,#archive-events) .message.note .message-meta { text-align:center; }
/* Nota automática «Incidencia gestionada con LOLA» (app/incident_notes.py): misma nota interna en verde suave. */
:is(#messages,#archive-events) > .message.note.lola-note { border-bottom-color:#a9cdb4; }
:is(#messages,#archive-events) .message.note.lola-note .message-author.dashed-separator { color:#2f6b45; font-size:11px; }
:is(#messages,#archive-events) .message.note.lola-note .dashed-separator::before,:is(#messages,#archive-events) .message.note.lola-note .dashed-separator::after { border-top-color:#a9cdb4; }
:is(#messages,#archive-events) .message.note.lola-note .message-bubble { background:#eef7f0; color:#1f3a2a; font-size:12.5px; }

/* Cita compacta: barra del color de quien escribió, nombre en negrita y una línea con elipsis. */
.message-quote:empty { display:none; }
.message-quote:not(:empty) { display:grid; gap:1px; min-width:0; max-width:420px; margin:-2px -6px 6px; padding:4px 9px 5px; border-left:3px solid var(--quote-color,#8b8f99); border-radius:6px; background:rgba(15,23,42,.06); color:inherit; font-size:12.5px; line-height:1.35; white-space:normal; }
.message-quote[data-target] { cursor:pointer; }
.message-quote[data-target]:hover { background:rgba(15,23,42,.1); }
.message-quote.ours { --quote-color:#b8894f; }
.quote-author { color:var(--quote-color,#5c616b); font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quote-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.message-quote.unavailable .quote-text { font-style:italic; }
.message.out .message-quote:not(:empty) { --quote-color:rgba(255,255,255,.85); background:rgba(255,255,255,.16); }
.message.out .message-quote[data-target]:hover { background:rgba(255,255,255,.24); }

/* Reacciones: insignia blanca pegada a la esquina inferior de la burbuja. */
.message-reactions { position:absolute; bottom:-14px; right:10px; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border:1px solid #e3e5e9; border-radius:999px; background:#fff; color:#3b4049; box-shadow:0 1px 3px rgba(20,24,33,.14); font-size:15px; line-height:18px; white-space:nowrap; }
.message.out .message-reactions { right:auto; left:10px; }
:is(#messages,#archive-events) .message.has-reactions .message-row { margin-bottom:14px; }

/* Etiquetas del chat: fichas pequeñas bajo el nombre, en la cabecera, con «+ Etiqueta» al final. */
.chat-tags { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-height:22px; }
.tag-add-anchor { position:relative; }
.tag-add-anchor[hidden] { display:none; }
.composer-notice .tag-add-anchor { flex:none; }
.tag-add { display:inline-flex; align-items:center; gap:5px; padding:1px 7px; border:1px dashed #c9ced6; border-radius:999px; background:transparent; color:#4b5260; font-size:12px; font-weight:600; line-height:18px; }
.tag-add:hover:not(:disabled) { background:#f0f2f5; filter:none; }
.tag-add:disabled { border-color:#e3e5e9; background:transparent; color:#9aa0aa; }
.tag-add svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.tag-chips { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.tag-chip,.tag-chip.selected { display:inline-flex; align-items:center; gap:1px; padding:0 2px 0 7px; border:1px solid #dfe2e7; border-radius:999px; background:#fff; color:#4b5260; font-size:12px; line-height:18px; }
/* Las cinco etiquetas destacadas (el tema del chat) llevan su color. */
.tag-chip.fixed-tag { border-color:var(--tag-color); background:color-mix(in srgb,var(--tag-color) 10%,#fff); color:color-mix(in srgb,var(--tag-color) 80%,#000); font-weight:700; }
.tag-option.fixed-tag-option { display:flex; align-items:center; gap:7px; font-weight:650; }
.tag-option.fixed-tag-option::before { content:''; flex:none; width:8px; height:8px; border-radius:50%; background:var(--tag-color); }
.tag-hash { color:#9aa0aa; }
.tag-remove { width:18px; height:18px; margin-left:2px; padding:0; border-radius:4px; background:transparent; color:#7b818c; font-size:14px; line-height:1; }
.tag-remove:hover:not(:disabled) { background:#eef0f3; color:#1f2329; filter:none; }
.tag-remove:disabled { border:0; background:transparent; color:#c3c7ce; }
.tag-popover { position:fixed; z-index:45; top:0; left:0; display:flex; flex-direction:column; gap:6px; width:300px; max-height:420px; padding:8px; border:1px solid #e1e4e9; border-radius:10px; background:#fff; box-shadow:0 12px 32px rgba(20,24,33,.2); }
.tag-popover[hidden] { display:none; }
.tag-popover input { flex:none; width:100%; height:34px; padding:0 10px; border:1px solid #d6d9df; border-radius:7px; font-size:13px; line-height:20px; }
/* Lista con scroll propio: cada fila conserva su altura (flex:none), nunca se aplasta. */
.tag-quick-choices { display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.tag-section { flex:none; padding:8px 10px 3px; color:#6b7280; font-size:10.5px; font-weight:700; letter-spacing:.05em; line-height:14px; text-transform:uppercase; }
.tag-section:first-child { padding-top:2px; }
.tag-option { flex:none; display:block; width:100%; min-height:30px; padding:6px 10px; border:0; border-radius:6px; background:transparent; color:#1f2329; font-size:13px; font-weight:500; line-height:18px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag-option:hover:not(:disabled),.tag-option.active { background:#e8f0fc; filter:none; }
.tag-option:disabled { border:0; background:transparent; color:#9aa0aa; }
.tag-create-option { flex:none; color:#1b4fe8; font-weight:600; }
.tag-create-access { flex:none; width:100%; padding:7px 10px; border:0; border-top:1px solid #eef0f3; border-radius:0 0 6px 6px; background:transparent; color:#1b4fe8; font-size:12px; font-weight:650; line-height:18px; text-align:left; }
.tag-create-access:hover:not(:disabled) { background:#f3f6ff; filter:none; }
.tag-create-access:disabled { opacity:.5; }
.tag-create-access[hidden] { display:none; }
.tag-create-option[hidden] { display:none; }
.tag-empty { margin:4px 8px; color:#6b6f78; font-size:12px; }
.tag-error { margin:2px 4px 0; color:#b42318; font-size:12px; }
.tag-error:empty { display:none; }

/* Panel derecho: un único bloque compacto de contacto (avatar, nombre y teléfono o usuario). */
.contact-section .contact-card { min-height:0; padding:0; border:0; }
.contact-section .contact-card > div { display:grid; min-width:0; }
.contact-section .contact-card strong { font-size:14px; overflow-wrap:anywhere; }
.contact-section .contact-card span:not(.contact-avatar) { color:#5f6170; font-size:12px; font-variant-numeric:tabular-nums; }

/* Enlaces en el texto de los mensajes (static/linkify.js): subrayados con el color del tema
   (azul en la burbuja gris o la nota, blanco en la burbuja azul) y sin desbordar la burbuja. */
a.message-link { color:#0648be; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; word-break:break-word; }
a.message-link:hover,a.message-link:focus-visible { text-decoration-thickness:2px; }
:is(#messages,#archive-events) .message.out a.message-link { color:#fff; }
/* Adjunto a la espera de cargarse solo: hueco discreto con nombre y tamaño. */
.attachment-status.attachment-pending { display:block; min-height:44px; padding:8px 10px; border-radius:8px; background:rgba(0,0,0,.05); overflow-wrap:anywhere; }
.message.out .attachment-status.attachment-pending { background:rgba(255,255,255,.14); }
/* Insignia de no leídos sobre «Chats» (fuera del tooltip `span` del rail). */
.icon-rail nav button .nav-badge { position:absolute; top:2px; right:1px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#d93025; color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; box-shadow:0 0 0 2px #181c24; pointer-events:none; }
.icon-rail nav button .nav-badge[hidden] { display:none; }
/* Preferencias de sonido en «Mi cuenta»: una por línea. */
.alert-prefs { display:grid; gap:6px; margin:10px 0 14px; }
.alert-prefs .check-label { display:flex; align-items:center; gap:8px; margin:0; }
.alert-prefs .check-label input { width:auto; margin:0; }
.alert-prefs .check-label:has(input:disabled) { opacity:.6; }

/* Centro de configuración: los formularios originales conservan sus IDs y guardados. */
.settings-center { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100%; background:#f7f3ee; }
.settings-center-nav { position:sticky; top:0; align-self:start; min-height:100%; box-sizing:border-box;
  padding:27px 16px; background:#f0e8de; border-right:1px solid #dfd1c2; color:#3f3027; }
.settings-center-mark { margin-bottom:8px; color:#815b40; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.settings-center-nav > strong { display:block; font-size:20px; letter-spacing:-.03em; }
.settings-center-nav > p { margin:5px 0 30px; color:#7c6d60; font-size:12px; }
.settings-nav-group { display:grid; gap:3px; margin:0 0 23px; }
.settings-nav-group > span { margin:0 10px 8px; color:#88786b; font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.settings-nav-group button { width:100%; border:0; border-radius:8px; padding:10px 11px; background:none;
  color:#514338; text-align:left; font-size:13px; font-weight:600; cursor:pointer; }
.settings-nav-group button:hover { background:#e8d9c9; }
.settings-nav-group button[aria-current="page"] { background:#6b4935; color:#fff; box-shadow:0 3px 8px #50332620; }
.settings-center-main { width:min(100%,1020px); max-width:none; box-sizing:border-box; padding:35px 38px 70px; }
.settings-center-header { padding:0 0 21px; margin-bottom:20px; border-bottom:1px solid #e2d8cc; }
.settings-center-eyebrow { margin:0 0 8px; color:#87664c; font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.settings-center-header h1 { margin:0; color:#39291f; letter-spacing:-.035em; }
.settings-center-header .hint { margin:6px 0 0; }
.settings-pane[hidden],.settings-form[hidden] { display:none !important; }
.settings-pane-intro { margin:0 0 17px; color:#6e6157; font-size:13px; line-height:1.5; }
.settings-pane .profile-card,.settings-form > .profile-card { border:1px solid #e5d9cc; border-radius:11px; background:#fffdfb; box-shadow:0 3px 13px #40291a0a; }
.settings-pane .profile-card h2,.settings-form > .profile-card h2 { margin-top:0; color:#443025; }
.settings-pane .profile-card + .profile-card { margin-top:15px; }
.settings-automation-top { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.settings-automation-top .hint { margin:0; line-height:1.5; }
.settings-automation-top button { flex:none; }
.settings-save-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:15px 0 0; border-top:1px solid #e2d8cc; }
.settings-save-bar .error { flex-basis:100%; margin:0; }
.settings-save-bar .hint { flex:1; }
.settings-crosslink { margin:14px 0 4px; }
.settings-panel-head { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:18px; }
.settings-panel-head h2 { margin:0 0 6px; }
.settings-panel-head .hint { margin:0; }
.settings-panel-head > div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.settings-replies-list { display:grid; gap:10px; }
.settings-reply-card { padding:16px 18px; border:1px solid #e5d9cc; border-radius:10px; background:#fffdfb; }
.settings-reply-card strong { display:block; color:#3d2c22; font-size:14px; }
.settings-reply-card .hint { margin:4px 0 9px; }
.settings-reply-card > p:not(.hint) { margin:0; white-space:pre-wrap; line-height:1.45; }
.settings-reply-actions { display:flex; gap:8px; margin-top:13px; }
.settings-center button:focus-visible { outline:2px solid #7a4a2e; outline-offset:2px; }
.settings-center-main button:not(.subtle) { background:#6b4935; border-color:#6b4935; color:#fff; }
.settings-center-main button:not(.subtle):hover:not(:disabled) { background:#543725; border-color:#543725; }
.settings-content { max-width: 860px; }
.settings-form { display: grid; gap: 16px; }
.settings-form textarea { width: 100%; box-sizing: border-box; }
.settings-form .profile-card > label:not(.check-label) { display:block; margin:12px 0 6px; font-weight:600; }
.settings-form .profile-card > .check-label { display:flex; align-items:center; gap:8px; margin:12px 0; }
.settings-form .profile-card > .check-label input { width:auto; margin:0; }
.settings-grid { display: grid; grid-template-columns: minmax(140px, 40%) 1fr; gap: 8px 14px;
  align-items: center; margin: 10px 0; }
.settings-status { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.settings-accounts { display: grid; gap: 6px; }
.settings-center [hidden] { display: none !important; }
@media (max-width: 850px) { .settings-center { grid-template-columns:1fr; }
  .settings-center-nav { position:static; min-height:0; padding:18px 20px; }
  .settings-center-nav > p { margin-bottom:15px; }
  .settings-nav-group { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 10px; }
  .settings-nav-group > span { flex-basis:100%; margin:5px 0 3px; }
  .settings-nav-group button { width:auto; }
  .settings-center-main { padding:26px 20px 60px; }
}
@media (max-width: 640px) { .settings-grid { grid-template-columns: 1fr; }
  .settings-automation-top,.settings-panel-head { display:block; }
  .settings-panel-head > div:last-child { justify-content:flex-start; margin-top:12px; }
}

/* Sección «Automatizados» (static/automated.js) */
.automated-list { display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.automated-item { width:100%; margin:0; align-items:flex-start; border:1px solid #e4e7ec; }
.automated-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.automated-head { display:flex; align-items:center; gap:8px; }
.automated-preview { display:block; margin:0; color:#3b3e45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.automated-meta { display:flex; flex-wrap:wrap; gap:12px; color:#68707d; font-size:12px; }
.automated-status[data-status="failed"],.automated-status[data-status="cancelled"] { color:#c93636; }
/* Narrow composer: the list takes the full width and the preview stays out of the way. */
@container composer (max-width:520px) {
  .saved-reply-list { width:auto; right:8px; }
  .saved-reply-preview { display:none; }
}

/* Prioridad de chats (static/priority-settings.js): mismos tonos que el resto de Configuración */
.priority-status { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:stretch; margin-bottom:14px; }
.priority-vbox { display:grid; gap:3px; align-content:start; min-width:0; padding:12px 14px; border:1px solid #e5d9cc; border-radius:10px; background:#fffdfb; }
.priority-vbox-draft { border-color:#6b4935; background:#f6ece3; }
.priority-vbox-draft.priority-vbox-empty { border-style:dashed; border-color:#d9c8b8; background:#fffdfb; }
.priority-k { color:#87664c; font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.priority-v { color:#39291f; font-weight:650; overflow-wrap:anywhere; }
.priority-s { color:#6e6157; font-size:12px; }
.priority-actions { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.priority-callout { margin:0 0 14px; padding:12px 14px; border-left:4px solid #a15c00; border-radius:0 10px 10px 0; background:#fffdfb; color:#443025; font-size:13px; line-height:1.5; }
.priority-callout strong { color:#8a4f00; }
.priority-conflict { margin:0 0 14px; padding:12px 14px; border:1px solid #d9a441; border-radius:10px; background:#fff6e5; color:#5b3a0a; font-size:13px; }
.priority-conflict p { margin:0 0 10px; line-height:1.5; }
.priority-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px; border-bottom:1px solid #e2d8cc; }
.settings-center-main .priority-tabs [role="tab"] { border:0; border-bottom:3px solid transparent; border-radius:0; padding:10px 14px; background:none; color:#6e6157; font-weight:650; }
.settings-center-main .priority-tabs [role="tab"][aria-selected="true"] { color:#39291f; border-bottom-color:#6b4935; }
.settings-center-main .priority-tabs [role="tab"]:hover:not(:disabled) { background:#efe4d8; }
.priority-pane { display:grid; gap:14px; }
.priority-pane[hidden] { display:none; }
.priority-pane > .hint { margin:0; font-size:13px; }
#settings-pane-priority select, #settings-pane-priority input, #settings-pane-priority textarea { max-width:100%; min-width:0; }
.priority-groups select { flex:1 1 220px; width:100%; }
.priority-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.priority-test-form, .priority-stack { display:grid; gap:8px; }
.priority-test-form label, .priority-case-form label { font-size:13px; font-weight:600; color:#443025; }
.priority-test-form textarea, .priority-test-form select, .priority-test-form input[type="search"], .priority-case-form input, .priority-case-form select { width:100%; box-sizing:border-box; }
.priority-test-form textarea { min-height:110px; resize:vertical; line-height:1.5; }
.priority-row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.priority-result { display:grid; gap:10px; align-content:start; min-height:120px; padding:14px; border:1px solid #e5d9cc; border-radius:10px; background:#fffdfb; }
.priority-result p, .priority-result h4 { margin:0; }
.priority-result h4 { font-size:12px; color:#6e6157; text-transform:uppercase; letter-spacing:.05em; }
.priority-result-level { display:flex; align-items:center; gap:8px; font-weight:700; color:#39291f; }
.priority-why { color:#443025; }
.priority-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.priority-chip { padding:3px 10px; border:1px solid #e5d9cc; border-radius:999px; background:#f7f3ee; font-size:12px; color:#6e6157; }
.priority-chip-on { border-color:#6b4935; background:#f6ece3; color:#39291f; font-weight:650; }
.priority-compare { display:flex; align-items:center; gap:8px; font-size:13px; color:#443025; }
.priority-dot { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:#e6e8ee; color:#2b3240; font-size:13px; font-weight:750; font-variant-numeric:tabular-nums; }
.priority-dot-5 { background:#f0b429; color:#3f2d04; } .priority-dot-6 { background:#e8811f; color:#fff; }
.priority-dot-7 { background:#e2532f; color:#fff; } .priority-dot-8 { background:#d12f2f; color:#fff; }
.priority-special { display:grid; gap:8px; padding:12px 14px; border:1px solid #e5d9cc; border-radius:10px; background:#f7f3ee; font-size:13px; }
.priority-special h3, .priority-special h4, .priority-special p { margin:0; }
.priority-special h3 { font-size:14px; color:#39291f; }
.priority-special ul { margin:0; padding-left:18px; display:grid; gap:4px; }
.priority-levels { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.priority-level { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 14px; border:1px solid #e5d9cc; border-left-width:5px; border-left-color:#c9ccd4; border-radius:10px; background:#fffdfb; }
.priority-level-5 { border-left-color:#f0b429; } .priority-level-6 { border-left-color:#e8811f; }
.priority-level-7 { border-left-color:#e2532f; } .priority-level-8 { border-left-color:#d12f2f; }
.priority-level-text { display:grid; gap:3px; min-width:0; }
.priority-level-name { font-weight:650; color:#39291f; }
.priority-level-rule { font-size:13px; color:#443025; overflow-wrap:anywhere; }
.priority-level-meta { font-size:12px; color:#6e6157; font-variant-numeric:tabular-nums; }
.priority-editor { grid-column:1 / -1; display:grid; gap:10px; padding-top:12px; border-top:1px dashed #e2d8cc; }
.priority-editor p, .priority-editor h4 { margin:0; }
.priority-editor-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.priority-editor-head input { flex:1 1 180px; min-width:0; }
.priority-checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 14px; margin:0; padding:0; border:0; }
.priority-checks legend { margin-bottom:6px; padding:0; color:#6e6157; font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; }
.priority-check { display:flex; gap:8px; align-items:flex-start; font-size:13px; }
.priority-check input { margin-top:2px; }
.priority-advanced summary { cursor:pointer; font-size:13px; font-weight:600; }
.priority-groups { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.priority-group { display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; padding:2px 6px; border-radius:8px; background:#f5f6f9; }
.priority-condition { display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.settings-center-main button.priority-condition-remove { padding:0 6px; border:0; background:none; color:#6e6157; }
.settings-center-main button.priority-condition-remove:hover:not(:disabled) { background:#efe4d8; border:0; color:#39291f; }
.priority-or, .priority-and { font-size:12px; color:#6e6157; }
.priority-details { border:1px solid #e5d9cc; border-radius:10px; background:#fffdfb; }
.priority-details > summary { cursor:pointer; padding:12px 14px; font-weight:650; color:#39291f; }
.priority-details-body { display:grid; gap:12px; padding:2px 14px 14px; }
.priority-details-body > p { margin:0; }
.priority-defs { gap:16px; }
.priority-def { display:grid; gap:4px; }
.priority-def-label { font-weight:650; color:#39291f; font-size:13px; }
.priority-def-code { color:#7c6d60; font:12px/1.3 ui-monospace,Menlo,monospace; overflow-wrap:anywhere; }
.priority-def p { margin:0; }
.priority-def textarea, .priority-custom textarea, .priority-custom input, .priority-custom-new textarea, .priority-custom-new input, .priority-special textarea { width:100%; box-sizing:border-box; min-height:64px; resize:vertical; line-height:1.5; overflow:hidden; }
.priority-custom input, .priority-custom-new input { min-height:0; }
.priority-custom-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.priority-custom { display:grid; gap:6px; padding:12px 14px; border:1px solid #e5d9cc; border-left:5px solid #6b4935; border-radius:10px; background:#fffdfb; }
.priority-custom p { margin:0; }
.priority-custom-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.priority-custom-result:empty { display:none; }
.priority-custom-result { font-size:13px; color:#39291f; }
.priority-history { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.priority-history-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #e5d9cc; font-size:13px; }
.priority-version { display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 6px; border-radius:14px; background:#f6ece3; color:#6b4935; font-weight:750; }
.priority-cases { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.priority-cases li { display:flex; justify-content:space-between; gap:8px; align-items:center; }
#priority-battery-details summary { cursor:pointer; font-weight:600; }
.priority-search-results { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.priority-publish-summary { margin:0; padding-left:18px; display:grid; gap:6px; font-size:13px; }
.priority-dialog { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #e5d9cc; border-radius:14px; padding:24px; box-shadow:0 24px 70px #0005; }
.priority-dialog::backdrop { background:#0009; }
@media (max-width: 720px) {
  .priority-status { grid-template-columns:1fr; }
  .priority-actions { flex-direction:row; flex-wrap:wrap; }
  .priority-two { grid-template-columns:1fr; }
  .priority-level, .priority-history-row { grid-template-columns:auto minmax(0,1fr); }
  .priority-level-edit, .priority-history-row > button { grid-column:2; justify-self:start; }
  .priority-tabs { flex-wrap:nowrap; overflow-x:auto; }
  .settings-center-main .priority-tabs [role="tab"] { flex:none; padding:10px; }
}
/* Configuración › margen para deshacer el envío (static/inbox/send-delay.js). */
.send-delay-settings { margin:14px 0; }
.send-delay-settings select { display:block; max-width:220px; margin-top:4px; }

/* «Equipo» editable (static/team-admin.js): panel lateral con la ficha de cada persona. */
.team-add { margin-left:auto; }
.team-dialog { margin:0 0 0 auto; width:min(440px,100vw); height:100dvh; max-height:none; padding:0; border:0; border-left:1px solid #dddde3; border-radius:0; box-shadow:-18px 0 50px #0003; overflow:auto; }
.team-dialog::backdrop { background:#0003; }
.team-form { display:grid; gap:8px; padding:20px 24px 24px; }
.team-form > label:not(.check-label) { font-size:13px; font-weight:600; margin-top:6px; }
.team-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.team-dialog-head h2 { margin:0; font-size:18px; }
.team-queues { border:1px solid #dddde3; border-radius:10px; padding:8px 12px; margin:6px 0 0; display:grid; gap:4px; }
.team-queues legend { font-size:13px; font-weight:600; padding:0 4px; }
.team-queues > div { display:grid; gap:4px; }
.team-form .field-error { margin:0; color:#a52222; font-size:13px; }
.team-form [aria-invalid="true"] { border-color:#a52222; }
.team-password { display:grid; gap:8px; margin-top:6px; }
.team-password > div:not([hidden]) { display:grid; gap:6px; }
.team-history { margin-top:8px; border-top:1px solid #ececf0; padding-top:8px; }
.team-history summary { cursor:pointer; font-weight:600; font-size:13px; }
.team-history ol { margin:8px 0 0; padding-left:18px; display:grid; gap:6px; font-size:13px; }
.team-history time { color:#6b6b76; }
.team-form .dialog-actions { position:sticky; bottom:0; background:#fff; padding:8px 0 4px; }
@media (max-width: 520px) { .team-dialog { width:100vw; border-left:0; } }
/* Contraseña temporal desde el panel (antes en Configuración › Acceso). */
.team-reset-dialog { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #dddde3; border-radius:14px; padding:24px; box-shadow:0 24px 70px #0005; }
.team-reset-dialog::backdrop { background:#0009; }
.team-reset-dialog h2 { margin:0; font-size:20px; }
.team-reset-dialog .hint { margin:0; }
.team-reset-dialog .dialog-actions { margin-top:8px; }
.team-reset-dialog [aria-invalid="true"] { border-color:#a52222; }
.team-credential { display:grid; gap:6px; margin-top:8px; padding-top:10px; border-top:1px solid #ececf0; }
.team-credential h3 { margin:0; font-size:13px; }
.team-credential .hint { margin:0; }
.team-credential button { justify-self:start; }
/* Tabla «Equipo»: correo bajo el nombre, colas en burbujas y columna «Acceso». */
.team-name-text { display:grid; gap:1px; min-width:0; }
.team-email { color:#6b6f78; font-size:12px; font-weight:400; white-space:nowrap; }
.team-chips { display:flex; flex-wrap:wrap; gap:4px; max-width:280px; }
.team-chip { display:inline-flex; align-items:center; padding:2px 9px; border:1px solid #d5dcea; border-radius:999px; background:#eef3fc; color:#24427a; font-size:12px; font-weight:500; line-height:18px; white-space:nowrap; }
.team-chip.is-empty { border-style:dashed; background:transparent; color:#767782; }
.team-access { display:flex; flex-wrap:wrap; gap:4px; max-width:220px; }
.team-badge { padding:1px 7px; border-radius:5px; background:#f1f2f5; color:#3b4250; font-size:12px; line-height:18px; white-space:nowrap; }
.team-badge.is-warn { background:#fff3dc; color:#7a4a00; }
.team-badge.is-muted { background:transparent; color:#767782; padding-left:0; }
/* Edición al clic: solo en filas editables; lápiz y fondo suave al pasar o con el foco. */
button.team-inline { display:inline-flex; align-items:center; gap:6px; max-width:100%; margin:-4px -6px; padding:4px 6px; border:1px solid transparent; border-radius:6px; background:transparent; color:inherit; font-weight:inherit; text-align:left; cursor:pointer; }
button.team-inline::after { content:"✎"; flex:none; color:#5b6472; font-size:12px; opacity:0; }
button.team-inline:hover:not(:disabled),button.team-inline:focus-visible,button.team-inline[aria-expanded="true"] { background:#f1f4f9; border-color:#dfe5ee; filter:none; }
button.team-inline:hover::after,button.team-inline:focus-visible::after,button.team-inline[aria-expanded="true"]::after { opacity:1; }
button.team-inline:disabled { background:transparent; border-color:transparent; color:inherit; cursor:progress; opacity:.6; }
@media (hover:none) { button.team-inline::after { opacity:.55; } }
td.team-locked { cursor:help; }
.team-popover { position:fixed; z-index:60; top:0; left:0; display:grid; gap:8px; width:max-content; min-width:180px; max-width:min(320px,calc(100vw - 16px)); padding:10px; border:1px solid #e1e4e9; border-radius:10px; background:#fff; box-shadow:0 12px 32px rgba(20,24,33,.2); font-size:13px; }
.team-popover label { display:grid; gap:4px; font-size:12px; font-weight:600; color:#4b4f58; }
.team-popover input { width:100%; padding:6px 8px; border:1px solid #d6d9df; border-radius:6px; }
.team-popover input[aria-invalid="true"] { border-color:#a52222; }
.team-popover .field-error { margin:0; color:#a52222; font-size:12px; }
.team-popover-list { display:grid; gap:2px; }
button.team-popover-option { padding:7px 10px; border:0; border-radius:6px; background:transparent; color:#242a34; font-weight:500; text-align:left; }
button.team-popover-option:hover { background:#f1f4f9; filter:none; }
button.team-popover-option[aria-pressed="true"] { background:#eef3fc; color:#1d4ea3; font-weight:650; }
button.team-popover-option[aria-pressed="true"]::after { content:" ✓"; }
.team-popover-actions { display:flex; justify-content:flex-end; gap:6px; }
.team-popover-actions button { padding:6px 12px; font-size:13px; }
.team-chip-picker { max-width:none; gap:6px; }
button.team-chip-toggle { padding:4px 11px; background:#fff; color:#334155; border-color:#cfd6e2; font-size:13px; cursor:pointer; }
button.team-chip-toggle[aria-pressed="true"] { background:#2864c5; border-color:#2864c5; color:#fff; }
button.team-chip-toggle[aria-pressed="true"]::before { content:"✓"; margin-right:4px; }
/* Configuración › «Mensajes en cuarentena» (static/inbox/inbound-quarantine.js): tabla compacta. */
.quarantine-body { display:grid; gap:8px; }
.quarantine-summary { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.quarantine-summary li { display:inline-flex; gap:5px; align-items:baseline; padding:3px 9px; border:1px solid #e1e4e9; border-radius:999px; background:#f7f8fa; font-size:12px; color:#334155; }
.quarantine-summary strong { font-variant-numeric:tabular-nums; }
.quarantine-oldest { margin:0; }
.quarantine-table { width:100%; border-collapse:collapse; font-size:12px; }
.quarantine-table th { text-align:left; font-size:11px; font-weight:700; color:#62636b; padding:4px 6px; border-bottom:1px solid #e1e4e9; }
.quarantine-table td { padding:5px 6px; border-bottom:1px solid #eef0f3; vertical-align:middle; overflow-wrap:anywhere; }
.quarantine-reason { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; }
.quarantine-review { padding:3px 8px; font-size:11px; white-space:nowrap; }