:root {
  --cf-primary: #0d6efd;
  --cf-primary-600: #0b5ed7;
  --cf-primary-tint: #e8f0fe;
  --cf-success: #198754;
  --cf-success-tint: #e8f5e9;
  --cf-danger: #dc3545;
  --cf-danger-tint: #fdecea;
  --cf-warning: #fd7e14;
  --cf-warning-tint: #fff3e0;
  --cf-app-bg: #f0f2f5;
  --cf-surface: #ffffff;
  --cf-surface-alt: #f8f9fa;
  --cf-navy-900: #0f1621;
  --cf-navy-800: #1a2035;
  --cf-navy-grad: linear-gradient(135deg, #0f1621 0%, #1a2035 100%);
  --cf-fg: #212529;
  --cf-fg-muted: #6c757d;
  --cf-fg-on-dark-2: rgba(255,255,255,.6);
  --cf-fg-on-dark-3: rgba(255,255,255,.3);
  --cf-border: #dee2e6;
  --cf-border-strong: #ced4da;
  --cf-sidebar-w: 230px;
  --cf-navbar-h: 56px;
  --cf-radius-sm: 4px;
  --cf-radius: 6px;
  --cf-radius-md: 8px;
  --cf-radius-lg: 10px;
  --cf-radius-xl: 16px;
  --cf-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --cf-shadow-login: 0 20px 60px rgba(0,0,0,.25);
  --cf-font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { background: var(--cf-app-bg); }
body {
  background: var(--cf-app-bg);
  color: var(--cf-fg);
  font-family: var(--cf-font-sans);
  -webkit-font-smoothing: antialiased;
}

.cf-navbar {
  min-height: var(--cf-navbar-h);
  background: var(--cf-navy-900);
}

.cf-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -.3px;
  text-decoration: none;
}

.cf-brand:hover { color: #fff; }
.cf-brand i { color: var(--cf-primary); }
.cf-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.cf-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cf-fg-on-dark-2);
  font-size: .8125rem;
}

.cf-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--cf-radius);
  padding: 4px 10px;
  font-size: .8125rem;
  text-decoration: none;
}

.cf-logout-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.cf-shell {
  display: flex;
  min-height: calc(100vh - var(--cf-navbar-h));
}

.cf-sidebar {
  width: var(--cf-sidebar-w);
  min-height: calc(100vh - var(--cf-navbar-h));
  background: var(--cf-navy-800);
  position: sticky;
  top: var(--cf-navbar-h);
  align-self: flex-start;
  flex-shrink: 0;
  padding: 6px 0 16px;
}

.cf-nav-section {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-fg-on-dark-3);
  padding: .9rem 1rem .25rem;
}

.cf-sidebar .nav-link {
  color: var(--cf-fg-on-dark-2);
  border-radius: var(--cf-radius);
  margin: 1px 8px;
  padding: .45rem .75rem;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cf-sidebar .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.cf-sidebar .nav-link.active {
  color: #fff;
  background: var(--cf-primary);
}

.cf-sidebar .nav-link .bi {
  font-size: 1rem;
  flex-shrink: 0;
}

.cf-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem;
}

.cf-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cf-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.cf-page-subtitle {
  font-size: .85rem;
  color: var(--cf-fg-muted);
  margin: 2px 0 0;
}

.cf-card {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-sm);
}

.cf-card-header {
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--cf-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: .875rem;
}

.cf-stat-card {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-sm);
}

.cf-stat-card .card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.cf-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.cf-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.cf-stat-label {
  color: var(--cf-fg-muted);
  font-size: .78rem;
  margin-top: 4px;
}

.cf-filter-card .card-body {
  padding: 14px 16px;
}

.cf-filter-card .form-label {
  color: var(--cf-fg-muted);
  font-size: .78rem;
  margin-bottom: 4px;
}

.cf-table-card {
  overflow: hidden;
}

.cf-table-card .table {
  margin-bottom: 0;
  font-size: .8125rem;
}

.cf-table-card .table th {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .6875rem;
  color: var(--cf-fg-muted);
  font-weight: 600;
  background: var(--cf-surface-alt);
  padding: 10px 14px;
}

.cf-table-card .table td {
  padding: 11px 14px;
  border-top: 1px solid var(--cf-border);
  vertical-align: middle;
  transition: background-color .16s ease;
}

.cf-table-card .table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.024);
}

.cf-table-card .table-hover tbody tr:hover td {
  background: #f8faff;
}

.cf-table-muted {
  color: var(--cf-fg-muted);
  font-size: .75rem;
}

.cf-count {
  background: #6c757d;
  color: #fff;
  font-size: .6875rem;
  padding: 2px 8px;
  border-radius: 999px;
}

.cf-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
}

.cf-thumb {
  width: 52px;
  height: 66px;
  border-radius: var(--cf-radius-sm);
  border: 1px solid var(--cf-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cf-surface-alt);
}

.cf-pagination .page-link {
  border-radius: var(--cf-radius);
  color: var(--cf-primary);
}

.cf-pagination .page-item.active .page-link {
  background: var(--cf-primary);
  border-color: var(--cf-primary);
}

.cf-login-bg {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(242, 248, 252, .72) 0%, rgba(226, 238, 246, .82) 100%),
    linear-gradient(115deg, rgba(6, 24, 44, .38) 8%, rgba(6, 24, 44, .16) 42%, rgba(7, 40, 66, .3) 100%),
    var(--cf-login-hero) center/cover no-repeat;
  padding: 32px;
}

.cf-login-shell {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 430px);
  align-items: center;
  gap: 48px;
  max-width: 1320px;
  margin: 0 auto;
}

.cf-login-hero-panel {
  color: #152238;
  padding: 24px 12px 24px 24px;
  text-shadow: 0 10px 28px rgba(255,255,255,.22);
}

.cf-login-hero-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(96, 201, 211, .12);
  border: 1px solid rgba(96, 201, 211, .35);
  color: #1d96bd;
  font-weight: 600;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.cf-login-hero-title {
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
  max-width: 840px;
}

.cf-login-hero-title span {
  color: #22b8c7;
}

.cf-login-hero-text {
  max-width: 760px;
  font-size: clamp(1.05rem, 1.8vw, 1.6rem);
  line-height: 1.45;
  color: rgba(14, 31, 52, .82);
  margin: 0 0 42px;
}

.cf-login-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 820px;
}

.cf-login-stat {
  padding: 12px 8px 12px 0;
}

.cf-login-stat strong {
  display: block;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  color: #1a2740;
  letter-spacing: -0.03em;
}

.cf-login-stat span {
  display: block;
  margin-top: 8px;
  color: rgba(21, 34, 56, .62);
  font-size: .98rem;
}

.cf-login-card {
  width: 100%;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(65, 85, 120, .22);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
}

.cf-login-card-inner {
  position: relative;
}

.cf-login-glyph {
  font-size: 2.5rem;
  line-height: 1;
}

.cf-login-logo {
  line-height: 1;
  flex-shrink: 0;
}

.cf-login-logo img {
  width: 44px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
}

.cf-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.cf-login-brand-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.cf-login-brand-subtitle {
  color: rgba(21, 34, 56, .58);
  font-size: .98rem;
}

.cf-login-input-group .input-group-text {
  background: rgba(242, 247, 251, .9);
  border-color: rgba(141, 162, 190, .28);
  color: rgba(21, 34, 56, .64);
  padding-inline: 1rem;
}

.cf-login-input-group .form-control {
  background: rgba(245, 249, 253, .88);
  border-color: rgba(141, 162, 190, .28);
  color: #152238;
  padding-block: .95rem;
}

.cf-login-input-group .form-control:focus,
.cf-login-input-group .input-group-text {
  box-shadow: none;
}

.cf-login-input-group .form-control:focus {
  border-color: rgba(44, 184, 199, .72);
  background: rgba(255,255,255,.94);
}

.cf-login-submit {
  min-height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #214e84 0%, #1a3f6d 100%);
  border: none;
  box-shadow: 0 16px 34px rgba(33, 78, 132, .24);
  font-size: 1.05rem;
}

.cf-login-submit:hover,
.cf-login-submit:focus {
  background: linear-gradient(135deg, #1d4678 0%, #16385f 100%);
}

.token-box,
.cf-token-box {
  font-family: var(--cf-font-mono);
  font-size: .78rem;
  background: var(--cf-app-bg);
  border-radius: var(--cf-radius-sm);
  padding: 2px 6px;
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cf-subject-meta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.cf-subject-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  color: var(--cf-fg-muted);
}

.cf-subject-icon--type { color: #4f46e5; }
.cf-subject-icon--legal { color: #7c3aed; }
.cf-subject-icon--code { color: #0f766e; }
.cf-subject-icon--ico { color: #1d4ed8; }
.cf-subject-icon--dic { color: #475569; }
.cf-subject-icon--address { color: #c2410c; }
.cf-subject-icon--email { color: #0284c7; }
.cf-subject-icon--phone { color: #0f766e; }
.cf-subject-icon--web { color: #6d28d9; }
.cf-subject-icon--billing { color: #b45309; }
.cf-subject-icon--bank { color: #0f766e; }
.cf-subject-icon--currency { color: #15803d; }
.cf-subject-icon--terms { color: #2563eb; }

.cf-mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.85);
  padding: 4px 8px;
  font-size: 1.35rem;
  cursor: pointer;
  border-radius: var(--cf-radius);
  line-height: 1;
}
.cf-mobile-menu-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

.cf-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
}
.cf-sidebar-backdrop.is-open { display: block; }

@media (max-width: 991.98px) {
  .cf-login-bg {
    padding: 18px;
  }

  .cf-login-shell {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
  }

  .cf-login-hero-panel {
    display: none;
    padding: 0;
    text-align: center;
  }

  .cf-login-card {
    max-width: 560px;
    margin: 0 auto;
  }

  .cf-mobile-menu-toggle { display: flex; }

  .cf-sidebar {
    width: 270px;
    height: 100vh;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .24s ease, box-shadow .24s ease;
    overflow-y: auto;
    padding-top: calc(var(--cf-navbar-h) + 4px);
    box-shadow: none;
  }

  .cf-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 6px 0 28px rgba(0,0,0,.45);
  }

  .cf-main {
    padding: 1rem;
  }

  .cf-page-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 575.98px) {
  .cf-login-bg {
    padding: 12px;
  }

  .cf-login-card {
    border-radius: 24px;
  }

  .cf-login-brand {
    align-items: center;
  }

  .cf-login-brand-title {
    font-size: 1.6rem;
  }

  .cf-login-brand-subtitle {
    font-size: .9rem;
  }

  .cf-login-hero-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Sidebar extended ────────────────────────────────────────────────────── */
.text-truncate-cell { max-width: 180px; }
.cf-sidebar { display:flex; flex-direction:column; overflow:hidden; transition:width .2s ease,transform .2s ease; }
.cf-sidebar-brand { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1rem .75rem; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%); position:sticky; top:0; z-index:2; }
.cf-sidebar-brand-main { display:flex; align-items:center; gap:.75rem; min-width:0; color:inherit; text-decoration:none; }
.cf-sidebar-brand-main:hover { color:inherit; }
.cf-sidebar-brand:hover { color:#fff; }
.cf-sidebar-brand-logo { width:28px; height:28px; object-fit:contain; display:block; flex-shrink:0; }
.cf-sidebar-brand-label { font-weight:700; letter-spacing:-.02em; }
.cf-sidebar-scroll { flex:1 1 auto; min-height:0; height:100%; overflow-y:auto; overflow-x:hidden; padding-bottom:1rem; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.35) transparent; }
.cf-sidebar-scroll::-webkit-scrollbar { width:6px; }
.cf-sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
.cf-sidebar-scroll::-webkit-scrollbar-thumb { background:rgba(148,163,184,.28); border-radius:999px; }
.cf-sidebar-scroll::-webkit-scrollbar-thumb:hover { background:rgba(148,163,184,.42); }
.cf-sidebar-search { padding:.75rem 1rem; position:sticky; top:0; z-index:1; background:var(--cf-navy-800); }
.sidebar-search-results { padding:.5rem 1rem 0; }
.sidebar-search-results[hidden] { display:none !important; }
.sidebar-search-result { display:block; padding:.55rem .85rem; color:#dee2e6; text-decoration:none; border-radius:.5rem; transition:background .15s ease,color .15s ease; }
.sidebar-search-result:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar-search-result-label { display:block; margin:.75rem 0 .25rem; font-size:.72rem; font-weight:700; text-transform:uppercase; color:#adb5bd; letter-spacing:.08em; }
.sidebar-search-result-subtitle { font-size:.80rem; color:#adb5bd; padding-left:1.75rem; margin-top:.15rem; }
.sidebar-search-state { color:#adb5bd; font-size:.85rem; padding:.45rem .85rem; }
.nav-group { margin-bottom:.5rem; }
.nav-group.is-search-hidden { display:none; }
.nav-section { width:100%; background:transparent; border:0; color:rgba(255,255,255,.38); padding:.55rem .9rem; display:flex; align-items:center; justify-content:space-between; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; transition:color .15s ease; }
.nav-section:hover { color:#fff; }
.nav-section-icon { transition:transform .18s ease; }
.nav-group.is-collapsed .nav-section-icon { transform:rotate(-90deg); }
.nav-group-links { overflow:hidden; max-height:9999px; transition:max-height .2s ease,opacity .18s ease; opacity:1; }
.nav-group.is-collapsed .nav-group-links { max-height:0; opacity:0; }
.nav-link .badge { margin-left:auto; }
.cf-sidebar .nav-link { display:flex; align-items:center; gap:.75rem; white-space:nowrap; overflow:hidden; }
.cf-sidebar .nav-link > i { min-width:1.1rem; text-align:center; }
.cf-nav-label { display:inline-block; }
.nav-section-label { display:inline-block; }
.cf-desktop-sidebar-toggle { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; width:2.25rem; height:2.25rem; border-radius:.7rem; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease,border-color .15s ease; }
.cf-desktop-sidebar-toggle:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; }

/* Compact sidebar */
.cf-sidebar-compact .cf-sidebar { width:78px !important; }
.cf-sidebar-compact .cf-main { margin-left:78px !important; }
.cf-sidebar-compact .cf-sidebar-search,
.cf-sidebar-compact .cf-sidebar-brand-label,
.cf-sidebar-compact .nav-section-label,
.cf-sidebar-compact .cf-nav-label,
.cf-sidebar-compact .nav-link .badge,
.cf-sidebar-compact .nav-section-icon { display:none !important; }
.cf-sidebar-compact .cf-sidebar-brand { justify-content:center; padding:.85rem .35rem .7rem; }
.cf-sidebar-compact .cf-sidebar-brand-main { justify-content:center; }
.cf-sidebar-compact .cf-desktop-sidebar-toggle { margin-left:0; }
.cf-sidebar-compact .nav-section { justify-content:center; padding:.7rem .35rem; }
.cf-sidebar-compact .nav-group-links { max-height:none !important; opacity:1 !important; }
.cf-sidebar-compact .nav-link { justify-content:center; padding:.75rem .5rem; }
.cf-sidebar-compact .nav-link > i { margin:0 !important; font-size:1.05rem; }
.cf-sidebar-compact .nav-item { display:flex; justify-content:center; }
.cf-sidebar-compact .cf-sidebar .nav-group { margin-bottom:.35rem; }
.cf-sidebar-compact .sidebar-search-results { display:none !important; }

/* User chip & presence */
.cf-user-chip-meta { display:inline-flex; align-items:center; gap:.4rem; margin-left:.45rem; font-size:.72rem; line-height:1; color:rgba(255,255,255,.72); }
.cf-user-chip-role { display:inline-flex; align-items:center; padding:.18rem .42rem; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-weight:600; letter-spacing:.02em; }
.cf-user-chip-btn { display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); color:#fff; border-radius:999px; padding:.28rem .6rem; font-size:.84rem; }
.cf-user-chip-label { display:inline-flex; align-items:center; gap:.38rem; }
.cf-presence-dot { width:.5rem; height:.5rem; border-radius:50%; display:inline-block; flex-shrink:0; }
.cf-presence-dot--online { background:#22c55e; }
.cf-presence-dot--away { background:#f59e0b; }
.cf-presence-dot--busy { background:#ef4444; }
.cf-presence-dot--invisible { background:#94a3b8; }

@media (min-width:992px) {
  .cf-navbar { margin-left:var(--cf-sidebar-w); width:calc(100% - var(--cf-sidebar-w)); }
  .cf-navbar .cf-brand { display:none; }
  .cf-shell { min-height:100vh; }
  .cf-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--cf-sidebar-w); min-height:100vh; height:100vh; z-index:1035; padding-top:.35rem; }
  .cf-main { margin-left:var(--cf-sidebar-w); min-height:calc(100vh - var(--cf-navbar-h)); }
  .cf-sidebar-compact .cf-navbar { margin-left:78px; width:calc(100% - 78px); }
  .cf-sidebar-compact .cf-sidebar { width:78px !important; }
  .cf-sidebar-compact .cf-main { margin-left:78px !important; }
}
@media (max-width:991.98px) {
  .cf-navbar .cf-brand { display:inline-flex; }
  .cf-sidebar-brand { display:none; }
  .cf-sidebar { height:100dvh; max-height:100dvh; }
  .cf-sidebar.is-open { overflow:hidden; }
  .cf-sidebar.is-open .cf-sidebar-scroll { height:calc(100dvh - .35rem); max-height:calc(100dvh - .35rem); }
  .cf-sidebar-compact .cf-main { margin-left:0 !important; }
  .cf-desktop-sidebar-toggle { display:none !important; }
}

/* ── Chat ────────────────────────────────────────────────────────────────── */
.cf-chat-launcher { position:fixed !important; right:1.5rem !important; bottom:1.5rem !important; z-index:2140 !important; width:52px !important; height:52px !important; border-radius:50% !important; border:0 !important; background:#0d6efd !important; color:#fff !important; box-shadow:0 4px 18px rgba(13,110,253,.45) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:1.25rem !important; transition:transform .15s ease,box-shadow .15s ease !important; cursor:pointer !important; }
.cf-chat-launcher:hover { transform:scale(1.07) !important; box-shadow:0 6px 24px rgba(13,110,253,.55) !important; }
.cf-chat-launcher-badge { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; border-radius:999px; background:#dc3545; color:#fff; font-size:.65rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff; }
.cf-chat-shell { position:fixed; right:1.5rem; bottom:4.75rem; z-index:1084; width:min(780px,calc(100vw - 2rem)); height:min(680px,calc(100vh - 6rem)); background:#fff; border-radius:1rem; box-shadow:0 8px 40px rgba(15,23,42,.18),0 0 0 1px rgba(0,0,0,.07); overflow:hidden; display:none; flex-direction:column; }
.cf-chat-shell.is-open { display:flex; }
.cf-chat-head { padding:.7rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:#fff; border-bottom:1px solid rgba(0,0,0,.07); flex-shrink:0; }
.cf-chat-head-title { font-weight:700; font-size:.95rem; color:#0f172a; line-height:1.2; }
.cf-chat-head-subtitle { color:#64748b; font-size:.77rem; margin-top:1px; }
.cf-chat-context-switch { display:inline-flex; align-items:center; gap:.38rem; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; color:#334155; padding:.28rem .6rem; font-size:.76rem; font-weight:600; cursor:pointer; transition:background .12s; }
.cf-chat-context-switch:hover { background:#f1f5f9; }
.cf-chat-tabs { display:flex; border-bottom:1px solid rgba(0,0,0,.07); background:#fff; flex-shrink:0; }
.cf-chat-tab { flex:1; border:0; background:transparent; padding:.55rem .5rem; font-size:.8rem; font-weight:600; color:#64748b; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; cursor:pointer; }
.cf-chat-tab.active { color:#0d6efd; border-bottom-color:#0d6efd; }
.cf-chat-tab:hover:not(.active) { color:#334155; background:rgba(0,0,0,.025); }
.cf-chat-body { flex:1; display:grid; grid-template-columns:240px minmax(0,1fr); min-height:0; }
.cf-chat-thread-list { overflow-y:auto; display:flex; flex-direction:column; border-right:1px solid rgba(0,0,0,.07); background:#fafbfc; }
.cf-chat-thread-tools { padding:.6rem .7rem .45rem; background:#fafbfc; position:sticky; top:0; z-index:2; border-bottom:1px solid rgba(0,0,0,.05); }
.cf-chat-search { position:relative; display:block; }
.cf-chat-search i { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; font-size:.8rem; }
.cf-chat-search-input { width:100%; border:1px solid #e2e8f0; border-radius:.6rem; padding:.45rem .7rem .45rem 1.9rem; background:#fff; color:#0f172a; font-size:.83rem; transition:border-color .15s,box-shadow .15s; }
.cf-chat-search-input:focus { outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.1); }
.cf-chat-thread-section-title { font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#94a3b8; padding:.55rem .75rem .15rem; }
.cf-chat-thread-group { display:flex; flex-direction:column; }
.cf-chat-thread-group-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:0; background:transparent; padding:.4rem .75rem; color:#64748b; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .12s; }
.cf-chat-thread-group-head:hover { background:rgba(0,0,0,.03); }
.cf-chat-thread-group-head i { transition:transform .16s ease; font-size:.75rem; }
.cf-chat-thread-group.is-collapsed .cf-chat-thread-group-head i { transform:rotate(-90deg); }
.cf-chat-thread-group-body { display:flex; flex-direction:column; }
.cf-chat-thread-group.is-collapsed .cf-chat-thread-group-body { display:none; }
.cf-chat-thread-group-count { color:#94a3b8; font-size:.72rem; font-weight:600; letter-spacing:0; text-transform:none; }
.cf-chat-thread-item { border:0; border-radius:0; padding:.52rem .75rem; background:transparent; display:block; width:100%; text-align:left; cursor:pointer; transition:background .1s; }
.cf-chat-thread-item:hover { background:rgba(0,0,0,.04); }
.cf-chat-thread-item.active { background:#eff6ff; }
.cf-chat-thread-item.has-unread .cf-chat-thread-name-main { font-weight:700; color:#0f172a; }
.cf-chat-thread-name { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.cf-chat-thread-name-main { display:inline-flex; align-items:center; gap:.38rem; min-width:0; font-size:.86rem; font-weight:500; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.cf-chat-thread-meta { color:#94a3b8; font-size:.75rem; margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-chat-thread-status { width:.52rem; height:.52rem; border-radius:50%; display:inline-block; flex:0 0 auto; }
.cf-chat-thread-status--online { background:#22c55e; }
.cf-chat-thread-status--recent { background:#f59e0b; }
.cf-chat-thread-status--busy { background:#ef4444; }
.cf-chat-thread-status--offline { background:#d1d5db; }
.cf-chat-color-dot { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; flex:0 0 auto; }
.cf-chat-thread-badge { min-width:1.1rem; height:1.1rem; border-radius:999px; background:#0d6efd; color:#fff; font-size:.62rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 .28rem; flex-shrink:0; }
.cf-chat-thread-badge[hidden] { display:none !important; }
.cf-chat-thread-empty { padding:.75rem; color:#94a3b8; font-size:.82rem; }
.cf-chat-room { flex:1; display:flex; flex-direction:column; min-height:0; background:#f4f6f9; }
.cf-chat-room-topbar { padding:.7rem 1rem; border-bottom:1px solid rgba(0,0,0,.07); display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:#fff; flex-shrink:0; }
.cf-chat-room-stream { flex:1; overflow-y:auto; padding:.85rem .75rem .5rem; display:flex; flex-direction:column; }
.cf-chat-message-stream { margin-top:auto; display:flex; flex-direction:column; gap:.2rem; }
.cf-chat-system-note { display:none; }
#cfChatRoomCard { display:none; }
.cf-chat-message-group { display:flex; flex-direction:column; gap:.18rem; margin-bottom:.55rem; }
.cf-chat-message-group--own { align-items:flex-end; }
.cf-chat-message-group--other { align-items:flex-start; }
.cf-chat-message-group-sender { font-size:.72rem; font-weight:600; color:#64748b; margin-bottom:.18rem; padding:0 .5rem; }
.cf-chat-message { max-width:min(480px,80%); padding:.52rem .8rem; font-size:.875rem; line-height:1.5; word-break:break-word; white-space:pre-wrap; position:relative; }
.cf-chat-message--own { background:#0d6efd; color:#fff; border-radius:1rem 1rem .2rem 1rem; align-self:flex-end; }
.cf-chat-message--other { background:#fff; color:#0f172a; border-radius:1rem 1rem 1rem .2rem; align-self:flex-start; box-shadow:0 1px 4px rgba(0,0,0,.09); }
.cf-chat-message--own + .cf-chat-message--own { border-top-right-radius:.3rem; }
.cf-chat-message--other + .cf-chat-message--other { border-top-left-radius:.3rem; }
.cf-chat-message--own:last-child { border-bottom-right-radius:1rem; }
.cf-chat-message--other:last-child { border-bottom-left-radius:1rem; }
.cf-chat-message-meta { font-size:.72rem; margin-bottom:.28rem; display:flex; align-items:baseline; gap:.4rem; }
.cf-chat-message-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.45rem; }
.cf-chat-message-author { font-weight:700; color:#0f766e; }
.cf-chat-message-author--own { color:rgba(255,255,255,.85); }
.cf-chat-message-author--other { color:#0f766e; }
.cf-chat-message-delete { border:0; background:transparent; color:inherit; opacity:.62; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:50%; }
.cf-chat-message-delete:hover { opacity:1; background:rgba(255,255,255,.12); }
.cf-chat-message--other .cf-chat-message-delete:hover { background:rgba(15,23,42,.08); }
.cf-chat-message-time { font-size:.67rem; color:rgba(255,255,255,.6); text-align:right; margin-top:.2rem; }
.cf-chat-message--other .cf-chat-message-time { color:#94a3b8; }
.cf-chat-message-room-badge { display:inline-flex; align-items:center; padding:.12rem .38rem; border-radius:999px; font-size:.66rem; font-weight:700; background:rgba(255,255,255,.18); color:inherit; vertical-align:middle; margin-left:.3rem; }
.cf-chat-message-attachment { display:flex; flex-direction:column; gap:.42rem; }
.cf-chat-message-attachment-link { display:inline-flex; align-items:center; gap:.45rem; color:inherit; text-decoration:none; font-weight:600; }
.cf-chat-message-attachment-link i { font-size:.95rem; }
.cf-chat-message-attachment-image { display:block; max-width:min(260px,100%); max-height:220px; border-radius:.8rem; border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.9); object-fit:cover; }
.cf-chat-message-filemeta { font-size:.72rem; opacity:.78; }
.cf-chat-message--own .cf-chat-message-attachment-link { color:#fff; }
.cf-chat-message--other .cf-chat-message-attachment-link { color:#0f172a; }
.cf-chat-message--image { background:transparent !important; padding:.1rem 0 0; box-shadow:none !important; border-radius:0 !important; }
.cf-chat-image-wrap { position:relative; display:inline-block; line-height:0; border-radius:.8rem; overflow:hidden; }
.cf-chat-image-wrap .cf-chat-message-delete { position:absolute; top:.35rem; right:.35rem; background:rgba(0,0,0,.48); color:#fff; opacity:1; width:26px; height:26px; border-radius:50%; backdrop-filter:blur(4px); }
.cf-chat-image-wrap .cf-chat-message-delete:hover { background:rgba(0,0,0,.72); opacity:1; }
.cf-chat-message--image .cf-chat-message-attachment-image { border-radius:0; }
.cf-chat-message--image .cf-chat-message-time { color:#94a3b8; padding:0 .15rem; }
.cf-chat-day-sep { display:flex; align-items:center; gap:.6rem; margin:.7rem 0; color:#94a3b8; font-size:.72rem; font-weight:600; }
.cf-chat-day-sep::before,.cf-chat-day-sep::after { content:''; flex:1; height:1px; background:#e2e8f0; }
.cf-chat-typing-indicator { min-height:1.1rem; color:#94a3b8; font-size:.78rem; font-style:italic; padding:.15rem .2rem .4rem; }
.cf-chat-composer { padding:.6rem .75rem .7rem; background:#fff; border-top:1px solid rgba(0,0,0,.07); flex-shrink:0; display:flex; align-items:flex-end; gap:.5rem; }
.cf-chat-composer-wrap { flex:1; background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:1.25rem; padding:.5rem .75rem; display:flex; align-items:flex-end; gap:.4rem; transition:border-color .15s,box-shadow .15s,background .15s; }
.cf-chat-composer-wrap:focus-within { border-color:#93c5fd; background:#fff; box-shadow:0 0 0 3px rgba(59,130,246,.1); }
.cf-chat-composer textarea { flex:1; resize:none; border:0; background:transparent; padding:0; font-size:.88rem; max-height:110px; min-height:20px; height:20px; line-height:1.5; color:#0f172a; overflow-y:auto; }
.cf-chat-composer textarea:focus { outline:none; }
.cf-chat-composer textarea::placeholder { color:#94a3b8; }
.cf-chat-composer-hint { font-size:.73rem; color:#94a3b8; margin-bottom:.3rem; display:none; }
.cf-chat-composer-status { font-size:.73rem; color:#94a3b8; padding:0 .1rem .1rem; }
.cf-chat-composer-context { width:34px; height:34px; border-radius:50%; border:1px solid #fde68a; background:#fffbeb; color:#b45309; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; transition:background .15s,transform .1s; cursor:pointer; padding:0; }
.cf-chat-composer-context:hover { background:#fef3c7; }
.cf-chat-composer-context:active { transform:scale(.9); }
.cf-chat-composer-attach { width:34px; height:34px; border-radius:50%; border:1px solid #bfdbfe; background:#eff6ff; color:#2563eb; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; transition:background .15s,transform .1s; cursor:pointer; padding:0; }
.cf-chat-composer-attach:hover { background:#dbeafe; }
.cf-chat-composer-attach:active { transform:scale(.9); }
.cf-chat-composer-attach:disabled { opacity:.55; cursor:not-allowed; }
.cf-chat-composer-send { width:34px; height:34px; border-radius:50%; border:0; background:#0d6efd; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; transition:background .15s,transform .1s; cursor:pointer; padding:0; }
.cf-chat-composer-send:hover { background:#0b5ed7; }
.cf-chat-composer-send:active { transform:scale(.9); }
.cf-chat-composer-send:disabled { background:#cbd5e1; cursor:not-allowed; }
.cf-chat-context-helper { margin:0 .75rem .5rem; padding:.75rem; border:1px solid #fde68a; background:#fffbeb; border-radius:.9rem; display:flex; flex-direction:column; gap:.55rem; }
.cf-chat-context-helper-head { font-size:.8rem; font-weight:700; color:#92400e; }
.cf-chat-context-helper-fields { display:grid; grid-template-columns:1fr; gap:.35rem; max-height:180px; overflow-y:auto; }
.cf-chat-context-helper-check { display:flex; align-items:flex-start; gap:.45rem; font-size:.8rem; color:#374151; }
.cf-chat-context-helper-check strong { color:#111827; }
.cf-chat-context-helper-label { font-size:.74rem; font-weight:700; color:#92400e; text-transform:uppercase; letter-spacing:.03em; }
.cf-chat-context-helper textarea { width:100%; resize:vertical; min-height:76px; border:1px solid #fcd34d; border-radius:.7rem; padding:.55rem .65rem; font-size:.84rem; background:#fff; color:#0f172a; }
.cf-chat-context-helper textarea:focus { outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.15); border-color:#f59e0b; }
.cf-chat-context-helper-actions { display:flex; justify-content:flex-end; gap:.45rem; }
.cf-chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#94a3b8; text-align:center; padding:2rem; gap:.6rem; background:#f4f6f9; }
.cf-chat-empty i { font-size:2.2rem; opacity:.3; display:block; margin-bottom:.25rem; }
.cf-chat-empty .fw-semibold { color:#64748b; }
.cf-chat-presence-bar { display:flex; flex-wrap:wrap; gap:.35rem; padding:.15rem 0 .55rem; }
.cf-chat-presence-chip { display:inline-flex; align-items:center; gap:.32rem; background:#f8fafc; border:1px solid #e2e8f0; color:#334155; border-radius:999px; padding:.18rem .48rem; font-size:.72rem; }
.cf-chat-toast-stack { position:fixed; right:1.5rem; bottom:7.5rem; z-index:1086; display:flex; flex-direction:column; gap:.45rem; align-items:flex-end; pointer-events:none; }
.cf-chat-toast { min-width:230px; max-width:min(330px,calc(100vw - 2rem)); background:#1e293b; color:#fff; border-radius:.75rem; box-shadow:0 6px 24px rgba(15,23,42,.3); padding:.65rem .8rem; opacity:0; transform:translateY(5px) scale(.97); transition:opacity .17s ease,transform .17s ease; pointer-events:auto; }
.cf-chat-toast.is-visible { opacity:1; transform:translateY(0) scale(1); }
.cf-chat-toast-title { font-weight:700; font-size:.8rem; margin-bottom:.12rem; }
.cf-chat-toast-body { font-size:.77rem; color:rgba(255,255,255,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:767.98px) {
  .cf-chat-launcher { right:1rem !important; bottom:1rem !important; }
  .cf-chat-shell { right:0; left:0; bottom:0; width:100%; height:100dvh; border-radius:0; }
  .cf-chat-body { grid-template-columns:1fr; }
  .cf-chat-thread-list { max-height:38vh; border-right:0; border-bottom:1px solid rgba(0,0,0,.07); }
  .cf-chat-thread-tools { top:0; }
  .cf-chat-message { max-width:88%; }
  .cf-chat-toast-stack { right:.75rem; left:.75rem; bottom:7rem; align-items:stretch; }
  .cf-chat-toast { max-width:none; min-width:0; }
}