/* ==========================================================================
   SiosChat brand layer — loaded on every page of the app.
   Source of truth: web/DESIGN.md (sioschat.com). Dark mode uses the web tokens
   verbatim; light mode is derived with the same navy and aqua.
   Holds: fonts, --sc-* tokens, top bar, agent KPIs and side menu.
   ========================================================================== */

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/sioschat/onest-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/sioschat/onest-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/sioschat/onest-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
body {
    /* Light (derived) */
    --sc-ground: #f6f5f2;
    --sc-ground-2: #efede8;
    --sc-panel: #ffffff;
    --sc-panel-2: #faf9f6;
    --sc-ink: #0a111c;
    --sc-navy: #343c49;
    --sc-fg: #0a111c;
    --sc-fg-2: #4a5160;
    --sc-fg-3: #6b7180;
    --sc-rule: #ebe8e2;
    --sc-ring: #dcd8d0;

    --sc-aqua: #5ce1e6;
    --sc-aqua-hover: #8deef1;
    --sc-aqua-soft: #dff8f9;
    --sc-aqua-ink: #037c82;
    --sc-on-aqua: #0a111c;

    --sc-wa: #128c4a;
    --sc-ms: #4b5fd6;
    --sc-ig: #c93a72;
    --sc-bot: #9a6b00;
    --sc-bot-soft: #fff4d6;
    --sc-danger: #d13b4b;
    --sc-danger-soft: #fdecee;
    --sc-ok: #128c4a;

    --sc-sent: #dff8f9;
    --sc-sent-fg: #0a111c;
    --sc-sent-fg-2: #2f5b63;
    --sc-doodle: rgba(52, 60, 73, 0.05);

    --sc-radius-sm: 10px;
    --sc-radius: 14px;
    --sc-radius-lg: 20px;
    --sc-radius-tick: 12px;
    --sc-radius-panel: 20px;
    --sc-shadow-soft: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px -12px rgba(20, 24, 31, 0.12);
    --sc-shadow-lift: 0 2px 6px rgba(20, 24, 31, 0.05), 0 14px 32px -14px rgba(20, 24, 31, 0.2);
    --sc-shadow-panel: var(--sc-shadow-soft);
    --sc-shadow-pop: 0 4px 12px rgba(20, 24, 31, 0.06), 0 32px 64px -24px rgba(20, 24, 31, 0.3);
    --sc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sc-fast: 140ms;
    --sc-base: 200ms;

    --sc-font-display: 'Onest', ui-sans-serif, system-ui, sans-serif;
    --sc-font-body: 'Onest', ui-sans-serif, system-ui, sans-serif;
    --sc-font-mono: 'Onest', ui-sans-serif, system-ui, sans-serif;

    --sc-channel: var(--sc-fg-3);
}

body.is-dark {
    /* Dark: web tokens verbatim */
    --sc-ground: #0a111c;
    --sc-ground-2: #0d1523;
    --sc-panel: #111b2a;
    --sc-panel-2: #172435;
    --sc-ink: #eef3f7;
    --sc-navy: #343c49;
    --sc-fg: #eef3f7;
    --sc-fg-2: #aebdcb;
    --sc-fg-3: #8193a6;
    --sc-rule: rgba(174, 189, 203, 0.1);
    --sc-ring: rgba(174, 189, 203, 0.2);

    --sc-aqua: #5ce1e6;
    --sc-aqua-hover: #b6f3f5;
    --sc-aqua-soft: rgba(92, 225, 230, 0.1);
    --sc-aqua-ink: #5ce1e6;
    --sc-on-aqua: #0a111c;

    --sc-wa: #25d366;
    --sc-ms: #8ea2ff;
    --sc-ig: #ff7aa6;
    --sc-bot: #ffc857;
    --sc-bot-soft: rgba(255, 200, 87, 0.1);
    --sc-danger: #ff6b7a;
    --sc-danger-soft: rgba(255, 107, 122, 0.1);
    --sc-ok: #25d366;

    --sc-sent: #0c3a40;
    --sc-sent-fg: #eef3f7;
    --sc-sent-fg-2: #9fd9dc;
    --sc-doodle: rgba(238, 243, 247, 0.035);

    --sc-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 28px -14px rgba(0, 0, 0, 0.55);
    --sc-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 36px -16px rgba(0, 0, 0, 0.65);
    --sc-shadow-panel: var(--sc-shadow-soft);
    --sc-shadow-pop: 0 4px 14px rgba(0, 0, 0, 0.35), 0 36px 72px -24px rgba(0, 0, 0, 0.8);
}

[data-channel='whatsapp'] {
    --sc-channel: var(--sc-wa);
}

[data-channel='messenger'] {
    --sc-channel: var(--sc-ms);
}

[data-channel='instagram'] {
    --sc-channel: var(--sc-ig);
}

[data-channel='webchat'] {
    --sc-channel: var(--sc-aqua-ink);
}

/* Registration marks of the web's .frame panel */
.sc-frame {
    position: relative;
    border: 1px solid var(--sc-rule);
    border-radius: var(--sc-radius-panel);
    background-color: var(--sc-panel);
}

.sc-frame::before,
.sc-frame::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border-color: var(--sc-aqua);
    opacity: 0.8;
    z-index: 1;
}

.sc-frame::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid;
    border-left: 1px solid;
    border-top-left-radius: var(--sc-radius-panel);
}

.sc-frame::after {
    right: -1px;
    bottom: -1px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-bottom-right-radius: var(--sc-radius-panel);
}

/* --------------------------------------------------------------------------
   Top bar (all pages)
   -------------------------------------------------------------------------- */
body .navbar-custom {
    background: var(--sc-panel);
    border-bottom: 1px solid var(--sc-rule);
    box-shadow: none;
    font-family: var(--sc-font-body);
}

body .navbar-custom .button-menu-mobile {
    color: var(--sc-fg);
}

body .navbar-custom .topbar-menu .nav-link {
    color: var(--sc-fg-2);
}

body .navbar-custom .noti-icon {
    color: var(--sc-fg-2);
}

body .navbar-custom .nav-user {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--sc-rule);
}

body .navbar-custom .nav-user .account-user-name {
    color: var(--sc-fg);
    font-weight: 600;
}

body .navbar-custom .nav-user .account-position {
    color: var(--sc-fg-3);
    font-size: 0.75rem;
}

body .navbar-custom .topbar-dropdown-menu {
    border: 1px solid var(--sc-rule);
    border-radius: var(--sc-radius-panel);
    background: var(--sc-panel);
    box-shadow: var(--sc-shadow-pop);
}

body .navbar-custom .topbar-dropdown-menu .dropdown-item,
body .navbar-custom .topbar-dropdown-menu .dropdown-item .btn {
    color: var(--sc-fg);
}

body .navbar-custom .topbar-dropdown-menu .dropdown-item:hover {
    background: var(--sc-panel-2);
}

/* Agent status as a token with a coloured dot (icon keeps its state colour) */
body #estadoAgente > .nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    min-height: 0 !important;
    margin-top: 14px;
    padding: 0 14px 0 11px !important;
    border: 1px solid var(--sc-rule);
    border-left: 1px solid var(--sc-rule);
    border-radius: 999px;
    background: var(--sc-panel-2);
}

body #estadoAgente > .nav-link > span:first-child {
    position: static !important;
}

body #estadoAgente .noti-icon {
    line-height: 1;
    font-size: 1.25rem;
}

body #estadoAgente .account-user-name {
    display: block;
    line-height: 1.15;
    font-size: 0.82rem;
}

body #estadoAgente .account-position {
    display: block;
    line-height: 1.15;
    font-family: var(--sc-font-mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

/* View switch on the chat route */
.chat-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--sc-panel-2);
    border: 1px solid var(--sc-rule);
    border-radius: var(--sc-radius-panel);
}

.chat-view-toggle .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--sc-radius-tick) !important;
    color: var(--sc-fg-2);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--sc-fast), color var(--sc-fast);
}

.chat-view-toggle .btn:hover {
    color: var(--sc-fg);
    background: var(--sc-panel);
}

.chat-view-toggle .btn.active {
    color: var(--sc-on-aqua);
    background: var(--sc-aqua);
}

.chat-view-toggle .btn:disabled {
    opacity: 0.7;
}

.chat-topbar-toggle-item {
    min-height: 70px;
}

/* --------------------------------------------------------------------------
   Agent KPI strip (layouts/app.blade.php)
   -------------------------------------------------------------------------- */
.kpi-strip {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    height: 70px;
}

.kpi-card {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 0 14px 0 11px;
    border: 1px solid var(--sc-rule);
    border-radius: var(--sc-radius-panel);
    background: var(--sc-panel-2);
    color: var(--sc-fg);
    min-width: 0;
    transition: border-color var(--sc-fast), background-color var(--sc-fast);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--sc-aqua);
    border-left: 1px solid var(--sc-aqua);
    border-top-left-radius: var(--sc-radius-panel);
    opacity: 0.85;
}

.kpi-card__icon {
    grid-row: 1 / span 2;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--sc-aqua-ink);
}

.kpi-card__value {
    font-family: var(--sc-font-mono);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--sc-fg);
}

.kpi-card__label {
    grid-column: 2;
    font-family: var(--sc-font-body);
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--sc-fg-3);
    white-space: nowrap;
}

.kpi-card.is-alert {
    border-color: color-mix(in srgb, var(--sc-danger) 45%, transparent);
    background: var(--sc-danger-soft);
}

.kpi-card.is-alert .kpi-card__icon,
.kpi-card.is-alert .kpi-card__value {
    color: var(--sc-danger);
}

.kpi-card__value.is-updated {
    animation: sc-kpi-pulse 200ms var(--sc-ease);
}

@keyframes sc-kpi-pulse {
    from {
        transform: translateY(-3px);
        opacity: 0.3;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 1299.98px) {
    .kpi-card__icon {
        display: none;
    }

    .kpi-card {
        grid-template-columns: auto;
        padding: 0 11px;
    }

    .kpi-card__label {
        grid-column: 1;
    }
}

/* --------------------------------------------------------------------------
   Side menu (all pages) — void ground, aqua trace on the active item
   -------------------------------------------------------------------------- */
body[data-leftbar-theme='dark'] .leftside-menu,
body .leftside-menu {
    background: #0a111c;
    border-right: 1px solid #1f2c3e;
}

body .leftside-menu .logo {
    background: #0a111c;
}

body .side-nav .side-nav-title {
    color: #8193a6;
    font-family: var(--sc-font-body);
    font-weight: 600;
    letter-spacing: 0;
}

body .side-nav .side-nav-link,
body[data-leftbar-theme='dark'] .side-nav .side-nav-link {
    position: relative;
    color: #aebdcb;
    font-family: var(--sc-font-body);
    font-weight: 500;
    transition: color var(--sc-fast), background-color var(--sc-fast);
}

body .side-nav .side-nav-link:hover,
body .side-nav .side-nav-link:focus,
body[data-leftbar-theme='dark'] .side-nav .side-nav-link:hover {
    color: #eef3f7;
    background: #172435;
}

body .side-nav .menuitem-active > .side-nav-link,
body .side-nav .side-nav-link.active,
body[data-leftbar-theme='dark'] .side-nav .menuitem-active > a {
    color: #5ce1e6 !important;
    background: #111b2a;
}

body .side-nav .menuitem-active > .side-nav-link::before,
body .side-nav .side-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #5ce1e6;
}

body .side-nav .side-nav-second-level li a,
body[data-leftbar-theme='dark'] .side-nav .side-nav-second-level li a {
    color: #8193a6;
}

body .side-nav .side-nav-second-level li a:hover,
body .side-nav .side-nav-second-level li.active > a,
body .side-nav .side-nav-second-level li a.active {
    color: #5ce1e6;
}

body[data-leftbar-compact-mode='condensed'] .wrapper .leftside-menu .side-nav .side-nav-item:hover > .side-nav-link,
body[data-leftbar-compact-mode='condensed'] .wrapper .leftside-menu .side-nav .side-nav-item:hover .collapse > ul,
body[data-leftbar-compact-mode='condensed'] .wrapper .leftside-menu .side-nav .side-nav-item:hover .collapsing > ul {
    background: #111b2a !important;
    color: #eef3f7;
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card__value.is-updated {
        animation: none;
    }
}

/* ==========================================================================
   Soft style: rounded shapes, diffuse shadows, no technical marks.
   ========================================================================== */
.sc-frame::before,
.sc-frame::after,
.kpi-card::before {
    display: none;
}

.sc-frame {
    border-color: transparent;
    box-shadow: var(--sc-shadow-soft);
}

.kpi-strip {
    gap: 10px;
}

.kpi-card {
    border: 0;
    border-radius: var(--sc-radius);
    background: var(--sc-panel-2);
    box-shadow: inset 0 0 0 1px var(--sc-rule);
    padding: 0 16px 0 12px;
}

.kpi-card__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sc-aqua-soft);
    font-size: 1rem;
}

.kpi-card__value {
    font-family: var(--sc-font-body);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.kpi-card__label {
    font-weight: 500;
}

.kpi-card.is-alert {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-danger) 35%, transparent);
}

body #estadoAgente > .nav-link {
    border: 0;
    box-shadow: inset 0 0 0 1px var(--sc-rule);
}

body #estadoAgente .account-position {
    font-family: var(--sc-font-body);
}

body .navbar-custom .nav-user {
    border-left-color: transparent;
}

body .navbar-custom .topbar-dropdown-menu {
    border-radius: var(--sc-radius);
    border-color: transparent;
}

.chat-view-toggle {
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--sc-rule);
}

.chat-view-toggle .btn {
    border-radius: 999px !important;
}

/* Side menu: the active item becomes a soft pill */
body .side-nav .menuitem-active > .side-nav-link::before,
body .side-nav .side-nav-link.active::before {
    display: none;
}

body[data-leftbar-compact-mode='condensed'] .side-nav .side-nav-link,
body .side-nav .side-nav-link {
    border-radius: 12px;
}

body .side-nav .side-nav-item {
    padding: 2px 8px;
}

body[data-leftbar-compact-mode='condensed'] .wrapper .leftside-menu .side-nav .side-nav-item {
    padding: 3px 10px;
}

body .side-nav .menuitem-active > .side-nav-link,
body .side-nav .side-nav-link.active {
    background: #172435;
}

body .side-nav .menuitem-active > .side-nav-link i,
body .side-nav .side-nav-link.active i {
    color: #5ce1e6;
}

body .leftside-menu #leftside-menu-container,
body .leftside-menu .simplebar-content-wrapper,
body .leftside-menu .simplebar-content,
body .leftside-menu .side-nav,
body[data-leftbar-theme='dark'] .leftside-menu .side-nav {
    background: transparent !important;
}

/* ==========================================================================
   Shell refinement: labelled side rail, agent status token, account menus.
   Overrides everything above.
   ========================================================================== */

/* ---------- Side rail: icon + name, 76px ---------- */
/* Hyper pins the condensed rail to the viewport (top:0; bottom:0) while its
   items overflow below it, so the dark ground stopped mid-scroll. The rail now
   grows with its items and is never shorter than the viewport. */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .wrapper .leftside-menu {
    width: 76px;
    bottom: auto;
    min-height: 100%;
    padding-top: 78px;
    padding-bottom: 16px;
    border-right: 0;
    box-shadow: none;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .wrapper .content-page {
    margin-left: 76px;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .wrapper .footer,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .wrapper .navbar-custom {
    left: 76px;
}

/* Logo block: same 78px band in both modes, never boxed */
body .leftside-menu .logo,
body[data-leftbar-theme='dark'] .leftside-menu .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    line-height: 1;
    background: #0a111c !important;
}

body .leftside-menu .logo .logo-lg img {
    height: auto;
    max-height: 62px;
    max-width: 170px;
    object-fit: contain;
}

body .leftside-menu {
    padding-top: 78px;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .wrapper .leftside-menu .logo {
    width: 76px;
}

/* The "Menu" caption adds nothing and breaks the no-uppercase rule */
body .side-nav .side-nav-title {
    display: none !important;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .logo span.logo-sm {
    line-height: 1;
}

body .leftside-menu .logo .logo-sm img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > .side-nav-item {
    padding: 2px 8px;
    white-space: normal;
}

/* First-level link: stacked icon and name, no Hyper hover-expansion */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link,
body[data-leftbar-theme='dark'][data-leftbar-compact-mode='condensed'] .side-nav > div > .side-nav-item:hover > .side-nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 60px;
    min-height: 58px;
    padding: 8px 2px 7px;
    border-radius: 14px;
    color: #aebdcb !important;
    background: transparent;
    text-align: center;
    transition: background-color 140ms var(--sc-ease), color 140ms var(--sc-ease);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link i {
    margin: 0;
    /* Unicons is a font: its stroke cannot thin, so size and tone carry the
       weight. A notch smaller and softer at rest matches the 400 labels. */
    font-size: 1.15rem;
    line-height: 1;
    color: inherit;
    opacity: 0.82;
    transition: transform 160ms var(--sc-ease), opacity 140ms var(--sc-ease);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link i,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link:focus-visible i,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item.menuitem-active > .side-nav-link i {
    opacity: 1;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link span:not(.menu-arrow),
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link span:not(.menu-arrow) {
    display: block;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sc-font-body);
    font-size: 0.66rem;
    /* Light ink on the void ground reads heavier than it is: regular weight
       and a hair of tracking keep 11px labels crisp instead of bold. */
    font-weight: 400;
    /* Room for capital accents (Á, É) that overflow: hidden would clip. */
    line-height: 1.35;
    letter-spacing: 0.012em;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item.menuitem-active > .side-nav-link span:not(.menu-arrow),
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link.active span:not(.menu-arrow) {
    font-weight: 500;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link:focus-visible {
    color: #eef3f7 !important;
    background: #172435;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(92, 225, 230, 0.55);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link i {
    transform: translateY(-1px);
}

/* Active item: aqua tint, aqua ink and a rounded marker on the rail edge */
body .side-nav > div > .side-nav-item.menuitem-active > .side-nav-link,
body .side-nav > div > .side-nav-item > .side-nav-link.active,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item.menuitem-active > .side-nav-link,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item.menuitem-active:hover > .side-nav-link {
    color: #5ce1e6 !important;
    background: rgba(92, 225, 230, 0.12);
}

body .side-nav > div > .side-nav-item.menuitem-active > .side-nav-link::before,
body .side-nav > div > .side-nav-item > .side-nav-link.active::before {
    content: '';
    display: block;
    position: absolute;
    left: -8px;
    top: 50%;
    width: 3px;
    height: 22px;
    margin-top: -11px;
    border-radius: 0 3px 3px 0;
    background: #5ce1e6;
}

/* Submenu flyout (admin / empresa) */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul,
body[data-leftbar-theme='dark'][data-leftbar-compact-mode='condensed'] .side-nav .side-nav-item:hover > .collapse > ul {
    left: 72px;
    top: 0;
    width: 230px;
    padding: 6px;
    border-radius: 14px;
    background: #111b2a;
    box-shadow: 0 0 0 1px rgba(174, 189, 203, 0.1), 0 4px 14px rgba(0, 0, 0, 0.35), 0 36px 72px -24px rgba(0, 0, 0, 0.8);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #aebdcb;
    font-family: var(--sc-font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.005em;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li.menuitem-active > a,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a.active {
    font-weight: 500;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a:hover,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li.menuitem-active > a,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a.active {
    color: #eef3f7;
    background: #172435;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a i {
    margin: 0;
    font-size: 1rem;
    opacity: 0.78;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a:hover i,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li.menuitem-active > a i {
    opacity: 1;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a span {
    display: inline;
    padding: 0;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a .menu-arrow {
    display: none !important;
}

/* ---------- Grouped rail: divider, group cue, flyout title and captions ---------- */
body .side-nav .sc-rail-divider {
    width: 28px;
    height: 1px;
    margin: 9px auto;
    background: #1f2c3e;
    list-style: none;
}

/* Group cue: a small chevron on the rail edge says "this opens a panel" */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link[data-bs-toggle='collapse']::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 7px;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: 0.32;
    transform: rotate(45deg);
    transition: opacity 140ms var(--sc-ease), transform 160ms var(--sc-ease);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link[data-bs-toggle='collapse']::after {
    opacity: 0.9;
    transform: translateX(1px) rotate(45deg);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link span:not(.menu-arrow) {
    font-size: 0.7rem;
}

/* Nine groups must fit a 768px laptop: a slightly tighter rail rhythm */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item {
    padding-top: 1px;
    padding-bottom: 1px;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item:hover > .side-nav-link {
    min-height: 54px;
    padding-top: 7px;
    padding-bottom: 6px;
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul {
    width: 244px;
    padding: 6px 6px 8px;
}

/* Groups low on the rail open upwards so the panel never runs off screen */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item.sc-flyout-up:hover > .collapse > ul,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item.sc-flyout-up:hover > .collapsing > ul {
    top: auto;
    bottom: 0;
}

body .side-nav .side-nav-second-level .sc-flyout-title,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul > .sc-flyout-title {
    margin: 0 0 4px;
    padding: 9px 12px 10px;
    border-bottom: 1px solid rgba(174, 189, 203, 0.1);
    color: #eef3f7;
    font-family: var(--sc-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    list-style: none;
}

body .side-nav .side-nav-second-level .sc-flyout-caption,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul > .sc-flyout-caption {
    padding: 12px 12px 4px;
    color: #8193a6;
    font-family: var(--sc-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    list-style: none;
}

body .side-nav .side-nav-second-level .sc-flyout-title + .sc-flyout-caption,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul > .sc-flyout-title + .sc-flyout-caption {
    padding-top: 6px;
}

/* Inside the panel, the current page reads in aqua */
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li.menuitem-active > a,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a.active {
    color: #5ce1e6 !important;
    background: rgba(92, 225, 230, 0.1);
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(92, 225, 230, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link[data-bs-toggle='collapse']::after {
        transition: none;
    }
}

/* ---------- Shared topbar menu shell ---------- */
body .navbar-custom .dropdown-menu.sc-menu {
    min-width: 248px;
    margin-top: 6px !important;
    padding: 6px;
    border: 0;
    border-radius: var(--sc-radius);
    background: var(--sc-panel);
    box-shadow: inset 0 0 0 1px var(--sc-rule), var(--sc-shadow-pop);
    font-family: var(--sc-font-body);
}

.sc-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: var(--sc-fg);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    transition: background-color var(--sc-fast) var(--sc-ease), color var(--sc-fast) var(--sc-ease);
}

.sc-menu .dropdown-item > i {
    flex: 0 0 20px;
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
    color: var(--sc-fg-3);
    transition: color var(--sc-fast) var(--sc-ease);
}

body .navbar-custom .sc-menu .dropdown-item:hover,
body .navbar-custom .sc-menu .dropdown-item:focus-visible {
    background: var(--sc-panel-2);
    color: var(--sc-fg);
}

body .navbar-custom .sc-menu .dropdown-item:hover > i {
    color: var(--sc-fg);
}

.sc-menu .dropdown-item:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc-aqua) 70%, transparent);
}

.sc-menu .dropdown-divider {
    margin: 6px 4px;
    border-color: var(--sc-rule);
    opacity: 1;
}

.sc-menu form {
    margin: 0;
}

body .navbar-custom .sc-menu .sc-menu-danger,
body .navbar-custom .sc-menu .sc-menu-danger > i {
    color: var(--sc-danger);
}

body .navbar-custom .sc-menu .sc-menu-danger:hover {
    background: var(--sc-danger-soft);
    color: var(--sc-danger);
}

body .navbar-custom .sc-menu .sc-menu-danger:hover > i {
    color: var(--sc-danger);
}

.sc-menu__title {
    padding: 8px 10px 4px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-fg);
}

.sc-menu__group {
    padding: 10px 10px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sc-fg-3);
}

/* ---------- Agent status token ---------- */
.sc-status-dot {
    position: relative;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sc-fg-3);
}

.sc-status-dot[data-tone='online'] {
    background: var(--sc-wa);
}

.sc-status-dot[data-tone='paused'] {
    background: var(--sc-bot);
}

.sc-status-dot[data-tone='offline'] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--sc-fg-3);
}

body #estadoAgente > .nav-link.sc-status {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    min-height: 0 !important;
    margin-top: 13px;
    padding: 0 12px 0 14px !important;
    border: 0;
    border-radius: 999px;
    background: var(--sc-panel-2);
    box-shadow: inset 0 0 0 1px var(--sc-rule);
    color: var(--sc-fg);
    transition: box-shadow var(--sc-fast) var(--sc-ease), background-color var(--sc-fast) var(--sc-ease);
}

body #estadoAgente > .nav-link.sc-status:hover,
body #estadoAgente > .nav-link.sc-status[aria-expanded='true'] {
    background: var(--sc-panel);
    box-shadow: inset 0 0 0 1px var(--sc-ring), var(--sc-shadow-lift);
}

body #estadoAgente > .nav-link.sc-status:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-aqua) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--sc-aqua) 22%, transparent);
}

.sc-status > .sc-status-dot[data-tone='online']::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--sc-wa);
    opacity: 0;
    animation: sc-status-breathe 2.4s var(--sc-ease) infinite;
}

@keyframes sc-status-breathe {
    0% {
        transform: scale(0.6);
        opacity: 0.35;
    }

    70%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.sc-status__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body #estadoAgente .sc-status__label {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--sc-fg);
    white-space: nowrap;
}

body #estadoAgente .sc-status__time {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sc-fg-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sc-status__chevron,
.sc-user__chevron {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--sc-fg-3);
    transition: transform var(--sc-fast) var(--sc-ease);
}

[aria-expanded='true'] > .sc-status__chevron,
[aria-expanded='true'] > .sc-user__chevron {
    transform: rotate(180deg);
}

#estadoAgente.is-loading > .sc-status {
    pointer-events: none;
    opacity: 0.65;
}

#estadoAgente.is-loading .sc-status__time {
    visibility: hidden;
}

/* Status menu */
.sc-status-menu .sc-status-option {
    gap: 12px;
}

.sc-status-option__label {
    flex: 1 1 auto;
}

body .navbar-custom .sc-status-menu .sc-status-option.is-current {
    background: var(--sc-aqua-soft);
    font-weight: 600;
    cursor: default;
}

.sc-status-option__check {
    font-size: 1.1rem;
    color: var(--sc-aqua-ink);
}

.sc-status-option:disabled {
    opacity: 0.55;
}

/* ---------- Account trigger and profile menu ---------- */
body .navbar-custom .nav-user.sc-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    height: 44px;
    margin-top: 13px;
    padding: 0 10px 0 5px !important;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition: background-color var(--sc-fast) var(--sc-ease), box-shadow var(--sc-fast) var(--sc-ease);
}

body .navbar-custom .nav-user.sc-user:hover,
body .navbar-custom .nav-user.sc-user[aria-expanded='true'] {
    background: var(--sc-panel-2);
    box-shadow: inset 0 0 0 1px var(--sc-rule);
}

body .navbar-custom .nav-user.sc-user:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-aqua) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--sc-aqua) 22%, transparent);
}

body .navbar-custom .nav-user.sc-user .account-user-avatar {
    position: static;
    flex: 0 0 auto;
}

.sc-avatar,
body .navbar-custom .nav-user .account-user-avatar img.sc-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--sc-panel), 0 0 0 3px var(--sc-rule);
}

.sc-avatar--lg {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.sc-user__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 180px;
}

body .navbar-custom .nav-user.sc-user .account-user-name,
body .navbar-custom .nav-user.sc-user .account-position {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .navbar-custom .nav-user.sc-user .account-user-name {
    font-size: 0.86rem;
    line-height: 1.2;
}

body .navbar-custom .nav-user.sc-user .account-position {
    font-size: 0.74rem;
    line-height: 1.2;
}

.sc-profile-menu {
    width: 268px;
}

.sc-profile-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 8px;
}

.sc-profile-menu__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sc-profile-menu__name {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sc-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-profile-menu__meta {
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--sc-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hyper stretches topbar menus edge to edge on phones (left and right 10px);
   ours keep their width, so anchor them under the trigger on the right. */
@media (max-width: 600px) {
    body .navbar-custom .dropdown .dropdown-menu.sc-menu {
        left: auto !important;
        right: 10px !important;
    }
}

@media (max-width: 767.98px) {
    .sc-user__text,
    .sc-user__chevron,
    .sc-status__chevron {
        display: none !important;
    }

    body #estadoAgente > .nav-link.sc-status {
        padding: 0 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-status > .sc-status-dot[data-tone='online']::after {
        animation: none;
    }

    body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link,
    body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav > div > .side-nav-item > .side-nav-link i,
    .sc-menu .dropdown-item,
    .sc-status__chevron,
    .sc-user__chevron {
        transition: none;
    }
}

body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul .side-nav-item,
body[data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li {
    padding: 0;
}

/* Flyout links must not inherit Hyper's hover fill from the parent item */
body[data-leftbar-theme='dark'][data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul .side-nav-link,
body[data-leftbar-theme='dark'][data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul a {
    background: transparent;
    color: #aebdcb !important;
}

body[data-leftbar-theme='dark'][data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li:hover > a,
body[data-leftbar-theme='dark'][data-leftbar-compact-mode='condensed']:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul li.menuitem-active > a {
    background: #172435;
    color: #eef3f7 !important;
}