:root {
    --bg: #050510;
    --card: rgba(16, 16, 30, .78);
    --p: #00f3ff;
    --p0: rgba(0, 243, 255, .08);
    --s: #7000ff;
    --t: #fff;
    --d: #8892b0;
    --g: #ff0055;
    --ok: #00ff9d;
    --au: #ffd700;
    --bdr: rgba(255, 255, 255, .07);
    --r: 12px;
    --rs: 7px;
    --f: 'Outfit', sans-serif;
    --m: 'JetBrains Mono', monospace;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg);
    background-image: radial-gradient(circle at 12% 50%, rgba(112, 0, 255, .07), transparent 28%), radial-gradient(circle at 88% 30%, rgba(0, 243, 255, .07), transparent 28%);
    font-family: var(--f);
    color: var(--t);
    font-size: 14px;
}

/* CURSOR */
.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    background: var(--p);
}

.cursor-outline {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 243, 255, .55);
    transition: width .2s, height .2s;
}

body:hover .cursor-outline {
    width: 36px;
    height: 36px;
    background: rgba(0, 243, 255, .04);
}

/* APP GRID */
.app-grid {
    display: grid;
    grid-template-columns: 265px 1fr 310px;
    grid-template-rows: 44px 1fr;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* HEADER */
.header {
    grid-column: 1/-1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.logo {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

.logo-main {
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    background: linear-gradient(to right, #fff 55%, var(--p));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.logo-sub {
    font-size: .5rem;
    letter-spacing: 1.8px;
    color: rgba(0, 243, 255, .5);
    text-transform: uppercase;
    white-space: nowrap;
}

.header-metrics {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
    gap: 0;
}

.hm {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

.hm-l {
    font-size: .48rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.hm-v {
    font-family: var(--m);
    font-size: .6rem;
    color: var(--p);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.hm-sep {
    width: 1px;
    height: 22px;
    background: var(--bdr);
    flex-shrink: 0;
}

.header-badges {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.hbadge {
    font-family: var(--m);
    font-size: .54rem;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(0, 243, 255, .4);
    color: var(--p);
    white-space: nowrap;
}

.hbadge.secondary {
    border-color: rgba(112, 0, 255, .5);
    color: rgba(112, 0, 255, .9);
}

/* PANELS */
.panel {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    backdrop-filter: blur(12px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .3s;
}

.panel:hover {
    border-color: rgba(0, 243, 255, .12);
}

/* LEFT PANEL */
.left-panel {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-heading {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--d);
    padding: 7px 12px 5px;
    border-bottom: 1px solid var(--bdr);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ph-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--p);
    box-shadow: 0 0 5px var(--p);
    flex-shrink: 0;
}

/* scrollable middle of left panel */
.left-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.left-scroll::-webkit-scrollbar {
    width: 2px;
}

.left-scroll::-webkit-scrollbar-thumb {
    background: var(--p0);
    border-radius: 2px;
}

.section-block {
    border-bottom: 1px solid var(--bdr);
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.sec-head {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sec-label {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--d);
    font-weight: 600;
}

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-purple {
    background: var(--s);
    box-shadow: 0 0 4px var(--s);
}

.dot-gold {
    background: var(--au);
    box-shadow: 0 0 4px var(--au);
}

.dot-green {
    background: var(--ok);
    box-shadow: 0 0 4px var(--ok);
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--d);
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: color .2s;
}

.icon-btn:hover {
    color: var(--p);
}

.danger-icon:hover {
    color: var(--g);
}

.tab-bar {
    display: flex;
    gap: 3px;
    background: rgba(0, 0, 0, .25);
    border-radius: 5px;
    padding: 2px;
}

.tab-btn {
    flex: 1;
    padding: 4px 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--d);
    font-family: var(--f);
    font-size: .6rem;
    font-weight: 600;
    transition: all .2s;
}

.tab-btn.active {
    background: rgba(0, 243, 255, .1);
    color: var(--p);
}

.tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, .04);
    color: var(--t);
}

.tab-panel {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.tab-panel.active {
    display: flex;
}

.drop-zone {
    border: 1px dashed rgba(0, 243, 255, .22);
    border-radius: 6px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all .2s;
    background: rgba(0, 243, 255, .02);
    color: var(--d);
}

.drop-zone:hover {
    border-color: var(--p);
    background: rgba(0, 243, 255, .05);
    color: var(--p);
}

.drop-zone svg {
    flex-shrink: 0;
    opacity: .6;
}

.drop-zone span {
    font-size: .6rem;
    line-height: 1.3;
}

.note-text {
    font-size: .54rem;
    color: var(--d);
    opacity: .55;
}

/* forms — agent config block scrolls via left-scroll parent; no height cap */
.tab-panel.active .form-grid {
    overflow-y: visible;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.ff {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ff-full {
    grid-column: 1/-1;
}

.ff label {
    font-size: .54rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.req {
    color: var(--g);
}

.fi {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px;
    padding: 4px 6px;
    color: var(--t);
    font-family: var(--f);
    font-size: .67rem;
    outline: none;
    width: 100%;
    transition: border-color .2s;
}

.fi:focus {
    border-color: rgba(0, 243, 255, .35);
    background: rgba(0, 243, 255, .04);
}

.fi::placeholder {
    color: rgba(136, 146, 176, .35);
}

.fi-ta {
    resize: vertical;
    min-height: 34px;
}

.fi-select {
    appearance: none;
}

/* ══ NEW PREMIUM FORM STYLES ══ */
.agent-config-block {
    padding: 10px 12px 12px;
    gap: 0;
}

.agent-form-panel {
    flex-direction: column;
    gap: 0;
    padding-top: 6px;
}

/* Group label with icon */
.form-group-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .52rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--p);
    font-weight: 700;
    opacity: .8;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(0, 243, 255, .06);
    margin-top: 4px;
}

.form-group-label:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

.form-group-label svg {
    opacity: .6;
    flex-shrink: 0;
}

/* New form grid */
.form-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 2px;
}

.ff-new {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ff-new-full {
    grid-column: 1/-1;
}

.fl-new {
    font-size: .5rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 600;
    padding-left: 2px;
}

/* New premium inputs */
.fi-new {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
    padding: 7px 9px;
    color: var(--t);
    font-family: var(--f);
    font-size: .72rem;
    outline: none;
    width: 100%;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.fi-new:focus {
    border-color: rgba(0, 243, 255, .4);
    background: rgba(0, 243, 255, .04);
    box-shadow: 0 0 12px rgba(0, 243, 255, .08);
}

.fi-new::placeholder {
    color: rgba(136, 146, 176, .3);
}

.fi-new-ta {
    resize: vertical;
    min-height: 46px;
    line-height: 1.5;
}

.fi-new-select {
    appearance: none;
    cursor: pointer;
}

/* Applied agent card (replaces form after config is applied) */
.applied-agent-card {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(135deg, rgba(0, 255, 157, .05), rgba(0, 243, 255, .03));
    border: 1px solid rgba(0, 255, 157, .18);
    border-radius: 10px;
    padding: 12px;
    margin: 4px 0 8px;
    animation: bannerSlideIn .3s ease-out;
}

@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.pac-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pac-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(112, 0, 255, .25), rgba(0, 243, 255, .15));
    border: 1px solid rgba(112, 0, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--s);
    letter-spacing: 0;
}

.pac-avatar.male {
    background: linear-gradient(135deg, rgba(0, 243, 255, .2), rgba(0, 180, 255, .1));
    border-color: rgba(0, 243, 255, .3);
    color: var(--p);
}

.pac-info {
    flex: 1;
    min-width: 0;
}

.pac-name {
    font-size: .78rem;
    font-weight: 700;
    color: var(--t);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pac-subtitle {
    font-size: .55rem;
    color: var(--d);
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.pac-live {
    font-family: var(--m);
    font-size: .44rem;
    color: var(--ok);
    font-weight: 700;
    letter-spacing: 1.2px;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(0, 255, 157, .08);
    border: 1px solid rgba(0, 255, 157, .2);
    padding: 3px 6px;
    border-radius: 4px;
    animation: blink 2s ease-in-out infinite;
}

.pac-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pac-tag {
    font-size: .5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 3px 7px;
    border-radius: 4px;
}

.pac-tag.gender {
    background: rgba(112, 0, 255, .1);
    border: 1px solid rgba(112, 0, 255, .25);
    color: var(--s);
}

.pac-tag.voice {
    background: rgba(0, 255, 157, .07);
    border: 1px solid rgba(0, 255, 157, .2);
    color: var(--ok);
}

.pac-actions {
    display: flex;
    gap: 6px;
}

.pac-edit-btn {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(0, 243, 255, .07);
    border: 1px solid rgba(0, 243, 255, .2);
    color: var(--p);
    font-family: var(--f);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
}

.pac-edit-btn:hover {
    background: rgba(0, 243, 255, .15);
    box-shadow: 0 0 14px rgba(0, 243, 255, .15);
}

.pac-clear-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(255, 0, 85, .05);
    border: 1px solid rgba(255, 0, 85, .15);
    color: var(--g);
    font-family: var(--f);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
}

.pac-clear-btn:hover {
    background: rgba(255, 0, 85, .12);
}

/* Toggle button — kept for legacy, now unused */
.agent-toggle-btn {
    background: rgba(0, 243, 255, .07);
    border: 1px solid rgba(0, 243, 255, .15);
    color: var(--p);
    padding: 3px 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .2s;
}

.agent-toggle-btn:hover {
    background: rgba(0, 243, 255, .15);
}

/* Toggle Switch */
.switch-container input:checked + .slider-round {
    background-color: var(--p) !important;
}
.switch-container input:focus + .slider-round {
    box-shadow: 0 0 1px var(--p);
}
.slider-round::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.switch-container input:checked + .slider-round::before {
    transform: translateX(20px);
}

/* Agent form action buttons */
.agent-form-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 243, 255, .06);
}

.btn-apply-config {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(0, 243, 255, .12), rgba(112, 0, 255, .08));
    border: 1px solid rgba(0, 243, 255, .28);
    color: var(--p);
    font-family: var(--f);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .22s;
}

.btn-apply-config:hover {
    background: linear-gradient(135deg, rgba(0, 243, 255, .22), rgba(112, 0, 255, .16));
    box-shadow: 0 0 18px rgba(0, 243, 255, .18);
    transform: translateY(-1px);
}

.btn-save-profile {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 7px;
    background: rgba(112, 0, 255, .07);
    border: 1px solid rgba(112, 0, 255, .22);
    color: var(--s);
    font-family: var(--f);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .22s;
}

.btn-save-profile:hover {
    background: rgba(112, 0, 255, .16);
    box-shadow: 0 0 14px rgba(112, 0, 255, .22);
    transform: translateY(-1px);
}

/* campaign bar — always visible */
.btn {
    font-family: var(--f);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--p);
    color: var(--p);
    background: rgba(0, 243, 255, .06);
    transition: all .22s;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    background: var(--p);
    color: #000;
    box-shadow: 0 0 14px rgba(0, 243, 255, .4);
}

.btn-action {
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 243, 255, .1), rgba(112, 0, 255, .06));
}

.btn-ghost {
    border-color: rgba(0, 243, 255, .2);
    color: rgba(0, 243, 255, .5);
    background: transparent;
    font-size: .57rem;
    padding: 4px 8px;
}

.btn-ghost:hover {
    border-color: var(--p);
    color: var(--p);
    background: rgba(0, 243, 255, .06);
    box-shadow: none;
}

.btn-success {
    border-color: var(--ok);
    color: var(--ok);
    background: rgba(0, 255, 157, .06);
}

.btn-success:hover {
    background: var(--ok);
    color: #000;
    box-shadow: 0 0 14px rgba(0, 255, 157, .4);
}

.btn-danger {
    border-color: var(--g);
    color: var(--g);
    background: rgba(255, 0, 85, .06);
}

.btn-danger:hover {
    background: var(--g);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 0, 85, .4);
}

.btn-gold {
    border-color: var(--au);
    color: var(--au);
    background: rgba(255, 215, 0, .06);
}

.btn-gold:hover {
    background: var(--au);
    color: #000;
    box-shadow: 0 0 14px rgba(255, 215, 0, .4);
}

.btn-purple {
    border-color: var(--s);
    color: var(--s);
    background: rgba(112, 0, 255, .06);
}

.btn-purple:hover {
    background: var(--s);
    color: #fff;
    box-shadow: 0 0 14px rgba(112, 0, 255, .4);
}

.btn-hear {
    padding: 2px 8px;
    font-size: .57rem;
    margin-left: auto;
    margin-right: 8px;
}

/* campaign bar — always visible */
.campaign-bar {
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    border-top: 1px solid var(--bdr);
}

/* CENTER */
.core-panel {
    grid-column: 2;
    grid-row: 2;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: all .45s ease;
}

.orb-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.orb-container {
    width: 100%;
    aspect-ratio: 1/1;
    max-width: clamp(180px, 38vh, 460px);
    max-height: clamp(180px, 38vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 20px rgba(0, 243, 255, .12));
    margin-bottom: -4px;
}

#orbCanvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.orb-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.status-text {
    font-family: var(--m);
    color: var(--p);
    font-size: .6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cycling-text {
    font-family: var(--m);
    font-size: .54rem;
    color: var(--d);
    opacity: .65;
    letter-spacing: 1px;
    transition: opacity .5s;
}

/* LIVE CARD */
.live-card {
    background: rgba(0, 243, 255, .03);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 0 solid transparent;
    padding: 0 14px;
    width: 0;
    max-width: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all .42s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.core-panel.call-active .live-card {
    width: 300px;
    max-width: 300px;
    max-height: 100%;
    padding: 10px 12px;
    opacity: 1;
    margin-left: 16px;
    pointer-events: auto;
    border: 1px solid rgba(0, 243, 255, .18);
    box-shadow: 0 0 18px rgba(0, 243, 255, .05);
}

.live-card-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--m);
    font-size: .58rem;
    color: var(--p);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid rgba(0, 243, 255, .1);
    padding-bottom: 6px;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 5px var(--ok);
    animation: blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

.status-pill {
    margin-left: auto;
    font-size: .52rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    background: rgba(0, 243, 255, .1);
    border: 1px solid var(--p);
    color: var(--p);
    transition: all .3s;
}

.status-pill.completed {
    background: rgba(0, 255, 157, .1);
    border-color: var(--ok);
    color: var(--ok);
}

.status-pill.not_interested {
    background: rgba(255, 0, 85, .1);
    border-color: var(--g);
    color: var(--g);
}

.status-pill.callback {
    background: rgba(255, 215, 0, .1);
    border-color: var(--au);
    color: var(--au);
}

.live-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.lf {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, .03);
    padding: 5px 7px;
    border-radius: 5px;
}

.ll {
    font-size: .5rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.lv {
    font-size: .66rem;
    color: var(--t);
    font-weight: 500;
}

.lv.mono {
    font-family: var(--m);
    font-size: .6rem;
    color: var(--p);
}

/* RIGHT PANEL */
.right-panel {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* right panel tab bar */
.rp-tabs {
    display: flex;
    gap: 2px;
    padding: 5px 8px 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--bdr);
}

.rp-tab {
    flex: 1;
    padding: 5px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--d);
    font-family: var(--f);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: all .2s;
    margin-bottom: -1px;
}

.rp-tab.active {
    color: var(--p);
    border-bottom-color: var(--p);
}

.rp-tab:hover:not(.active) {
    color: var(--t);
}

.rp-view {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.rp-view.active {
    display: flex;
}

/* dialogue */
.dialogue-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    padding: 0 8px 8px;
}

.dialogue-container::-webkit-scrollbar {
    width: 2px;
}

.dialogue-container::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 157, .18);
    border-radius: 2px;
}

.r-badge {
    margin-left: auto;
    font-family: var(--m);
    font-size: .5rem;
    padding: 1px 6px;
    border-radius: 20px;
    background: rgba(136, 146, 176, .1);
    border: 1px solid rgba(136, 146, 176, .22);
    color: var(--d);
}

.r-badge.live {
    background: rgba(0, 255, 157, .1);
    border-color: rgba(0, 255, 157, .4);
    color: var(--ok);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    color: var(--d);
    font-size: .62rem;
    opacity: .45;
    text-align: center;
    padding: 10px 0;
}

.dialogue-bubble {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 90%;
    padding: 5px 8px;
    border-radius: 8px;
    animation: bubble-in .25s ease-out;
    white-space: normal;
}

@keyframes bubble-in {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.bubble-agent {
    align-self: flex-start;
    background: rgba(0, 243, 255, .07);
    border: 1px solid rgba(0, 243, 255, .17);
    border-bottom-left-radius: 2px;
}

.bubble-client {
    align-self: flex-end;
    background: rgba(112, 0, 255, .09);
    border: 1px solid rgba(112, 0, 255, .2);
    border-bottom-right-radius: 2px;
}

.bubble-speaker {
    font-size: .5rem;
    letter-spacing: .9px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--m);
}

.bubble-agent .bubble-speaker {
    color: var(--p);
}

.bubble-client .bubble-speaker {
    color: rgba(170, 90, 255, .9);
}

.bubble-text {
    font-size: .65rem;
    color: var(--t);
    line-height: 1.5;
}

.bubble-time {
    font-size: .5rem;
    color: var(--d);
    font-family: var(--m);
}

/* QUEUE VIEW */
.queue-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    min-height: 0;
}

.queue-list::-webkit-scrollbar {
    width: 2px;
}

.queue-list::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, .18);
    border-radius: 2px;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    padding: 5px 8px;
    transition: border-color .2s;
}

.queue-item:hover {
    border-color: rgba(255, 215, 0, .18);
}

.queue-item.queue-active {
    background: rgba(0, 243, 255, .04);
    border-color: rgba(0, 243, 255, .22);
}

.queue-num {
    font-family: var(--m);
    font-size: .52rem;
    color: var(--d);
    min-width: 15px;
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border-radius: 3px;
    padding: 1px 3px;
    flex-shrink: 0;
}

.queue-active .queue-num {
    color: var(--p);
    background: rgba(0, 243, 255, .1);
}

.queue-info {
    flex: 1;
    min-width: 0;
}

.queue-name {
    font-size: .65rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-active .queue-name {
    color: var(--p);
}

.queue-meta {
    font-size: .56rem;
    color: var(--d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-phone {
    font-family: var(--m);
    font-size: .54rem;
    color: var(--d);
    flex-shrink: 0;
}

.queue-status-pill {
    font-size: .48rem;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.queue-status-pill.calling {
    background: rgba(0, 243, 255, .1);
    border: 1px solid rgba(0, 243, 255, .3);
    color: var(--p);
}

.queue-status-pill.waiting {
    background: rgba(255, 215, 0, .08);
    border: 1px solid rgba(255, 215, 0, .2);
    color: var(--au);
}

.del-btn {
    background: transparent;
    border: none;
    color: rgba(255, 0, 85, .35);
    padding: 2px 3px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .2s;
}

.del-btn:hover {
    color: var(--g);
}

/* ══ REPORTS OVERLAY ══ */
.reports-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 5, 16, 0.98);
    backdrop-filter: blur(20px);
    z-index: 10000;
    display: none;
    flex-direction: column;
    animation: overFadeIn 0.3s ease-out;
    cursor: default;
}

.reports-overlay * {
    cursor: default;
}

.reports-overlay button,
.reports-overlay input,
.reports-overlay audio,
.reports-overlay .report-big-card {
    cursor: pointer;
}

.reports-overlay.active {
    display: flex;
}

@keyframes overFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.overlay-header {
    height: 56px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    background: rgba(10, 10, 25, 0.6);
}

.overlay-header .logo-main {
    font-size: .82rem;
}

.overlay-header .logo-sub {
    font-size: .47rem;
    color: rgba(0, 243, 255, .4);
}

.close-overlay {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 0, 85, .08);
    border: 1px solid rgba(255, 0, 85, .2);
    color: rgba(255, 0, 85, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.close-overlay:hover {
    background: var(--g);
    color: #fff;
    border-color: var(--g);
    transform: scale(1.05);
}

.overlay-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* List Side */
.overlay-list-side {
    width: 360px;
    border-right: 1px solid var(--bdr);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.list-search-bar {
    padding: 14px 16px;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}

#reportSearch {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 9px 14px;
    color: var(--t);
    font-family: var(--f);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

#reportSearch:focus {
    border-color: var(--p);
    background: rgba(0, 243, 255, .04);
}

#reportSearch::placeholder {
    color: rgba(136, 146, 176, .4);
}

.big-card-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.big-card-list::-webkit-scrollbar {
    width: 3px;
}

.big-card-list::-webkit-scrollbar-thumb {
    background: rgba(0, 243, 255, .15);
    border-radius: 3px;
}

.report-big-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: 14px 14px 14px 18px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.report-big-card:hover {
    border-color: rgba(0, 243, 255, .3);
    background: rgba(0, 243, 255, .04);
    transform: translateX(3px);
}

.report-big-card.selected {
    border-color: var(--p);
    background: rgba(0, 243, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(0, 243, 255, .15), 0 4px 20px rgba(0, 243, 255, .06);
}

.rbc-outcome {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 10px 0 0 10px;
}

.rbc-outcome.success {
    background: linear-gradient(to bottom, var(--ok), rgba(0, 255, 157, .4));
}

.rbc-outcome.not_interested {
    background: linear-gradient(to bottom, var(--g), rgba(255, 0, 85, .4));
}

.rbc-outcome.callback {
    background: linear-gradient(to bottom, var(--au), rgba(255, 215, 0, .4));
}

.rbc-outcome.voicemail,
.rbc-outcome.unknown {
    background: rgba(136, 146, 176, .5);
}

.rbc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.rbc-name {
    font-size: .85rem;
    font-weight: 700;
    color: var(--t);
    line-height: 1.2;
}

.rbc-time {
    font-family: var(--m);
    font-size: .56rem;
    color: var(--d);
    white-space: nowrap;
    flex-shrink: 0;
}

.rbc-company {
    font-size: .72rem;
    color: var(--p);
    margin-bottom: 5px;
    font-weight: 600;
}

.rbc-meta {
    font-size: .65rem;
    color: var(--d);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rbc-meta span {
    background: rgba(255, 255, 255, .04);
    padding: 1px 6px;
    border-radius: 4px;
}

.rbc-summary {
    font-size: .66rem;
    color: rgba(136, 146, 176, .75);
    margin-top: 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rbc-call-count {
    background: rgba(0, 243, 255, .08) !important;
    border: 1px solid rgba(0, 243, 255, .18);
    color: var(--p) !important;
    font-weight: 700;
}

.client-history-body {
    align-items: flex-start;
}

.call-history-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.call-history-item {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 16px 18px;
    position: relative;
}

.call-history-item.is-latest {
    border-color: rgba(0, 243, 255, .28);
    box-shadow: inset 0 0 0 1px rgba(0, 243, 255, .08);
}

.chi-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.chi-date {
    font-size: .88rem;
    font-weight: 700;
    color: var(--t);
}

.chi-time {
    font-size: .68rem;
    color: var(--d);
    margin-top: 3px;
}

.chi-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chi-badge {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}

.chi-badge.latest {
    background: rgba(0, 243, 255, .12);
    color: var(--p);
    border: 1px solid rgba(0, 243, 255, .28);
}

.chi-section {
    margin-bottom: 14px;
}

.chi-section-title {
    font-size: .62rem;
    font-weight: 700;
    color: var(--p);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

.chi-audio {
    margin-top: 4px;
}

.chi-audio-label {
    font-size: .62rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.chi-audio audio,
.recording-card audio {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    outline: none;
    filter: invert(1) hue-rotate(180deg) brightness(.8) saturate(1.2);
}

.chi-audio-missing,
.recording-empty {
    font-size: .74rem;
    color: rgba(136, 146, 176, .65);
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .08);
}

.chi-transcript {
    margin-top: 8px;
}

.chi-transcript summary {
    cursor: pointer;
    font-size: .72rem;
    color: var(--p);
    font-weight: 700;
    list-style: none;
    padding: 8px 0;
}

.chi-transcript summary::-webkit-details-marker {
    display: none;
}

.chi-transcript[open] summary {
    margin-bottom: 10px;
}

.call-recordings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recording-card {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 12px 14px;
}

.recording-card.is-latest {
    border-color: rgba(0, 243, 255, .25);
}

.recording-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.recording-card-date {
    font-size: .76rem;
    font-weight: 700;
    color: var(--t);
}

.recording-card-meta {
    font-size: .64rem;
    color: var(--d);
    margin-top: 3px;
}

.overlay-detail-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.empty-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 14px;
    color: var(--d);
    font-size: .95rem;
    opacity: 0.4;
    user-select: none;
}

/* ══ AGENT DETAIL STYLES ══ */
.detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid var(--bdr);
    padding-bottom: 20px;
}

.dh-left h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--t);
    margin-bottom: 6px;
    background: linear-gradient(to right, #fff, var(--p));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dh-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--d);
    font-size: 0.82rem;
}

.dh-meta .status-pill {
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.dh-meta .status-pill.female {
    background: rgba(0, 243, 255, .1);
    border: 1px solid var(--p);
    color: var(--p);
}

.dh-meta .status-pill.male {
    background: rgba(112, 0, 255, .1);
    border: 1px solid var(--s);
    color: var(--s);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.detail-sec {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.3s ease;
}

.detail-sec:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 243, 255, .2);
}

.detail-sec h3 {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--p);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-sec h3::before {
    content: "";
    width: 3px;
    height: 10px;
    background: var(--p);
    border-radius: 2px;
}

.detail-sec p {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--d);
    margin-bottom: 6px;
}

.detail-sec p strong {
    color: var(--t);
}

.expanded-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ed-header {
    padding: 22px 30px 18px;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    background: rgba(10, 10, 25, .4);
}

.ed-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--t);
    margin-bottom: 6px;
    background: linear-gradient(to right, #fff, var(--p));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ed-sub {
    font-size: .76rem;
    color: var(--d);
    margin-bottom: 12px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.ed-sub span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ed-sub strong {
    color: rgba(255, 255, 255, .55);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ed-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ed-pill {
    font-size: .63rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: .8px;
}

.ed-pill.success {
    background: rgba(0, 255, 157, .12);
    color: var(--ok);
    border: 1px solid rgba(0, 255, 157, .35);
}

.ed-pill.not_interested {
    background: rgba(255, 0, 85, .12);
    color: var(--g);
    border: 1px solid rgba(255, 0, 85, .35);
}

.ed-pill.callback {
    background: rgba(255, 215, 0, .12);
    color: var(--au);
    border: 1px solid rgba(255, 215, 0, .35);
}

.ed-pill.unknown {
    background: rgba(136, 146, 176, .1);
    color: var(--d);
    border: 1px solid rgba(136, 146, 176, .2);
}

.ed-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 26px;
    display: flex;
    gap: 22px;
    min-height: 0;
}

.ed-body::-webkit-scrollbar {
    width: 3px;
}

.ed-body::-webkit-scrollbar-thumb {
    background: rgba(0, 243, 255, .15);
    border-radius: 3px;
}

.ed-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.ed-side-content {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ed-section {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 18px;
    flex-shrink: 0;
}

.ed-section-title {
    font-size: .65rem;
    font-weight: 700;
    color: var(--p);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ed-section-title::before {
    content: "";
    width: 3px;
    height: 12px;
    background: var(--p);
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--p);
}

.ed-audio-player {
    width: 100%;
    margin-top: 4px;
}

.ed-audio-player audio {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    outline: none;
    filter: invert(1) hue-rotate(180deg) brightness(.8) saturate(1.2);
}

.ed-summary-text {
    font-size: .82rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .8);
}

.ed-tasks-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ed-tasks-list li {
    background: rgba(0, 255, 157, .04);
    border: 1px solid rgba(0, 255, 157, .12);
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
}

.ed-tasks-list li::before {
    content: "✓";
    color: var(--ok);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

.ed-dialogue-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ed-bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .8rem;
    line-height: 1.55;
}

.ed-bubble-agent {
    align-self: flex-start;
    background: rgba(0, 243, 255, .07);
    border: 1px solid rgba(0, 243, 255, .18);
    border-bottom-left-radius: 3px;
}

.ed-bubble-user {
    align-self: flex-end;
    background: rgba(112, 0, 255, .09);
    border: 1px solid rgba(112, 0, 255, .18);
    border-bottom-right-radius: 3px;
}

.ed-bubble-who {
    font-size: .57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.ed-bubble-agent .ed-bubble-who {
    color: var(--p);
}

.ed-bubble-user .ed-bubble-who {
    color: rgba(160, 80, 255, .9);
}

.ed-bubble-text {
    color: rgba(255, 255, 255, .85);
}

/* RESPONSIVE */
@media(max-width:1100px) {
    .app-grid {
        grid-template-columns: 230px 1fr 280px;
    }
}

@media(max-width:900px) {

    html,
    body {
        overflow-y: auto;
        height: auto;
    }

    body {
        overflow-x: hidden;
    }

    .app-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .core-panel {
        min-height: 300px;
        order: -1;
        flex-direction: column;
    }

    .live-card,
    .core-panel.call-active .live-card {
        white-space: normal;
        width: 100%;
        max-width: 320px;
        margin: 12px 0 0;
    }

    .orb-container {
        max-width: 240px;
        max-height: 240px;
    }

    .header-metrics {
        display: none;
    }

    .left-scroll {
        max-height: 60vh;
    }

    .right-panel {
        min-height: 350px;
    }
}

@media(max-width:600px) {
    .app-grid {
        gap: 6px;
        padding: 6px;
    }

    .header-badges {
        display: none;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .ff-full {
        grid-column: 1;
    }

    .reports-layout {
        flex-direction: column;
    }

    .report-list-col {
        flex: 0 0 180px;
    }
}

/* FLOATING REPORTS BTN */
.floating-reports-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--p);
    color: #000;
    padding: 14px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    cursor: pointer;
    z-index: 9000;
    box-shadow: 0 10px 40px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: var(--f);
    font-size: 0.9rem;
}

.floating-reports-btn:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 243, 255, 0.6);
    background: #fff;
}

.floating-reports-btn svg {
    width: 22px;
    height: 22px;
}

.nav-report-btn:hover {
    background: rgba(0, 243, 255, 0.14) !important;
    border-color: rgba(0, 243, 255, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.2);
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* ══ EMERGENCY STOP HEADER BUTTON ══ */
.emergency-stop-btn {
    background: rgba(255, 0, 85, .08);
    color: rgba(255, 0, 85, .6);
    border: 1px solid rgba(255, 0, 85, .25) !important;
    opacity: 0.8;
    pointer-events: none;
    cursor: not-allowed !important;
    display: flex;
    align-items: center;
    transition: all 0.35s ease;
    font-family: var(--m);
    font-size: .54rem;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.emergency-stop-btn.active {
    background: rgba(255, 0, 85, .1);
    color: var(--g);
    border-color: rgba(255, 0, 85, .4) !important;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer !important;
    animation: pulse-stop 2s infinite;
}

.emergency-stop-btn.active:hover {
    background: var(--g);
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 0, 85, .5);
}

@keyframes pulse-stop {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 85, .4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 0, 85, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 85, 0);
    }
}

/* ══ AGENT PROFILES OVERLAY ══ */
.agents-overlay-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.agent-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    padding: 28px;
    overflow-y: auto;
    align-content: start;
    flex: 1;
}

.agent-cards-grid::-webkit-scrollbar {
    width: 3px;
}

.agent-cards-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 243, 255, .15);
    border-radius: 3px;
}

/* Individual grid agent card */
.agent-grid-card {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.agent-grid-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--p), var(--s));
    opacity: 0;
    transition: opacity 0.25s;
}

.agent-grid-card:hover {
    border-color: rgba(0, 243, 255, .35);
    background: rgba(0, 243, 255, .05);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4), 0 0 20px rgba(0, 243, 255, .08);
}

.agent-grid-card:hover::before {
    opacity: 1;
}

.agent-grid-card.selected {
    border-color: var(--p);
    background: rgba(0, 243, 255, .08);
    box-shadow: 0 0 0 1px rgba(0, 243, 255, .2), 0 12px 32px rgba(0, 243, 255, .08);
}

.agent-grid-card.selected::before {
    opacity: 1;
}

.agc-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(0, 243, 255, .15), rgba(112, 0, 255, .15));
    border: 1px solid rgba(0, 243, 255, .2);
    color: var(--p);
    letter-spacing: 0;
    flex-shrink: 0;
}

.agc-avatar.male {
    background: linear-gradient(135deg, rgba(112, 0, 255, .15), rgba(0, 243, 255, .08));
    border-color: rgba(112, 0, 255, .3);
    color: var(--s);
}

.agc-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--t);
    line-height: 1.2;
}

.agc-title {
    font-size: .65rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.agc-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.agc-pill {
    font-size: .52rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    background: rgba(112, 0, 255, .1);
    border: 1px solid rgba(112, 0, 255, .25);
    color: var(--s);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.agc-pill.female {
    background: rgba(0, 243, 255, .08);
    border-color: rgba(0, 243, 255, .25);
    color: var(--p);
}

.agc-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agc-company {
    font-size: .6rem;
    color: var(--p);
    font-weight: 600;
}

.agc-del {
    background: transparent;
    border: none;
    color: rgba(255, 0, 85, .3);
    padding: 4px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .2s;
}

.agc-del:hover {
    color: var(--g);
    background: rgba(255, 0, 85, .1);
}

/* Agent detail panel (right side) */
.agent-detail-panel {
    width: 420px;
    flex-shrink: 0;
    border-left: 1px solid var(--bdr);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(10, 10, 25, .4);
    transition: width 0.3s ease;
}

/* ══ CAMPAIGN CREATE BAR ══ */
.camp-create-bar {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--bdr);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 243, 255, .02);
    flex-shrink: 0;
}

.camp-create-label {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--d);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.camp-create-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.camp-name-input {
    flex: 1;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(0, 243, 255, .2);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--t);
    font-family: var(--f);
    font-size: .82rem;
    outline: none;
    transition: all 0.25s;
}

.camp-name-input:focus {
    border-color: var(--p);
    background: rgba(0, 243, 255, .05);
    box-shadow: 0 0 16px rgba(0, 243, 255, .1);
}

.camp-name-input::placeholder {
    color: rgba(136, 146, 176, .4);
}

.camp-create-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: .65rem;
    border-radius: 8px;
}

/* ══ DEL BTN ALT ══ */
.del-btn-alt {
    background: rgba(255, 0, 85, .1);
    border: 1px solid rgba(255, 0, 85, .2);
    color: rgba(255, 0, 85, .7);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.del-btn-alt:hover {
    background: var(--g);
    color: #fff;
    border-color: var(--g);
    transform: scale(1.1);
}

/* ══ AGENT CARD STYLES (kept for backward compat) ══ */
.agent-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.agent-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.agent-card:hover {
    transform: translateY(-5px);
    border-color: var(--p);
    background: rgba(0, 243, 255, .05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 243, 255, .1);
}

.agent-card.selected {
    border-color: var(--p);
    background: rgba(0, 243, 255, .08);
}

.ac-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ac-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

.ac-title {
    font-size: 0.65rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ac-voice-pill {
    background: rgba(112, 0, 255, .1);
    border: 1px solid rgba(112, 0, 255, .3);
    color: var(--s);
    font-size: .55rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.ac-company {
    font-size: 0.8rem;
    color: var(--p);
    font-weight: 600;
}

.ac-pitch {
    font-size: 0.65rem;
    color: rgba(136, 146, 176, .7);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.ac-del {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 0, 85, .05);
    border: 1px solid rgba(255, 0, 85, .1);
    color: rgba(255, 0, 85, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.ac-del:hover {
    background: var(--g);
    color: #fff;

    border-color: var(--g);
}

/* Select Option Dark Styling Override */
.fi-new option {
    background-color: #0d1b2a !important;
    color: #e2e8f0 !important;
}

#hsdFilterInterest option,
#hsdFilterStatus option,
#hsdFilterRec option {
    background-color: #10101e !important;
    color: #ffffff !important;
}

/* ==========================================
   DEMO MODE & PASSWORD LOCK OVERLAYS
   ========================================== */

.blur-locked {
    filter: blur(12px) grayscale(40%);
    pointer-events: none !important;
    user-select: none !important;
    transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.25 !important;
}

/* Full Screen Lock Overlay */
#lockOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: rgba(5, 5, 16, 0.72);
    backdrop-filter: blur(25px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
    padding: 20px;
}

#lockOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lock-card {
    width: 650px;
    max-width: 100%;
    background: rgba(16, 16, 30, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lockCardIntro 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lockCardIntro {
    from {
        transform: translateY(30px) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.lock-card-header {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

.lock-card-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 4px;
    background: linear-gradient(to right, #ffffff, var(--p));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
}

.lock-card-tagline {
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: var(--d);
    text-transform: uppercase;
}

/* Switchable Tabs in Lock Overlay */
.lock-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.lock-tab-btn {
    flex: 1;
    padding: 16px;
    background: transparent;
    border: none;
    color: var(--d);
    font-family: var(--f);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 2px solid transparent;
}

.lock-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.02);
}

.lock-tab-btn.active {
    color: var(--p);
    border-bottom-color: var(--p);
    background: rgba(0, 243, 255, 0.03);
}

.lock-content {
    padding: 28px;
    max-height: 70vh;
    overflow-y: auto;
}

.lock-pane {
    display: none;
}

.lock-pane.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Glassmorphic Cards for Agent Selection */
.agent-select-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.agent-select-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-select-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 243, 255, 0.25);
    transform: translateY(-2px);
}

.agent-select-card.selected {
    background: rgba(0, 243, 255, 0.07);
    border-color: var(--p);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

.agent-select-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--p);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.agent-select-avatar.male {
    background: var(--s);
    color: #fff;
}

.agent-select-info {
    min-width: 0;
    flex: 1;
}

.agent-select-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-select-role {
    font-size: 0.65rem;
    color: var(--d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Form elements for Lock overlays */
.lock-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lock-form-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--d);
}

.lock-input {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: var(--f);
    font-size: 0.9rem;
    transition: all 0.3s;
    width: 100%;
    outline: none;
}

.lock-input:focus {
    border-color: var(--p);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

.lock-textarea {
    min-height: 80px;
    resize: vertical;
}

.lock-btn {
    background: linear-gradient(135deg, var(--p), #00d2ff);
    border: none;
    color: #000;
    font-family: var(--f);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0, 243, 255, 0.25);
}

.lock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 243, 255, 0.4);
    filter: brightness(1.1);
}

.lock-btn:active {
    transform: translateY(0);
}

.lock-btn.secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: none;
}

.lock-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Password shake animation */
@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.shake-error {
    animation: shakeError 0.4s ease-in-out;
    border-color: var(--g) !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.3) !important;
}

/* Demo Call active floating bar / status */
.demo-indicator-bar {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.35);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--au);
    backdrop-filter: blur(10px);
    z-index: 10005;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.demo-indicator-bar.visible {
    opacity: 1;
}

.demo-indicator-pulse {
    width: 8px;
    height: 8px;
    background: var(--au);
    border-radius: 50%;
    animation: demoPillPulse 1.5s infinite;
}

@keyframes demoPillPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(255, 215, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* Demo Call Completed Overlay style */
#demoCompletedOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10002;
    background: rgba(5, 5, 16, 0.8);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
    padding: 20px;
}

#demoCompletedOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.demo-complete-card {
    width: 580px;
    max-width: 100%;
    background: rgba(16, 16, 30, 0.75);
    border: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 
                0 0 30px rgba(255, 215, 0, 0.08);
    border-radius: 18px;
    padding: 34px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: lockCardIntro 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-complete-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.3);
    color: var(--ok);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.15);
}

.demo-complete-title {
    font-family: var(--f);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to right, #ffffff, var(--ok));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.demo-complete-slogan {
    font-family: var(--f);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--au);
    letter-spacing: 0.5px;
    line-height: 1.4;
    background: rgba(255, 215, 0, 0.04);
    border: 1px dashed rgba(255, 215, 0, 0.25);
    padding: 12px 20px;
    border-radius: 8px;
    width: 100%;
}

.demo-complete-msg {
    font-size: 0.88rem;
    color: var(--d);
    line-height: 1.6;
    margin-bottom: 5px;
}

.contact-highlight {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}

.unlock-gate-section {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 20px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unlock-gate-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--d);
}

.password-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.password-row input {
    flex: 1;
}

.password-row button {
    margin-top: 0;
    padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PROFESSIONAL DASHBOARD REVAMP
   A non-destructive design layer: keeps existing IDs/JS intact while
   improving information hierarchy, spacing, and action placement.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --surface-1: rgba(10, 12, 24, .92);
    --surface-2: rgba(17, 21, 39, .78);
    --surface-3: rgba(255, 255, 255, .045);
    --line-soft: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .14);
    --shadow-panel: 0 18px 55px rgba(0, 0, 0, .34);
    --shadow-glow: 0 0 28px rgba(0, 243, 255, .08);
}

body {
    background:
        radial-gradient(circle at 8% 12%, rgba(0, 243, 255, .11), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(112, 0, 255, .12), transparent 30%),
        linear-gradient(135deg, #050713 0%, #080a18 42%, #050510 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 75%);
}

.app-grid {
    grid-template-columns: minmax(320px, 22vw) minmax(420px, 1fr) minmax(360px, 25vw);
    grid-template-rows: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.header,
.panel,
.live-card,
.reports-overlay .overlay-header,
.overlay-list-side,
.overlay-detail-side,
.lock-card,
.demo-complete-card {
    background: linear-gradient(180deg, rgba(18, 22, 41, .88), rgba(9, 11, 24, .88));
    border-color: var(--line-soft);
    box-shadow: var(--shadow-panel);
}

.header {
    min-height: 76px;
    padding: 12px 16px;
    gap: 18px;
    border-radius: 18px;
    overflow: visible;
}

.logo {
    min-width: 210px;
}

.logo-main {
    font-size: 1rem;
    letter-spacing: 3px;
}

.logo-sub {
    margin-top: 4px;
    color: rgba(0, 243, 255, .62);
    letter-spacing: 2.1px;
}

.header-metrics {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px;
}

.hm {
    min-width: 86px;
    align-items: flex-start;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 12px;
    background: rgba(255, 255, 255, .028);
}

.hm-l {
    font-size: .5rem;
    letter-spacing: .9px;
}

.hm-v {
    margin-top: 3px;
    font-size: .72rem;
    max-width: 150px;
}

.hm-sep {
    display: none;
}

.header-actions {
    margin-left: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-action-group {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
}

.hbadge.nav-action,
.crm-sync-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 243, 255, .16);
    background: rgba(0, 243, 255, .045) !important;
    color: rgba(225, 249, 255, .92) !important;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hbadge.nav-action:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(0, 243, 255, .45);
    background: rgba(0, 243, 255, .1) !important;
    box-shadow: 0 10px 24px rgba(0, 243, 255, .1);
}

.hbadge.nav-action:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.nav-kicker {
    color: var(--d);
    font-weight: 700;
}

.campaign-action {
    color: var(--au) !important;
    border-color: rgba(255, 215, 0, .22) !important;
    background: rgba(255, 215, 0, .055) !important;
}

.hubspot-action {
    color: #ff8f4d !important;
    border-color: rgba(255, 102, 0, .24) !important;
    background: rgba(255, 102, 0, .055) !important;
}

.listen-action {
    color: var(--ok) !important;
    border-color: rgba(0, 255, 157, .22) !important;
}

.danger-action {
    color: #ff7a9e !important;
    border-color: rgba(255, 0, 85, .26) !important;
    background: rgba(255, 0, 85, .06) !important;
}

.pause-campaign-btn {
    color: #55d7e8 !important;
    border-color: rgba(23, 162, 184, .26) !important;
}

.skip-call-btn {
    color: #ffd96b !important;
    border-color: rgba(255, 193, 7, .28) !important;
}

.emergency-stop-btn.active {
    opacity: 1;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255, 0, 85, .9), rgba(160, 20, 70, .65)) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow: 0 0 24px rgba(255, 0, 85, .26);
}

.pause-campaign-btn.active,
.skip-call-btn.active {
    opacity: 1;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .22) !important;
}

.crm-sync-pill {
    cursor: default;
    color: var(--d) !important;
    background: rgba(255, 255, 255, .025) !important;
    border-color: rgba(255, 255, 255, .08);
}

.nav-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    margin: 0;
}

.toggle-switch-input-nav {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round-nav {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: .25s;
    border-radius: 999px;
}

.slider-round-nav::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #6b7280;
    transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

.toggle-switch-input-nav:checked + .slider-round-nav {
    background-color: rgba(0, 255, 157, .14);
    border-color: rgba(0, 255, 157, .36);
}

.toggle-switch-input-nav:checked + .slider-round-nav::before {
    transform: translateX(16px);
    background-color: var(--ok);
    box-shadow: 0 0 8px rgba(0, 255, 157, .55);
}

.panel {
    border-radius: 18px;
}

.panel-heading,
.sec-head,
.live-card-hdr {
    min-height: 34px;
}

.panel-heading {
    padding: 12px 16px 10px;
    font-size: .68rem;
    border-bottom-color: rgba(255, 255, 255, .075);
}

.left-panel,
.right-panel {
    min-width: 0;
}

.left-scroll,
.dialogue-container,
.queue-list,
#hsContactListContainer,
#hsdGridContainer,
.big-card-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 243, 255, .35) transparent;
}

.left-scroll::-webkit-scrollbar,
.dialogue-container::-webkit-scrollbar,
.queue-list::-webkit-scrollbar,
#hsContactListContainer::-webkit-scrollbar,
#hsdGridContainer::-webkit-scrollbar,
.big-card-list::-webkit-scrollbar {
    width: 6px;
}

.left-scroll::-webkit-scrollbar-thumb,
.dialogue-container::-webkit-scrollbar-thumb,
.queue-list::-webkit-scrollbar-thumb,
#hsContactListContainer::-webkit-scrollbar-thumb,
#hsdGridContainer::-webkit-scrollbar-thumb,
.big-card-list::-webkit-scrollbar-thumb {
    background: rgba(0, 243, 255, .28);
    border-radius: 999px;
}

.tab-bar,
.rp-tabs {
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: rgba(0, 0, 0, .22);
}

.tab-btn,
.rp-tab {
    min-height: 30px;
    border-radius: 9px;
    font-size: .66rem;
}

.tab-btn.active,
.rp-tab.active {
    background: linear-gradient(135deg, rgba(0, 243, 255, .16), rgba(112, 0, 255, .12));
    box-shadow: inset 0 0 0 1px rgba(0, 243, 255, .12);
}

.section-block,
.agent-config-block {
    border-bottom-color: rgba(255, 255, 255, .065);
}

.form-grid-new {
    gap: 10px;
}

.fi-new,
.fi,
.lock-input,
.camp-name-input,
#reportSearch,
#hsdSearch {
    min-height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
}

.fi-new-ta,
.fi-ta,
.lock-textarea {
    min-height: 72px;
}

.btn,
.btn-apply-config,
.btn-save-profile,
.pac-edit-btn,
.pac-clear-btn,
.lock-btn {
    min-height: 38px;
    border-radius: 11px;
}

.campaign-bar {
    padding: 12px;
    background: rgba(0, 0, 0, .16);
}

#btnEngageAutoCaller {
    width: 100%;
    min-height: 44px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.core-panel {
    position: relative;
    border-radius: 24px;
    background:
        radial-gradient(circle at center, rgba(0, 243, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01));
    border: 1px solid rgba(255, 255, 255, .055);
    overflow: hidden;
}

.core-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(0, 243, 255, .07);
    border-radius: 22px;
    pointer-events: none;
}

.orb-wrapper {
    position: relative;
    z-index: 1;
}

.orb-container {
    max-width: clamp(240px, 42vh, 520px);
    max-height: clamp(240px, 42vh, 520px);
}

.status-text {
    font-size: .7rem;
    letter-spacing: 2.8px;
}

.cycling-text {
    margin-top: 4px;
    font-size: .62rem;
}

.core-panel.call-active .live-card {
    width: min(340px, 34vw);
    max-width: 340px;
    border-radius: 18px;
    padding: 16px;
}

.live-card-body {
    gap: 8px;
}

.lf {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.lf:last-child {
    border-bottom: 0;
}

.dialogue-container,
.queue-list {
    padding: 12px;
}

.dialogue-bubble {
    border-radius: 18px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.bubble-agent {
    background: linear-gradient(180deg, rgba(0, 243, 255, .12), rgba(0, 243, 255, .06)) !important;
    border-color: rgba(0, 243, 255, .24) !important;
}

.bubble-client {
    background: linear-gradient(180deg, rgba(112, 0, 255, .14), rgba(112, 0, 255, .07)) !important;
    border-color: rgba(112, 0, 255, .3) !important;
}

.bubble-text {
    font-size: .86rem;
    line-height: 1.58;
}

.queue-item {
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
}

.queue-active {
    background: rgba(0, 255, 157, .06);
    border-color: rgba(0, 255, 157, .22);
}

.floating-reports-btn {
    right: 24px;
    bottom: 24px;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 28px rgba(0, 243, 255, .12);
}

.reports-overlay {
    backdrop-filter: blur(18px);
    background: rgba(3, 5, 13, .9);
}

.overlay-header {
    min-height: 76px;
    padding: 14px 22px;
}

.overlay-content,
.agents-overlay-content {
    gap: 18px;
    padding: 18px;
}

.report-big-card,
.agent-card,
.hs-contact-card {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .035) !important;
    border-color: rgba(255, 255, 255, .085) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.report-big-card:hover,
.agent-card:hover,
.hs-contact-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 243, 255, .25) !important;
    background: rgba(0, 243, 255, .045) !important;
}

@media (max-width: 1380px) {
    .app-grid {
        grid-template-columns: 300px 1fr 330px;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .header {
        flex-wrap: wrap;
        min-height: 118px;
    }

    .header-metrics {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .header-actions {
        grid-template-columns: 1fr;
        margin-left: auto;
    }

    .header-action-group {
        justify-content: flex-end;
    }
}

@media (max-width: 1100px) {
    html,
    body {
        overflow: auto;
        min-height: 100%;
    }

    .app-grid {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(520px, auto) auto;
    }

    .header,
    .left-panel,
    .core-panel,
    .right-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .header-actions,
    .header-action-group,
    .header-metrics {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .core-panel {
        min-height: 520px;
    }

    .left-panel,
    .right-panel {
        min-height: 520px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   UX REFINEMENT V2 — compact, professional, no navbar scrollbar
   ═══════════════════════════════════════════════════════════════════════ */

.app-grid {
    grid-template-rows: 64px 1fr;
}

.header {
    height: 64px;
    padding: 8px 14px;
    align-items: center;
    overflow: visible;
    background: linear-gradient(180deg, rgba(16, 16, 30, .86), rgba(9, 10, 22, .86));
    border-color: rgba(255, 255, 255, .075);
}

.header .logo {
    min-width: 190px;
}

.header-metrics {
    flex: 1 1 auto;
    min-width: 330px;
    justify-content: center;
}

.header-badges {
    flex: 0 1 620px;
    max-width: none;
    overflow: visible;
    scrollbar-width: none;
    display: grid !important;
    grid-template-columns: repeat(3, max-content);
    grid-auto-rows: 24px;
    justify-content: end;
    align-content: center;
    gap: 5px 6px !important;
    padding: 0;
}

.header-badges::-webkit-scrollbar {
    display: none;
}

.header-badges > style {
    display: none;
}

.header-badges > .hbadge:first-child {
    grid-row: 1;
    grid-column: 1;
}

.header-badges .workspace-btn {
    grid-row: 1;
}

.header-badges .campaign-header-btn {
    grid-column: 2;
}

.header-badges .agent-profile-header-btn {
    grid-column: 3;
}

.header-badges .hubspot-header-btn {
    grid-row: 2;
    grid-column: 1;
}

.header-badges .hear-live-btn {
    grid-row: 2;
    grid-column: 2;
}

.header-badges .emergency-stop-btn,
.header-badges .pause-campaign-btn,
.header-badges .skip-call-btn {
    grid-row: 2;
}

.header-badges .emergency-stop-btn {
    grid-column: 3;
}

.header-badges .pause-campaign-btn {
    grid-column: 4;
}

.header-badges .skip-call-btn {
    grid-column: 5;
}

.header-badges .hbadge {
    height: 24px;
    padding: 3px 8px;
    font-size: .5rem;
    letter-spacing: .45px;
    border-radius: 999px;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.header-badges .workspace-btn {
    background: rgba(255, 255, 255, .025) !important;
    border-color: rgba(0, 243, 255, .18) !important;
    color: rgba(225, 249, 255, .86) !important;
}

.header-badges .campaign-header-btn {
    color: var(--au) !important;
    border-color: rgba(255, 215, 0, .24) !important;
}

.header-badges .hubspot-header-btn {
    color: #ff9f66 !important;
    border-color: rgba(255, 102, 0, .25) !important;
}

.header-badges .emergency-stop-btn {
    color: #ff7b9e !important;
    border-color: rgba(255, 0, 85, .26) !important;
    background: rgba(255, 0, 85, .06) !important;
}

.header-badges .pause-campaign-btn {
    color: #42bfd1 !important;
}

.header-badges .skip-call-btn {
    color: #ffd166 !important;
}

.header-badges .hbadge:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .055) !important;
}

.header-badges .hbadge:disabled {
    opacity: .38;
}

.panel,
.header {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

/* Professional HubSpot CRM workspace */
#hubspotDashboardOverlay {
    background: rgba(4, 6, 15, .94);
}

#hubspotDashboardOverlay .overlay-header {
    background: linear-gradient(180deg, rgba(16, 16, 30, .96), rgba(11, 12, 24, .96));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#hubspotDashboardOverlay .logo-main {
    background: linear-gradient(to right, #fff 62%, #ff8a3d) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#hubspotDashboardOverlay .logo-sub {
    color: rgba(255, 138, 61, .55) !important;
}

#hubspotDashboardOverlay .header-metrics {
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 12px;
}

#hubspotDashboardOverlay .header-metrics .hm-v {
    color: #f5f7fb !important;
}

#hubspotDashboardOverlay .overlay-list-side {
    background: rgba(8, 10, 22, .78) !important;
    border-right: 1px solid rgba(255, 255, 255, .07) !important;
}

#hubspotDashboardOverlay .overlay-detail-side {
    background: rgba(8, 10, 22, .54) !important;
}

#hubspotDashboardOverlay .section-block {
    background: rgba(255, 255, 255, .018) !important;
    border-color: rgba(255, 255, 255, .075) !important;
}

#hubspotDashboardOverlay .sec-label {
    color: rgba(245, 247, 251, .78) !important;
}

#hubspotDashboardOverlay .dot-gold {
    background: #ff8a3d;
    box-shadow: 0 0 8px rgba(255, 138, 61, .35);
}

#hubspotDashboardOverlay .hsd-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap: 12px !important;
    padding: 4px 2px 10px !important;
}

#hubspotDashboardOverlay .hsd-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022)) !important;
    border-color: rgba(255, 255, 255, .085) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#hubspotDashboardOverlay .hsd-card:hover {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    transform: translateY(-1px);
}

#hubspotDashboardOverlay .hsd-card-meta {
    background: rgba(0, 0, 0, .18) !important;
    border-color: rgba(255, 255, 255, .055) !important;
    border-radius: 9px !important;
    gap: 6px 12px !important;
}

#hubspotDashboardOverlay .hsd-card-badges span {
    border-color: rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .035) !important;
}

#hubspotDashboardOverlay .hsd-status-row {
    background: rgba(255, 255, 255, .025) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    gap: 10px;
}

#hubspotDashboardOverlay .hsd-status-row select {
    max-width: 210px;
}

#hubspotDashboardOverlay .hsd-summary-block > div:last-child {
    background: rgba(0, 0, 0, .2) !important;
    border-left-color: rgba(255, 255, 255, .18) !important;
    color: rgba(245, 247, 251, .84) !important;
}

#hubspotDashboardOverlay input,
#hubspotDashboardOverlay select {
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 8px !important;
}

#hubspotDashboardOverlay input:focus,
#hubspotDashboardOverlay select:focus {
    border-color: rgba(255, 138, 61, .35) !important;
    box-shadow: 0 0 0 2px rgba(255, 138, 61, .055) !important;
}

#hubspotDashboardOverlay .btn-apply-config {
    border-radius: 8px;
}

@media (max-width: 1500px) {
    .header {
        height: 76px;
    }

    .app-grid {
        grid-template-rows: 76px 1fr;
    }

    .header-badges {
        flex-basis: 520px;
        grid-template-columns: repeat(3, max-content);
    }

    .header-badges .hbadge {
        font-size: .48rem;
        padding-inline: 7px;
    }
}

@media (max-width: 1180px) {
    .header {
        height: auto;
        min-height: 88px;
        flex-wrap: wrap;
    }

    .app-grid {
        grid-template-rows: auto 1fr;
    }

    .header-metrics,
    .header-badges {
        width: 100%;
        flex-basis: 100%;
        justify-content: center;
    }
}

/* Final navbar guarantee: no scrollbar, ever. */
.header-badges {
    overflow: visible !important;
    scrollbar-width: none !important;
}

.header-badges::-webkit-scrollbar {
    display: none !important;
}

/* Final layout authority: header stays clean; controls are scoped to panels. */
.header {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
}

.header-badges.nav-status-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}

.header-badges.nav-status-actions > .hbadge {
    grid-column: auto !important;
    grid-row: auto !important;
}

.workspace-quick-actions .hbadge,
.live-control-strip .hbadge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
    white-space: nowrap;
}

.workspace-quick-actions .campaign-header-btn,
.workspace-quick-actions .hubspot-header-btn,
.workspace-quick-actions .agent-profile-header-btn {
    justify-content: space-between !important;
}

.live-control-strip .pause-campaign-btn,
.live-control-strip .skip-call-btn,
.live-control-strip .emergency-stop-btn,
.live-control-strip .hear-live-btn {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (max-width: 1180px) {
    .header {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Final layout authority: header stays clean; controls are scoped to panels. */
.header {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
}

.header-badges.nav-status-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}

.header-badges.nav-status-actions > .hbadge {
    grid-column: auto !important;
    grid-row: auto !important;
}

.workspace-quick-actions .hbadge,
.live-control-strip .hbadge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
    white-space: nowrap;
}

.workspace-quick-actions .campaign-header-btn,
.workspace-quick-actions .hubspot-header-btn,
.workspace-quick-actions .agent-profile-header-btn {
    justify-content: space-between !important;
}

.live-control-strip .pause-campaign-btn,
.live-control-strip .skip-call-btn,
.live-control-strip .emergency-stop-btn,
.live-control-strip .hear-live-btn {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (max-width: 1180px) {
    .header {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Final layout authority: the navbar is status-only, controls live in panels. */
.header {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
}

.header-badges.nav-status-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}

.header-badges.nav-status-actions > .hbadge {
    grid-column: auto !important;
    grid-row: auto !important;
}

.workspace-quick-actions .hbadge,
.live-control-strip .hbadge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
    white-space: nowrap;
}

.workspace-quick-actions .campaign-header-btn,
.workspace-quick-actions .hubspot-header-btn,
.workspace-quick-actions .agent-profile-header-btn {
    justify-content: space-between !important;
}

.live-control-strip .pause-campaign-btn,
.live-control-strip .skip-call-btn,
.live-control-strip .emergency-stop-btn,
.live-control-strip .hear-live-btn {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (max-width: 1180px) {
    .header {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Designer pass: put controls where users expect them. */
.app-grid {
    grid-template-rows: 48px 1fr !important;
}

.header {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
}

.header .logo {
    min-width: 230px;
}

.header-metrics {
    justify-content: flex-start !important;
    gap: 0;
    min-width: 0;
}

.nav-status-actions {
    margin-left: auto;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    grid-template-columns: none !important;
}

.nav-status-actions .hbadge {
    height: 26px;
    color: var(--d) !important;
}

.workspace-quick-actions {
    margin: 9px 10px 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.workspace-action-title {
    font-size: .52rem;
    color: var(--d);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-weight: 800;
}

.workspace-quick-actions .hbadge {
    width: 100%;
    min-height: 32px;
    border-radius: 8px;
    padding: 7px 9px;
    justify-content: space-between;
    font-size: .58rem;
    cursor: pointer;
    background: rgba(0, 243, 255, .045) !important;
    border: 1px solid rgba(0, 243, 255, .16) !important;
    color: rgba(239, 250, 255, .9) !important;
}

.workspace-quick-actions .campaign-header-btn {
    color: var(--au) !important;
    background: rgba(255, 215, 0, .055) !important;
    border-color: rgba(255, 215, 0, .2) !important;
}

.workspace-quick-actions .hubspot-header-btn {
    color: #ffb088 !important;
    background: rgba(255, 102, 0, .045) !important;
    border-color: rgba(255, 102, 0, .18) !important;
}

.workspace-quick-actions .hbadge:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(255, 255, 255, .055) !important;
}

.live-control-strip {
    margin: 8px 10px 0;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background: rgba(0, 0, 0, .14);
}

.live-control-strip .hbadge {
    width: 100%;
    min-height: 30px;
    border-radius: 8px;
    padding: 7px 8px;
    font-size: .54rem;
    cursor: pointer;
}

.live-control-strip .hear-live-btn {
    color: var(--p) !important;
    background: rgba(0, 243, 255, .055) !important;
    border-color: rgba(0, 243, 255, .2) !important;
}

.live-control-strip .skip-call-btn {
    color: #ffd166 !important;
    background: rgba(255, 193, 7, .055) !important;
    border-color: rgba(255, 193, 7, .18) !important;
}

.live-control-strip .pause-campaign-btn {
    color: #53d5e7 !important;
    background: rgba(23, 162, 184, .055) !important;
    border-color: rgba(23, 162, 184, .18) !important;
}

.live-control-strip .emergency-stop-btn {
    color: #ff7b9e !important;
    background: rgba(255, 0, 85, .055) !important;
    border-color: rgba(255, 0, 85, .2) !important;
}

.live-control-strip .hbadge:disabled {
    opacity: .42;
}

.rp-view {
    min-height: 0;
}

@media (max-width: 1180px) {
    .header {
        height: auto !important;
        min-height: 64px !important;
    }

    .nav-status-actions {
        margin-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PREVIOUS STYLE RESTORATION + LIGHT POLISH
   Keeps the original compact cyber-console feel, while gently improving
   spacing, hierarchy, and HubSpot dashboard usability.
   ═══════════════════════════════════════════════════════════════════════ */

.app-grid {
    grid-template-columns: 265px 1fr 310px;
    grid-template-rows: 44px 1fr;
    gap: 8px;
    padding: 8px;
    height: 100%;
}

.header {
    min-height: 0;
    height: auto;
    flex-wrap: nowrap;
    padding: 0 14px;
    gap: 10px;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
    box-shadow: none;
}

.logo {
    min-width: 0;
}

.logo-main {
    font-size: .88rem;
    letter-spacing: 2.5px;
}

.logo-sub {
    margin-top: 0;
    letter-spacing: 1.8px;
    color: rgba(0, 243, 255, .5);
}

.header-metrics {
    order: initial;
    width: auto;
    justify-content: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.hm {
    min-width: 0;
    align-items: center;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hm-l {
    font-size: .48rem;
    letter-spacing: .6px;
}

.hm-v {
    margin-top: 0;
    font-size: .6rem;
    max-width: 110px;
}

.hm-sep {
    display: block;
}

.header-badges {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    flex-shrink: 0;
    max-width: 58vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 243, 255, .25) transparent;
}

.header-badges::-webkit-scrollbar {
    height: 3px;
}

.header-badges::-webkit-scrollbar-thumb {
    background: rgba(0, 243, 255, .28);
    border-radius: 999px;
}

.hbadge {
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: .54rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

.hbadge:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(0, 243, 255, .12);
}

.hbadge:disabled {
    opacity: .45;
    cursor: not-allowed !important;
}

.panel,
.live-card,
.reports-overlay .overlay-header,
.overlay-list-side,
.overlay-detail-side,
.lock-card,
.demo-complete-card {
    background: var(--card);
    border-color: var(--bdr);
    box-shadow: none;
}

.panel {
    border-radius: var(--r);
}

.panel-heading {
    min-height: 0;
    padding: 7px 12px 5px;
    font-size: .6rem;
}

.sec-head,
.live-card-hdr {
    min-height: 0;
}

.tab-bar,
.rp-tabs {
    padding: 2px;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, .25);
}

.tab-btn,
.rp-tab {
    min-height: 0;
    border-radius: 4px;
    font-size: .6rem;
}

.tab-btn.active,
.rp-tab.active {
    background: rgba(0, 243, 255, .1);
    box-shadow: none;
}

.form-grid-new {
    gap: 6px;
}

.fi-new,
.fi,
.lock-input,
.camp-name-input,
#reportSearch,
#hsdSearch {
    min-height: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .07);
}

.fi-new-ta,
.fi-ta,
.lock-textarea {
    min-height: 46px;
}

.btn,
.btn-apply-config,
.btn-save-profile,
.pac-edit-btn,
.pac-clear-btn,
.lock-btn {
    min-height: 0;
    border-radius: var(--rs);
}

.campaign-bar {
    padding: 7px 10px;
    background: transparent;
}

#btnEngageAutoCaller {
    min-height: 0;
    font-size: .62rem;
    font-weight: 600;
}

.core-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.core-panel::before {
    content: none;
}

.orb-container {
    max-width: clamp(180px, 38vh, 460px);
    max-height: clamp(180px, 38vh, 460px);
}

.status-text {
    font-size: .6rem;
    letter-spacing: 2px;
}

.cycling-text {
    margin-top: 0;
    font-size: .54rem;
}

.core-panel.call-active .live-card {
    width: 300px;
    max-width: 300px;
    border-radius: 12px;
    padding: 10px 12px;
}

.dialogue-container,
.queue-list {
    padding: initial;
}

.dialogue-bubble {
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 10px;
    box-shadow: none;
}

.bubble-text {
    font-size: inherit;
    line-height: 1.5;
}

.queue-item {
    border-radius: 8px;
    padding: 8px 9px;
}

.floating-reports-btn {
    right: 18px;
    bottom: 18px;
    border-radius: 999px;
}

.overlay-header {
    min-height: 0;
    padding: 12px 18px;
}

.overlay-content,
.agents-overlay-content {
    gap: 12px;
    padding: 12px;
}

/* Light polish that keeps the previous style */
.header,
.panel {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.left-scroll::-webkit-scrollbar,
.dialogue-container::-webkit-scrollbar,
.queue-list::-webkit-scrollbar,
#hsContactListContainer::-webkit-scrollbar,
#hsdGridContainer::-webkit-scrollbar,
.big-card-list::-webkit-scrollbar {
    width: 4px;
}

.left-scroll::-webkit-scrollbar-thumb,
.dialogue-container::-webkit-scrollbar-thumb,
.queue-list::-webkit-scrollbar-thumb,
#hsContactListContainer::-webkit-scrollbar-thumb,
#hsdGridContainer::-webkit-scrollbar-thumb,
.big-card-list::-webkit-scrollbar-thumb {
    background: rgba(0, 243, 255, .18);
    border-radius: 999px;
}

.sec-label,
.hm-l,
.fl-new,
.form-group-label {
    letter-spacing: .9px;
}

.fi-new:focus,
.fi:focus,
.lock-input:focus,
.camp-name-input:focus,
#reportSearch:focus,
#hsdSearch:focus {
    border-color: rgba(0, 243, 255, .38);
    box-shadow: 0 0 0 2px rgba(0, 243, 255, .04);
}

.bubble-agent {
    background: rgba(0, 243, 255, .055) !important;
    border-color: rgba(0, 243, 255, .22) !important;
}

.bubble-client {
    background: rgba(112, 0, 255, .075) !important;
    border-color: rgba(112, 0, 255, .24) !important;
}

/* HubSpot dashboard polish */
#hubspotDashboardOverlay .overlay-header {
    border-bottom: 1px solid rgba(255, 102, 0, .16);
}

#hubspotDashboardOverlay .header-metrics {
    background: rgba(255, 102, 0, .025);
    border: 1px solid rgba(255, 102, 0, .1);
    border-radius: 10px;
    padding: 6px 10px;
}

#hubspotDashboardOverlay .overlay-list-side {
    border-right: 1px solid rgba(255, 102, 0, .09);
}

#hubspotDashboardOverlay .section-block {
    background: rgba(255, 255, 255, .012) !important;
}

#hubspotDashboardOverlay #hsdGridContainer {
    padding-right: 4px;
}

#hubspotDashboardOverlay #hsdGridContainer > div {
    transition: border-color .2s, background .2s, transform .2s;
}

#hubspotDashboardOverlay #hsdGridContainer > div:hover {
    border-color: rgba(255, 102, 0, .24) !important;
    background: rgba(255, 102, 0, .035) !important;
    transform: translateY(-1px);
}

#hubspotDashboardOverlay input[type="text"],
#hubspotDashboardOverlay input[type="time"],
#hubspotDashboardOverlay select {
    min-height: 30px;
}

#hubspotDashboardOverlay .btn-apply-config {
    letter-spacing: .7px;
}

#hubspotDashboardOverlay .overlay-detail-side > div:first-child {
    border-color: rgba(255, 102, 0, .14) !important;
}

@media (max-width: 1380px) {
    .app-grid {
        grid-template-columns: 250px 1fr 300px;
        grid-template-rows: 50px 1fr;
    }

    .header {
        flex-wrap: nowrap;
        min-height: 0;
    }

    .header-metrics {
        order: initial;
        width: auto;
    }

    .header-badges {
        max-width: 54vw;
    }
}

@media (max-width: 1100px) {
    html,
    body {
        overflow: auto;
    }

    .app-grid {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(480px, auto) auto;
    }

    .header {
        flex-wrap: wrap;
        min-height: 0;
    }

    .header-metrics,
    .header-badges {
        width: 100%;
        justify-content: flex-start;
        max-width: 100%;
    }

    .header,
    .left-panel,
    .core-panel,
    .right-panel {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Final navbar guarantee: no scrollbar, ever. */
.header-badges {
    overflow: visible !important;
    scrollbar-width: none !important;
}

.header-badges::-webkit-scrollbar {
    display: none !important;
}

/* Final layout authority: header stays clean; controls are scoped to panels. */
.header {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
}

.header-badges.nav-status-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}

.header-badges.nav-status-actions > .hbadge {
    grid-column: auto !important;
    grid-row: auto !important;
}

.workspace-quick-actions .hbadge,
.live-control-strip .hbadge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
    white-space: nowrap;
}

.workspace-quick-actions .campaign-header-btn,
.workspace-quick-actions .hubspot-header-btn,
.workspace-quick-actions .agent-profile-header-btn {
    justify-content: space-between !important;
}

.live-control-strip .pause-campaign-btn,
.live-control-strip .skip-call-btn,
.live-control-strip .emergency-stop-btn,
.live-control-strip .hear-live-btn {
    grid-column: auto !important;
    grid-row: auto !important;
}

@media (max-width: 1180px) {
    .header {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}