:root {
    --bg-base: #212121;
    --bg-panel: #171717;
    --bg-modal: #202020;
    --bg-surface: #2f2f2f;
    --bg-surface-hover: #3a3a3a;
    --text-primary: #ececec;
    --text-secondary: #b4b4b4;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --danger-soft: #ff8a80;
    --success-soft: #8fd694;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Совместимость со старым фронтендом ОКК */
    --bg-color: var(--bg-base);
    --card-bg: var(--bg-panel);
    --panel-bg: var(--bg-surface);
    --border-color: var(--border-subtle);
    --wa-color: var(--success-soft);
    --tg-color: #a8c7fa;
    --error-color: var(--danger-soft);
    --active-bg: var(--bg-surface-hover);
    --accent-blue: var(--success-soft);
    --plyr-color-main: var(--success-soft);
}

* { box-sizing: border-box; }

html,
body {
    background-color: var(--bg-base) !important;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}

/* =========================================================
   AUTH / LOGIN
========================================================= */
#loginScreen {
    background: rgba(10, 10, 10, 0.28) !important;
    backdrop-filter: blur(18px) brightness(0.74);
}

#loginScreen > div {
    background-color: var(--bg-modal) !important;
    border: 1px solid #484f58 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.8) !important;
    max-width: 460px !important;
    padding: 32px !important;
}

#loginScreen .text-center > div:first-child {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

#loginScreen h3 {
    color: var(--text-primary) !important;
    font-size: 1.55rem;
    font-weight: 650 !important;
}

#loginScreen p,
.text-muted {
    color: var(--text-secondary) !important;
}

#btnLogin,
#btnLogin[style] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
    box-shadow: none !important;
    transition: 0.2s;
}

#btnLogin:hover:not(:disabled) {
    background: var(--bg-surface-hover) !important;
}

#loginError,
.text-danger {
    color: var(--danger-soft) !important;
}

/* =========================================================
   GLOBAL BOOTSTRAP OVERRIDES
========================================================= */
.text-white,
.text-light { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-info,
.text-primary { color: var(--success-soft) !important; }
.text-warning { color: #f5d38a !important; }

.border,
.border-bottom,
.border-start,
.border-end,
.border-secondary {
    border-color: var(--border-subtle) !important;
}

.bg-dark,
.bg-secondary {
    background-color: var(--bg-surface) !important;
}

.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

.rounded {
    border-radius: var(--radius-md) !important;
}

.form-label {
    color: var(--text-secondary) !important;
    font-size: 0.78rem;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.form-control,
.form-select,
.form-control-sm,
.form-control-color,
.custom-input,
.form-select.custom-input {
    background-color: var(--bg-surface) !important;
    border: 1px solid transparent !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    transition: 0.2s;
    box-shadow: none !important;
}

.form-control-sm {
    padding: 7px 10px !important;
}

.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.settings-textarea:focus,
.custom-input:focus,
.form-select.custom-input:focus {
    background-color: var(--bg-surface-hover) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control:disabled,
.form-select:disabled,
.form-control-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-control::placeholder {
    color: rgba(180, 180, 180, 0.62) !important;
}

.form-check-input {
    background-color: var(--bg-panel) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: var(--success-soft) !important;
    border-color: var(--success-soft) !important;
}

.form-check-label {
    color: var(--text-secondary) !important;
}

.btn,
.btn-flat,
.btn-save,
.btn-run,
.btn-primary,
.btn-success,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-link {
    border: none !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: 0.2s !important;
}

.btn-primary,
.btn-primary[style],
.btn-success,
.btn-save,
.btn-run {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.btn-primary:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.btn-run:hover:not(:disabled) {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}

.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-flat,
.btn-link {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.btn-outline-secondary:hover:not(:disabled),
.btn-outline-info:hover:not(:disabled),
.btn-outline-warning:hover:not(:disabled),
.btn-flat:hover:not(:disabled),
.btn-link:hover:not(:disabled) {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}

.btn-outline-danger,
.btn-danger-soft {
    background: var(--bg-surface) !important;
    color: var(--danger-soft) !important;
}

.btn-outline-danger:hover:not(:disabled),
.btn-danger-soft:hover:not(:disabled) {
    background: rgba(255, 138, 128, 0.13) !important;
    color: #ffb4ac !important;
}

.btn-sm {
    padding: 7px 12px !important;
    font-size: 0.82rem !important;
}

.btn-xxs {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
}

/* Inline-style кнопки из старого HTML/JS приводим к фирменному стилю */
button[style*="background-color: var(--accent-blue)"],
button[style*="background-color:var(--accent-blue)"],
button[style*="background-color:rgba(0,136,204"],
button[style*="background-color:var(--card-bg)"],
button[style*="background: var(--accent-blue)"],
button[style*="border:1px solid var(--tg-color)"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

button[style*="background-color:rgba(0,136,204"]:hover,
button[style*="background-color:var(--card-bg)"]:hover,
button[style*="background-color: var(--accent-blue)"]:hover,
button[style*="background-color:var(--accent-blue)"]:hover {
    background: var(--bg-surface-hover) !important;
}

.dropdown-menu,
.modal-content,
.modal-custom {
    background-color: var(--bg-modal) !important;
    border: 1px solid #484f58 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.8) !important;
    color: var(--text-primary) !important;
}

.dropdown-item,
.dropdown-menu label,
.dropdown-menu .form-check-label {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background: var(--bg-surface-hover) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--border-subtle) !important;
}

.btn-close,
.btn-close-custom {
    filter: invert(1) grayscale(1);
    opacity: 0.75;
}

/* =========================================================
   TOP HEADER
========================================================= */
.top-navbar {
    height: 105px;
    min-height: 105px;
    padding: 0 32px;
    background-color: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 10;
}

.nav-brand-area {
    width: 400px;
    min-width: 400px;
    border-right: none;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 14px;
}

.nav-brand-area > div:first-child {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

.nav-brand-area > div:first-child span {
    color: var(--text-primary) !important;
    font-size: 1.25rem !important;
}

.nav-brand-area .d-flex span[style*="font-size: 2rem"] {
    color: var(--text-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}

.nav-brand-area .d-flex div[style*="width: 2px"] {
    width: 1px !important;
    height: 22px !important;
    background-color: var(--border-subtle) !important;
    margin: 0 12px !important;
}

.nav-brand-area .d-flex span[style*="font-size: 0.75rem"] {
    color: var(--text-secondary) !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
}

.nav-tabs-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    gap: 12px;
}

.nav-tab {
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: 0.2s;
    border: none;
    user-select: none;
    background: transparent;
}

.nav-tab:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.nav-tab.active {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border: none;
    box-shadow: inset 0 0 0 1px var(--text-secondary);
}

.nav-tabs-area > .btn-outline-danger {
    height: 42px;
    padding: 10px 20px !important;
    margin-left: 12px !important;
}

/* =========================================================
   LAYOUT
========================================================= */
.main-container {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-base);
}

.view-section {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--bg-base);
}

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

.sidebar {
    width: 400px;
    min-width: 400px;
    background-color: var(--bg-panel);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
}

.sidebar-header {
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-header h5 {
    color: var(--text-secondary) !important;
    font-size: 0.78rem;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.sidebar-list {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workspace {
    flex: 1;
    min-width: 0;
    padding: 32px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    position: relative;
    background: var(--bg-base);
}

.workspace > * {
    max-width: 1120px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   LEFT LISTS / CARDS
========================================================= */
.employee-item,
.settings-tab-item,
.employee-drag-item {
    position: relative;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.2s;
    flex: 0 0 auto;
    box-shadow: none !important;
}

.employee-item {
    min-height: 58px;
    overflow: hidden;
    display: flex;
    padding: 0;
}

.employee-item:hover,
.settings-tab-item:hover,
.employee-drag-item:hover {
    background: var(--bg-surface-hover);
    border-color: transparent;
    transform: none;
    box-shadow: none !important;
}

.employee-item.active,
.settings-tab-item.active {
    background: var(--bg-surface-hover);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--text-secondary) !important;
}

.emp-info {
    flex: 7;
    padding: 12px 14px 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.emp-info .fw-bold,
.employee-item .fw-bold {
    color: var(--text-primary) !important;
    font-size: 0.9rem;
    font-weight: 500 !important;
}

.emp-info .small,
.employee-item .small {
    color: var(--text-secondary) !important;
    font-size: 0.72rem;
}

.emp-dept {
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: none;
    padding: 8px;
    border-left: 1px solid var(--border-subtle);
    opacity: 0.92;
}

.settings-tab-item {
    padding: 12px 14px 12px 16px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.settings-tab-item .small,
.settings-tab-item div[style] {
    color: var(--text-secondary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.employee-drag-item {
    padding: 12px 14px;
    font-size: 0.9rem;
    cursor: grab;
}

.employee-drag-item:active {
    cursor: grabbing;
}

.opacity-50 {
    opacity: 0.45;
    background: var(--bg-surface-hover);
}

/* =========================================================
   MEETINGS SEARCH / CONTROLS
========================================================= */
.meetings-layout {
    width: 100%;
}

.controls-wrapper {
    display: flex;
    gap: 14px;
    width: 100%;
    margin-bottom: 24px;
}

.control-box {
    background: var(--bg-panel);
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: 0.2s;
    min-width: 250px;
    box-shadow: none !important;
}

.control-box h5 {
    color: var(--text-primary) !important;
    font-size: 1rem;
    font-weight: 650 !important;
    line-height: 1.35;
}

.preset-btn {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: none;
    font-size: 0.72rem;
    padding: 7px 10px;
    border-radius: 999px;
    transition: 0.2s;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.preset-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.preset-btn.active-preset {
    background: rgba(143, 214, 148, 0.14);
    color: var(--success-soft);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.28);
}

#resultsHeader {
    border-color: var(--border-subtle) !important;
}

#resultsTitle {
    color: var(--text-primary) !important;
    font-size: 1.55rem;
    font-weight: 650 !important;
}

/* =========================================================
   MEETING CARDS
========================================================= */
.meeting-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 14px;
    width: 100%;
    transition: 0.2s;
    box-shadow: none !important;
}

.meeting-card:hover {
    border-color: rgba(255,255,255,0.14);
    box-shadow: none;
}

.meeting-header {
    display: flex;
    cursor: pointer;
    transition: 0.2s;
    align-items: stretch;
    background: var(--bg-panel);
}

.meeting-header:hover .mh-left,
.meeting-header:hover .mh-mid,
.meeting-header:hover .mh-right {
    background: var(--bg-surface-hover);
}

.mh-left {
    flex: 1;
    padding: 18px;
    background: var(--bg-panel);
    transition: 0.2s;
    min-width: 0;
}

.mh-left .fw-bold,
.mh-left h5,
.meeting-card h5 {
    color: var(--text-primary) !important;
    font-size: 1rem;
    font-weight: 650 !important;
    line-height: 1.35;
}

.mh-mid,
.mh-right {
    padding: 18px;
    background: rgba(255,255,255,0.02);
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    transition: 0.2s;
}

.mh-mid {
    width: 180px;
    min-width: 180px;
}

.mh-right {
    width: 160px;
    min-width: 160px;
}

.meeting-body {
    padding: 18px;
    border-top: 1px solid var(--border-subtle);
    display: none;
    background: var(--bg-panel);
}

.badge,
.status-pill {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
}

.badge.bg-success,
.badge.text-bg-success,
.status-pill.running,
.badge[style*="green"],
.badge[style*="success"] {
    background: rgba(143, 214, 148, 0.14) !important;
    color: var(--success-soft) !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background: rgba(255, 138, 128, 0.14) !important;
    color: var(--danger-soft) !important;
}

/* =========================================================
   DETAILS / ANALYSIS PANES
========================================================= */
.split-container {
    display: flex;
    gap: 14px;
    height: 500px;
    margin-bottom: 15px;
}

.pane-left,
.pane-right {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s, border-color 0.2s;
}

.pane-left {
    flex: 4;
    background: var(--bg-base);
    padding: 15px;
    overflow-y: auto;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.pane-left.half {
    flex: 1;
}

.pane-right {
    flex: 1;
    background: var(--bg-surface);
    overflow-y: auto;
    position: relative;
}

.pane-right.trigger {
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.trigger-area {
    transition: 0.2s;
    border-radius: var(--radius-md);
}

.trigger-area:hover {
    border-color: rgba(143, 214, 148, 0.35) !important;
    background: var(--bg-surface-hover);
    box-shadow: none;
}

.pane-right.generated {
    cursor: default;
    background: var(--bg-panel);
    padding: 15px;
}

.markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    color: var(--text-primary);
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 650;
}

.markdown-body p { margin-bottom: 10px; }
.markdown-body ul,
.markdown-body ol { margin-bottom: 15px; padding-left: 20px; }
.markdown-body li { margin-bottom: 5px; }
.markdown-body strong { color: var(--text-primary); }
.markdown-body table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 0.9rem; }
.markdown-body th,
.markdown-body td { border: 1px solid var(--border-subtle); padding: 8px 12px; }
.markdown-body th { background: var(--bg-surface); color: var(--text-primary); text-align: left; }
.markdown-body code { background: var(--bg-base); padding: 2px 5px; border-radius: 4px; color: #a8c7fa; font-family: 'Consolas', monospace; }
.markdown-body pre { background: var(--bg-base); padding: 10px; border-radius: var(--radius-md); overflow-x: auto; margin-bottom: 15px; border: 1px solid var(--border-subtle); }
.markdown-body pre code { background: transparent; padding: 0; color: var(--text-primary); border: none; }
.markdown-body blockquote { border-left: 4px solid var(--success-soft); margin: 0 0 15px 0; padding-left: 15px; color: var(--text-secondary); }

/* =========================================================
   SETTINGS
========================================================= */
.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin-bottom: 4px;
    transition: 0.2s;
    border: none;
    font-size: 0.95rem;
    text-align: left;
    background: transparent;
}

.nav-pills .nav-link:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.nav-pills .nav-link.active {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
    border: none;
    box-shadow: none;
    font-weight: 500;
}

.settings-textarea {
    flex-grow: 1;
    resize: none;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 15px;
    font-size: 0.9rem;
    transition: 0.2s;
    line-height: 1.5;
}

.macro-btn {
    font-size: 0.75rem;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Consolas', monospace;
}

.macro-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.user-selection-list {
    background: transparent !important;
}

/* Рабочие карточки/панели, которые создаются динамически inline-HTML */
[style*="background: var(--bg-color)"],
[style*="background:var(--bg-color)"],
[style*="background: var(--panel-bg)"],
[style*="background:var(--panel-bg)"],
[style*="background-color: var(--panel-bg)"],
[style*="background-color:var(--panel-bg)"],
[style*="background-color: var(--card-bg)"],
[style*="background-color:var(--card-bg)"] {
    background: var(--bg-panel) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* =========================================================
   VIDEO / PLAYER
========================================================= */
.plyr,
.plyr__video-wrapper {
    background: var(--bg-base) !important;
    border-radius: var(--radius-md);
}

/* =========================================================
   DRAG VISUALS
========================================================= */
.sortable-ghost,
.sortable-chosen {
    opacity: 1 !important;
    background: var(--bg-surface-hover) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45) !important;
    transform: scale(1.01);
}

.sortable-drag,
.drag-floating {
    opacity: 1 !important;
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    transform: scale(1.025);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

/* =========================================================
   SCROLLBARS
========================================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

/* =========================================================
   EMPTY STATES / INFO CARDS
========================================================= */
.workspace .text-center h4,
.workspace .text-center h5 {
    color: var(--text-primary) !important;
    font-weight: 650 !important;
}

.workspace .text-center p,
.workspace .text-center .text-muted {
    color: var(--text-secondary) !important;
}

.info-card,
.sidebar-list > .text-muted.border {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    color: var(--text-secondary) !important;
    text-align: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
    .controls-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 980px) {
    .top-navbar {
        padding: 0 18px;
    }

    .nav-brand-area,
    .sidebar {
        width: 320px;
        min-width: 320px;
    }

    .workspace {
        padding: 24px;
    }

    .mh-mid,
    .mh-right {
        width: 140px;
        min-width: 140px;
        padding: 14px;
    }
}

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

    .top-navbar {
        height: auto;
        min-height: 92px;
        gap: 16px;
        flex-wrap: wrap;
        padding: 18px;
    }

    .nav-brand-area {
        width: 100%;
        min-width: 0;
    }

    .nav-tabs-area {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .main-container,
    .view-section.active {
        flex-direction: column;
        min-height: calc(100vh - 92px);
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        max-height: 320px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .workspace {
        min-height: 560px;
    }

    .meeting-header,
    .split-container {
        flex-direction: column;
        height: auto;
    }

    .mh-mid,
    .mh-right {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
    }
}

/* =========================================================
   OKK точечные визуальные правки: сотрудники / фильтры / история
========================================================= */
.sidebar-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.add-employee-card-btn {
    min-height: 58px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 650 !important;
    transition: 0.2s;
}

.add-employee-card-btn:hover,
.add-employee-card-btn:focus {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--text-secondary) !important;
}

.add-employee-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--success-soft) 18%, var(--bg-panel) 82%);
    color: var(--success-soft);
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
}

.sidebar-filter-panel {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-panel);
}

.dept-filter-button {
    min-height: 42px;
    padding: 9px 14px !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    font-size: 0.9rem;
    transition: 0.2s;
}

.dept-filter-button:hover,
.dept-filter-button:focus,
.dept-filter-button.show {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.employee-item {
    background: var(--bg-surface);
    border: 1px solid transparent;
}

.employee-item:hover {
    background: var(--bg-surface-hover);
}

.employee-item.active {
    background: var(--bg-surface-hover);
    box-shadow: inset 0 0 0 1px var(--text-secondary) !important;
}

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

.emp-dept {
    position: relative;
    flex: 0 0 126px;
    min-width: 126px;
    padding: 8px 10px 8px 20px;
    border-left: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--dept-color, var(--bg-surface-hover)) 34%, var(--bg-panel) 66%) !important;
    color: var(--text-primary);
    opacity: 1;
    overflow: hidden;
}

.emp-dept::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: var(--dept-color, var(--success-soft));
}

.role-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    box-shadow: none !important;
}

.role-switcher .btn-check {
    position: absolute;
    pointer-events: none;
}

.role-switcher-item {
    min-height: 32px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}

.role-switcher-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.role-switcher .btn-check:checked + .role-switcher-item {
    background: color-mix(in srgb, var(--success-soft) 18%, var(--bg-surface-hover) 82%);
    color: var(--success-soft);
    border-color: rgba(143, 214, 148, 0.34);
    box-shadow: 0 0 0 1px rgba(143, 214, 148, 0.08);
}

.emp-meetings-list,
#empMeetingsList {
    flex: 0 0 auto !important;
    overflow: visible !important;
    min-height: auto !important;
}

#workspaceArea > .d-flex.flex-column.flex-grow-1 {
    flex: 0 0 auto !important;
    min-height: auto !important;
}

@media (max-width: 980px) {
    .emp-dept {
        flex-basis: 112px;
        min-width: 112px;
    }

    .role-switcher {
        flex-wrap: wrap;
        border-radius: var(--radius-lg);
    }
}

/* =========================================================
   MEETINGS PAGE FILTER ACCORDION / HEADER SEARCH
========================================================= */
.meetings-filter-sidebar {
    gap: 12px;
}

.meetings-filter-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.meetings-filter-item {
    background: var(--bg-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: 0.2s;
    flex: 0 0 auto;
}

.meetings-filter-item:hover {
    background: var(--bg-surface-hover);
}

.meetings-filter-item.active {
    background: var(--bg-panel);
    border-color: var(--border-subtle);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.meetings-filter-toggle {
    width: 100%;
    min-height: 58px;
    padding: 13px 14px 13px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
}

.meetings-filter-chevron {
    color: var(--text-secondary);
    font-size: 0.86rem;
    transition: transform 0.2s;
}

.meetings-filter-item.active .meetings-filter-chevron {
    transform: rotate(180deg);
    color: var(--success-soft);
}

.meetings-filter-body {
    display: none;
    padding: 0 14px 16px 14px;
}

.meetings-filter-item.active .meetings-filter-body {
    display: block;
}

.meetings-filter-body h5 {
    font-size: 0.95rem;
    font-weight: 650 !important;
}

.meetings-workspace {
    overflow-y: auto;
}

.meeting-search-header {
    min-height: 118px;
    padding: 18px 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 24px;
}

.meeting-search-heading-text {
    flex: 1 1 auto;
    min-width: 230px;
}

.meeting-search-header-controls {
    flex: 1.8 1 640px;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.meeting-header-filter-panel {
    display: none;
    width: 100%;
    max-width: 760px;
}

.meeting-header-filter-panel.active {
    display: block;
}

.meeting-header-control-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.meeting-header-date-pair {
    width: 150px;
    flex: 0 0 150px;
}

.meeting-header-select-wrap {
    min-width: 260px;
    flex: 1 1 260px;
}

.meeting-header-check-wrap {
    min-height: 42px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.meeting-header-search-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(143, 214, 148, 0.14);
    color: var(--success-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.22);
}

.meeting-header-search-btn:hover {
    background: rgba(143, 214, 148, 0.22);
    transform: translateY(-1px);
}

.meeting-header-presets {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.meeting-header-presets .preset-btn,
.meetings-filter-body .preset-btn {
    margin: 0;
}

.meetings-filter-body .btn-primary,
.meetings-filter-body .btn.btn-primary {
    background: var(--bg-surface) !important;
    border: none !important;
    border-radius: 20px;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transition: 0.2s;
}

.meetings-filter-body .btn-primary:hover,
.meetings-filter-body .btn.btn-primary:hover {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}

.meetings-filter-body .form-control,
.meetings-filter-body .form-select,
.meeting-header-filter-panel .form-control,
.meeting-header-filter-panel .form-select {
    background-color: var(--bg-surface) !important;
    border: 1px solid transparent !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md);
    min-height: 42px;
    box-shadow: none !important;
}

.meetings-filter-body .form-control:focus,
.meetings-filter-body .form-select:focus,
.meeting-header-filter-panel .form-control:focus,
.meeting-header-filter-panel .form-select:focus {
    background-color: var(--bg-surface-hover) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}

#view-meetings #resultsHeader {
    display: none !important;
}

@media (max-width: 1180px) {
    .meeting-search-header {
        flex-direction: column;
        align-items: stretch;
    }

    .meeting-search-header-controls {
        width: 100%;
        justify-content: flex-start;
        flex-basis: auto;
    }

    .meeting-header-filter-panel {
        max-width: none;
    }

    .meeting-header-control-row {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .meeting-header-date-pair,
    .meeting-header-select-wrap,
    .meeting-header-check-wrap {
        width: 100%;
        flex: 1 1 100%;
    }

    .meeting-header-search-btn {
        width: 100%;
        border-radius: 20px;
    }

    .meeting-header-presets {
        justify-content: flex-start;
    }
}

/* =========================================================
   MEETINGS PAGE SMALL CORRECTIONS V2
========================================================= */
#view-meetings .meetings-filter-sidebar {
    padding-top: 16px;
}

#view-meetings .meeting-search-header {
    min-height: 92px;
    align-items: center;
    padding: 16px 0 20px;
}

#view-meetings .meeting-search-heading-text {
    flex: 0 0 auto;
    min-width: 170px;
}

#view-meetings .meeting-search-header-controls {
    flex: 1 1 auto;
}

#view-meetings .meeting-header-filter-panel {
    max-width: none;
}

#view-meetings .meeting-header-control-row {
    align-items: flex-end;
    flex-wrap: nowrap;
}

#view-meetings .date-header-row {
    justify-content: flex-end;
}

#view-meetings .meeting-preset-switcher {
    margin-top: 0;
    margin-right: 4px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 4px;
}

#view-meetings .meeting-preset-switcher .preset-btn {
    border-radius: var(--radius-md);
    padding: 8px 10px;
    min-height: 34px;
    font-size: 0.78rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

#view-meetings .meeting-preset-switcher .preset-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

#view-meetings .meeting-preset-switcher .preset-btn.active-preset {
    background: var(--bg-surface-hover);
    color: var(--success-soft);
    box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.18);
}

#view-meetings .participant-header-row .meeting-header-select-wrap {
    flex: 1 1 280px;
    min-width: 250px;
}

#view-meetings .participant-header-row .meeting-header-check-wrap {
    order: 0;
}

#view-meetings .participant-header-row .meeting-header-date-pair,
#view-meetings .date-header-row .meeting-header-date-pair,
#view-meetings #meetingHeaderFilterOrganizer .meeting-header-date-pair {
    width: 138px;
    flex: 0 0 138px;
}

@media (max-width: 1280px) {
    #view-meetings .meeting-header-control-row {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #view-meetings .meeting-search-header {
        align-items: flex-start;
    }
}

/* =========================================================
   MEETINGS PAGE SMALL CORRECTIONS V3
========================================================= */
#view-meetings .meeting-filter-check-card {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.2;
}

#view-meetings .meeting-filter-check-card .form-check-input,
#view-meetings .meeting-header-check-wrap .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
}

#view-meetings .meeting-filter-check-card .form-check-label,
#view-meetings .meeting-header-check-wrap .form-check-label {
    color: var(--text-primary) !important;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

#view-meetings .meeting-header-check-wrap {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    gap: 10px;
    font-size: 0.95rem;
}

#view-meetings #meetingHeaderFilterOrganizer .meeting-header-control-row {
    justify-content: flex-end;
}

#view-meetings #meetingHeaderFilterOrganizer .meeting-header-select-wrap {
    flex: 0 0 310px;
    width: 310px;
    max-width: 310px;
    min-width: 310px;
}

#view-meetings .meeting-preset-switcher {
    background: var(--bg-panel);
    border-color: var(--border-subtle);
    border-radius: 999px;
    padding: 5px;
}

#view-meetings .meeting-preset-switcher .preset-btn {
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
}

#view-meetings .meeting-preset-switcher .preset-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

#view-meetings .meeting-preset-switcher .preset-btn.active-preset {
    background: var(--bg-surface-hover);
    color: var(--success-soft);
    box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.22);
}

@media (max-width: 1180px) {
    #view-meetings #meetingHeaderFilterOrganizer .meeting-header-select-wrap {
        flex: 1 1 310px;
        width: auto;
        max-width: none;
        min-width: 250px;
    }
}

/* =========================================================
   MEETINGS PAGE HEADER CARD V5
   Объединяет правку порядка чекбокса из v4 и тёмную карточку заголовка.
========================================================= */
#view-meetings .meeting-search-header {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 24px;
    min-height: 92px;
    box-shadow: none;
}

#view-meetings .meeting-search-header .meeting-search-heading-text h2,
#view-meetings .meeting-search-header #meetingSearchTitle {
    color: var(--text-primary) !important;
}

#view-meetings .meeting-search-header-controls {
    min-width: 0;
}

#view-meetings .meeting-header-control-row {
    min-width: 0;
}

#view-meetings .participant-header-row .meeting-header-check-wrap {
    order: 0 !important;
}

/* =========================================================
   DRAG-AND-DROP FIXES / EMPLOYEE RECEIVER CARDS
========================================================= */
#monitoredEmployeesList {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

#monitoredEmployeesList .employee-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    cursor: grab;
}

#monitoredEmployeesList .employee-item:active,
#monitoredEmployeesList.is-sorting-employees .employee-item {
    cursor: grabbing;
}

#mailingListAvailable,
#mailingListSelected {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: 0 !important;
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
}

#mailingListSelected {
    border: 1px dashed rgba(143, 214, 148, 0.46) !important;
    background: rgba(143, 214, 148, 0.035) !important;
}

.employee-drag-item {
    width: 100% !important;
    min-height: 50px;
    margin: 0 !important;
    padding: 11px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    cursor: grab !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.employee-drag-item:hover {
    background: var(--bg-surface-hover) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.employee-drag-item:active {
    cursor: grabbing !important;
}

.employee-drag-handle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1;
}

.employee-drag-main {
    min-width: 0;
    flex: 1;
}

.employee-drag-name {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sortable-ghost {
    opacity: 1 !important;
    background: rgba(143, 214, 148, 0.08) !important;
    border: 1px dashed rgba(143, 214, 148, 0.55) !important;
    box-shadow: none !important;
    transform: none !important;
}

.sortable-chosen {
    opacity: 1 !important;
    background: var(--bg-surface-hover) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.sortable-drag,
.sortable-fallback {
    opacity: 1 !important;
    width: var(--drag-width, auto);
    max-width: 380px;
    box-sizing: border-box !important;
    background: var(--bg-surface-hover) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45) !important;
    transform: scale(1.015) !important;
    pointer-events: none !important;
    z-index: 3000 !important;
}

/* =========================================================
   PHYSICAL DRAG-AND-DROP VISUALS + MAILING REMOVE BUTTONS
========================================================= */
#monitoredEmployeesList,
#mailingListAvailable,
#mailingListSelected {
    position: relative;
}

#monitoredEmployeesList .employee-item,
#mailingListAvailable .employee-drag-item,
#mailingListSelected .employee-drag-item {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.drag-placeholder {
    opacity: 1 !important;
    background: rgba(143, 214, 148, 0.055) !important;
    border: 1px dashed rgba(143, 214, 148, 0.48) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
}

.drag-placeholder > * {
    opacity: 0 !important;
}

.drag-picked {
    opacity: 1 !important;
    background: var(--bg-surface-hover) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    cursor: grabbing !important;
}

.drag-floating,
.sortable-fallback,
.sortable-drag {
    opacity: 1 !important;
    width: var(--drag-width, auto) !important;
    min-height: var(--drag-height, auto) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    background: var(--bg-surface-hover) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.52), 0 0 0 1px rgba(255,255,255,0.06) !important;
    transform: scale(1.025) !important;
    pointer-events: none !important;
    z-index: 3000 !important;
    cursor: grabbing !important;
}

#monitoredEmployeesList.is-sorting-employees .employee-item:not(.drag-floating):not(.sortable-fallback) {
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

#mailingListAvailable .employee-drag-item,
#mailingListSelected .employee-drag-item {
    position: relative;
    padding-right: 44px !important;
}

#mailingListAvailable .employee-drag-item {
    padding-right: 12px !important;
}

.mailing-remove-receiver {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 138, 128, 0.10);
    color: var(--danger-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.78;
    transition: 0.18s ease;
    cursor: pointer;
}

.mailing-remove-receiver:hover {
    opacity: 1;
    background: rgba(255, 138, 128, 0.18);
    color: #ffb4ac;
}

#mailingListAvailable .mailing-remove-receiver,
#monitoredEmployeesList .mailing-remove-receiver {
    display: none !important;
}

/* =========================================================
   PHYSICAL POINTER DRAG V2 + USER ICONS
========================================================= */
#monitoredEmployeesList .employee-item,
#mailingListAvailable .employee-drag-item,
#mailingListSelected .employee-drag-item {
    cursor: grab !important;
    transform: translateZ(0);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#monitoredEmployeesList.is-sorting-employees .employee-item,
#mailingListAvailable.is-sorting-mailing .employee-drag-item,
#mailingListSelected.is-sorting-mailing .employee-drag-item {
    cursor: grabbing !important;
}

.physical-drag-floating {
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: grabbing !important;
    transform: scale(1.025) translateZ(0) !important;
    transform-origin: center center !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: var(--bg-surface-hover) !important;
    transition: none !important;
    overflow: hidden !important;
}

.physical-drag-placeholder {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    border: 1px dashed rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: height 0.16s ease, transform 0.16s ease !important;
}

body.is-physical-dragging {
    cursor: grabbing !important;
    user-select: none !important;
}

body.is-physical-dragging * {
    cursor: grabbing !important;
}

.emp-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

.emp-avatar,
.employee-drag-handle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    background: rgba(168, 199, 250, 0.12) !important;
    color: #a8c7fa !important;
    border: 1px solid rgba(168, 199, 250, 0.16) !important;
    line-height: 1 !important;
}

.emp-text {
    min-width: 0;
    flex: 1;
}

.employee-drag-item[data-id="ALL_PARTICIPANTS"] .employee-drag-handle {
    background: rgba(143, 214, 148, 0.14) !important;
    color: var(--success-soft) !important;
    border-color: rgba(143, 214, 148, 0.24) !important;
}

.employee-drag-item:not([data-id="ALL_PARTICIPANTS"]) .employee-drag-handle {
    background: rgba(168, 199, 250, 0.12) !important;
    color: #a8c7fa !important;
    border-color: rgba(168, 199, 250, 0.16) !important;
}

#mailingListSelected .employee-drag-item {
    padding-right: 44px !important;
}

#mailingListAvailable .employee-drag-item {
    padding-right: 12px !important;
}


/* =========================================================
   FINAL COSMETIC TOUCHES: EMPLOYEE HEADER + MEETING FILTER ICONS
========================================================= */
.employee-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.employee-header-avatar,
.meeting-title-icon,
.meeting-filter-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    background: rgba(168, 199, 250, 0.12) !important;
    color: #a8c7fa !important;
    border: 1px solid rgba(168, 199, 250, 0.16) !important;
    line-height: 1 !important;
}

.meeting-filter-title-wrap,
.meeting-search-title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.meeting-filter-toggle {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.meetings-filter-item:not(.active) .meetings-filter-toggle {
    border-bottom-color: transparent !important;
}

.meetings-filter-item.active .meetings-filter-toggle {
    background: var(--bg-surface-hover) !important;
}

.meetings-filter-body {
    padding-top: 14px !important;
}

.meeting-title-icon-date,
#meetingFilterItemDate .meeting-filter-icon {
    background: rgba(143, 214, 148, 0.14) !important;
    color: var(--success-soft) !important;
    border-color: rgba(143, 214, 148, 0.24) !important;
}

.meeting-title-icon-organizer,
#meetingFilterItemOrganizer .meeting-filter-icon {
    background: rgba(168, 199, 250, 0.12) !important;
    color: #a8c7fa !important;
    border-color: rgba(168, 199, 250, 0.16) !important;
}

.meeting-title-icon-participant,
#meetingFilterItemParticipant .meeting-filter-icon {
    background: rgba(210, 180, 255, 0.12) !important;
    color: #d2b4ff !important;
    border-color: rgba(210, 180, 255, 0.18) !important;
}

.meeting-title-icon svg,
.meeting-filter-icon svg,
.employee-header-avatar svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   FINAL MEETINGS ICON + ACCORDION POLISH
========================================================= */
#view-meetings .meeting-filter-icon,
#view-meetings .meeting-title-icon {
    background: rgba(255,255,255,0.055) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}

#view-meetings #meetingFilterItemDate .meeting-filter-icon,
#view-meetings .meeting-title-icon-date {
    color: var(--success-soft) !important;
    background: rgba(143, 214, 148, 0.10) !important;
    border-color: rgba(143, 214, 148, 0.20) !important;
}

#view-meetings #meetingFilterItemOrganizer .meeting-filter-icon,
#view-meetings .meeting-title-icon-organizer {
    color: #a8c7fa !important;
    background: rgba(168, 199, 250, 0.10) !important;
    border-color: rgba(168, 199, 250, 0.18) !important;
}

#view-meetings #meetingFilterItemParticipant .meeting-filter-icon,
#view-meetings .meeting-title-icon-participant {
    color: #d2b4ff !important;
    background: rgba(210, 180, 255, 0.10) !important;
    border-color: rgba(210, 180, 255, 0.18) !important;
}

#view-meetings .meeting-filter-icon svg,
#view-meetings .meeting-title-icon svg {
    width: 17px !important;
    height: 17px !important;
}

#view-meetings .meetings-filter-body {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height 0.24s ease, opacity 0.18s ease, padding-top 0.24s ease, padding-bottom 0.24s ease;
}

#view-meetings .meetings-filter-item.active .meetings-filter-body {
    max-height: 760px;
    opacity: 1;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
}

#view-meetings .meetings-filter-item {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#view-meetings .meetings-filter-toggle {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#view-meetings .meeting-header-search-btn {
    font-size: 0 !important;
}

#view-meetings .meeting-header-search-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.meeting-empty-search-state {
    opacity: 0.55;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meeting-empty-search-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--border-subtle);
}

/* === Video action menu / preparation states === */
.video-main-button {
    background-color: rgba(0, 136, 204, 0.10) !important;
    color: var(--tg-color) !important;
    border: 1px solid var(--tg-color) !important;
    border-radius: 999px !important;
    padding: 0.42rem 0.78rem !important;
}

.video-main-button:hover {
    background-color: rgba(0, 136, 204, 0.18) !important;
    transform: translateY(-1px);
}

.video-action-menu {
    position: fixed;
    z-index: 3000;
    width: 190px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(22, 27, 34, 0.98);
    border: 1px solid rgba(139, 148, 158, 0.22);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    animation: videoMenuAppear 0.14s ease-out;
}

.video-action-menu::before {
    content: '';
    position: absolute;
    right: 22px;
    top: -7px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: rgba(22, 27, 34, 0.98);
    border-left: 1px solid rgba(139, 148, 158, 0.22);
    border-top: 1px solid rgba(139, 148, 158, 0.22);
}

.video-action-item {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #f0f6fc;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    text-align: left;
    transition: background 0.14s ease, transform 0.14s ease;
}

.video-action-item:hover {
    background: rgba(139, 148, 158, 0.14);
    transform: translateX(2px);
}

.video-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(88, 166, 255, 0.12);
    border: 1px solid rgba(88, 166, 255, 0.25);
    color: #58a6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.video-prepare-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(1, 4, 9, 0.58);
    backdrop-filter: blur(4px);
}

.video-prepare-overlay.show {
    display: flex;
}

.video-prepare-card {
    min-width: 260px;
    padding: 26px 30px;
    border-radius: 22px;
    background: rgba(22, 27, 34, 0.98);
    border: 1px solid rgba(139, 148, 158, 0.25);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #f0f6fc;
}

.video-prepare-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(88, 166, 255, 0.18);
    border-top-color: #58a6ff;
    animation: videoSpin 0.85s linear infinite;
}

.video-prepare-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

#videoModal .modal-body {
    position: relative;
    min-height: 260px;
}

.video-player-preparing,
.video-player-error {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #000;
    color: #f0f6fc;
}

.video-player-error {
    padding: 28px;
    color: #ff7b72;
    font-weight: 800;
    text-align: center;
}

@keyframes videoMenuAppear {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes videoSpin {
    to { transform: rotate(360deg); }
}

/* === Video menu/player fix v2 === */
.video-action-wrapper {
    position: relative;
    display: inline-flex;
    overflow: visible;
    z-index: 20;
}

.video-action-menu {
    position: absolute !important;
    right: 0;
    top: calc(100% + 9px) !important;
    left: auto !important;
    z-index: 3500;
    width: 190px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(22, 27, 34, 0.98);
    border: 1px solid rgba(139, 148, 158, 0.24);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(10px);
    animation: videoMenuAppearDown 0.14s ease-out;
}

.video-action-menu.open-up {
    top: auto !important;
    bottom: calc(100% + 9px);
    animation: videoMenuAppearUp 0.14s ease-out;
}

.video-action-menu::before {
    right: 22px;
    top: -7px;
}

.video-action-menu.open-up::before {
    top: auto;
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid rgba(139, 148, 158, 0.22);
    border-bottom: 1px solid rgba(139, 148, 158, 0.22);
}

.video-action-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.video-prepare-subtitle {
    max-width: 320px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.35;
    text-align: center;
}

#videoModal .modal-dialog {
    max-width: min(1180px, calc(100vw - 44px));
}

#videoModal .modal-content {
    border-radius: 20px;
    overflow: hidden;
    background: #0b0f14 !important;
    border: 1px solid rgba(139, 148, 158, 0.28) !important;
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.72) !important;
}

#videoModal .modal-header {
    min-height: 64px;
    background: linear-gradient(180deg, rgba(33, 38, 45, 0.98), rgba(22, 27, 34, 0.98));
    border-bottom: 1px solid rgba(139, 148, 158, 0.22) !important;
    padding: 16px 20px;
}

#videoModal .modal-title {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

#videoModal .modal-body {
    position: relative;
    min-height: 620px;
    aspect-ratio: 16 / 9;
    background: #000 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    overflow: hidden;
}

#meetingVideoPlayer,
#videoModal .plyr,
#videoModal .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 620px;
    background: #000;
}

#meetingVideoPlayer {
    object-fit: contain;
}

#videoModal .plyr__controls {
    padding: 18px 16px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}

.video-player-preparing,
.video-player-error {
    background: radial-gradient(circle at center, rgba(22, 27, 34, 0.72), rgba(0, 0, 0, 0.96));
}

.video-player-preparing .video-prepare-spinner {
    width: 54px;
    height: 54px;
}

.video-player-error {
    font-size: 0.98rem;
    line-height: 1.45;
}

@keyframes videoMenuAppearDown {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes videoMenuAppearUp {
    from { opacity: 0; transform: translateY(5px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.meeting-card:has(.video-action-menu),
.employee-meeting-card:has(.video-action-menu),
.emp-meeting-card:has(.video-action-menu) {
    overflow: visible !important;
    z-index: 50;
}

.meeting-card.video-menu-open,
.employee-meeting-card.video-menu-open,
.emp-meeting-card.video-menu-open {
    overflow: visible !important;
    z-index: 50;
}

/* ===== Video download progress patch ===== */
.video-action-item-disabled {
    opacity: 0.48;
    cursor: not-allowed !important;
}

.video-action-item-disabled:hover {
    background: transparent !important;
    color: inherit !important;
}

.video-prepare-progress {
    width: min(360px, 72vw);
    height: 10px;
    margin: 14px auto 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(139, 148, 158, 0.18);
    border: 1px solid rgba(139, 148, 158, 0.22);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.video-prepare-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(88, 166, 255, 0.95), rgba(126, 231, 135, 0.95));
    box-shadow: 0 0 18px rgba(88, 166, 255, 0.28);
    transition: width 0.25s ease;
}

.video-prepare-progress-meta {
    min-height: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
}


/* ===== Video cancel/progress patch ===== */
.video-prepare-card {
    min-width: min(420px, calc(100vw - 42px));
}

.video-prepare-cancel-btn {
    margin-top: 4px;
    min-width: 132px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(139, 148, 158, 0.35);
    background: rgba(139, 148, 158, 0.12);
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.video-prepare-cancel-btn:hover {
    background: rgba(248, 81, 73, 0.14);
    border-color: rgba(248, 81, 73, 0.38);
    transform: translateY(-1px);
}

.video-prepare-subtitle {
    display: none !important;
}


/* ===== Video modal header meta patch ===== */
#videoModal .modal-header {
    min-height: 50px;
    padding: 10px 14px;
    align-items: flex-start;
    gap: 12px;
}

.video-modal-header-content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-modal-kicker {
    color: var(--text-secondary);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

#videoModal .modal-title {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 500 !important;
    line-height: 1.28;
    color: var(--text-primary) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.video-modal-meta-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.video-modal-meta-item-organizer {
    flex: 0 1 220px;
}

.video-modal-meta-item-participants {
    flex: 1 1 360px;
}

.video-modal-meta-item-date {
    flex: 0 1 190px;
}

.video-modal-meta-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-modal-meta-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.video-modal-meta-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.video-modal-meta-label {
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.video-modal-meta-value {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#videoModal .modal-header .btn-close {
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    #videoModal .modal-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .video-modal-header-content {
        gap: 7px;
    }

    .video-modal-meta {
        gap: 6px;
    }

    .video-modal-meta-item,
    .video-modal-meta-item-organizer,
    .video-modal-meta-item-participants,
    .video-modal-meta-item-date {
        flex: 1 1 100%;
    }

    .video-modal-meta-value {
        white-space: normal;
    }
}


/* ===== Video modal participants hover patch ===== */
#videoModal .modal-header {
    overflow: visible;
}

#videoModal .modal-content {
    overflow: visible;
}

#videoModal .modal-body {
    overflow: hidden;
}

.video-modal-header-content {
    gap: 7px;
}

.video-modal-kicker {
    display: none !important;
}

.video-modal-meta {
    position: relative;
    overflow: visible;
}

.video-modal-meta-item {
    position: relative;
}

.video-modal-meta-item-participants {
    overflow: visible;
    cursor: default;
}

.video-modal-meta-item-participants.video-modal-meta-item-expandable {
    cursor: default;
}

.video-modal-meta-item-participants.video-modal-meta-item-expandable:hover,
.video-modal-meta-item-participants.video-modal-meta-item-expandable:focus-within {
    z-index: 80;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

.video-modal-meta-item-participants.video-modal-meta-item-expandable::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
    display: none;
}

.video-modal-meta-item-participants.video-modal-meta-item-expandable::after {
    content: attr(data-full-participants);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 90;
    width: 100%;
    min-width: 100%;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.985), rgba(28, 28, 28, 0.985));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.video-modal-meta-item-participants.video-modal-meta-item-expandable:hover::before,
.video-modal-meta-item-participants.video-modal-meta-item-expandable:hover::after,
.video-modal-meta-item-participants.video-modal-meta-item-expandable:focus-within::before,
.video-modal-meta-item-participants.video-modal-meta-item-expandable:focus-within::after {
    display: block;
}

.video-modal-meta-item-participants.video-modal-meta-item-expandable:hover::after,
.video-modal-meta-item-participants.video-modal-meta-item-expandable:focus-within::after {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#meetingVideoPlayer:focus,
#meetingVideoPlayer:focus-visible,
#videoModal video:focus,
#videoModal video:focus-visible,
#videoModal .plyr:focus,
#videoModal .plyr:focus-visible,
#videoModal .plyr__video-wrapper:focus,
#videoModal .plyr__video-wrapper:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Повторно фиксируем нейтральную стилистику видео-меню, чтобы патч не возвращал синеву старого CSS. */
.video-main-button {
    background: linear-gradient(180deg, rgba(52, 52, 52, 0.96), rgba(35, 35, 35, 0.96)) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.video-main-button:hover {
    background: linear-gradient(180deg, rgba(61, 61, 61, 0.98), rgba(44, 44, 44, 0.98)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.video-action-menu {
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.985), rgba(28, 28, 28, 0.985)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42) !important;
}

.video-action-menu::before {
    background: rgba(35, 35, 35, 0.99) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.video-action-item {
    color: var(--text-primary) !important;
    font-size: 0.92rem;
    font-weight: 600;
}

.video-action-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

.video-action-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
}

.video-action-item:hover .video-action-icon {
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 992px) {
    .video-modal-meta-item-participants.video-modal-meta-item-expandable::after {
        max-height: min(46vh, 420px);
    }
}


/* ===== Calls section ===== */
#view-calls .meetings-filter-sidebar {
    padding-top: 16px;
}

#view-calls .meeting-search-header {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 24px;
    min-height: 92px;
    box-shadow: none;
    align-items: center;
}

#view-calls .meeting-search-header-controls {
    min-width: 0;
}

#view-calls .calls-header-row {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

#view-calls .meeting-header-date-pair {
    width: 150px;
    flex: 0 0 150px;
}

#view-calls .calls-preset-switcher {
    margin-top: 0;
    margin-right: 4px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 5px;
}

#view-calls .calls-preset-switcher .preset-btn {
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
}

#view-calls .calls-preset-switcher .preset-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

#view-calls .calls-preset-switcher .preset-btn.active-preset {
    background: var(--bg-surface-hover);
    color: var(--success-soft);
    box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.22);
}

.calls-empty-state {
    min-height: 260px;
    padding: 44px 22px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.calls-empty-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    opacity: 0.65;
}

.calls-error-state {
    border-color: rgba(255, 138, 128, 0.32);
    background: rgba(255, 138, 128, 0.045);
}

.calls-error-text {
    max-width: 780px;
    margin-top: 8px;
    color: var(--danger-soft);
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
}

.calls-table-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.calls-table-toolbar {
    min-height: 52px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.calls-count {
    color: var(--text-primary);
    font-weight: 800;
}

.calls-toolbar-note {
    font-size: 0.78rem;
    opacity: 0.68;
}

.calls-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.calls-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.calls-table th {
    padding: 12px 11px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.calls-table td {
    padding: 11px 11px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.calls-table tbody tr {
    transition: background 0.14s ease;
}

.calls-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035);
}

.calls-table tbody tr:last-child td {
    border-bottom: 0;
}

.calls-time-cell {
    width: 88px;
    white-space: nowrap;
}

.calls-phone-cell {
    width: 126px;
    white-space: nowrap;
}

.calls-type-cell {
    width: 54px;
    text-align: center;
}

.calls-employee-cell {
    width: 112px;
}

.calls-audio-cell {
    width: 190px;
}

.calls-crm-cell {
    width: 220px;
    max-width: 220px;
}

.calls-time-main {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.95rem;
}

.calls-time-sub,
.calls-sub-text {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.25;
    margin-top: 2px;
}

.calls-main-text {
    max-width: 220px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.28;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calls-crm-title {
    max-width: 220px;
    line-height: 1.18;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.calls-crm-subtitle {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calls-manager-name {
    max-width: 116px;
    color: var(--text-primary);
    line-height: 1.18;
}

.calls-manager-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.calls-manager-lastname {
    font-weight: 800;
}

.calls-type-badge,
.calls-dept-badge,
.calls-muted-badge,
.calls-audio-link,
.calls-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.calls-type-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.calls-type-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.calls-table tbody tr:hover .calls-type-icon {
    transform: translateY(-1px);
}

.calls-type-outgoing {
    color: var(--success-soft);
    background: rgba(143, 214, 148, 0.10);
    border: 1px solid rgba(143, 214, 148, 0.22);
}

.calls-type-incoming {
    color: #a8c7fa;
    background: rgba(168, 199, 250, 0.09);
    border: 1px solid rgba(168, 199, 250, 0.18);
}

.calls-type-callback,
.calls-type-neutral {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.calls-dept-badge {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.calls-muted-badge {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.calls-audio-link {
    text-decoration: none;
    color: var(--success-soft) !important;
    background: rgba(143, 214, 148, 0.10);
    border: 1px solid rgba(143, 214, 148, 0.22);
    transition: background 0.14s ease, transform 0.14s ease;
}

.calls-audio-link:hover {
    background: rgba(143, 214, 148, 0.16);
    transform: translateY(-1px);
}

.calls-audio-player {
    width: 176px;
    height: 32px;
    display: block;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color-scheme: dark;
}

.calls-audio-player:focus,
.calls-audio-player:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.calls-audio-player::-webkit-media-controls-panel {
    background: rgba(47, 47, 47, 0.96);
}

.calls-duration {
    min-width: 58px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.calls-pagination {
    min-height: 56px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.calls-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calls-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.calls-page-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.calls-page-btn.active {
    color: var(--bg-base);
    background: var(--success-soft);
    border-color: var(--success-soft);
}

.calls-page-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.calls-page-info {
    margin-left: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

@media (max-width: 1180px) {
    #view-calls .calls-header-row {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #view-calls .meeting-search-header {
        align-items: flex-start;
    }
}

/* ===== Calls filters / range / multiselect / sorting patch ===== */
#view-calls .meeting-search-header {
    align-items: flex-start;
    min-height: 112px;
}

#view-calls .calls-header-controls {
    flex: 1 1 auto;
    max-width: 100%;
}

#view-calls .calls-header-row {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#view-calls .meeting-header-date-pair {
    width: 136px;
    flex: 0 0 136px;
}

#view-calls .calls-preset-switcher {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.calls-sidebar-presets .preset-btn {
    flex: 1 1 auto;
    min-width: 72px;
}

.calls-header-multiselect-wrap {
    width: 184px;
    flex: 0 1 184px;
    min-width: 168px;
}

.calls-header-size-wrap {
    width: 96px;
    flex: 0 0 96px;
}

.calls-multiselect {
    position: relative;
    width: 100%;
}

.calls-multiselect-toggle {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}

.calls-multiselect-toggle:hover:not(:disabled),
.calls-multiselect.open .calls-multiselect-toggle {
    background: var(--bg-surface-hover);
    border-color: rgba(255, 255, 255, 0.15);
}

.calls-multiselect-toggle:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.calls-multiselect-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
}

.calls-multiselect-chevron {
    color: var(--text-secondary);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.calls-multiselect-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 4200;
    width: max(100%, 280px);
    max-height: min(460px, 64vh);
    overflow-y: auto;
    padding: 7px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.985), rgba(28, 28, 28, 0.985));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.46);
    display: none;
}

.calls-multiselect.open .calls-multiselect-menu {
    display: block;
}

.calls-header-multiselect-wrap .calls-multiselect-menu {
    right: 0;
    left: auto;
}

.calls-multiselect-option {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    padding: 7px 8px;
    background: transparent;
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    text-align: left;
    font-size: 0.84rem;
    cursor: pointer;
}

.calls-multiselect-option:hover,
.calls-multiselect-option.checked {
    background: rgba(255, 255, 255, 0.06);
}

.calls-multiselect-option-all {
    font-weight: 800;
}

.calls-checkmark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--success-soft);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    font-weight: 900;
}

.calls-option-main {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.calls-option-sub {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.calls-multiselect-divider {
    height: 1px;
    margin: 6px 4px;
    background: rgba(255, 255, 255, 0.08);
}

.calls-sort-th {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.calls-sort-th:hover {
    color: var(--text-primary);
}

.calls-page-size-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    position: relative;
}

.page-size-select-button {
    min-width: 70px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(52, 52, 52, 0.96), rgba(35, 35, 35, 0.96));
    color: var(--text-primary);
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.page-size-select-button:hover {
    background: linear-gradient(180deg, rgba(61, 61, 61, 0.98), rgba(44, 44, 44, 0.98));
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.page-size-select-chevron {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.14s ease;
}

.page-size-dropdown.open .page-size-select-chevron {
    transform: rotate(180deg);
}

.page-size-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 3200;
    width: 156px;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.985), rgba(28, 28, 28, 0.985));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
    display: none;
    animation: videoMenuAppearUp 0.14s ease-out;
}

.page-size-dropdown.open .page-size-menu {
    display: block;
}

.page-size-menu::before {
    content: '';
    position: absolute;
    left: 28px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: rgba(30, 30, 30, 0.99);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.page-size-option {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
}

.page-size-option small {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

.page-size-option:hover,
.page-size-option.active {
    background: rgba(255, 255, 255, 0.06);
}

.page-size-option:hover {
    transform: translateX(2px);
}

.page-size-option.active::before {
    content: '✓';
    position: absolute;
    left: 12px;
    color: var(--success-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

@media (max-width: 1400px) {
    #view-calls .meeting-search-header {
        align-items: stretch;
    }

    #view-calls .meeting-search-heading-text {
        width: 100%;
    }

    #view-calls .meeting-search-header-controls {
        width: 100%;
    }

    #view-calls .calls-header-row {
        justify-content: flex-start;
    }
}

@media (max-width: 992px) {
    .calls-header-multiselect-wrap,
    #view-calls .meeting-header-date-pair,
    .calls-header-size-wrap {
        flex: 1 1 100%;
        width: 100%;
    }

    .calls-multiselect-menu {
        width: 100%;
    }
}

/* ===== Calls DB import patch ===== */
.calls-import-btn,
.calls-header-import-btn {
    border: 1px solid rgba(143, 214, 148, 0.22) !important;
    background: rgba(143, 214, 148, 0.09) !important;
    color: var(--success-soft) !important;
    border-radius: 12px !important;
    min-height: 38px;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.calls-import-btn:hover,
.calls-header-import-btn:hover {
    background: rgba(143, 214, 148, 0.14) !important;
    border-color: rgba(143, 214, 148, 0.34) !important;
    transform: translateY(-1px);
}

.calls-header-import-btn {
    height: 38px;
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 800;
    align-self: flex-end;
}

.calls-import-success-state {
    border-color: rgba(143, 214, 148, 0.24);
    background: rgba(143, 214, 148, 0.045);
}

/* ===== AI model API type switcher ===== */
.ai-api-type-switcher {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    padding: 4px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.ai-api-type-switcher .btn-check {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.ai-api-type-item {
    min-height: 34px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.ai-api-type-item:hover {
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
}

.ai-api-type-switcher .btn-check:checked + .ai-api-type-item {
    background: color-mix(in srgb, var(--success-soft) 18%, var(--bg-surface-hover) 82%);
    color: var(--success-soft);
    border-color: rgba(143, 214, 148, 0.34);
    box-shadow: 0 0 0 1px rgba(143, 214, 148, 0.08);
}

/* ===== Calls expandable analysis panel ===== */
.calls-data-row {
    cursor: pointer;
}

.calls-data-row.is-expanded {
    background: rgba(255, 255, 255, 0.04);
}

.calls-details-row td {
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.calls-details-panel {
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012));
}

.calls-details-loading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-secondary);
    font-weight: 700;
}

.calls-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: stretch;
}

.calls-details-main {
    min-width: 0;
}

.calls-details-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.calls-details-meta strong {
    color: var(--text-primary);
    font-weight: 700;
}

.calls-details-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.calls-details-box {
    min-width: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.calls-details-box-title {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calls-details-text {
    min-height: 170px;
    max-height: 360px;
    margin: 0;
    padding: 12px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    background: transparent;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.5;
}

.calls-details-text.is-empty {
    color: var(--text-secondary);
    font-style: italic;
}

.calls-details-actions {
    border-radius: 14px;
    border: 1px solid rgba(143, 214, 148, 0.18);
    background: rgba(143, 214, 148, 0.055);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
}

.calls-analyze-btn {
    min-height: 40px;
    border: 1px solid rgba(143, 214, 148, 0.28);
    border-radius: 999px;
    background: rgba(143, 214, 148, 0.14);
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 850;
    transition: background 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}

.calls-analyze-btn:hover:not(:disabled) {
    background: rgba(143, 214, 148, 0.20);
    border-color: rgba(143, 214, 148, 0.38);
    transform: translateY(-1px);
}

.calls-analyze-btn:disabled {
    opacity: 0.62;
    cursor: wait;
}

.calls-details-hint {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.38;
}

.calls-details-error {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 138, 128, 0.28);
    background: rgba(255, 138, 128, 0.06);
    color: var(--danger-soft);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.42;
}

@media (max-width: 1180px) {
    .calls-details-grid {
        grid-template-columns: 1fr;
    }

    .calls-details-actions {
        flex-direction: row;
        align-items: center;
    }

    .calls-analyze-btn {
        min-width: 220px;
    }
}

@media (max-width: 840px) {
    .calls-details-columns {
        grid-template-columns: 1fr;
    }

    .calls-details-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== Contacts / lead chains from calls ===== */
.contacts-workspace .contacts-layout {
    width: 100%;
}

.contacts-search-header {
    align-items: flex-start;
}

.contacts-empty-state {
    min-height: 280px;
    padding: 46px 28px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contacts-empty-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    opacity: 0.78;
}

.contacts-error-state {
    border-color: rgba(248, 81, 73, 0.35);
    background: rgba(248, 81, 73, 0.05);
}

.contacts-error-text {
    max-width: 760px;
    margin-top: 10px;
    color: var(--danger-soft);
    font-size: 0.9rem;
    word-break: break-word;
}

.contacts-summary-bar {
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.contacts-count {
    color: var(--text-primary);
    font-weight: 800;
}

.contacts-summary-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.contacts-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-lead-card {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.contact-lead-card:hover {
    background: rgba(255, 255, 255, 0.048);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.contact-lead-card.is-expanded {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(143, 214, 148, 0.28);
}

.contact-lead-main {
    min-height: 86px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 42px minmax(220px, 1.7fr) minmax(150px, 0.9fr) 92px 92px minmax(140px, 0.9fr) 24px;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

.contact-lead-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(143, 214, 148, 0.20), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(143, 214, 148, 0.18);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
}

.contact-lead-info {
    min-width: 0;
}

.contact-lead-title {
    color: var(--text-primary);
    font-weight: 750;
    font-size: 1rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-lead-subline {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    display: flex;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-lead-meta,
.contact-lead-last,
.contact-lead-stat {
    min-width: 0;
}

.contact-lead-meta-label,
.contact-lead-stat-label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.contact-lead-meta-value {
    margin-top: 5px;
    color: var(--text-primary);
    font-weight: 650;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-lead-stat {
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
}

.contact-lead-stat-value {
    color: var(--text-primary);
    font-weight: 850;
    font-size: 1.05rem;
    line-height: 1;
}

.contact-lead-stat-label {
    margin-top: 5px;
    font-size: 0.62rem;
}

.contact-lead-chevron {
    color: var(--text-secondary);
    font-size: 1.05rem;
    transition: transform 0.15s ease;
}

.contact-lead-card.is-expanded .contact-lead-chevron {
    transform: rotate(180deg);
}

.contact-lead-timeline-wrap {
    padding: 0 16px 16px 70px;
}

.contact-timeline-loading,
.contact-timeline-empty,
.contact-timeline-error {
    padding: 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.contact-timeline-error {
    color: var(--danger-soft);
    border-color: rgba(248, 81, 73, 0.28);
}

.contact-timeline {
    position: relative;
    padding: 14px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.contact-timeline-header {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
}

.contact-timeline-line {
    position: absolute;
    left: 16px;
    top: 44px;
    bottom: -12px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.contact-timeline-item:last-child .contact-timeline-line {
    display: none;
}

.contact-timeline-marker {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-timeline-marker svg {
    width: 17px;
    height: 17px;
}

.contact-timeline-item.is-robot .contact-timeline-marker {
    background: rgba(143, 214, 148, 0.10);
    border-color: rgba(143, 214, 148, 0.25);
    color: var(--success-soft);
}

.contact-timeline-card {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.075);
}

.contact-timeline-top,
.contact-timeline-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.contact-timeline-body {
    margin-top: 10px;
    align-items: center;
}

.contact-timeline-title {
    color: var(--text-primary);
    font-weight: 760;
    font-size: 0.92rem;
}

.contact-timeline-sub,
.contact-timeline-employee span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.contact-timeline-status {
    max-width: 240px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-timeline-employee {
    min-width: 180px;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-timeline-audio-wrap {
    flex: 1 1 360px;
    min-width: 220px;
}

.contact-timeline-audio {
    width: 100%;
    max-width: 520px;
    height: 34px;
    display: block;
}

.contacts-pagination {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .contact-lead-main {
        grid-template-columns: 42px minmax(190px, 1fr) minmax(135px, 0.8fr) 82px 82px 24px;
    }
    .contact-lead-last {
        display: none;
    }
}

@media (max-width: 900px) {
    .contacts-summary-bar,
    .contact-timeline-top,
    .contact-timeline-body {
        flex-direction: column;
        align-items: stretch;
    }
    .contact-lead-main {
        grid-template-columns: 42px 1fr 24px;
    }
    .contact-lead-meta,
    .contact-lead-stat,
    .contact-lead-last {
        display: none;
    }
    .contact-lead-timeline-wrap {
        padding-left: 14px;
    }
    .contact-timeline-audio-wrap {
        min-width: 0;
    }
}

/* ===== Contact communication history analysis ===== */
.contact-history-analysis-panel {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(143, 214, 148, 0.055);
    border: 1px solid rgba(143, 214, 148, 0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.contact-history-analysis-title {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
}

.contact-history-analysis-subtitle {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.35;
}

.contact-history-analysis-btn {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(143, 214, 148, 0.36);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(143, 214, 148, 0.20), rgba(143, 214, 148, 0.11));
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
    white-space: nowrap;
}

.contact-history-analysis-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(143, 214, 148, 0.28), rgba(143, 214, 148, 0.16));
    border-color: rgba(143, 214, 148, 0.50);
    transform: translateY(-1px);
}

.contact-history-analysis-btn:disabled {
    opacity: 0.58;
    cursor: wait;
}

.contact-history-analysis-output {
    grid-column: 1 / -1;
}

.contact-history-analysis-loading,
.contact-history-analysis-error {
    margin-top: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.88rem;
}

.contact-history-analysis-error {
    color: var(--danger-soft);
    border-color: rgba(255, 138, 128, 0.24);
    background: rgba(255, 138, 128, 0.06);
}

.contact-history-analysis-result {
    margin-top: 8px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(18, 18, 18, 0.58);
    border: 1px solid rgba(255,255,255,0.09);
}

.contact-history-analysis-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 850;
    background: rgba(255,255,255,0.045);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.contact-history-analysis-result .markdown-body {
    max-height: 520px;
    overflow: auto;
    padding: 16px;
}

@media (max-width: 980px) {
    .contact-history-analysis-panel {
        grid-template-columns: 1fr;
    }

    .contact-history-analysis-btn {
        width: 100%;
    }
}

/* ===== AI model proxy settings ===== */
.ai-proxy-card {
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.ai-proxy-fields {
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.ai-proxy-fields-disabled {
    opacity: 0.45;
    filter: grayscale(0.4);
}

/* ===== Contacts table view aligned with calls table ===== */
.contacts-table-card {
    margin-top: 0;
}

.contacts-table-wrap {
    overflow-x: auto;
}

.contacts-table {
    min-width: 980px;
}

.contacts-table th {
    white-space: nowrap;
}

.contacts-data-row {
    cursor: pointer;
}

.contacts-data-row.is-expanded {
    background: rgba(143, 214, 148, 0.055);
}

.contacts-data-row.is-expanded td {
    border-bottom-color: rgba(143, 214, 148, 0.14);
}

.contacts-contact-cell {
    width: 220px;
    max-width: 220px;
}

.contacts-phone-cell {
    width: 126px;
    white-space: nowrap;
}

.contacts-crm-cell {
    width: 170px;
    max-width: 170px;
}

.contacts-date-cell {
    width: 126px;
    white-space: nowrap;
}

.contacts-count-cell {
    width: 88px;
    text-align: center;
}

.contacts-expand-cell {
    width: 36px;
    text-align: center;
}

.contacts-table-title,
.contacts-crm-title {
    color: var(--text-primary);
    font-weight: 800;
    line-height: 1.18;
    word-break: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contacts-crm-title {
    font-weight: 700;
    font-size: 0.84rem;
}

.contacts-table-sub {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-table-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
}

.contacts-table-success-badge {
    background: rgba(143, 214, 148, 0.085);
    border-color: rgba(143, 214, 148, 0.18);
    color: var(--success-soft);
}

.contacts-table-manager-zero-badge {
    background: rgba(248, 81, 73, 0.10);
    border-color: rgba(248, 81, 73, 0.22);
    color: #ff9b95;
}

.contacts-table-chevron {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}

.contacts-data-row.is-expanded .contacts-table-chevron {
    transform: rotate(180deg);
    color: var(--success-soft);
}

.contacts-details-row td {
    padding: 0;
    background: rgba(0, 0, 0, 0.14);
}

.contacts-details-row:hover {
    background: rgba(0, 0, 0, 0.14) !important;
}

.contacts-details-panel {
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(143, 214, 148, 0.12);
}

@media (max-width: 1200px) {
    .contacts-table {
        min-width: 1000px;
    }
    .contacts-contact-cell {
        width: 280px;
        max-width: 280px;
    }
    .contacts-crm-cell {
        width: 150px;
        max-width: 150px;
    }
}

/* ===== Meetings table view aligned with calls/contacts tables ===== */
.meetings-table-card {
    margin-top: 0;
}

.meetings-table-wrap {
    overflow-x: auto;
}

.meetings-table {
    min-width: 1100px;
}

.meetings-data-row {
    cursor: pointer;
}

.meetings-data-row td {
    vertical-align: middle;
}

.meetings-data-row.is-expanded {
    background: rgba(143, 214, 148, 0.055);
}

.meetings-data-row.is-expanded td {
    border-bottom-color: rgba(143, 214, 148, 0.14);
}

.meetings-title-cell {
    width: 320px;
    max-width: 320px;
}

.meetings-organizer-cell {
    width: 160px;
    max-width: 160px;
}

.meetings-participants-cell {
    width: 280px;
    max-width: 280px;
}

.meetings-type-cell {
    width: 82px;
    text-align: center;
}

.meetings-table-title,
.meetings-participants-title {
    color: var(--text-primary);
    line-height: 1.18;
    word-break: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meetings-table-title {
    font-weight: 800;
}

.meetings-participants-title {
    font-weight: 650;
    font-size: 0.84rem;
}

.meetings-participants-title {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: initial;
    white-space: normal;
}

.meetings-details-row td {
    padding: 0;
    background: rgba(0, 0, 0, 0.14);
}

.meetings-details-row:hover {
    background: rgba(0, 0, 0, 0.14) !important;
}

.meetings-details-panel {
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(143, 214, 148, 0.12);
}

.meetings-details-panel .meeting-body {
    display: none;
    border: 0;
    padding: 0;
    background: transparent;
}

.meetings-data-row.is-expanded .contacts-table-chevron {
    transform: rotate(180deg);
    color: var(--success-soft);
}

.page-size-picker {
    position: relative;
    display: inline-flex;
}

.page-size-menu {
    left: 0;
    width: 72px;
    min-width: 72px;
}

.page-size-menu::before {
    left: 28px;
}

.page-size-option {
    justify-content: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.page-size-option.active::before {
    left: 12px;
}

@media (max-width: 1200px) {
    .meetings-table {
        min-width: 1000px;
    }
    .meetings-title-cell {
        width: 270px;
        max-width: 270px;
    }
    .meetings-participants-cell {
        width: 240px;
        max-width: 240px;
    }
}

/* Unified inline search above calls/contacts tables */
.inline-table-search {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.inline-table-search-input-wrap {
    flex: 1 1 420px;
    max-width: 680px;
    min-width: 260px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 5px 4px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(28, 28, 28, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.20);
}

.inline-table-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 650;
}

.inline-table-search-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
    font-weight: 600;
}

.inline-table-search-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--bg-base);
    background: var(--success-soft);
    box-shadow: 0 8px 20px rgba(143, 214, 148, 0.18);
    cursor: pointer;
    transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.inline-table-search-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 24px rgba(143, 214, 148, 0.24);
}

.inline-table-search-check {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 750;
    user-select: none;
    cursor: pointer;
}

.inline-table-search-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--success-soft);
    cursor: pointer;
}

@media (max-width: 980px) {
    .inline-table-search {
        align-items: stretch;
    }
    .inline-table-search-input-wrap {
        max-width: none;
        flex-basis: 100%;
    }
}

/* ===== Calls filter dropdown overflow + pagination active mark spacing ===== */
#view-calls .sidebar,
#view-calls .sidebar-list,
#view-calls .meetings-filter-sidebar,
#view-calls .meetings-filter-accordion,
#view-calls .meetings-filter-item.active,
#view-calls .meetings-filter-body,
#view-calls .calls-multiselect {
    overflow: visible;
}

#view-calls .meetings-filter-item.active {
    position: relative;
    z-index: 30;
}

#view-calls .calls-multiselect.open {
    z-index: 4300;
}

#view-calls .calls-multiselect-menu {
    z-index: 4400;
}

.page-size-option.active::before {
    left: 6px;
}


.meeting-recording-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.35;
    overflow: hidden;
}

.meeting-recording-link a {
    display: block;
    max-width: 100%;
    color: var(--accent-blue);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meeting-recording-link a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.meeting-recording-link-empty {
    color: var(--text-muted);
    border-style: dashed;
}

.contact-timeline-item.is-meeting .contact-timeline-marker {
    background: rgba(100, 181, 246, 0.12);
    border-color: rgba(100, 181, 246, 0.32);
    color: #90caf9;
}

.contact-timeline-meeting-body {
    align-items: stretch;
}

.contact-timeline-meeting-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-timeline-meeting-link {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(100, 181, 246, 0.10);
    border: 1px solid rgba(100, 181, 246, 0.22);
    color: #bbdefb;
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-timeline-meeting-link:hover {
    color: #e3f2fd;
    background: rgba(100, 181, 246, 0.16);
    border-color: rgba(100, 181, 246, 0.36);
}

.contact-timeline-meeting-summary {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.065);
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.contact-timeline-meeting-summary.is-empty {
    color: var(--text-secondary);
}

.contact-timeline-meeting-summary > :last-child {
    margin-bottom: 0;
}

.calls-details-analysis-wrap {
    position: relative;
}
.calls-details-analysis-wrap.is-waiting .calls-details-columns {
    filter: blur(2px);
    opacity: 0.45;
    pointer-events: none;
}
.calls-details-analysis-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--accent-blue);
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(13, 17, 23, 0.52);
    border-radius: 14px;
    border: 1px solid rgba(88, 166, 255, 0.25);
    z-index: 2;
}
.call-ai-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid transparent;
}
.call-ai-status.is-done { color: #7ee787; border-color: rgba(126,231,135,.35); background: rgba(46,160,67,.12); }
.call-ai-status.is-processing, .call-ai-status.is-pending { color: var(--accent-blue); border-color: rgba(88,166,255,.35); background: rgba(88,166,255,.10); }
.call-ai-status.is-skipped { color: #d0d7de; border-color: rgba(139,148,158,.35); background: rgba(139,148,158,.10); }
.call-ai-status.is-failed { color: #ff7b72; border-color: rgba(255,123,114,.35); background: rgba(248,81,73,.10); }
.calls-crm-with-ai {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.call-qualifying-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(210, 153, 34, .16);
    border: 1px solid rgba(210, 153, 34, .55);
    color: #d29922;
    font-weight: 900;
    font-size: .78rem;
    box-shadow: 0 0 0 2px rgba(210,153,34,.06);
}

/* ===== Call AI visual refinements ===== */
.calls-details-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}
.calls-details-main {
    grid-column: 1 / -1;
}
.calls-type-qualifying {
    color: #d29922 !important;
    background: rgba(210, 153, 34, .16) !important;
    border: 1px solid rgba(210, 153, 34, .55) !important;
    font-weight: 950;
    font-size: .84rem;
    box-shadow: 0 0 0 2px rgba(210,153,34,.06);
}
.calls-type-robot {
    color: var(--success-soft) !important;
    background: rgba(143, 214, 148, 0.10) !important;
    border: 1px solid rgba(143, 214, 148, 0.25) !important;
    font-size: 1.02rem;
    box-shadow: 0 0 0 2px rgba(143,214,148,.05);
}
.calls-ai-type-filter .calls-multiselect-menu {
    z-index: 90;
}

/* Contact history AI analysis */
.contact-history-analysis-panel {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.72);
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.contact-history-analysis-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.contact-history-analysis-status {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 999px;
    padding: 6px 10px;
}

.contact-history-analysis-placeholder {
    position: relative;
    min-height: 128px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.55);
}

.contact-history-analysis-placeholder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    filter: blur(3px);
    opacity: 0.38;
}

.contact-history-analysis-placeholder-grid > div {
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(148,163,184,.16), rgba(148,163,184,.08));
}

.contact-history-analysis-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-weight: 900;
    color: #e5e7eb;
    background: rgba(2, 6, 23, 0.48);
    backdrop-filter: blur(1px);
}

.contact-history-analysis-stage {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.contact-history-analysis-stage-title {
    font-size: 0.78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #93c5fd;
    font-weight: 900;
    margin-bottom: 8px;
}

.contact-timeline-meeting-info.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.contact-timeline-meeting-analysis-btn {
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12);
    color: #bfdbfe;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.78rem;
    font-weight: 800;
}

.contact-timeline-meeting-analysis-btn:hover {
    background: rgba(59, 130, 246, 0.22);
    color: #fff;
}

.contact-meeting-analysis-modal-body {
    background: #050b16;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    max-height: 72vh;
    overflow: auto;
    padding: 22px;
}

.contact-meeting-analysis-modal-text {
    text-align: left;
    color: #e5e7eb;
}


/* Contact history AI stage 2: current stage first, collapsed full history */
.contact-history-analysis-result {
    margin-top: 8px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(18, 18, 18, 0.58);
    border: 1px solid rgba(255,255,255,0.09);
}

.contact-history-analysis-stage {
    margin-top: 0;
    padding: 14px 16px 16px;
    border-top: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(59, 130, 246, 0.055);
}

.contact-history-analysis-stage-title {
    padding-left: 0;
    margin-bottom: 8px;
}

.contact-history-analysis-stage-body {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.contact-history-analysis-details {
    background: rgba(255, 255, 255, 0.018);
}

.contact-history-analysis-details > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 850;
    background: rgba(255,255,255,0.045);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.contact-history-analysis-details > summary::-webkit-details-marker {
    display: none;
}

.contact-history-analysis-details > summary::after {
    content: '▾';
    color: var(--text-secondary);
    font-size: 0.78rem;
    transition: transform 0.14s ease;
}

.contact-history-analysis-details[open] > summary::after {
    transform: rotate(180deg);
}

.contact-history-analysis-details-hint {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contact-history-analysis-details[open] .contact-history-analysis-details-hint {
    display: none;
}

.contact-history-analysis-history-body {
    max-height: 520px;
    overflow: auto;
    padding: 16px !important;
}

.contact-history-ai-stats {
    min-height: 46px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.42);
    padding: 12px;
}

.contact-history-ai-stat-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-history-ai-stat-summary,
.contact-history-ai-stat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-history-ai-stat-summary > div,
.contact-history-ai-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 11px;
    background: rgba(30, 41, 59, 0.74);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-size: 0.82rem;
}

.contact-history-ai-stat-summary strong,
.contact-history-ai-stat-pill strong {
    color: #ffffff;
    font-size: 0.9rem;
}

.contact-history-ai-stat-pill.status-new,
.contact-history-ai-stat-pill.status-processing,
.contact-history-ai-stat-pill.status-waiting_retry {
    border-color: rgba(56, 189, 248, 0.34);
    background: rgba(14, 116, 144, 0.18);
}

.contact-history-ai-stat-pill.status-done {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(22, 101, 52, 0.18);
}

.contact-history-ai-stat-pill.status-skipped {
    border-color: rgba(250, 204, 21, 0.32);
    background: rgba(113, 63, 18, 0.18);
}

.contact-history-ai-stat-pill.status-failed {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.18);
}

/* Contact DB stage: compact manual history reanalysis action */
.contact-history-analysis-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.contact-history-reanalyze-btn {
    width: 31px;
    height: 31px;
    border-radius: 999px;
    border: 1px solid rgba(210, 153, 34, 0.52);
    background: rgba(210, 153, 34, 0.18);
    color: #facc15;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(210,153,34,.06);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.contact-history-reanalyze-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(210, 153, 34, 0.28);
    border-color: rgba(250, 204, 21, 0.72);
}

.contact-history-reanalyze-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ===== Contacts manager filter dropdown ===== */
#view-contacts .sidebar,
#view-contacts .sidebar-list,
#view-contacts .meetings-filter-sidebar,
#view-contacts .meetings-filter-accordion,
#view-contacts .meetings-filter-item.active,
#view-contacts .meetings-filter-body,
#view-contacts .calls-multiselect {
    overflow: visible;
}

#view-contacts .meetings-filter-item.active {
    position: relative;
    z-index: 30;
}

#view-contacts .calls-multiselect.open {
    z-index: 4300;
}

#view-contacts .calls-multiselect-menu {
    z-index: 4400;
}

/* ===== Bitrix timeline comments in contact card ===== */
.contact-history-bitrix-comments-btn {
    width: 31px;
    height: 31px;
    border-radius: 999px;
    border: 1px solid rgba(88, 166, 255, 0.42);
    background: rgba(88, 166, 255, 0.14);
    color: #93c5fd;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(88,166,255,.05);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.contact-history-bitrix-comments-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(88, 166, 255, 0.24);
    border-color: rgba(147, 197, 253, 0.72);
}

.contact-history-bitrix-comments-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.contact-timeline-item.is-crm-comment .contact-timeline-marker {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.30);
    color: #d8b4fe;
}

.contact-timeline-comment-body {
    align-items: stretch;
}

.contact-timeline-comment-text {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.14);
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Live queue terminals for AI workers */
.queue-live-terminal {
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.74);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.queue-live-terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.queue-live-terminal-hint {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.74rem;
}

.queue-live-terminal-body {
    min-height: 160px;
    max-height: 360px;
    overflow: auto;
    padding: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #cbd5e1;
}

.queue-terminal-empty,
.queue-terminal-error {
    padding: 8px 10px;
    color: #94a3b8;
}

.queue-terminal-error {
    color: #fca5a5;
}

.queue-terminal-line {
    border-left: 3px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.64);
    border-radius: 10px;
    padding: 9px 10px;
    margin-bottom: 8px;
}

.queue-terminal-line.status-new,
.queue-terminal-line.status-processing,
.queue-terminal-line.status-waiting_retry {
    border-left-color: rgba(56, 189, 248, 0.78);
}

.queue-terminal-line.status-done {
    border-left-color: rgba(34, 197, 94, 0.82);
}

.queue-terminal-line.status-skipped {
    border-left-color: rgba(250, 204, 21, 0.82);
}

.queue-terminal-line.status-failed {
    border-left-color: rgba(248, 113, 113, 0.82);
}

.queue-terminal-line-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #94a3b8;
    margin-bottom: 4px;
}

.queue-terminal-time {
    color: #7dd3fc;
}

.queue-terminal-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(30, 41, 59, 0.86);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 800;
}

.queue-terminal-id,
.queue-terminal-muted,
.queue-terminal-extra,
.queue-terminal-meta {
    color: #94a3b8;
}

.queue-terminal-contact {
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 3px;
}

.queue-terminal-trigger {
    color: #cbd5e1;
}

.queue-terminal-extra,
.queue-terminal-meta,
.queue-terminal-error {
    margin-top: 4px;
    font-size: 0.74rem;
}

.contacts-stage-cell {
    width: 158px;
    max-width: 158px;
}

.contacts-stage-empty {
    color: var(--text-secondary);
    opacity: 0.7;
    font-weight: 700;
}

.contacts-stage-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 146px;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px solid rgba(70, 130, 180, 0.24);
    background: rgba(70, 130, 180, 0.10);
    color: #bcdcff;
    line-height: 1.05;
}

.contacts-stage-entity {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.82;
}

.contacts-stage-name {
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 850;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-stage-success,
.contacts-stage-color-green {
    background: rgba(34, 197, 94, 0.13);
    border-color: rgba(34, 197, 94, 0.34);
    color: #a7f3b4;
}

.contacts-stage-failure,
.contacts-stage-fail,
.contacts-stage-failed,
.contacts-stage-color-red {
    background: rgba(248, 81, 73, 0.13);
    border-color: rgba(248, 81, 73, 0.34);
    color: #ffaaa4;
}

.contacts-stage-process,
.contacts-stage-p,
.contacts-stage-color-blue {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.38);
    color: #bfd5ff;
}

.contacts-stage-color-sky {
    background: rgba(56, 189, 248, 0.13);
    border-color: rgba(56, 189, 248, 0.34);
    color: #bae6fd;
}

.contacts-stage-color-pale-blue {
    background: rgba(186, 230, 253, 0.13);
    border-color: rgba(186, 230, 253, 0.34);
    color: #d8f3ff;
}

.contacts-stage-color-yellow {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.38);
    color: #fde68a;
}

.contacts-stage-color-teal {
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(20, 184, 166, 0.36);
    color: #99f6e4;
}

.contacts-stage-color-orange {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.36);
    color: #fed7aa;
}

/* ===== Contacts visual CRM stage pipeline filter ===== */
.contacts-stage-pipeline-filter {
    margin: 8px 0 12px;
}

.contacts-stage-filter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(17, 24, 39, 0.46));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.16);
}

.contacts-stage-lane {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.contacts-stage-lane-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #cbd5e1;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.contacts-stage-lane-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.075);
    font-size: 0.72rem;
}

.contacts-stage-steps {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    padding: 1px 2px 3px 1px;
}

.contacts-stage-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 25px;
    padding: 0 18px 0 12px;
    margin-right: -8px;
    border: 0;
    border-radius: 8px 0 0 8px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 10px 50%);
    color: #f8fafc;
    font-size: 0.71rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, filter .12s ease, opacity .12s ease, box-shadow .12s ease;
    box-shadow: none;
}

.contacts-stage-step span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-stage-step:first-child {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.contacts-stage-step.is-last {
    margin-right: 0;
    border-radius: 8px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}

.contacts-stage-step:first-child.is-last {
    clip-path: none;
}

.contacts-stage-step:hover {
    transform: translateY(-1px);
    filter: brightness(1.08) saturate(1.1);
    z-index: 4;
}

.contacts-stage-step.is-muted {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.44), rgba(51, 65, 85, 0.32)) !important;
    color: rgba(203, 213, 225, 0.68);
    text-shadow: none;
    box-shadow: none;
    opacity: 0.72;
}

.contacts-stage-step.is-muted:hover {
    opacity: 0.92;
}

.contacts-stage-step-sky.is-active { background: rgba(56, 189, 248, .18); color: #bae6fd; }
.contacts-stage-step-blue.is-active { background: rgba(37, 99, 235, .2); color: #bfdbfe; }
.contacts-stage-step-yellow.is-active { background: rgba(250, 204, 21, .18); color: #fde68a; text-shadow: none; }
.contacts-stage-step-green.is-active { background: rgba(34, 197, 94, .17); color: #bbf7d0; }
.contacts-stage-step-teal.is-active { background: rgba(45, 212, 191, .16); color: #99f6e4; }
.contacts-stage-step-orange.is-active { background: rgba(251, 146, 60, .17); color: #fed7aa; }
.contacts-stage-step-pale-blue.is-active { background: rgba(147, 197, 253, .16); color: #dbeafe; text-shadow: none; }
.contacts-stage-step-red.is-active { background: rgba(248, 113, 113, .18); color: #fecaca; }


.contacts-stage-cell {
    width: 156px;
    max-width: 156px;
}

.contacts-stage-badge {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    max-width: 148px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 12px rgba(0,0,0,.10);
}

.contacts-stage-entity {
    opacity: .78;
    font-size: .67rem;
}

.contacts-stage-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-stage-empty {
    color: rgba(148, 163, 184, .64);
    font-weight: 800;
}

.contacts-stage-color-sky { background: rgba(56, 189, 248, .18); border: 1px solid rgba(56, 189, 248, .34); color: #bae6fd; }
.contacts-stage-color-blue { background: rgba(37, 99, 235, .2); border: 1px solid rgba(96, 165, 250, .34); color: #bfdbfe; }
.contacts-stage-color-yellow { background: rgba(250, 204, 21, .18); border: 1px solid rgba(250, 204, 21, .38); color: #fde68a; }
.contacts-stage-color-green { background: rgba(34, 197, 94, .17); border: 1px solid rgba(74, 222, 128, .34); color: #bbf7d0; }
.contacts-stage-color-teal { background: rgba(45, 212, 191, .16); border: 1px solid rgba(45, 212, 191, .34); color: #99f6e4; }
.contacts-stage-color-orange { background: rgba(251, 146, 60, .17); border: 1px solid rgba(251, 146, 60, .36); color: #fed7aa; }
.contacts-stage-color-pale-blue { background: rgba(147, 197, 253, .16); border: 1px solid rgba(147, 197, 253, .34); color: #dbeafe; }
.contacts-stage-color-red { background: rgba(248, 113, 113, .18); border: 1px solid rgba(248, 113, 113, .38); color: #fecaca; }

@media (max-width: 1300px) {
    .contacts-stage-step {
        font-size: 0.68rem;
        padding-left: 10px;
        padding-right: 16px;
    }
    .contacts-stage-lane {
        grid-template-columns: 78px minmax(0, 1fr);
    }
}

.contact-timeline-item.is-wazzup .contact-timeline-marker {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(74, 222, 128, 0.42);
    color: #25d366;
}

.contact-whatsapp-logo {
    width: 22px;
    height: 22px;
    display: block;
}

.contact-timeline-item.is-wazzup .contact-timeline-comment-text {
    background: rgba(34, 197, 94, 0.07);
    border-color: rgba(74, 222, 128, 0.18);
}