:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f9fafc;
  --line: #e9ebf0;
  --line-strong: #dce0e8;
  --text: #171a20;
  --muted: #7b828e;
  --blue: #1677ee;
  --blue-soft: #edf5ff;
  --green: #278461;
  --green-soft: #eaf8f0;
  --shadow: 0 12px 40px rgba(38, 52, 74, .045), 0 2px 8px rgba(38, 52, 74, .025);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
* { scrollbar-width: thin; scrollbar-color: #c9d2de transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: #c9d2de; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #aebaca; }
.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; }
body { background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
:focus-visible { outline: 3px solid rgba(22,119,238,.25); outline-offset: 2px; }
.app-shell { display: flex; min-height: 100vh; }

/* Navigation is the translucent layer; content surfaces stay opaque. */
.sidebar {
  position: sticky; top: 0; z-index: 5; width: 260px; flex: 0 0 260px;
  height: 100vh; display: flex; flex-direction: column; padding: 28px 15px 18px;
  background: rgba(255,255,255,.82); border-right: 1px solid rgba(217,221,228,.85);
  backdrop-filter: blur(28px) saturate(1.35); -webkit-backdrop-filter: blur(28px) saturate(1.35);
  transition: width .22s ease, flex-basis .22s ease, padding .22s ease;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 13px 46px; }
.brand-mark { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: #f0f1f3; border: 1px solid #e4e5e8; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.23); }
.brand strong { display: block; font-size: 21px; font-weight: 750; letter-spacing: -.8px; line-height: 1; }
.brand-ai { margin-left: 2px; color: var(--muted); font-weight: 550; }
.brand small { display: block; color: #a0a5ae; font-size: 10px; letter-spacing: .3px; margin-top: 5px; }
.sidebar-label { color: #a4aab4; font-size: 10px; font-weight: 750; letter-spacing: 1.15px; padding: 0 16px 10px; }
.tools-label { margin-top: 34px; }
.sidebar nav { display: grid; gap: 3px; }
.nav-item {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: 13px; padding: 10px 15px;
  border: 1px solid transparent; border-radius: 13px; background: transparent;
  color: #666e7a; text-align: left; font-size: 13px; font-weight: 590; transition: background .16s, color .16s, box-shadow .16s;
}
.nav-item:hover { color: var(--text); background: rgba(242,244,247,.9); }
.nav-item.active { color: #191c21; background: #fff; border-color: #eceef2; box-shadow: 0 3px 11px rgba(30,41,56,.06); font-weight: 700; }
.nav-icon { flex: 0 0 20px; width: 20px; color: #8c94a0; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .nav-icon { color: var(--blue); }
.nav-count { margin-left: auto; background: #eef1f5; color: #89919c; border-radius: 99px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
.sidebar-spacer { flex: 1; }
.sidebar-status { display: flex; align-items: center; gap: 11px; margin: 0 8px; padding: 14px; border: 1px solid var(--line); background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(34,44,60,.03); }
.status-orb { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #aeb5be; box-shadow: 0 0 0 4px #eff1f4; }
.status-orb.online { background: #35b37d; box-shadow: 0 0 0 4px #e6f7ed; }
.sidebar-status strong { display: block; font-size: 11px; font-weight: 700; }
.sidebar-status small { display: block; margin-top: 2px; color: #9ba2ac; font-size: 10px; }
.sidebar-footer { display: flex; justify-content: space-between; padding: 16px 17px 2px; color: #aab0ba; font-size: 10px; }

.main-content { flex: 1; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 4; height: 74px; display: flex; justify-content: space-between; align-items: center; padding: 0 44px; border-bottom: 1px solid rgba(232,234,239,.76); background: rgba(250,251,253,.78); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); }
.topbar-left { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; }
.sidebar-toggle { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #7d8794; }
.sidebar-toggle:hover { border-color: #e4e8ee; background: #fff; color: #303844; }
.sidebar-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-chevron { transition: transform .22s ease; transform-origin: 16.5px 12px; }
.sidebar-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.topbar-page { min-width: 0; flex: 1; }
.topbar-eyebrow { display: block; margin-bottom: 4px; color: #9a6871; font-size: 9px; font-weight: 750; letter-spacing: 1px; line-height: 1; }
.topbar-page-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.topbar-title { flex: 0 1 auto; min-width: 0; overflow: hidden; margin: 0; color: var(--text); font-size: 18px; font-weight: 730; letter-spacing: -.55px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.topbar-subtitle { flex: 1; min-width: 0; overflow: hidden; margin: 0; color: #8c95a1; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.topbar-subtitle:empty { display: none; }
.topbar-right { display: flex; flex: 0 0 auto; align-items: center; gap: 15px; margin-left: 20px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions:empty { display: none; }
.topbar-actions .btn { min-height: 35px; padding: 7px 12px; }
.local-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.8); border: 1px solid rgba(225,229,235,.9); color: #737c88; font-size: 11px; font-weight: 650; box-shadow: 0 2px 8px rgba(31,48,72,.025); }
.local-pill span { width: 7px; height: 7px; border-radius: 50%; background: #38b880; }
.local-pill .local-pill-text { width: auto; height: auto; border-radius: 0; background: transparent; }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #252a32; color: #fff; font-size: 12px; font-weight: 700; }
.view { max-width: 1400px; margin: 0 auto; padding: 24px 45px 65px; }
.view.chat-view { max-width: none; padding: 18px 22px; }

.eyebrow { color: #8c4650; font-size: 10px; font-weight: 750; letter-spacing: 1.45px; text-transform: uppercase; }
.subtitle { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 9px 15px; border: 1px solid #e1e4e9; border-radius: 11px; background: #fff; color: #333a44; font-size: 12px; font-weight: 680; white-space: nowrap; box-shadow: 0 2px 8px rgba(33,43,57,.025); transition: transform .16s, background .16s, border-color .16s, box-shadow .16s; }
.btn:hover { background: #f9fafc; border-color: #cfd6df; transform: translateY(-1px); box-shadow: 0 5px 15px rgba(33,43,57,.07); }
.btn-primary { border-color: #222832; background: #222832; color: #fff; box-shadow: 0 6px 17px rgba(24,31,42,.12); }
.btn-primary:hover { background: #363d47; border-color: #363d47; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-danger { color: #c45555; }
.text-link { border: 0; background: transparent; color: var(--blue); font-size: 12px; font-weight: 680; padding: 5px 0; }
.text-link:hover { color: #0a5fc5; }

.hero { position: relative; min-height: 273px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; padding: 36px 42px; border: 1px solid #e8ebef; border-radius: 25px; background: #fff; box-shadow: var(--shadow); }
.hero::before { content: ''; position: absolute; width: 470px; height: 470px; right: -50px; top: -116px; border-radius: 50%; background: radial-gradient(circle at center, #f2f4f7 0 38%, #f8f9fb 39% 56%, #fff 57%); opacity: .95; }
.hero-content { position: relative; z-index: 1; max-width: 540px; }
.hero h2 { max-width: 540px; margin: 13px 0 12px; font-size: clamp(31px,3.2vw,42px); line-height: 1.15; font-weight: 740; letter-spacing: -1.8px; }
.hero p { max-width: 450px; margin: 0 0 24px; color: #747c87; font-size: 13px; line-height: 1.65; }
.hero .btn { padding: 11px 17px; border-radius: 12px; }
.hero .btn span { font-size: 17px; font-weight: 400; line-height: 0; }
.hero-logo { position: relative; z-index: 1; width: 218px; height: 218px; flex: 0 0 218px; margin-right: 7%; display: grid; place-items: center; }
.hero-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 21px rgba(39,32,38,.13)); }
.section-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 35px 1px 17px; }
.section-row h2, .panel-title { margin: 0; font-size: 16px; font-weight: 720; letter-spacing: -.45px; }
.section-row p { margin: 5px 0 0; color: #77818e; font-size: 12px; }
.agent-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.agent-card { min-height: 161px; padding: 19px 21px; border: 1px solid var(--line); border-radius: 19px; background: #fff; color: var(--text); text-align: left; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
.agent-card:hover { transform: translateY(-3px); border-color: #d4dce8; box-shadow: 0 16px 28px rgba(30,44,64,.09); }
.agent-card-head { display: flex; justify-content: space-between; align-items: center; }
.agent-icon { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 13px; color: #365a82; background: #eef4fc; }
.agent-icon svg { width: 20px; height: 20px; }
.agent-supervisor { background: #f3edf7; color: #705884; }
.agent-desarrollo { background: #edf3ff; color: #4f73b5; }
.agent-marketing { background: #fdf2e8; color: #a87540; }
.agent-diseno { background: #f5ecf6; color: #8a5e96; }
.agent-atencion { background: #eaf7f5; color: #408c80; }
.agent-operacion { background: #f2f3ee; color: #748461; }
.agent-arrow { color: #b5bbc4; font-size: 18px; font-weight: 400; }
.agent-card h3 { margin: 17px 0 5px; font-size: 13px; font-weight: 710; }
.agent-card p { margin: 0; color: #707a87; font-size: 11px; line-height: 1.5; }
.bottom-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; margin-top: 15px; }
.panel { padding: 22px 24px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.mini-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #f0f1f4; color: #5a626e; font-size: 12px; }
.mini-status:first-of-type { border-top: 0; }
.mini-status div { display: flex; align-items: center; gap: 10px; }
.mini-status strong { color: #333a44; font-size: 13px; font-weight: 700; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c8cdd5; }
.dot.online { background: #39b986; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; background: #f1f3f6; color: #8b929c; font-size: 10px; font-weight: 700; white-space: nowrap; }
.badge.online { background: var(--green-soft); color: var(--green); }
.muted { color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 15px; }
.stat { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.stat strong { display: block; font-size: 27px; letter-spacing: -1px; }
.stat span { color: var(--muted); font-size: 11px; }

.chat-layout { display: grid; grid-template-columns: 252px minmax(0,1fr); gap: 14px; height: calc(100dvh - 110px); min-height: 420px; }
.chat-rail, .chat-main { min-height: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.chat-rail { display: flex; flex-direction: column; padding: 15px; }
.chat-rail .btn { width: 100%; margin-bottom: 24px; }
.rail-heading { margin: 0 9px 10px; color: #a5acb6; font-size: 10px; font-weight: 750; letter-spacing: .9px; }
.conversation-list { display: grid; align-content: start; gap: 4px; overflow: auto; }
.conversation-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 11px; background: transparent; color: #7d8590; text-align: left; font-size: 11px; }
.conversation-item:hover, .conversation-item.active { background: #f2f6fb; color: #263443; }
.conversation-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-agent-icon { width: 18px; flex: 0 0 18px; color: #7a9ac1; }
.rail-agent-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-main { display: flex; flex-direction: column; overflow: hidden; }
.chat-top { position: relative; z-index: 3; min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 22px; border-bottom: 1px solid #f0f1f4; }
.chat-agent-label { display: flex; align-items: center; gap: 11px; }
.chat-agent-label .agent-icon { width: 38px; height: 38px; }
.chat-agent-label strong { display: block; font-size: 12px; font-weight: 720; }
.chat-agent-label small { display: block; margin-top: 3px; color: #9ca3ad; font-size: 10px; }
.chat-top-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.agent-picker { position: relative; }
.agent-menu-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 11px; border: 1px solid #e5e9ee; border-radius: 12px; background: #fff; color: #495260; font: inherit; font-size: 11px; font-weight: 660; white-space: nowrap; box-shadow: 0 2px 6px rgba(34,46,66,.035); transition: background .16s, border-color .16s, box-shadow .16s; }
.agent-menu-trigger:hover, .agent-menu-trigger.open { border-color: #cbd9eb; background: #f8fbff; box-shadow: 0 4px 12px rgba(46,85,135,.07); }
.agent-menu-trigger:focus-visible, .agent-menu-option:focus-visible { outline: 3px solid rgba(58,132,222,.27); outline-offset: 2px; }
.agent-menu-trigger svg { width: 16px; height: 16px; flex: 0 0 16px; color: #7a8da5; }
.agent-menu-trigger .agent-menu-chevron { width: 13px; height: 13px; flex-basis: 13px; margin-left: 2px; color: #9aa4b1; transition: transform .16s; }
.agent-menu-trigger.open .agent-menu-chevron { transform: rotate(180deg); }
.agent-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 10; display: flex; flex-direction: column; gap: 6px; width: 306px; max-width: calc(100vw - 42px); max-height: min(440px, calc(100dvh - 158px)); overflow-y: auto; padding: 8px; border: 1px solid #e5e9ef; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 18px 52px rgba(28,43,65,.16), 0 2px 8px rgba(28,43,65,.05); animation: agent-menu-in .15s ease-out; }
.agent-menu[hidden] { display: none; }
.agent-menu-heading { padding: 9px 11px 8px; color: #9aa5b2; font-size: 9px; font-weight: 770; letter-spacing: 1.05px; }
.agent-menu-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 7px 9px; border: 0; border-radius: 12px; background: transparent; color: #29323e; text-align: left; font: inherit; transition: background .15s; }
.agent-menu-option:hover, .agent-menu-option:focus-visible { background: #f4f7fa; }
.agent-menu-option.selected { background: #eef5fd; }
.agent-menu-option.selected:hover, .agent-menu-option.selected:focus-visible { background: #e7f1fc; }
.agent-menu-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; }
.agent-menu-icon svg { width: 18px; height: 18px; }
.agent-menu-copy { min-width: 0; flex: 1; }
.agent-menu-copy strong { display: block; font-size: 11px; font-weight: 700; line-height: 1.3; }
.agent-menu-copy small { display: block; overflow: hidden; margin-top: 3px; color: #86919f; font-size: 10px; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.agent-menu-check { width: 17px; height: 17px; flex: 0 0 17px; margin-right: 2px; color: #3980d3; opacity: 0; }
.agent-menu-option.selected .agent-menu-check { opacity: 1; }
@keyframes agent-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-body { flex: 1; display: flex; flex-direction: column; gap: 22px; overflow: auto; padding: 27px 30px; }
.empty-chat { max-width: 470px; margin: auto; text-align: center; }
.empty-chat .big-icon { display: grid; place-items: center; width: 63px; height: 63px; margin: 0 auto 18px; border-radius: 21px; color: #6a87ae; background: #eef4fb; }
.empty-chat .big-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-chat h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.8px; }
.empty-chat p { margin: 0; color: #77818d; font-size: 12px; line-height: 1.65; }
.prompt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 23px; }
.prompt-chip { padding: 9px 12px; border: 1px solid #e3e7ed; border-radius: 99px; background: #fff; color: #5f6b79; font-size: 11px; transition: background .15s, border-color .15s; }
.prompt-chip:hover { background: #f1f6fc; border-color: #cddff5; }
.message { display: flex; gap: 10px; max-width: 84%; }
.message.user { flex-direction: row-reverse; margin-left: auto; }
.message-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 10px; background: #e9f0f9; color: #54759c; font-size: 11px; font-weight: 750; }
.message.user .message-avatar { background: #eceef1; color: #555e6a; }
.message-bubble { padding: 13px 16px; border: 1px solid #edf0f4; border-radius: 16px; background: #f7f9fc; color: #323a45; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user .message-bubble { border-color: #dbeaff; background: #eef5ff; }
.message-meta { margin-bottom: 6px; color: #8a929d; font-size: 10px; font-weight: 720; }
.chat-compose { padding: 16px 21px 17px; border-top: 1px solid #f0f1f4; }
.compose-box { display: flex; align-items: flex-end; gap: 9px; padding: 7px; border: 1px solid #dfe4eb; border-radius: 16px; background: #fff; box-shadow: 0 3px 13px rgba(38,52,72,.035); }
.compose-box:focus-within { border-color: #a8c9f6; box-shadow: 0 0 0 4px rgba(22,119,238,.08); }
.compose-box textarea { flex: 1; min-height: 42px; max-height: 180px; resize: none; border: 0; outline: 0; padding: 11px 8px; background: transparent; color: var(--text); font-size: 12px; }
.compose-box textarea::placeholder { color: #a7aeb8; }
.compose-box button { width: 36px; height: 36px; border: 0; border-radius: 11px; background: #222832; color: #fff; font-size: 19px; font-weight: 500; }
.compose-hint { margin: 8px 3px 0; color: #abb1bb; font-size: 10px; }

.columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.column { min-height: 310px; padding: 16px; border: 1px solid #e9ebef; border-radius: 19px; background: #f0f2f5; }
.column-title { display: flex; justify-content: space-between; margin: 2px 3px 16px; color: #525b67; font-size: 12px; font-weight: 720; }
.column-title span { color: #a1a8b2; }
.task-card { margin-bottom: 10px; padding: 15px; border: 1px solid #e9ebef; border-radius: 14px; background: #fff; box-shadow: 0 3px 8px rgba(39,50,65,.025); }
.task-card strong { display: block; font-size: 12px; line-height: 1.5; }
.task-card p { margin: 7px 0; color: #8c949f; font-size: 11px; line-height: 1.5; }
.task-assignment { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.task-assignment span { padding: 5px 8px; border-radius: 8px; background: var(--surface-soft); color: #687483; font-size: 10px; }
.task-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-top: 13px; }
.small-delete { border: 0; background: transparent; color: #a5acb5; font-size: 18px; }
.small-delete:hover { color: #c45555; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-full { grid-column: 1 / -1; }
.contact-auto-check { display: flex; align-items: center; gap: 10px; min-height: 39px; align-self: end; color: #4c5663; font-size: 12px; font-weight: 650; cursor: pointer; }
.contact-auto-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.contact-auto-hint { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { color: #555d69; font-size: 11px; font-weight: 680; }
.input, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #e1e5eb; border-radius: 10px; outline: 0; background: #fff; color: #242b34; font-size: 12px; }
.input:focus, .field textarea:focus { border-color: #9dc4f6; box-shadow: 0 0 0 4px rgba(22,119,238,.075); }
.field textarea { min-height: 95px; resize: vertical; }
.vito-select { position: relative; width: 100%; min-width: 0; }
select.vito-select-native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.vito-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid #e1e5eb; border-radius: 11px; background: #fff; color: #2c3440; font-size: 12px; font-weight: 570; text-align: left; box-shadow: 0 1px 2px rgba(30,45,68,.025); transition: background .16s, border-color .16s, box-shadow .16s; }
.vito-select-trigger:hover { border-color: #cbd6e4; background: #fbfcfe; }
.vito-select-trigger.open, .vito-select-trigger:focus-visible { border-color: #a9c5ec; background: #fff; box-shadow: 0 0 0 4px rgba(22,119,238,.08); outline: 0; }
.vito-select-trigger svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: #8895a6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s; }
.vito-select-trigger.open svg { transform: rotate(180deg); }
.vito-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vito-select-menu { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; padding: 8px; border: 1px solid #e2e7ef; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 18px 42px rgba(35,49,69,.16), 0 2px 8px rgba(35,49,69,.05); backdrop-filter: blur(22px); scrollbar-width: none; -ms-overflow-style: none; animation: agent-menu-in .15s ease-out; }
.vito-select-menu.is-inline { position: relative; top: auto; left: auto; width: 100%; max-height: 280px; margin-top: 12px; box-shadow: 0 10px 26px rgba(35,49,69,.10); }
.vito-select-menu::-webkit-scrollbar { display: none; }
.vito-select-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; flex: 0 0 auto; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #46515e; font-size: 12px; font-weight: 540; text-align: left; }
.vito-select-option:hover, .vito-select-option:focus-visible { background: #f3f6fa; color: #1f2a38; outline: 0; }
.vito-select-option[aria-selected="true"] { background: #edf4fd; color: #215eaa; font-weight: 680; }
.vito-select-option[aria-selected="true"]:hover, .vito-select-option[aria-selected="true"]:focus-visible { background: #e6f0fc; }
.vito-select-check { color: #2674d3; font-size: 14px; font-weight: 750; opacity: 0; }
.vito-select-option[aria-selected="true"] .vito-select-check { opacity: 1; }
.vito-select.is-compact { width: 120px; }
.vito-select.is-compact .vito-select-trigger { min-height: 31px; padding: 0 9px; border-radius: 9px; font-size: 10px; }
.vito-select.is-stage { width: 145px; }
.vito-select.is-stage .vito-select-trigger { min-height: 33px; border-color: #dce9dc; border-radius: 10px; background: #f0f8f2; color: #39724d; font-size: 10px; }
.form-panel { margin-bottom: 18px; }
.form-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.empty-state { padding: 43px 14px; color: #a0a7b1; font-size: 12px; line-height: 1.6; text-align: center; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.crm-table { min-width: 790px; }
.crm-table td:first-child { min-width: 145px; }
.data-table th { padding: 13px 11px; border-bottom: 1px solid #edf0f3; color: #a2a9b2; text-align: left; font-size: 10px; font-weight: 750; letter-spacing: .8px; }
.data-table td { padding: 15px 11px; border-bottom: 1px solid #f0f1f4; color: #6c7581; }
.data-table strong { color: #2c333d; }
.data-table tr:last-child td { border-bottom: 0; }
.integration-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.integration-card { padding: 23px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }
.integration-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.integration-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #f2f5f9; color: #627d9f; font-size: 16px; font-weight: 750; }
.integration-head h3 { margin: 0; font-size: 13px; font-weight: 730; }
.integration-head p { margin: 4px 0 0; color: #a5acb6; font-size: 10px; }
.integration-card > p { min-height: 52px; margin: 17px 0 0; color: #707b87; font-size: 12px; line-height: 1.6; }
.integration-actions { display: flex; gap: 8px; margin-top: 17px; }
.integration-actions .btn { white-space: normal; text-align: center; }
.whatsapp-lines { margin-top: 18px; padding: 25px; }
.whatsapp-lines-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.whatsapp-lines-head p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.whatsapp-lines-head .badge { flex: 0 0 auto; }
.whatsapp-lines-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.whatsapp-line { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.whatsapp-line-top { display: flex; align-items: center; gap: 11px; }
.whatsapp-line-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 18px; }
.whatsapp-line-top > div { min-width: 0; flex: 1; }
.whatsapp-line h3 { margin: 0; font-size: 13px; }
.whatsapp-line small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-line-top .badge { flex: 0 0 auto; }
.whatsapp-line p { min-height: 38px; margin: 17px 0 15px; color: #707b87; font-size: 12px; line-height: 1.6; }
.whatsapp-add { display: flex; align-items: flex-end; gap: 12px; margin-top: 20px; padding-top: 21px; border-top: 1px solid var(--line); }
.whatsapp-add .field { width: min(100%, 380px); }
.whatsapp-add .field small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.whatsapp-add .btn { flex: 0 0 auto; margin-bottom: 25px; }
.whatsapp-pairing { display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 690px; margin-top: 18px; padding: 25px; }
.whatsapp-pairing > div { max-width: 330px; }
.whatsapp-pairing p { margin: 10px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.whatsapp-pairing .btn { margin: 0 8px 8px 0; }
.whatsapp-pairing img { display: block; width: min(220px, 100%); aspect-ratio: 1; padding: 10px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.whatsapp-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 14px; min-height: 480px; height: min(640px, calc(100dvh - 210px)); }
.gmail-connection { margin-bottom: 18px; }
.gmail-connection .panel-header { align-items: flex-start; gap: 20px; }
.gmail-connection .subtitle { margin-top: 6px; font-size: 12px; }
.gmail-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.gmail-steps > div { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.gmail-steps span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 750; }
.gmail-steps p { margin: 1px 0 0; color: #56606d; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.gmail-steps code { color: #285e9c; font-size: 10px; }
.gmail-copy-scope { display: inline; margin-left: 3px; font-size: 11px; white-space: normal; }
.gmail-setup-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.gmail-privacy { margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.gmail-ready { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--green); font-size: 12px; font-weight: 650; }
.gmail-ready.has-error { color: #b75858; }
.gmail-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; min-height: 520px; height: min(680px, calc(100dvh - 180px)); }
.gmail-list, .gmail-detail { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow); }
.gmail-list { display: flex; flex-direction: column; }
.gmail-list-head { display: flex; justify-content: space-between; gap: 10px; padding: 19px 20px; border-bottom: 1px solid var(--line); font-size: 12px; }
.gmail-list-head span { color: var(--muted); }
.gmail-list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.gmail-item { display: block; width: 100%; padding: 13px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; transition: background .15s, border-color .15s; }
.gmail-item + .gmail-item { margin-top: 4px; }
.gmail-item:hover, .gmail-item:focus-visible { border-color: #e9eef5; background: #f7f9fc; }
.gmail-item.active { border-color: #e5edf8; background: #edf4fd; }
.gmail-item strong, .gmail-item span, .gmail-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmail-item strong { color: var(--text); font-size: 12px; }
.gmail-item span { margin-top: 5px; color: #586574; font-size: 11px; }
.gmail-item small { margin-top: 7px; color: #9aa5b2; font-size: 10px; }
.gmail-detail { display: flex; flex-direction: column; }
.gmail-detail-head { padding: 25px 28px 20px; border-bottom: 1px solid var(--line); }
.gmail-detail-head h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.4px; line-height: 1.35; overflow-wrap: anywhere; }
.gmail-detail-head p { margin: 0 0 5px; color: #5a6572; font-size: 12px; overflow-wrap: anywhere; }
.gmail-detail-head small { color: #9aa4af; font-size: 10px; }
.gmail-detail-body { flex: 1; min-height: 140px; overflow: auto; padding: 25px 28px; color: #4a5563; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.gmail-detail-empty { display: grid; place-items: center; flex: 1; padding: 24px; color: var(--muted); font-size: 12px; text-align: center; }
.gmail-agent-form { display: flex; align-items: end; gap: 12px; padding: 18px 28px 22px; border-top: 1px solid var(--line); }
.gmail-agent-form .field { flex: 1; min-width: 0; }
.gmail-agent-form .btn { margin-bottom: 0; }
.whatsapp-rail, .whatsapp-thread { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.whatsapp-rail { display: flex; flex-direction: column; }
.whatsapp-filters { display: flex; flex: 0 0 auto; gap: 7px; overflow-x: auto; padding: 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.whatsapp-filter { min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: #6d7784; font-size: 11px; font-weight: 650; }
.whatsapp-filter:hover, .whatsapp-filter:focus-visible { border-color: #bfd4ee; color: var(--blue); }
.whatsapp-filter.active { border-color: #d3e4f9; background: var(--blue-soft); color: #236bbd; }
.whatsapp-chat-list { flex: 1; overflow-y: auto; padding: 8px; }
.whatsapp-chat { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 70px; padding: 11px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.whatsapp-chat:hover, .whatsapp-chat:focus-visible { background: #f4f7fb; }
.whatsapp-chat.active { background: var(--blue-soft); }
.whatsapp-chat-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 13px; background: #eaf1f9; color: #4e7196; font-size: 13px; font-weight: 750; }
.whatsapp-chat-copy { min-width: 0; flex: 1; }
.whatsapp-chat-copy strong { display: block; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-chat-copy small { display: block; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: #9ca5af; font-size: 9px; white-space: nowrap; }
.whatsapp-chat-meta b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 9px; }
.whatsapp-thread { display: flex; flex-direction: column; }
.whatsapp-thread-head { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.whatsapp-thread-head > div { min-width: 0; flex: 1; }
.whatsapp-thread-head strong { display: block; font-size: 13px; }
.whatsapp-thread-head small { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-messages { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 13px; overflow-y: auto; padding: 20px; background: #fbfcfd; }
.whatsapp-message { display: flex; }
.whatsapp-message.outgoing { justify-content: flex-end; }
.whatsapp-message-bubble { max-width: min(80%, 500px); padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: #fff; color: #35404d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.whatsapp-message.outgoing .whatsapp-message-bubble { border-color: #d9e9fa; border-radius: 14px 14px 4px 14px; background: #eaf4ff; }
.whatsapp-message-bubble small { display: block; margin-top: 7px; color: #9ca6b1; font-size: 9px; text-align: right; }
.whatsapp-sender { display: block; margin-bottom: 4px; color: #3970a7; font-size: 10px; }
.whatsapp-composer { padding: 13px 16px 15px; border-top: 1px solid var(--line); background: #fff; }
.whatsapp-composer label { display: block; margin-bottom: 8px; color: #586372; font-size: 10px; font-weight: 700; }
.whatsapp-composer > div { display: flex; align-items: flex-end; gap: 10px; }
.whatsapp-composer textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 130px; resize: vertical; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-soft); color: var(--text); font-size: 12px; line-height: 1.45; }
.whatsapp-composer textarea:focus { border-color: #a9c5ec; outline: 3px solid rgba(22,119,238,.1); }
.whatsapp-composer-hint { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.whatsapp-thread-empty { max-width: 330px; margin: auto; padding: 25px; color: var(--muted); text-align: center; }
.whatsapp-thread-empty > span { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 17px; background: var(--blue-soft); color: var(--blue); font-size: 29px; }
.whatsapp-thread-empty h2 { margin: 0 0 7px; color: var(--text); font-size: 17px; }
.whatsapp-thread-empty p { margin: 0; font-size: 12px; line-height: 1.6; }
.whatsapp-back { display: none; }
.whatsapp-assignments { margin-top: 17px; padding: 23px 25px; }
.whatsapp-assignments .subtitle { margin: 7px 0 0; font-size: 11px; }
.whatsapp-assignment-list { display: grid; gap: 14px; margin-top: 18px; }
.whatsapp-line-config { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.whatsapp-profile-details { margin-bottom: 17px; border-bottom: 1px solid var(--line); }
.whatsapp-profile-details summary { margin-bottom: 15px; color: #526173; font-size: 11px; font-weight: 700; cursor: pointer; }
.whatsapp-profile-details summary:hover { color: var(--blue); }
.whatsapp-profile-details[open] summary { color: var(--blue); }
.whatsapp-profile-details > div { padding-bottom: 18px; }
.whatsapp-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.whatsapp-services { margin: 16px 0; padding: 0; border: 0; }
.whatsapp-services legend { margin-bottom: 10px; color: #586372; font-size: 11px; font-weight: 700; }
.whatsapp-services > div { display: flex; flex-wrap: wrap; gap: 8px; }
.whatsapp-services label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #4c5663; font-size: 11px; cursor: pointer; }
.whatsapp-services label:hover { border-color: #bfd4ee; }
.whatsapp-services input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.whatsapp-services small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.whatsapp-group-settings { display: grid; gap: 10px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.whatsapp-group-settings > div:first-child strong, .whatsapp-group-row strong { display: block; font-size: 11px; }
.whatsapp-group-settings small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.whatsapp-group-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.whatsapp-group-row > span { min-width: 0; overflow-wrap: anywhere; }
.whatsapp-group-row .vito-switch { white-space: nowrap; }
.whatsapp-agent-form { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(190px, 260px) auto; align-items: start; gap: 15px; }
.whatsapp-agent-form > div:first-child { padding-top: 17px; }
.whatsapp-agent-form strong { display: block; font-size: 12px; }
.whatsapp-agent-form small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.whatsapp-agent-form .btn { margin-top: 17px; }
.whatsapp-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.whatsapp-auto-copy { min-width: 0; }
.whatsapp-auto-copy strong { display: block; font-size: 12px; }
.whatsapp-auto-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.whatsapp-auto-copy .whatsapp-auto-error { color: #a94141; }
.vito-switch { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 5px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; }
.vito-switch:hover:not(:disabled) { color: var(--text); }
.vito-switch-track { width: 36px; height: 22px; padding: 3px; border-radius: 99px; background: #cbd2dc; transition: background .16s ease; }
.vito-switch-knob { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22, 30, 40, .15); transition: transform .16s ease; }
.vito-switch.is-on .vito-switch-track { background: var(--green); }
.vito-switch.is-on .vito-switch-knob { transform: translateX(14px); }
.vito-switch:focus-visible { outline: 3px solid rgba(22,119,238,.25); outline-offset: 2px; }
.whatsapp-advisors { margin-top: 17px; padding: 23px 25px; }
.budibase-setup { margin: 17px 0; padding: 23px 25px; }
.budibase-setup .subtitle { margin-top: 7px; font-size: 11px; }
.budibase-setup-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 17px; }
.budibase-setup-form .field { min-width: 0; }
.budibase-setup-form .field small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.budibase-setup-form .btn { grid-column: 1 / -1; justify-self: start; min-height: 39px; }
.budibase-ready { margin: 15px 0 0; color: var(--green); font-size: 11px; font-weight: 650; }
.budibase-help { margin: 13px 0 0; }
.whatsapp-advisors .subtitle { margin: 7px 0 0; font-size: 11px; }
.whatsapp-advisor-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.whatsapp-advisor-form > .btn { min-height: 42px; }
.whatsapp-advisor-list { display: grid; gap: 8px; margin-top: 17px; }
.whatsapp-advisor-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.whatsapp-advisor-item strong { display: block; font-size: 12px; }
.whatsapp-advisor-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.whatsapp-digest { margin-top: 17px; padding: 23px 25px; }
.whatsapp-digest .subtitle { margin: 7px 0 0; font-size: 11px; }
.whatsapp-digest-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.whatsapp-digest-check { display: inline-flex; align-items: center; gap: 9px; align-self: center; color: #4c5663; font-size: 12px; font-weight: 650; cursor: pointer; }
.whatsapp-digest-check input, .whatsapp-digest-groups input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.whatsapp-digest-groups { display: grid; gap: 9px; grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
.whatsapp-digest-groups strong { font-size: 11px; }
.whatsapp-digest-groups label { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: #4c5663; font-size: 11px; cursor: pointer; }
.whatsapp-digest-groups small { color: var(--muted); font-size: 10px; }
.whatsapp-digest-actions { display: flex; flex-wrap: wrap; gap: 9px; grid-column: 1 / -1; }
.whatsapp-digest-preview { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.whatsapp-digest-preview > strong { font-size: 12px; }
.whatsapp-digest-preview > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.whatsapp-digest-preview small { color: var(--muted); font-size: 10px; }
.whatsapp-digest-preview pre { overflow: auto; margin: 9px 0 0; color: #374354; font: inherit; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.whatsapp-cut-list { display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.whatsapp-cut-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.whatsapp-cut-item strong { display: block; font-size: 12px; }
.whatsapp-cut-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.whatsapp-cut-item p { margin: 8px 0 0; color: #586372; font-size: 11px; line-height: 1.5; }
.whatsapp-cut-empty { margin: 17px 0 0; font-size: 11px; }
.flow-source-tabs { display: inline-flex; gap: 5px; margin: 0 0 18px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.flow-source-tab { min-height: 38px; padding: 9px 17px; border: 0; border-radius: 10px; background: transparent; color: #79828e; font-size: 12px; font-weight: 700; }
.flow-source-tab:hover, .flow-source-tab:focus-visible { background: var(--surface-soft); color: var(--text); }
.flow-source-tab.active { background: var(--blue-soft); color: #246abd; }
.flow-key-card { display: flex; gap: 17px; margin-bottom: 17px; }
.flow-key-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font-size: 20px; }
.flow-key-card > div:last-child { flex: 1; min-width: 0; }
.flow-key-card .subtitle { max-width: 680px; margin-top: 7px; }
.flow-key-link { display: inline-block; margin-top: 10px; }
.flow-key-form { display: flex; align-items: flex-end; gap: 12px; max-width: 650px; margin-top: 19px; }
.flow-key-form .field { flex: 1; min-width: 0; }
.flows-layout { display: grid; grid-template-columns: minmax(225px, 275px) minmax(0, 1fr); gap: 15px; align-items: start; }
.flows-list, .flows-workspace { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }
.flows-list { position: sticky; top: 90px; }
.flows-list-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 17px 13px; color: #3b4551; font-size: 12px; }
.flows-list-head span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #f1f4f7; color: #8b97a3; font-size: 10px; }
.flows-list-scroll { max-height: min(690px, calc(100dvh - 190px)); overflow-y: auto; padding: 0 8px 9px; }
.flow-list-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 65px; padding: 11px; border: 0; border-radius: 13px; background: transparent; text-align: left; }
.flow-list-item:hover, .flow-list-item:focus-visible { background: #f5f8fc; }
.flow-list-item.selected { background: var(--blue-soft); }
.flow-list-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 11px; background: #edf2fa; color: #53759a; font-size: 16px; }
.flow-list-item > span:nth-child(2) { min-width: 0; flex: 1; }
.flow-list-item strong { display: block; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.flow-list-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.flow-list-arrow { color: #abb5c2; font-size: 20px; }
.flows-workspace { min-height: 505px; }
.flows-empty { display: grid; align-content: center; justify-items: center; min-height: 505px; padding: 30px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.6; }
.flows-empty > span { display: grid; place-items: center; width: 57px; height: 57px; margin-bottom: 15px; border-radius: 18px; background: var(--blue-soft); color: var(--blue); font-size: 28px; }
.flows-empty h2 { margin: 0 0 5px; color: var(--text); font-size: 17px; }
.flows-empty p { max-width: 300px; margin: 0; }
.flow-editor { min-width: 0; padding: 23px; }
.flow-editor-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.flow-editor-head .field { min-width: 0; width: min(100%, 520px); }
.flow-editor-head .input { font-size: 16px; font-weight: 690; letter-spacing: -.4px; }
.flow-editor-head .badge { margin-bottom: 11px; }
.flow-save-hint { margin: 13px 0 18px; color: #8793a0; font-size: 11px; line-height: 1.55; }
.flow-canvas-wrap { min-height: 290px; overflow: auto; border: 1px solid #e8edf3; border-radius: 16px; background-color: #fbfcfe; background-image: radial-gradient(#dbe4ef 0.7px, transparent 0.7px); background-size: 20px 20px; }
.flow-canvas { position: relative; min-height: 290px; }
.flow-lines { position: absolute; top: 0; left: 0; overflow: visible; fill: none; stroke: #abc7e6; stroke-width: 2.2; }
.flow-node { position: absolute; z-index: 1; display: grid; align-content: center; width: 166px; min-height: 68px; padding: 11px 14px 11px 18px; border: 1px solid #dfe7f0; border-radius: 13px; background: #fff; color: var(--text); text-align: left; box-shadow: 0 5px 15px rgba(43,64,90,.07); }
.flow-node:hover, .flow-node:focus-visible { border-color: #9dbfe8; box-shadow: 0 6px 18px rgba(38,92,159,.12); }
.flow-node.selected { border-color: #7db1ee; background: #f6faff; box-shadow: 0 0 0 3px rgba(22,119,238,.12); }
.flow-node.disabled { opacity: .5; }
.flow-node-dot { position: absolute; top: calc(50% - 5px); left: -5px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #82b2e7; box-shadow: 0 0 0 1px #82b2e7; }
.flow-node strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.flow-node small { overflow: hidden; margin-top: 5px; color: #98a2ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.flow-inspector { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.flow-inspector-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.flow-inspector h3 { margin: 5px 0 0; font-size: 14px; }
.flow-inspector .btn { margin-top: 11px; }
.flow-inspector-hint { padding: 18px 2px 0; color: #9aa3ae; font-size: 11px; }
.flow-param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.flow-param-grid .field { min-width: 0; }
.flow-param-grid .field textarea { min-height: 112px; }
.flow-param-check { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 10px 12px; border: 1px solid #e1e7ef; border-radius: 10px; background: #fff; color: #555d69; font-size: 11px; font-weight: 680; cursor: pointer; }
.flow-param-check input { appearance: none; position: relative; width: 33px; height: 20px; flex: 0 0 33px; margin: 0; border: 0; border-radius: 99px; background: #cbd3de; cursor: pointer; transition: background .18s; }
.flow-param-check input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.13); transition: transform .18s; }
.flow-param-check input:checked { background: var(--blue); }
.flow-param-check input:checked::after { transform: translateX(13px); }
.flow-param-empty { margin: 0; color: var(--muted); font-size: 11px; }
.flow-node-advanced { margin-top: 17px; }
.flow-node-advanced summary { color: #617185; cursor: pointer; font-size: 11px; font-weight: 650; }
.flow-node-advanced .field { margin-top: 12px; }
.field .flow-json { min-height: 165px; padding: 13px; border-color: #e1e7ef; background: #fff; color: #374252; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; tab-size: 2; }
.flow-advanced { margin-top: 22px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; }
.flow-advanced summary { color: #4d5d70; cursor: pointer; font-size: 12px; font-weight: 700; }
.flow-advanced p { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.flow-advanced .flow-json { min-height: 260px; }
.flow-advanced .btn { margin-top: 12px; }
.flow-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.notice { margin-bottom: 18px; padding: 13px 16px; border: 1px solid #e6e8ed; border-radius: 13px; background: #fff; color: #626b77; font-size: 12px; line-height: 1.55; }
.image-workspace { display: grid; grid-template-columns: minmax(300px,420px) 1fr; gap: 15px; }
.image-preview { display: grid; place-items: center; min-height: 420px; overflow: hidden; border: 1px solid #e8ebf0; border-radius: 20px; background: linear-gradient(45deg,#f9fafb 25%,#f4f6f8 25%,#f4f6f8 50%,#f9fafb 50%,#f9fafb 75%,#f4f6f8 75%); background-size: 26px 26px; text-align: center; }
.image-preview img { display: block; max-width: 100%; max-height: 680px; }
.image-placeholder { padding: 20px; color: #a4abb5; font-size: 12px; line-height: 1.65; }
.image-placeholder span { display: block; margin-bottom: 11px; color: #b0bcc9; font-size: 42px; }
.settings-section { max-width: 900px; }
.settings-section + .settings-section { margin-top: 22px; }
.settings-panel { margin-bottom: 16px; padding: 23px 25px 25px; }
.settings-panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.settings-panel-head > div { min-width: 0; flex: 1; }
.settings-panel-head .badge { margin-left: auto; }
.settings-panel-head p { margin: 5px 0 0; color: #8993a0; font-size: 11px; line-height: 1.5; }
.settings-panel-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #e8edf4; border-radius: 14px; background: #f5f8fc; color: #647f9f; font-size: 18px; font-weight: 550; }
.settings-model-field { max-width: 540px; }
.settings-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.settings-service-field { min-width: 0; padding: 15px; border: 1px solid #ecf0f4; border-radius: 15px; background: #fafbfd; }
.settings-service-field .input { min-width: 0; border-color: #e3e8ef; border-radius: 10px; background: #fff; }
.settings-service-label { display: flex; align-items: center; gap: 9px; min-height: 32px; margin-bottom: 2px; }
.settings-service-label label { display: block; color: #333c49; font-size: 11px; font-weight: 700; }
.settings-service-label small { display: block; margin-top: 2px; color: #a0a9b5; font-size: 10px; }
.settings-service-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 10px; background: #eef3f9; color: #6e89aa; font-size: 13px; font-weight: 700; }
.settings-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2px 2px 0; }
.settings-actions span { color: #9aa3ae; font-size: 11px; }
.memory-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 15px; align-items: start; }
.memory-groups { display: grid; gap: 15px; }
.memory-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf0f3; }
.memory-item:last-child { border-bottom: 0; padding-bottom: 0; }
.memory-item p { margin: 0; color: #4b5562; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-item .small-delete { flex: 0 0 22px; }
#toast { position: fixed; right: 24px; bottom: 23px; z-index: 20; padding: 12px 16px; border: 1px solid #d9e9dc; border-radius: 12px; background: #fff; color: #427b53; font-size: 12px; box-shadow: 0 12px 35px rgba(25,35,49,.12); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: translateY(0); }
#toast.error { border-color: #f0d9d8; color: #b75858; }

@media (max-width: 1080px) {
  .sidebar { width: 224px; flex-basis: 224px; }
  .view { padding: 20px 26px 55px; }
  .topbar { padding: 0 26px; }
  .topbar-subtitle { display: none; }
  .agent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bottom-grid { grid-template-columns: 1fr; }
  .hero-logo { margin-right: 2%; }
  .flows-layout { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); }
  .gmail-steps { grid-template-columns: 1fr; }
}
@media (min-width: 741px) {
  .sidebar-collapsed .sidebar { width: 76px; flex-basis: 76px; padding: 28px 10px 18px; }
  .sidebar-collapsed .brand { justify-content: center; padding: 4px 0 43px; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-footer { display: none; }
  .sidebar-collapsed .sidebar nav:nth-of-type(2) { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
  .sidebar-collapsed .nav-item { justify-content: center; min-height: 44px; padding: 10px; gap: 0; font-size: 0; }
  .sidebar-collapsed .nav-count, .sidebar-collapsed .sidebar-status-copy { display: none; }
  .sidebar-collapsed .sidebar-status { width: 46px; height: 46px; justify-content: center; margin: 0 auto; padding: 0; border-radius: 15px; }
}
@media (max-width: 740px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: auto; bottom: 9px; left: 10px; right: 10px; z-index: 12; width: auto; height: 63px; padding: 5px; border: 1px solid #e8e9ed; border-radius: 21px; box-shadow: 0 12px 35px rgba(30,42,60,.13); }
  .sidebar .brand, .sidebar-label, .sidebar-spacer, .sidebar-status, .sidebar-footer, .sidebar nav:nth-of-type(2) { display: none; }
  .sidebar nav:first-of-type { display: flex; justify-content: space-around; align-items: center; width: 100%; height: 100%; gap: 2px; }
  .nav-item { flex: 1; flex-direction: column; gap: 2px; justify-content: center; width: auto; min-width: 0; min-height: 49px; padding: 5px 2px; font-size: 8px; }
  .nav-item[data-page="chat"] { font-size: 0; }
  .nav-item[data-page="chat"]::after { content: 'Chats'; font-size: 8px; }
  .nav-icon { width: 19px; }
  .nav-count { display: none; }
  .topbar { height: 60px; padding: 0 15px; }
  .topbar-left { gap: 0; }
  .sidebar-toggle, .topbar-eyebrow { display: none; }
  .topbar-title { font-size: 16px; }
  .topbar-right { gap: 8px; margin-left: 10px; }
  .topbar-actions .btn { width: 35px; height: 35px; min-height: 35px; padding: 0; font-size: 0; }
  .topbar-actions .btn::after { content: attr(data-mobile-icon); font-size: 18px; font-weight: 600; line-height: 1; }
  .local-pill { width: 27px; height: 27px; justify-content: center; padding: 0; }
  .local-pill .local-pill-text, .topbar .avatar { display: none; }
  .view { padding: 16px 15px 103px; }
  .hero { min-height: 235px; padding: 27px; }
  .hero-logo { display: none; }
  .hero h2 { font-size: 31px; }
  .agent-grid, .integration-grid, .columns, .image-workspace, .form-grid, .memory-layout, .settings-service-grid, .whatsapp-lines-grid { grid-template-columns: 1fr; }
  .whatsapp-lines { padding: 19px; }
  .whatsapp-lines-head { flex-direction: column; }
  .whatsapp-add { flex-direction: column; align-items: stretch; }
  .whatsapp-add .field { width: 100%; }
  .whatsapp-add .btn { margin-bottom: 0; }
  .whatsapp-pairing { flex-direction: column; align-items: flex-start; }
  .whatsapp-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .gmail-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .gmail-list { min-height: 230px; max-height: 360px; }
  .gmail-detail { min-height: 420px; }
  .gmail-detail-head, .gmail-detail-body { padding-left: 20px; padding-right: 20px; }
  .gmail-agent-form { flex-direction: column; align-items: stretch; padding: 16px 20px 20px; }
  .gmail-agent-form .btn { width: 100%; }
  .gmail-connection { padding: 19px; }
  .gmail-connection .panel-header { flex-direction: column; gap: 10px; }
  .whatsapp-rail { min-height: 300px; max-height: 480px; }
  .whatsapp-thread { min-height: 400px; }
  .whatsapp-layout.is-empty .whatsapp-rail { min-height: 155px; max-height: 155px; }
  .whatsapp-layout.is-empty .whatsapp-thread { display: none; }
  .whatsapp-layout.has-selection .whatsapp-rail { display: none; }
  .whatsapp-back { display: inline-flex; padding: 6px 10px; }
  .whatsapp-assignments { padding: 19px; }
  .whatsapp-assignments .panel-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .whatsapp-agent-form { grid-template-columns: 1fr auto; }
  .whatsapp-agent-form > div:first-child { grid-column: 1 / -1; padding-top: 0; }
  .whatsapp-profile-grid { grid-template-columns: 1fr; }
  .whatsapp-group-row { align-items: flex-start; flex-direction: column; }
  .whatsapp-composer > div { align-items: stretch; flex-direction: column; }
  .whatsapp-auto-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .whatsapp-advisors { padding: 19px; }
  .budibase-setup { padding: 19px; }
  .budibase-setup-form { grid-template-columns: 1fr; }
  .whatsapp-advisor-form { grid-template-columns: 1fr; }
  .whatsapp-digest { padding: 19px; }
  .whatsapp-digest-form { grid-template-columns: 1fr; }
  .flows-layout { grid-template-columns: 1fr; }
  .flows-list { position: static; }
  .flows-list-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: none; overflow: visible; padding: 0 8px 9px; }
  .flow-list-item { min-width: 0; }
  .flow-list-arrow { display: none; }
  .flow-key-card { display: block; }
  .flow-key-icon { margin-bottom: 14px; }
  .flow-key-form { flex-direction: column; align-items: stretch; }
  .flow-editor { padding: 17px; }
  .flow-editor-head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .flow-editor-head .badge { margin: 0; }
  .flow-param-grid { grid-template-columns: 1fr; }
  .flows-workspace, .flows-empty { min-height: 420px; }
  .settings-panel { padding: 19px; }
  .settings-panel-head { align-items: flex-start; }
  .settings-actions { flex-direction: column; align-items: stretch; }
  .settings-actions .btn { width: 100%; }
  .view.chat-view { padding: 12px 12px 86px; }
  .chat-layout { grid-template-columns: 1fr; min-height: 0; height: calc(100dvh - 158px); }
  .chat-rail { display: none; }
  .chat-body { padding: 18px 14px; }
  .message { max-width: 96%; }
  .chat-top { padding: 12px; }
  .chat-agent-label small { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .chat-compose { padding: 12px; }
}
@media (max-width: 440px) {
  .chat-agent-label small { max-width: 125px; }
  .agent-menu-trigger { width: 38px; padding: 0; }
  .agent-menu-trigger span, .agent-menu-trigger .agent-menu-chevron { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Portal privado del equipo: comparte las superficies, controles y colores de Vito. */
.team-body { min-height: 100dvh; }
.team-auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 26px; background: radial-gradient(circle at 50% 0, #fff, var(--bg) 52%); }
.team-auth { width: min(100%, 440px); padding: 34px; border-radius: 24px; }
.team-auth-brand, .team-brand { display: flex; align-items: center; gap: 11px; }
.team-auth-brand { margin-bottom: 42px; }
.team-auth-brand .brand-mark, .team-brand .brand-mark { padding: 0; width: 42px; height: 42px; flex: 0 0 42px; }
.team-auth-brand .brand-mark img, .team-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.23); }
.team-auth-brand strong, .team-brand strong { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.8px; line-height: 1; }
.team-auth-brand small, .team-brand small { display: block; margin-top: 5px; color: #9aa2ad; font-size: 10px; }
.team-auth h1 { margin: 11px 0 7px; font-size: 28px; font-weight: 740; letter-spacing: -1.2px; }
.team-auth-form { display: grid; gap: 17px; margin-top: 26px; }
.team-auth-form .input { min-height: 44px; font-size: 14px; }
.team-auth-form .btn { min-height: 44px; margin-top: 7px; font-size: 13px; }
.team-error { color: #aa4145; }
.team-auth > .team-error { margin: 15px 0 0; font-size: 12px; }
.team-topbar { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
.team-topbar-inner { max-width: 1440px; min-height: 72px; display: flex; align-items: center; gap: 30px; margin: auto; padding: 0 36px; }
.team-brand { flex: 0 0 auto; min-width: 145px; }
.team-brand strong { font-size: 17px; }
.team-brand .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
.team-nav { display: flex; align-items: center; gap: 3px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.team-nav::-webkit-scrollbar { display: none; }
.team-nav-item { min-height: 38px; flex: 0 0 auto; padding: 8px 13px; border: 0; border-radius: 11px; background: transparent; color: #727b88; font-size: 12px; font-weight: 650; }
.team-nav-item:hover { color: var(--text); background: #f2f5f9; }
.team-nav-item.active { color: var(--blue); background: var(--blue-soft); }
.team-account { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.team-account .btn { min-height: 34px; }
.team-person { display: grid; gap: 3px; text-align: right; }
.team-person strong { font-size: 11px; }
.team-person small { color: var(--muted); font-size: 10px; }
.team-main { width: min(100%, 1440px); margin: auto; padding: 32px 36px 70px; }
.team-intro { margin: 0 0 25px; }
.team-intro h1, .team-section-head h1 { margin: 6px 0; font-size: clamp(24px,3vw,30px); letter-spacing: -1.1px; line-height: 1.2; }
.team-intro p, .team-section-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.team-section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.team-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.team-stat { display: grid; gap: 8px; min-height: 142px; text-align: left; transition: border-color .16s, transform .16s; }
.team-stat:hover { border-color: #c9d9ed; transform: translateY(-2px); }
.team-stat > span { color: #697380; font-size: 12px; font-weight: 650; }
.team-stat strong { font-size: 34px; line-height: 1; letter-spacing: -1.5px; }
.team-stat small { color: var(--blue); font-size: 11px; font-weight: 650; }
.team-summary-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 17px; }
.team-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.team-list-row:first-of-type { border-top: 0; }
.team-list-row > div:first-child { min-width: 0; }
.team-list-row strong { display: block; font-size: 12px; font-weight: 680; }
.team-list-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.team-list-row > span:not(.badge) { flex: 0 0 auto; font-size: 12px; font-weight: 680; }
.team-empty { margin: 18px 0; color: #939ba6; font-size: 12px; text-align: center; }
.team-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.team-task, .team-contact { min-width: 0; }
.team-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-task-top small { color: var(--muted); font-size: 11px; }
.team-task h2, .team-contact h2 { margin: 19px 0 7px; font-size: 16px; letter-spacing: -.4px; }
.team-task p, .team-contact p { margin: 0; color: #697380; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.team-task-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.team-task-actions .btn { min-height: 32px; padding: 6px 9px; font-size: 11px; }
.team-contact-info { display: grid; gap: 7px; margin-top: 18px; color: #687685; font-size: 11px; overflow-wrap: anywhere; }
.team-contact .team-note { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.team-line-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 16px; }
.team-line-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: #65707e; font-size: 12px; font-weight: 650; }
.team-line-chip:hover { border-color: #b8cce5; }
.team-line-chip.active { border-color: #a9cdfb; background: var(--blue-soft); color: #2467bc; }
.team-whatsapp-grid { display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, .62fr); gap: 16px; height: min(660px,calc(100dvh - 205px)); min-height: 440px; }
.team-chats, .team-messages { display: flex; flex-direction: column; min-height: 0; }
.team-chat-list, .team-message-list { min-height: 0; overflow: auto; margin-top: 18px; }
.team-chat-item { display: block; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.team-chat-item:hover { background: #f7f9fc; }
.team-chat-item.active { background: var(--blue-soft); }
.team-chat-item strong, .team-chat-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chat-item strong { font-size: 12px; }
.team-chat-item small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.team-message-list { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 2px 2px 16px; }
.team-message { max-width: 82%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: #fafbfd; }
.team-message.sent { align-self: flex-end; border-color: #d8e8fb; border-radius: 14px 14px 4px 14px; background: var(--blue-soft); }
.team-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.team-message small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.team-send { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.team-send .input { flex: 1; min-width: 0; }
.team-ai-panel { min-height: min(620px,calc(100dvh - 220px)); display: flex; flex-direction: column; }
.team-ai-status { display: flex; align-items: center; gap: 8px; }
.team-ai-thread { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 260px; max-height: 55dvh; overflow: auto; padding: 4px 2px 22px; }
.team-ai-bubble { max-width: min(80%,690px); padding: 15px 17px; border: 1px solid var(--line); border-radius: 16px; background: #f9fafc; }
.team-ai-bubble.user { align-self: flex-end; border-color: #d8e8fb; background: var(--blue-soft); }
.team-ai-bubble strong { font-size: 11px; }
.team-ai-bubble p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.team-ai-form { display: flex; align-items: flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 17px; }
.team-ai-form textarea { flex: 1; min-width: 0; max-height: 160px; resize: vertical; font-size: 13px; }
.team-user-form { margin-bottom: 20px; }
.team-user-form .panel-header { align-items: flex-start; }
.team-form-grid, .team-assignment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.team-form-wide { grid-column: 1 / -1; }
.team-fieldset { min-width: 0; margin: 25px 0 0; padding: 0; border: 0; }
.team-fieldset legend { padding: 0; margin-bottom: 12px; color: #505a66; font-size: 12px; font-weight: 700; }
.team-choice-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.team-choice, .team-option { cursor: pointer; }
.team-choice input { position: absolute; opacity: 0; }
.team-choice span { display: inline-flex; min-height: 38px; align-items: center; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 11px; color: #687380; font-size: 12px; font-weight: 630; }
.team-choice input:checked + span { border-color: #a9cdfb; color: #2467bc; background: var(--blue-soft); }
.team-choice input:focus-visible + span { outline: 3px solid rgba(22,119,238,.25); outline-offset: 2px; }
.team-options { display: grid; gap: 8px; max-height: 200px; overflow: auto; }
.team-option { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; color: #505b67; font-size: 12px; }
.team-option:hover { background: var(--surface-soft); }
.team-option:has(input:checked) { border-color: #a9cdfb; background: var(--blue-soft); }
.team-option input { accent-color: var(--blue); }
.team-form-actions { display: flex; justify-content: flex-end; margin-top: 25px; }
.team-member-name { margin: 0; color: #697380; font-size: 12px; }
.team-members { margin-top: 20px; }
.team-member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.team-active { margin-top: 20px; }
.team-token { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.team-token p { width: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.team-token code { flex: 1; min-width: 220px; padding: 12px; border-radius: 10px; background: #f4f6f9; overflow-wrap: anywhere; }
.team-account-panel { width: min(100%, 560px); }
.team-account-panel .team-auth-form { max-width: 430px; }
.team-alert { margin-bottom: 17px; padding: 12px 15px; border-radius: 11px; font-size: 12px; }
.team-alert.team-error { border: 1px solid #f4d6d6; background: #fff7f7; }
.team-success { color: #207b5c; border: 1px solid #cae9dc; background: #f2fcf6; }
@media (max-width: 1060px) {
  .team-topbar-inner { flex-wrap: wrap; gap: 6px 20px; padding: 12px 24px; }
  .team-nav { flex-basis: 100%; order: 3; }
  .team-account { margin-left: auto; }
  .team-main { padding: 26px 24px 55px; }
  .team-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .team-topbar-inner { padding: 10px 16px; }
  .team-main { padding: 22px 16px 50px; }
  .team-person { display: none; }
  .team-stat-grid { gap: 8px; }
  .team-stat { min-height: 112px; padding: 14px; }
  .team-stat strong { font-size: 28px; }
  .team-stat small { display: none; }
  .team-summary-grid, .team-card-grid, .team-assignment-grid, .team-form-grid { grid-template-columns: 1fr; }
  .team-form-wide { grid-column: auto; }
  .team-whatsapp-grid { grid-template-columns: 1fr; height: auto; }
  .team-chats { max-height: 240px; }
  .team-messages { min-height: 440px; }
  .team-ai-form { align-items: stretch; flex-direction: column; }
  .team-ai-form .btn { align-self: flex-end; }
}