/* =========================================================
   WORKANT APP CSS (Dual Theme) — FULL REBUILD
   - Theme: body.theme-dark / body.theme-light
   - Includes: layout, buttons, cards, task cards, modals (page scroll),
     popovers (Bootstrap4), select2 in popovers, toast, highlight, remove anim
   ========================================================= */

/* ---------------------------
   1) TOKENS (DEFAULT = DARK)
   --------------------------- */
a {
    text-decoration: none;
}

:root {
    --wa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Base */
    --wa-bg0: #070A12;
    --wa-bg1: #0A1222;
    --wa-text: rgba(233, 238, 251, .92);
    --wa-text-strong: rgba(233, 238, 251, .98);
    --wa-muted: rgba(233, 238, 251, .70);
    --wa-muted2: rgba(36, 57, 224, 0.55);

    /* Surfaces */
    --wa-surface: rgba(14, 20, 40, 1);
    --wa-surface-2: rgba(8, 10, 18, 1);
    --wa-surface-3: rgba(255, 255, 255, 1);

    /* Borders & shadows */
    --wa-border: rgba(140, 170, 255, .18);
    --wa-border-soft: rgba(255, 255, 255, .10);
    --wa-shadow-lg: 0 22px 80px rgba(0, 0, 0, .55);
    --wa-shadow-md: 0 14px 44px rgba(0, 0, 0, .35);

    /* Accent */
    --wa-accent: #34ffb6;
    --wa-accent2: #6d7bff;
    --wa-accent-soft: rgba(52, 255, 182, .12);
    --wa-accent-border: rgba(52, 255, 182, .22);

    /* Danger */
    --wa-danger: #ff5a5a;
    --wa-danger-soft: rgba(255, 90, 90, .10);
    --wa-danger-border: rgba(255, 90, 90, .28);
    --wa-danger-text: rgba(255, 210, 210, .95);

    /* Grid */
    --wa-grid-line: rgba(255, 255, 255, .05);

    /* Controls */
    --wa-radius-xl: 18px;
    --wa-radius-lg: 16px;
    --wa-radius-md: 14px;
    --wa-radius-pill: 999px;

    /* Transition */
    --wa-tr-fast: 150ms ease;
    --wa-tr-med: 240ms ease;

    /* Sizes */
    --wa-topbar-h: 64px;
    --wa-sidebar-w: 350px;
}

/* ---------------------------
   2) LIGHT THEME OVERRIDES
   --------------------------- */
body.theme-light {
    --wa-bg0: #f6f8ff;
    --wa-bg1: #eef3ff;
    --wa-text: rgba(10, 18, 40, .88);
    --wa-text-strong: rgba(10, 18, 40, .95);
    --wa-muted: rgba(10, 18, 40, .09);
    --wa-muted2: rgba(227, 161, 19, 0.5);

    --wa-surface: rgba(255, 255, 255, 1);
    --wa-surface-2: rgba(255, 255, 255, 1);
    --wa-surface-3: rgba(255, 255, 255, 1);

    --wa-border: rgba(10, 18, 40, .10);
    --wa-border-soft: rgba(10, 18, 40, .10);

    --wa-shadow-lg: 0 22px 70px rgba(20, 30, 70, .12);
    --wa-shadow-md: 0 14px 44px rgba(20, 30, 70, .10);

    --wa-accent-soft: rgba(52, 255, 182, .18);
    --wa-accent-border: rgba(52, 255, 182, .35);
    --wa-accent: rgba(52, 255, 182, 1);
    --wa-accent2: rgba(109, 123, 255, 1);

    --wa-danger-soft: rgba(255, 90, 90, .08);
    --wa-danger-border: rgba(255, 90, 90, .22);
    --wa-danger-text: rgba(120, 10, 20, .85);

    --wa-grid-line: rgba(10, 18, 40, .06);
}

/* default */
body:not(.theme-light):not(.theme-dark) {
}

/* ---------------------------
   3) GLOBAL BASE + POPOVER TOKENS
   --------------------------- */
body.theme-dark, body.theme-light, .wa-app {
    overflow-x: hidden;
    margin: 0;
    min-height: 100vh;
    font-family: var(--wa-font);
    color: var(--wa-text);
    background: linear-gradient(180deg, var(--wa-bg0), var(--wa-bg1));
}

/* Popover tokens by theme */
body.theme-dark {
    --px-bg: #1e1f24;
    --px-bg-head: #262730;
    --px-text: #e6e7eb;
    --px-border: rgba(255, 255, 255, .08);
    --px-shadow: 0 14px 40px rgba(0, 0, 0, .65);
    --px-accent: #34ffb6;
    --px-danger: #ff6b6b;
}

body.theme-light {
    --px-bg: #ffffff;
    --px-bg-head: #f5f6f8;
    --px-text: #1f2937;
    --px-border: rgba(0, 0, 0, .12);
    --px-shadow: 0 12px 30px rgba(0, 0, 0, .15);
    --px-accent: #2563eb;
    --px-danger: #dc2626;
}

a {
    color: inherit;
}

* {
    box-sizing: border-box;
}

/* ---------------------------
   4) BACKDROP GRID/GLOW
   --------------------------- */
.wa-app-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.wa-app-grid {
    position: absolute;
    inset: -2px;
    background-image: linear-gradient(to right, var(--wa-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wa-grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .14;
    mask-image: radial-gradient(700px 520px at 60% 20%, black 35%, transparent 72%);
}

.wa-app-glow {
    position: absolute;
    width: 760px;
    height: 760px;
    filter: blur(80px);
    opacity: .22;
    border-radius: 50%;
}

.wa-app-glow-a {
    left: -260px;
    top: -260px;
    background: radial-gradient(circle, rgba(52, 255, 182, .55), transparent 62%);
}

.wa-app-glow-b {
    right: -260px;
    top: -220px;
    background: radial-gradient(circle, rgba(109, 123, 255, .45), transparent 62%);
}

body.theme-light .wa-app-glow {
    opacity: .26;
}

/* ---------------------------
   5) TENANT LAYOUT
   --------------------------- */
.wa-shell-app {
    position: relative;
    /*display: grid;*/
    grid-template-columns: var(--wa-sidebar-w) 1fr;
    min-height: 100vh;
}

.wa-sidebar {
    padding: 18px 14px;
    border-right: 1px solid var(--wa-border);
    background: var(--wa-surface-2);
    backdrop-filter: blur(12px);
}

.wa-side-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 10px 14px;
    margin-bottom: 6px;
}

.wa-side-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: radial-gradient(circle at 30% 30%, rgba(52, 255, 182, .95), rgba(52, 255, 182, .15) 55%, transparent 60%),
    radial-gradient(circle at 70% 25%, rgba(109, 123, 255, .85), rgba(109, 123, 255, .10) 55%, transparent 60%),
    rgba(255, 255, 255, .04);
    border: 1px solid var(--wa-border-soft);
    box-shadow: 0 10px 35px rgba(52, 255, 182, .12);
}

body.theme-light .wa-side-logo {
    box-shadow: 0 10px 35px rgba(20, 30, 70, .10);
}

.wa-side-name {
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--wa-text-strong);
}

.wa-side-sub {
    font-size: 12px;
    color: var(--wa-muted);
    margin-top: 2px;
}

.wa-nav {
    padding: 8px 6px;
}

.wa-nav-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    border-radius: var(--wa-radius-md);
    color: var(--wa-text);
    text-decoration: none;
    transition: transform var(--wa-tr-fast), background var(--wa-tr-fast), border-color var(--wa-tr-fast);
    border: 1px solid transparent;
}

.wa-nav-item:hover {
    background: var(--wa-surface-3);
    transform: translateY(-1px);
    border-color: var(--wa-border);
}

.wa-nav-item.is-active {
    background: var(--wa-accent-soft);
    border-color: var(--wa-accent-border);
}

.wa-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
    box-shadow: 0 0 0 4px rgba(109, 123, 255, .10);
}

body.theme-light .wa-nav-dot {
    box-shadow: 0 0 0 4px rgba(109, 123, 255, .12);
}

.wa-nav-group {
    margin-top: 12px;
}

.wa-nav-group-title {
    font-size: 12px;
    color: var(--wa-muted2);
    padding: 10px 10px 6px;
    text-transform: uppercase;
    letter-spacing: .30em;
}

.wa-nav-sub {
    padding: 4px 4px 10px 22px;
}

.wa-nav-subitem {
    display: block;
    padding: 8px 10px;
    color: var(--wa-muted);
    text-decoration: none;
    border-radius: 10px;
    transition: background var(--wa-tr-fast);
}

.wa-nav-subitem:hover {
    background: var(--wa-surface-3);
}

.wa-side-foot {
    position: sticky;
    top: calc(100vh - 70px);
    padding: 12px 10px;
}

.wa-logout {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: var(--wa-radius-md);
    border: 1px solid var(--wa-border-soft);
    color: var(--wa-text);
    text-decoration: none;
    background: var(--wa-surface-3);
    transition: background var(--wa-tr-fast);
}

.wa-logout:hover {
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-logout:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-main {
    display: flex;
    flex-direction: column;
}

.wa-topbar {
    height: var(--wa-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--wa-border);
    background: var(--wa-surface-2);
    backdrop-filter: blur(12px);
}

.wa-topbar-title {
    font-weight: 750;
    color: var(--wa-text-strong);
}

.wa-userchip {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--wa-radius-pill);
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
}

.wa-userchip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
    box-shadow: 0 0 0 4px rgba(109, 123, 255, .10);
}

.wa-userchip-text {
    font-size: 13px;
    color: var(--wa-text);
}

.wa-content {
    padding: 18px;
}

/* headers */
.wa-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.wa-h1 {
    margin: 0;
    font-size: 22px;
    color: var(--wa-text-strong);
}

.wa-muted {
    color: var(--wa-muted);
    margin-top: 6px;
    font-size: 13px;
}

.wa-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wa-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--wa-radius-pill);
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    font-size: 12px;
    color: var(--wa-muted);
    font-weight: 650;
}

.wa-pill--click {
    cursor: pointer;
}

.wa-pill--click:hover {
    transform: translateY(-1px);
}

/* cards */
.wa-card {
    width: auto;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius-lg);
    box-shadow: var(--wa-shadow-lg);
    padding: 16px;
    backdrop-filter: blur(12px);
}

.wa-card-title {
    font-weight: 750;
    margin-bottom: 8px;
    color: var(--wa-text-strong);
}

.wa-card-text {
    color: var(--wa-muted);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .wa-shell-app {
        grid-template-columns: 1fr;
    }

    .wa-sidebar {
        display: none;
    }
}

/* ---------------------------
   6) BUTTONS
   --------------------------- */
.wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--wa-radius-md);
    text-decoration: none;
    font-weight: 750;
    letter-spacing: .1px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
    user-select: none;
    transition: transform var(--wa-tr-fast), background var(--wa-tr-fast), border-color var(--wa-tr-fast), filter var(--wa-tr-fast);
}

.wa-btn:hover {
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-btn:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-btn-primary {
    border-color: var(--wa-accent-border);
    /*background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));*/
    color: #061018;
    box-shadow: var(--wa-shadow-md);
}

body.theme-dark .wa-btn-primary {
    box-shadow: 0 14px 40px rgba(52, 255, 182, .16);
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
}

body.theme-light .wa-btn-primary {
    box-shadow: 0 14px 40px rgba(20, 30, 70, .14);
}

.wa-btn-primary:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.wa-btn-ghost {
    background: rgba(255, 255, 255, .02);
}

body.theme-light .wa-btn-ghost {
    background: rgba(255, 255, 255, .40);
}

.wa-btn-danger {
    border-color: var(--wa-danger-border);
    background: var(--wa-danger-soft);
    color: var(--wa-danger-text);
}

.wa-btn-danger:hover {
    background: rgba(255, 90, 90, .14);
}

/* ---------------------------
   7) TASK CARDS (rich)
   --------------------------- */
.wa-super-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 14px;
}

.wa-tcard {
    position: relative;
    border-radius: 22px;
    padding: 14px 14px 12px;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    box-shadow: var(--wa-shadow-md);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: transform var(--wa-tr-fast), box-shadow var(--wa-tr-fast), border-color var(--wa-tr-fast);
}

.wa-tcard:hover {
    transform: translateY(-2px);
    border-color: var(--wa-accent-border);
    box-shadow: var(--wa-shadow-lg);
}

.wa-tcard__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wa-tcard__id {
    font-weight: 750;
    font-size: 12px;
    color: var(--wa-muted2);
}

.wa-tcard__check {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--wa-tr-fast), transform var(--wa-tr-fast);
}

.wa-tcard__check:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

body.theme-light .wa-tcard__check:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-tcard__title {
    font-size: 16px;
    font-weight: 850;
    letter-spacing: .1px;
    color: var(--wa-text-strong);
    margin-bottom: 4px;
    line-height: 1.25;
}

.wa-tcard__sub {
    font-size: 12.5px;
    color: var(--wa-muted);
    line-height: 1.45;
    margin-bottom: 10px;
}

.wa-tcard__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wa-pill--date {
    color: var(--wa-text);
}

.wa-pill--danger {
    border-color: var(--wa-danger-border);
    background: var(--wa-danger-soft);
    color: var(--wa-danger-text);
}

.wa-meta-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wa-muted);
    font-size: 12px;
}

.wa-meta-num {
    font-weight: 750;
    opacity: .9;
}

.wa-tcard__progress {
    margin-bottom: 10px;
}

.wa-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

body.theme-light .wa-bar {
    background: rgba(10, 18, 40, .08);
}

.wa-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
}

/* badges */
.wa-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    background: rgba(109, 123, 255, .45);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.wa-badge--critical {
    background: rgba(255, 70, 90, .92);
    border-radius: 22px 22px 0 0;
}

.wa-badge--danger {
    background: rgba(255, 90, 90, .80);
}

.wa-badge--done {
    background: rgba(52, 255, 182, .55);
    color: #061018;
    border-radius: 22px 22px 0 0;
}

.wa-tcard--hasbadge {
    padding-top: 44px;
}

.wa-ico {
    opacity: .9;
}

/* remove animation */
.wa-tcard.wa-removing {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    filter: blur(2px);
    max-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    transition: opacity 200ms ease,
    transform 200ms ease,
    filter 200ms ease,
    max-height 300ms ease,
    margin 300ms ease,
    padding 300ms ease,
    border-width 300ms ease;
}

/* highlight new */
.wa-highlight {
    outline: 2px solid rgba(52, 255, 182, .55);
    box-shadow: 0 0 0 6px rgba(52, 255, 182, .12);
    animation: waPulse 1.8s ease-in-out infinite;
}

@keyframes waPulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1px);
    }
}

/* ---------------------------
   8) MODAL (page scroll, no inner scroll)
   --------------------------- */
.wa-modal {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: none;
    padding: 24px 16px 80px;
}

.wa-modal.is-open {
    display: block;
}

.wa-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
}

.wa-modal-dialog {
    position: relative;
    margin: 80px auto 0;
    width: min(980px, 96vw);
    overflow: visible;
    max-height: none;
    display: block;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius-xl);
    box-shadow: var(--wa-shadow-lg);
    backdrop-filter: blur(14px);
}

.wa-modal-head {

    top: 12px;
    z-index: 2;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

body.theme-light .wa-modal-head {
    border-bottom: 1px solid rgba(10, 18, 40, .08);
}

.wa-modal-title {
    font-weight: 900;
    color: var(--wa-text-strong);
}

.wa-modal-x {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
}

.wa-modal-x:hover {
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-modal-x:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-modal-body {
    overflow: visible !important;
    padding: 25px;
}

.wa-modal-actions {

    bottom: 12px;
    z-index: 2;
    background: inherit;
    padding: 12px 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* forms */
.wa-form .form-label {
    color: var(--wa-muted);
    font-weight: 700;
    margin-bottom: 6px;
}

.wa-input, .wa-form .form-control {
    background: rgba(10, 16, 34, .55);
    border: 1px solid rgba(160, 190, 255, .18);
    color: var(--wa-text-strong);
    border-radius: var(--wa-radius-md);
}

body.theme-light .wa-input,
body.theme-light .wa-form .form-control {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(10, 18, 40, .12);
    color: var(--wa-text-strong);
}

.wa-input:focus, .wa-form .form-control:focus {
    border-color: rgba(52, 255, 182, .55);
    box-shadow: 0 0 0 .18rem rgba(52, 255, 182, .12);
}


/* ---------------------------
   9) TOAST (notifications)
   --------------------------- */
.wa-toast {
    min-width: 320px;
    max-width: 380px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid var(--wa-border);
    background: var(--wa-surface);
    box-shadow: var(--wa-shadow-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
}

.wa-toast.is-in {
    opacity: 1;
    transform: translateY(0);
}

.wa-toast__title {
    font-weight: 750;
    font-size: 13px;
    color: var(--wa-text-strong);
}

.wa-toast__btn {
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    font-weight: 700;
    font-size: 12px;
}

.wa-toast--new {
    border-color: rgba(109, 123, 255, .30);
}

.wa-toast--work {
    border-color: rgba(52, 255, 182, .35);
}

.wa-toast--done {
    border-color: rgba(52, 255, 182, .55);
}

/* =========================================================
   10) POPOVER THEME (Bootstrap4 popover + optional popover-x)
   ========================================================= */
.popover, .popover-x {
    background: var(--px-bg) !important;
    color: var(--px-text) !important;
    border: 1px solid var(--px-border) !important;
    box-shadow: var(--px-shadow) !important;
    border-radius: 18px !important;
}

.popover {
    max-width: 520px !important;
    width: 520px !important;
}

.popover .popover-body,
.popover .popover-content {
    max-height: 420px;
    overflow: auto;
}

@media (max-width: 600px) {
    .popover {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    .popover .popover-body,
    .popover .popover-content {
        max-height: 60vh;
    }
}

.popover .popover-header,
.popover-x .popover-header {

    background: var(--px-bg-head) !important;
    color: var(--px-text) !important;
    border-bottom: 1px solid var(--px-border) !important;
    font-weight: 900;
}

.popover .popover-body,
.popover .popover-content,
.popover-x .popover-content {
    border-radius: 18px;
    background: var(--px-bg) !important;
    color: var(--px-text) !important;
}

/* arrow (BS4) */
.popover .arrow::before,
.popover .arrow::after {
    border-color: transparent !important;
}

.popover.bs-popover-right .arrow::after {
    border-right-color: var(--px-bg) !important;
}

.popover.bs-popover-left .arrow::after {
    border-left-color: var(--px-bg) !important;
}

.popover.bs-popover-top .arrow::after {
    border-top-color: var(--px-bg) !important;
}

.popover.bs-popover-bottom .arrow::after {
    border-bottom-color: var(--px-bg) !important;
}

/* wa-pop content */
.wa-pop {
    min-width: 320px;
}

.wa-pop-title {
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--px-text);
}

.wa-pop-loading {
    opacity: .75;
    color: var(--px-text);
}

.wa-pop-section {
    margin-bottom: 12px;
}

.wa-pop-section-title {
    font-size: 12px;
    font-weight: 800;
    opacity: .75;
    margin-bottom: 8px;
    color: var(--px-text);
}

.wa-pop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.wa-pop-empty {
    opacity: .75;
    font-size: 13px;
    color: var(--px-text);
}

.wa-pop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--px-border);
}

.wa-pop-row:last-child {
    border-bottom: none;
}

.wa-pop-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(52, 255, 182, .25);
    background: rgba(52, 255, 182, .10);
    color: var(--px-accent);
}

/* remove */
.wa-pop-x {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    cursor: pointer;
}

/* set-main */
.wa-pop-main {
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(52, 255, 182, .25);
    background: rgba(52, 255, 182, .10);
    color: var(--px-accent);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
}

body.theme-light .wa-pop-main {
    border-color: rgba(37, 99, 235, .25);
    background: rgba(37, 99, 235, .10);
}

.wa-pop-main:hover {
    opacity: .9;
}

.wa-pop-add {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wa-pop-select {
    flex: 1;
    border-radius: 14px;
    border: 1px solid var(--px-border);
    background: var(--px-bg-head);
    color: var(--px-text);
    padding: 10px 12px;
}

.wa-pop-hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: .75;
    color: var(--px-text);
}

/* Select2 inside popover */
.popover .select2-container--default .select2-selection--single,
.popover .select2-container--default .select2-selection--multiple {
    background: var(--px-bg-head) !important;
    border: 1px solid var(--px-border) !important;
    color: var(--px-text) !important;
}

.popover .select2-selection__rendered {
    color: var(--px-text) !important;
}

.popover .select2-dropdown {
    background: var(--px-bg-head) !important;
    border: 1px solid var(--px-border) !important;
    color: var(--px-text) !important;
}

.popover .select2-results__option--highlighted {
    background: rgba(52, 255, 182, .14) !important;
    color: var(--px-text) !important;
}

body.theme-light .popover .select2-results__option--highlighted {
    background: rgba(37, 99, 235, .12) !important;
    color: var(--px-text) !important;
}

.wa-top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--wa-tr-fast),
    border-color var(--wa-tr-fast),
    transform var(--wa-tr-fast),
    box-shadow var(--wa-tr-fast);
}

.wa-top-action:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

body.theme-light .wa-top-action:hover {
    background: rgba(0, 0, 0, .04);
    box-shadow: 0 6px 20px rgba(20, 30, 70, .12);
}


/* =========================================================
   WORKANT FORM CONTROLS — Premium Unified Inputs
   Applies to: input/textarea/select + Select2 + DatePicker
   Put at END of CSS
   ========================================================= */

/* ----- tokens for controls ----- */
body.theme-light {
    --wa-field-bg: rgba(255, 255, 255, 1);
    --wa-field-border: rgba(10, 18, 40, .14);
    --wa-field-border-hover: rgba(10, 18, 40, .22);
    --wa-field-text: rgba(10, 18, 40, .92);
    --wa-field-placeholder: rgba(10, 18, 40, .45);

    --wa-field-focus: rgba(88, 101, 242, .95); /* blue outline */
    --wa-field-focus-soft: rgba(88, 101, 242, .18); /* glow */
    --wa-field-shadow: 0 10px 30px rgba(20, 30, 70, .10);
}

body.theme-dark {
    --wa-field-bg: rgba(12, 16, 30, 1);
    --wa-field-border: rgba(140, 170, 255, .22);
    --wa-field-border-hover: rgba(140, 170, 255, .32);
    --wa-field-text: rgba(233, 238, 251, .95);
    --wa-field-placeholder: rgba(233, 238, 251, .48);

    --wa-field-focus: rgba(52, 255, 182, .90); /* accent outline */
    --wa-field-focus-soft: rgba(52, 255, 182, .16); /* glow */
    --wa-field-shadow: 0 14px 44px rgba(0, 0, 0, .35);
}

/* ----- base inputs ----- */
.wa-input,
.wa-form .form-control,
input.form-control,
textarea.form-control,
select.form-control {
    background: var(--wa-field-bg) !important;
    color: var(--wa-field-text) !important;
    border: 1px solid var(--wa-field-border) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    min-height: 50px;
    box-shadow: var(--wa-field-shadow);
    outline: none;
    transition: border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

/* textarea sizes */
textarea.form-control,
.wa-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* placeholder */
.wa-input::placeholder,
.wa-form .form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--wa-field-placeholder) !important;
}

/* hover */
.wa-input:hover,
.wa-form .form-control:hover,
input.form-control:hover,
textarea.form-control:hover,
select.form-control:hover {
    border-color: var(--wa-field-border-hover) !important;
}

/* focus */
.wa-input:focus,
.wa-form .form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--wa-field-focus) !important;
    box-shadow: 0 0 0 4px var(--wa-field-focus-soft),
    var(--wa-field-shadow) !important;
    transform: translateY(-1px);
}

/* labels */
.wa-form .form-label,
label.form-label,
label {
    font-weight: 800;
    color: var(--wa-muted);
    margin-bottom: 8px;
}

/* ---------------------------------------------------------
   SELECT2 (Kartik / Select2) — match inputs
   --------------------------------------------------------- */

/* container */
.select2-container {
    width: 100% !important;
}

/* selection single/multiple */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--wa-field-bg) !important;
    color: var(--wa-field-text) !important;
    border: 1px solid var(--wa-field-border) !important;
    border-radius: 18px !important;
    min-height: 50px !important;
    padding: 10px 12px !important;
    box-shadow: var(--wa-field-shadow) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* remove default arrow positioning and make it clean */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 12px !important;
    top: 1px !important;
}

/* rendered text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wa-field-text) !important;
    line-height: 28px !important;
    padding-left: 6px !important;
}

/* placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wa-field-placeholder) !important;
}

/* multiple chips */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 2px 6px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid var(--wa-field-border) !important;
    color: var(--wa-field-text) !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    margin: 4px 0 0 0 !important;
    font-weight: 750;
}

body.theme-light .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(0, 0, 0, .04) !important;
}

/* focus state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--wa-field-focus) !important;
    box-shadow: 0 0 0 4px var(--wa-field-focus-soft),
    var(--wa-field-shadow) !important;
    transform: translateY(-1px);
}

/* dropdown */
.select2-container--default .select2-dropdown {
    background: var(--wa-field-bg) !important;
    border: 1px solid var(--wa-field-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--wa-shadow-lg) !important;
    overflow: hidden;
}

/* search input inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: transparent !important;
    border: 1px solid var(--wa-field-border) !important;
    border-radius: 14px !important;
    color: var(--wa-field-text) !important;
    padding: 10px 12px !important;
    outline: none !important;
}

/* results options */
.select2-container--default .select2-results__option {
    color: var(--wa-field-text) !important;
    padding: 10px 12px !important;
}

/* hover/active option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--wa-field-focus-soft) !important;
    color: var(--wa-field-text) !important;
}

/* selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(0, 0, 0, .05) !important;
}

body.theme-dark .select2-container--default .select2-results__option[aria-selected="true"] #waTmpDate {
    background: rgba(255, 255, 255, .06) !important;
}

/* remove tiny x position in single */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 34px !important;
    margin-top: 8px !important;
    color: var(--wa-muted) !important;
}

/* ---------------------------------------------------------
   Custom checkbox/avatar rows inside your templateResult
   (keeps the screenshot look)
   --------------------------------------------------------- */
.wa-s2-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-s2-cb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--wa-field-border);
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    background: transparent;
}

.select2-results__option[aria-selected="true"] .wa-s2-cb {
    background: var(--wa-field-focus);
    border-color: var(--wa-field-focus);
}

.select2-results__option[aria-selected="true"] .wa-s2-cb::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wa-s2-cb-sp {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.wa-s2-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--wa-field-border);
    background: var(--wa-surface-3);
    flex-shrink: 0;
}

.wa-s2-text {
    font-weight: 800;
    color: var(--wa-field-text);
}

/* selected rendering */
.wa-s2-sel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wa-s2-av-sm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--wa-field-border);
}

.wa-s2-sel-name {
    font-weight: 800;
    color: var(--wa-field-text);
}

/* ===== MULTI SELECT: CHIP (TAG) LAYOUT ===== */
.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px !important;
    padding-right: 36px !important; /* место под крестик */
    position: relative;
}

/* крестик */
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;

    width: 18px;
    height: 18px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 14px;
    font-weight: 900;
    line-height: 1;

    color: var(--wa-muted);
    background: transparent;
    border: 1px solid transparent;

    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* hover */
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove:hover {
    color: var(--wa-danger, #ff4d4f);
    background: rgba(255, 0, 0, .08);
    border-color: rgba(255, 0, 0, .25);
}


/* ===== SINGLE SELECT: CLEAR BUTTON ===== */
.select2-container--default
.select2-selection--single {
    position: relative;
    padding-right: 42px !important; /* место под крестик */
}

/* сам крестик */
.select2-container--default
.select2-selection--single
.select2-selection__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    width: 18px;
    height: 18px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 14px;
    font-weight: 900;
    line-height: 1;

    color: var(--wa-muted);
    background: transparent;
    border: 1px solid transparent;

    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* hover */
.select2-container--default
.select2-selection--single
.select2-selection__clear:hover {
    color: var(--wa-danger, #ff4d4f);
    background: rgba(255, 0, 0, .08);
    border-color: rgba(255, 0, 0, .25);
}


/* subtasks in card */
.wa-sublist {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wa-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: rgba(255, 255, 255, .03);
}

body.theme-light .wa-subitem {
    background: rgba(0, 0, 0, .02);
}

.wa-subcheck {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--wa-border);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.wa-subdot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: transparent;
}

.wa-subitem.is-done .wa-subcheck {
    border-color: var(--wa-accent);
    background: rgba(52, 255, 182, .10);
}

.wa-subitem.is-done .wa-subdot {
    background: var(--wa-accent);
}

.wa-subtext {
    font-weight: 750;
    font-size: 12.5px;
    color: var(--wa-text);
}

.wa-subitem.is-done .wa-subtext {
    color: var(--wa-muted);
    text-decoration: line-through;
    opacity: .75;
}

.wa-sublist {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wa-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: rgba(255, 255, 255, .03);
}

body.theme-light .wa-subitem {
    background: rgba(0, 0, 0, .02);
}

.wa-subitem.is-hidden {
    display: none;
}

.wa-subcheck {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--wa-border);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.wa-subdot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: transparent;
}

.wa-subitem.is-done .wa-subcheck {
    border-color: var(--wa-accent);
    background: rgba(52, 255, 182, .10);
}

.wa-subitem.is-done .wa-subdot {
    background: var(--wa-accent);
}

.wa-subtext {
    font-weight: 750;
    font-size: 12.5px;
    color: var(--wa-text);
}

.wa-subitem.is-done .wa-subtext {
    color: var(--wa-muted);
    text-decoration: line-through;
    opacity: .75;
}

.wa-submore {
    margin-top: 4px;
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--wa-muted);
    font-weight: 800;
    cursor: pointer;
    padding: 6px 4px;
}

.wa-submore:hover {
    color: var(--wa-text-strong);
}

/* Карточка */
.wa-tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    /*height: 100%;*/
}

/* Контент */
.wa-tcard-body {
    flex: 1 1 auto;
}

/* Кнопки внизу */
.wa-tcard-actions {
    display: none;
}

/* выравнивание */
.wa-tcard-actions .wa-btn {
    height: 36px;
}


/* ===== Card actions menu ===== */
.wa-tcard-actions {
    position: absolute;
    bottom: 12px;
    right: 12px;
    top: auto;
    margin-top: 0;
    padding-top: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 30;
}

.wa-menu {
    position: relative;
}

.wa-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform var(--wa-tr-fast), background var(--wa-tr-fast), border-color var(--wa-tr-fast);
}

.wa-menu-btn:hover {
    transform: translateY(-1px);
    border-color: var(--wa-accent-border);
}

.wa-menu-dots {
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    opacity: .9;
}

/* panel */
.wa-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    bottom: auto;
    min-width: 220px;

    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 18px;
    box-shadow: var(--wa-shadow-lg);
    backdrop-filter: blur(14px);
    overflow: hidden;

    opacity: 0;
    transform: translateY(8px) scale(.98);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 1000;
}

.wa-menu.is-open .wa-menu-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wa-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--wa-text);
    font-weight: 750;
    font-size: 13px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.wa-menu-item:hover {
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-menu-item:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-menu-item--danger {
    color: var(--wa-danger-text);
}

.wa-menu-item--danger:hover {
    background: rgba(255, 90, 90, .14);
}

.wa-menu-item--disabled {
    opacity: .55;
    cursor: default;
}

.wa-menu-form {
    margin: 0;
}

/* ===== Subtasks list (premium) ===== */
.wa-sublist {
    margin-top: 10px;
    gap: 8px;
}

.wa-subitem {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 10px 12px;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

body.theme-dark .wa-subitem {
    border-color: rgba(255, 255, 255, .08);
}

.wa-subitem:hover {
    background: rgba(88, 101, 242, .06);
    border-color: rgba(88, 101, 242, .22);
    transform: translateY(-1px);
}

body.theme-dark .wa-subitem:hover {
    background: rgba(52, 255, 182, .06);
    border-color: rgba(52, 255, 182, .22);
}

.wa-subcheck {
    width: 22px;
    height: 22px;
    border-width: 1.5px;
    opacity: .95;
}

.wa-subitem.is-done {
    opacity: .72;
}

.wa-subitem.is-done:hover {
    transform: none;
}

.wa-subitem.is-done .wa-subdot {
    transform: scale(1);
    transition: transform .15s ease;
}

.wa-subdot {
    transform: scale(.2);
}

.wa-subtext {
    font-size: 12.5px;
    font-weight: 750;
}


.wa-submore {
    border: 1px dashed var(--wa-border-soft);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    opacity: .85;
    background: rgba(0, 0, 0, .02);
}

body.theme-dark .wa-submore {
    background: rgba(255, 255, 255, .03);
}

.wa-submore:hover {
    opacity: 1;
    border-color: rgba(88, 101, 242, .35);
}

.wa-tcard-actions {
    border-top: none !important;
    padding-top: 0 !important;
}

.wa-menu-btn {
    width: 38px;
    height: 38px;
    opacity: .65;
}

.wa-tcard:hover .wa-menu-btn {
    opacity: 1;
}

.wa-badge--plain {
    background: rgba(10, 18, 40, .12);
    color: var(--wa-text);
    border-bottom: 1px solid var(--wa-border-soft);
    border-radius: 22px 22px 0 0;
}

body.theme-dark .wa-badge--plain {
    background: rgba(255, 255, 255, .06);
}


/* mini avatars */
.wa-avatars--mini {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.wa-av--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--wa-surface);
    margin-left: -8px;
}

/* status select */
.wa-status-select {
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    border-radius: 12px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 12px;
    outline: none;
}

.wa-status-select:focus {
    border-color: var(--wa-accent-border);
    box-shadow: 0 0 0 3px var(--wa-accent-soft);
}

.wa-status-select:disabled {
    opacity: .55;
}

/* right block in card top */
.wa-top-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* status icon group */
.wa-status-icons {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
}

.wa-si {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wa-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-weight: 900;
    transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

.wa-si:hover {
    transform: translateY(-1px);
    color: var(--wa-text-strong);
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-si:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-si.is-active {
    color: #061018;
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
    border-color: var(--wa-accent-border);
}

.wa-si--done.is-active {
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
}

/* mini avatars only executors */
.wa-avatars--mini {
    display: flex;
    align-items: center;
}

.wa-av--img {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--wa-surface);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: -8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

body.theme-light .wa-av--img {
    box-shadow: 0 8px 22px rgba(20, 30, 70, .14);
}

/* top-right notifications */
.wa-notify {
    position: relative;
}

.wa-notify-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.wa-notify-badge {
    position: absolute;
    right: 6px;
    top: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 90, 90, .95);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.wa-notify-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(360px, 92vw);
    max-height: 70vh;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--wa-border);
    background: var(--wa-surface);
    box-shadow: var(--wa-shadow-lg);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 9999;
}

.wa-notify.is-open .wa-notify-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wa-notify-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wa-border-soft);
}

.wa-notify-title {
    font-weight: 900;
}

.wa-notify-x {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
}

.wa-notify-list {
    padding: 10px;
    overflow: auto;
    max-height: calc(70vh - 54px);
}

.wa-notify-item {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

body.theme-light .wa-notify-item {
    background: rgba(0, 0, 0, .02);
}

.wa-notify-item:hover {
    border-color: var(--wa-accent-border);
}

.wa-notify-text {
    font-weight: 750;
    font-size: 13px;
}

.wa-notify-time {
    font-size: 11px;
    color: var(--wa-muted);
}

.wa-work-btn, .wa-done-btn {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    font-weight: 900;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.wa-work-btn:hover {
    border-color: rgba(88, 101, 242, .35);
    background: rgba(88, 101, 242, .08);
}

.wa-done-btn:hover {
    border-color: rgba(52, 255, 182, .35);
    background: rgba(52, 255, 182, .10);
}

.wa-done-done {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(52, 255, 182, .12);
    border: 1px solid rgba(52, 255, 182, .25);
    color: var(--wa-accent);
    font-weight: 900;
}


/* ===== SUPERADMIN HARD RESET (layout safety) ===== */
.wa-super-wrap * {
    box-sizing: border-box;
}

.wa-super-wrap img {
    max-width: 100%;
    height: auto;
}

.wa-super-wrap .row {
    margin-left: 0;
    margin-right: 0;
}

.wa-super-wrap [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* notifications must be above cards/popovers */
/* notifications must be above cards/popovers */
.wa-notify {
    position: relative;
    z-index: 99990;
}

.wa-notify-panel {
    z-index: 99999 !important;
}

.wa-notify-badge {
    z-index: 100000 !important;
}

.wa-topbar {
    position: sticky;
    top: 0;
    z-index: 99980;
}

.wa-main, .wa-content {
    transform: none !important;
    filter: none !important;
}

.popover {
    z-index: 99950 !important;
}

/* ниже notify-panel */
/* subtask meta (status + due) */
.wa-submeta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-substatus {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-muted);
}

.wa-substatus.is-work {
    border-color: rgba(109, 123, 255, .22);
    background: rgba(109, 123, 255, .10);
    color: var(--wa-text);
}

.wa-substatus.is-done {
    border-color: rgba(52, 255, 182, .25);
    background: rgba(52, 255, 182, .10);
    color: var(--wa-text);
}

.wa-subdue {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: .92;
}

.wa-subcal {
    opacity: .85;
}

.wa-subdue.is-hidden {
    display: none;
}

.wa-subcal {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.wa-subcal:hover {
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
}

.wa-subdue {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
}

.wa-confirm {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 999999;
}

.wa-confirm.is-open {
    display: block;
}

.wa-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
}

body.theme-light .wa-confirm-backdrop {
    background: rgba(10, 18, 40, .28);
}

.wa-confirm-box {
    position: relative;
    width: min(720px, 92vw);
    margin: 16vh auto 0;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 18px;
    box-shadow: var(--wa-shadow-lg);
    padding: 16px;
    backdrop-filter: blur(14px);
    animation: waModalIn .18s ease-out both;
}

.wa-confirm-title {
    font-weight: 900;
    color: var(--wa-text-strong);
    margin-bottom: 6px;
}

.wa-confirm-text {
    color: var(--wa-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.wa-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.wa-subadd {

    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
}

.wa-subadd:hover {
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
}

.wa-subdue.is-hidden {
    display: none;
}

/* base */
.wa-subitem {
    position: relative;
    border-radius: 16px;
    padding: 8px 10px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* DONE = без эффектов */
.wa-subitem.is-done {
    border-color: var(--wa-border-soft);
    box-shadow: none;
}

.wa-subitem.is-done .wa-subtext {
    opacity: .65;
    text-decoration: line-through;
}

/* NEW = glow border */
.wa-subitem.is-new {
    border-color: var(--wa-accent-border);
    box-shadow: 0 0 0 1px rgba(52, 255, 182, .25), 0 0 24px rgba(52, 255, 182, .14);
}

/* WORK = animated border */
.wa-subitem.is-work {
    border-color: transparent;
}

.wa-subitem.is-work::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(90deg, var(--wa-accent), var(--wa-accent2), var(--wa-accent));
    background-size: 240% 240%;
    animation: waBorderMove 1.6s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .9;
}

@keyframes waBorderMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.wa-subwork {
    background: none;
    border: 0;
    color: var(--wa-accent);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    opacity: .8;
}

.wa-subwork:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Subtask row layout */
.wa-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-subtext {
    flex: 1 1 auto;
}

/* занимает всё место */
.wa-subactions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* icon buttons */
.wa-subicon {
    width: 32px;
    height: 28px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.wa-subicon:hover {
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
}

/* ===== Kartik fileinput zoom must be above WA confirm ===== */
.modal.kv-modal,
.file-zoom-dialog,
.kv-zoom-cache,
.kv-zoom-actions,
.file-zoom-fullscreen,
.krajee-default .file-zoom-dialog,
.krajee-default .modal,
.modal-backdrop {
    z-index: 100200 !important;
}

/* backdrop for fileinput zoom */
.kv-modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade.show {
    z-index: 100150 !important;
}

/* our confirm stays below file-zoom */
.wa-confirm {
    z-index: 100000;
}

.wa-badge-nav {
    margin-left: auto;
    min-width: 24px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--wa-accent-soft);
    border: 1px solid var(--wa-accent-border);
    color: var(--wa-text-strong);
}

.wa-pill-badge {
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    background: rgba(109, 123, 255, .18);
    border: 1px solid rgba(109, 123, 255, .28);
}

.wa-ico-badge {
    position: absolute;
    transform: translate(10px, -10px);
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    background: rgba(52, 255, 182, .40);
    color: #0e6185;

    border: 1px solid rgba(52, 255, 182, .40);
}

.wa-subicon {
    position: relative;
}

.wa-history-row {
    font-size: 12px;
    color: var(--wa-text);
    display: flex;
    gap: 10px;
    margin: 4px 0;
}

/* =========================================
   ICON BUTTONS (FontAwesome) — Theme-aware
   ========================================= */

/* Базовая кнопка-иконка (в т.ч. подзадачи справа) */
.wa-iconbtn,
.wa-subicon,
.wa-menu-btn,
.wa-notify-btn,
.wa-top-action {
    color: var(--wa-text);
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    transition: transform var(--wa-tr-fast), background var(--wa-tr-fast), border-color var(--wa-tr-fast), opacity var(--wa-tr-fast);
}

.wa-iconbtn:hover,
.wa-subicon:hover,
.wa-menu-btn:hover,
.wa-notify-btn:hover,
.wa-top-action:hover {
    transform: translateY(-1px);
    border-color: var(--wa-border);
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-iconbtn:hover,
body.theme-light .wa-subicon:hover,
body.theme-light .wa-menu-btn:hover,
body.theme-light .wa-notify-btn:hover,
body.theme-light .wa-top-action:hover {
    background: rgba(0, 0, 0, .04);
}

/* Иконки внутри кнопок */
.wa-iconbtn i,
.wa-subicon i,
.wa-menu-btn i,
.wa-notify-btn i,
.wa-top-action i {
    color: currentColor;
}

/* Состояние disabled */
.wa-iconbtn:disabled,
.wa-subicon:disabled,
.wa-menu-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}

/* =========================================
   TASK STATUS BUTTONS (top-right of card)
   ========================================= */
.wa-work-btn,
.wa-done-btn {
    width: 34px;
    height: 30px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
    transition: transform var(--wa-tr-fast), background var(--wa-tr-fast), border-color var(--wa-tr-fast);
}

.wa-work-btn:hover,
.wa-done-btn:hover {
    transform: translateY(-1px);
}

/* "В работу" — мягкий акцент */
.wa-work-btn {
    border-color: rgba(109, 123, 255, .30);
    background: rgba(109, 123, 255, .10);
    color: rgba(109, 123, 255, 1);
}

.wa-work-btn:hover {
    background: rgba(109, 123, 255, .16);
}

/* "Завершить" — зелёный акцент */
.wa-done-btn {
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
    color: var(--wa-accent);
}

.wa-done-btn:hover {
    background: rgba(52, 255, 182, .18);
}

/* На светлой теме делаем чуть контрастнее */
body.theme-light .wa-work-btn {
    background: rgba(109, 123, 255, .12);
}

body.theme-light .wa-done-btn {
    background: rgba(52, 255, 182, .16);
}

/* =========================================
   SUBTASK ACTIONS (right aligned icons)
   ========================================= */
.wa-subactions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-subicon {
    width: 32px;
    height: 28px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
}

/* Чат */
.wa-subchat {
    border-color: rgba(109, 123, 255, .25);
    background: rgba(109, 123, 255, .08);
    color: rgba(109, 123, 255, 1);
}

.wa-subchat:hover {
    background: rgba(109, 123, 255, .14);
}

/* Дедлайн */
.wa-subcal {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: var(--wa-text);
}

body.theme-light .wa-subcal {
    background: rgba(0, 0, 0, .03);
    border-color: rgba(10, 18, 40, .10);
}

/* Файлы */
.wa-subfile {
    border-color: rgba(52, 255, 182, .22);
    background: rgba(52, 255, 182, .08);
    color: var(--wa-accent);
}

.wa-subfile:hover {
    background: rgba(52, 255, 182, .14);
}

/* Назначить исполнителя */
.wa-subadd {
    border-color: rgba(255, 90, 90, .22);
    background: rgba(255, 90, 90, .07);
    color: rgba(255, 90, 90, 1);
}

.wa-subadd:hover {
    background: rgba(255, 90, 90, .12);
}

/* =========================================
   MENU (⋯) panel items
   ========================================= */
.wa-menu-panel {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    box-shadow: var(--wa-shadow-lg);
    color: var(--wa-text);
}

.wa-menu-item {
    color: var(--wa-text);
}

.wa-menu-item:hover {
    background: var(--wa-surface-3);
}

.wa-menu-item--danger {
    color: var(--wa-danger-text);
}

/* =========================================
   NOTIFY panel
   ========================================= */
.wa-notify-panel {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    box-shadow: var(--wa-shadow-lg);
    color: var(--wa-text);
}

/* =========================================
   ICON SIZES (optional)
   ========================================= */
.wa-iconbtn i,
.wa-subicon i,
.wa-work-btn i,
.wa-done-btn i,
.wa-menu-btn i,
.wa-notify-btn i {
    font-size: 14px;
}

/* =========================================
   BADGES (counts on icons)
   ========================================= */
.wa-pill-badge,
.wa-ico-badge,
.wa-ibadge,
.wa-notify-badge {
    color: var(--wa-text-strong);
}

/* =========================================================
   ICONS — DARK THEME PATCH (NO CLASS CHANGES)
   Put at the very end of your CSS
   ========================================================= */

/* 1) Общий цвет иконок (FontAwesome) в dark */
body.theme-dark i.fa,
body.theme-dark i.fas,
body.theme-dark i.far,
body.theme-dark i.fal,
body.theme-dark i.fab,
body.theme-dark i.fa-solid,
body.theme-dark i.fa-regular,
body.theme-dark i.fa-light,
body.theme-dark i.fa-brands {
    color: var(--wa-text) !important;
    opacity: .92;
}

/* 2) Иконки внутри кнопок должны наследовать currentColor */
body.theme-dark .wa-subicon i,
body.theme-dark .wa-menu-btn i,
body.theme-dark .wa-notify-btn i,
body.theme-dark .wa-top-action i,
body.theme-dark .wa-work-btn i,
body.theme-dark .wa-done-btn i,
body.theme-dark .wa-pill i,
body.theme-dark .wa-subcal i,
body.theme-dark .wa-subadd i {
    color: currentColor !important;
    opacity: .95;
}

/* 3) База для всех “икон-кнопок” в dark (без изменения классов) */
body.theme-dark .wa-subicon,
body.theme-dark .wa-menu-btn,
body.theme-dark .wa-notify-btn,
body.theme-dark .wa-top-action,
body.theme-dark .wa-subcal,
body.theme-dark .wa-subadd,
body.theme-dark .wa-work-btn,
body.theme-dark .wa-done-btn,
body.theme-dark .wa-pill.wa-pill--click,
body.theme-dark .wa-pill {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    color: var(--wa-text) !important;
}

/* 4) Hover в dark — аккуратный подсвет, не “выбеливает” */
body.theme-dark .wa-subicon:hover,
body.theme-dark .wa-menu-btn:hover,
body.theme-dark .wa-notify-btn:hover,
body.theme-dark .wa-top-action:hover,
body.theme-dark .wa-subcal:hover,
body.theme-dark .wa-subadd:hover,
body.theme-dark .wa-pill.wa-pill--click:hover {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(140, 170, 255, .22) !important;
    transform: translateY(-1px);
}

/* 5) Active/Opened states */
body.theme-dark .wa-menu.is-open .wa-menu-btn,
body.theme-dark .wa-notify.is-open .wa-notify-btn {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(52, 255, 182, .22) !important;
}

/* 6) Акцентные кнопки статуса (в работу / done) — читаемые в dark */
body.theme-dark .wa-work-btn {
    background: rgba(109, 123, 255, .12) !important;
    border-color: rgba(109, 123, 255, .30) !important;
    color: rgba(190, 200, 255, .95) !important;
}

body.theme-dark .wa-work-btn:hover {
    background: rgba(109, 123, 255, .18) !important;
    border-color: rgba(109, 123, 255, .40) !important;
}

body.theme-dark .wa-done-btn {
    background: rgba(52, 255, 182, .12) !important;
    border-color: rgba(52, 255, 182, .28) !important;
    color: rgba(52, 255, 182, .98) !important;
}

body.theme-dark .wa-done-btn:hover {
    background: rgba(52, 255, 182, .18) !important;
    border-color: rgba(52, 255, 182, .40) !important;
}

/* 7) Опасные (удаление) — чтобы иконка/текст не терялись */
body.theme-dark .wa-menu-item--danger,
body.theme-dark .wa-btn-danger {
    color: rgba(255, 210, 210, .95) !important;
}

body.theme-dark .wa-menu-item--danger i,
body.theme-dark .wa-btn-danger i {
    color: currentColor !important;
}

/* 8) Бейджи на иконках — контрастные в dark */
body.theme-dark .wa-pill-badge,
body.theme-dark .wa-ico-badge,
body.theme-dark .wa-ibadge,
body.theme-dark .wa-notify-badge {
    color: rgba(255, 255, 255, .96) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* 9) Отключенные иконки/кнопки */
body.theme-dark .wa-subicon:disabled,
body.theme-dark .wa-subcal:disabled,
body.theme-dark .wa-subadd:disabled,
body.theme-dark .wa-work-btn:disabled,
body.theme-dark .wa-done-btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* 10) Fix: иногда FA иконки становятся слишком “жирными/яркими” */
body.theme-dark .wa-subicon i,
body.theme-dark .wa-menu-btn i,
body.theme-dark .wa-notify-btn i,
body.theme-dark .wa-top-action i {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}

/* =========================================================
   FIX: Card top small icon buttons (not in .wa-* classes)
   Put at END
   ========================================================= */

/* 1) Кнопки-иконки в правом верхнем углу карточек (общий случай) */
body.theme-dark .wa-tcard button:not(.wa-btn):not(.wa-menu-btn),
body.theme-dark .wa-tcard a:not(.wa-btn):not(.wa-menu-btn) {
    color: var(--wa-text) !important;
}

/* 2) Если у них квадратная “иконка-кнопка” (типичный bootstrap btn-light/btn-outline) */
body.theme-dark .wa-tcard .btn,
body.theme-dark .wa-tcard .btn.btn-light,
body.theme-dark .wa-tcard .btn.btn-outline-secondary,
body.theme-dark .wa-tcard .btn.btn-outline-dark,
body.theme-dark .wa-tcard .btn.btn-outline-primary,
body.theme-dark .wa-tcard .btn.btn-sm {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: var(--wa-text) !important;
    box-shadow: none !important;
}

/* hover */
body.theme-dark .wa-tcard .btn:hover {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(140, 170, 255, .22) !important;
}

/* 3) Иконки внутри этих кнопок (FontAwesome / bootstrap icons / svg) */
body.theme-dark .wa-tcard .btn i,
body.theme-dark .wa-tcard .btn svg,
body.theme-dark .wa-tcard .btn .fa,
body.theme-dark .wa-tcard .btn .fas,
body.theme-dark .wa-tcard .btn .far,
body.theme-dark .wa-tcard .btn .fa-regular,
body.theme-dark .wa-tcard .btn .fa-solid {
    color: currentColor !important;
    fill: currentColor !important;
    opacity: .95;
}

/* 4) Если это НЕ .btn, а просто квадратный wrapper (часто бывает <a class="icon-btn">) */
body.theme-dark .wa-tcard .icon-btn,
body.theme-dark .wa-tcard .task-icon,
body.theme-dark .wa-tcard .ticon,
body.theme-dark .wa-tcard .btn-icon {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: var(--wa-text) !important;
    border-radius: 12px !important;
}

body.theme-dark .wa-tcard .icon-btn:hover,
body.theme-dark .wa-tcard .task-icon:hover,
body.theme-dark .wa-tcard .ticon:hover,
body.theme-dark .wa-tcard .btn-icon:hover {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(140, 170, 255, .22) !important;
}

/* 5) Замок/disabled состояние (когда задача завершена) */
body.theme-dark .wa-tcard .btn:disabled,
body.theme-dark .wa-tcard button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* =========================================================
   WA ICON BUTTONS (task top actions) — dark/light ready
   For: .wa-top-actions .wa-iconbtn + .wa-ibadge
   ========================================================= */

/* контейнер справа */
.wa-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* базовая кнопка-иконка */
.wa-iconbtn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    user-select: none;

    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);

    transition: transform var(--wa-tr-fast),
    background var(--wa-tr-fast),
    border-color var(--wa-tr-fast),
    opacity var(--wa-tr-fast);
}

/* иконки FA внутри */
.wa-iconbtn i {
    color: currentColor;
    font-size: 14px;
    line-height: 1;
}

/* hover */
.wa-iconbtn:hover {
    transform: translateY(-1px);
    border-color: var(--wa-border);
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-iconbtn:hover {
    background: rgba(0, 0, 0, .04);
}

/* disabled */
.wa-iconbtn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* ---------- Variants ---------- */

/* ghost (история) */
.wa-iconbtn--ghost {
    background: rgba(255, 255, 255, .04);
}

.wa-iconbtn--logout {
    background: rgba(255, 255, 255, .04);
}

body.theme-dark .wa-history-item {
    background: rgba(0, 0, 0, .03);
}

body.theme-dark .wa-msg-ava--ph, .wa-chat-iconbtn {
    background: rgba(0, 0, 0, .03);
}

body.theme-dark .wa-chat-iconbtn {
    background: rgba(0, 0, 0, .03);
}

.wa-iconbtn--files {
    background: rgba(255, 255, 255, .04);
}

body.theme-light .wa-iconbtn--ghost {
    background: rgba(0, 0, 0, .03);
}

/* files */
.wa-iconbtn--files {
    border-color: rgba(140, 170, 255, .18);
}

.wa-iconbtn--files:hover {
    border-color: rgba(140, 170, 255, .30);
}

/* work / in_progress */
.wa-iconbtn--work {
    border-color: rgba(109, 123, 255, .30);
    background: rgba(109, 123, 255, .10);
    color: rgba(109, 123, 255, 1);
}

.wa-iconbtn--work:hover {
    background: rgba(109, 123, 255, .16);
}

/* done */
.wa-iconbtn--done {
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
    color: var(--wa-accent);
}

.wa-iconbtn--done:hover {
    background: rgba(52, 255, 182, .18);
}

/* ---------- Badge count on icon ---------- */
.wa-ibadge {
    position: absolute;
    top: -6px;
    right: -6px;

    min-width: 18px;
    height: 18px;
    padding: 0 6px;

    border-radius: 999px;
    display: grid;
    place-items: center;

    font-size: 11px;
    font-weight: 900;

    background: rgba(52, 255, 182, .40);
    color: #0e6185;
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

body.theme-light .wa-ibadge {
    border-color: rgba(0, 0, 0, .10);
    box-shadow: 0 10px 24px rgba(20, 30, 70, .12);
}

/* ---------- Make sure icons don't turn "black" in dark theme ---------- */
body.theme-dark .wa-iconbtn,
body.theme-dark .wa-iconbtn i {
    color: var(--wa-text) !important;
}

/* but keep variant colors */
body.theme-dark .wa-iconbtn--work,
body.theme-dark .wa-iconbtn--work i {
    color: rgba(109, 123, 255, 1) !important;
}

body.theme-dark .wa-iconbtn--done,
body.theme-dark .wa-iconbtn--done i {
    color: var(--wa-accent) !important;
}

/* =========================================================
   FIX: FontAwesome icons in dark theme (paperclip, etc.)
   ========================================================= */

/* заставляем любые иконки внутри wa-кнопок наследовать цвет */
.wa-iconbtn i,
.wa-subicon i,
.wa-menu-btn i,
.wa-notify-btn i,
.wa-top-action i {
    color: currentColor !important;
}

/* если FontAwesome иногда рендерит svg вместо i */
.wa-iconbtn svg,
.wa-subicon svg,
.wa-menu-btn svg,
.wa-notify-btn svg,
.wa-top-action svg {
    fill: currentColor !important;
    color: currentColor !important;
}

/* жёсткий приоритет для dark: кнопки и их иконки */
body.theme-dark .wa-iconbtn,
body.theme-dark .wa-subicon,
body.theme-dark .wa-menu-btn,
body.theme-dark .wa-notify-btn,
body.theme-dark .wa-top-action {
    color: var(--wa-text) !important;
}

/* сохраняем “цветовые варианты” */
body.theme-dark .wa-iconbtn--work {
    color: rgba(109, 123, 255, 1) !important;
}

body.theme-dark .wa-iconbtn--done {
    color: var(--wa-accent) !important;
}

body.theme-dark .wa-iconbtn--files {
    color: var(--wa-text) !important;
}

/* скрепка */

/* =========================================================
   FIX: top-right user chip dark/light
   ========================================================= */

.wa-userchip {
    background: var(--wa-surface-2) !important;
    border: 1px solid var(--wa-border-soft) !important;
    color: var(--wa-text) !important;
}

.wa-userchip .wa-userchip-text {
    color: var(--wa-text-strong) !important;
}

.wa-userchip .wa-tcard__sub {
    color: var(--wa-muted) !important;
    opacity: 1 !important;
}

/* чтобы чип не становился "белым" в dark из-за чужих стилей */
body.theme-dark .wa-userchip {
    background: rgba(255, 255, 255, .04) !important;
}

/* ===============================
   FIX: icon buttons hover (dark)
   =============================== */

body.theme-dark .wa-iconbtn:hover,
body.theme-dark .wa-subicon:hover,
body.theme-dark .wa-menu-btn:hover,
body.theme-dark .wa-work-btn:hover,
body.theme-dark .wa-done-btn:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--wa-text-strong) !important;
    border-color: var(--wa-border) !important;
}

/* конкретно скрепка */
body.theme-dark .wa-iconbtn--files:hover {
    background: rgba(52, 255, 182, .12) !important;
    color: var(--wa-accent) !important;
}

body.theme-dark button:hover,
body.theme-dark a:hover {
    background-color: unset;
}

.wa-nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-nav-subitem .wa-badge-nav {
    margin-left: auto; /* ✅ прижали вправо */
}

/* чекбокс-кружок */
.wa-subcheck {
    position: relative;
}

/* галочка */
.wa-subcheck::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg);
    left: 50%;
    top: 48%;
    translate: -50% -50%;
    opacity: 0;
}

/* когда done */
.wa-subitem.is-done .wa-subcheck {
    background: rgba(52, 255, 182, .12);
    border-color: rgba(52, 255, 182, .45);
}

.wa-subitem.is-done .wa-subcheck::after {
    border-right-color: var(--wa-accent);
    border-bottom-color: var(--wa-accent);
    opacity: 1;
}

/* точку можно выключить, чтобы не мешала */
.wa-subitem.is-done .wa-subdot {
    display: none;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    /*color: #007bff;*/
    transition: color 0.2s ease;
}

a:hover {
    color: #0056b3;
}

/* =========================================
   SELECT2 — центрирование clear (×)
   ========================================= */

/* single select clear */
.select2-container--default
.select2-selection--single
.select2-selection__clear {
    position: absolute !important;
    right: 12px;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 20px;
    height: 20px;
    line-height: 18px;

    display: grid !important;
    place-items: center;

    font-size: 16px;
    font-weight: 900;

    border-radius: 999px;
    cursor: pointer;

    color: var(--wa-muted);
    background: transparent;
    border: 1px solid transparent;

    transition: background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* hover */
.select2-container--default
.select2-selection--single
.select2-selection__clear:hover {
    color: var(--wa-danger);
    background: rgba(255, 0, 0, .08);
    border-color: rgba(255, 0, 0, .25);
}

/* Bootstrap tooltip theme */
.tooltip {
    z-index: 999999 !important;
}

.tooltip-inner {
    max-width: 360px;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    color: var(--wa-text);
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    box-shadow: var(--wa-shadow-md);
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-top-color: var(--wa-surface) !important;
    border-bottom-color: var(--wa-surface) !important;
    border-left-color: var(--wa-surface) !important;
    border-right-color: var(--wa-surface) !important;
}

/* ===== View modal (full text) ===== */
.wa-view {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 100050; /* выше карточек/поповеров */
}

.wa-view.is-open {
    display: block;
}

.wa-view-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
}

body.theme-light .wa-view-backdrop {
    background: rgba(10, 18, 40, .28);
}

.wa-view-box {
    position: relative;
    width: min(720px, 94vw);
    margin: 12vh auto 0;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 18px;
    box-shadow: var(--wa-shadow-lg);
    overflow: hidden;
}

.wa-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-2);
}

.wa-view-title {
    font-weight: 900;
    color: var(--wa-text-strong);
}

.wa-view-x {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    cursor: pointer;
}

.wa-view-body {
    padding: 16px;
}

.wa-view-h {
    font-weight: 900;
    color: var(--wa-text-strong);
    margin-bottom: 10px;
}

.wa-view-text {
    color: var(--wa-text);
    line-height: 1.6;
    white-space: pre-wrap; /* переносы строк */
    word-break: break-word;
    max-height: 52vh;
    overflow: auto;
    padding-right: 6px;
}

.wa-view-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-2);
}

.wa-iconbtn--x {
    background: rgba(255, 255, 255, .04);
}

/* =========================
   WA CHAT DRAWER (Right)
   ========================= */
.wa-chat {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: none;
}

.wa-chat.is-open {
    display: block;
}

.wa-chat-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
}

body.theme-light .wa-chat-backdrop {
    background: rgba(10, 18, 40, .22);
}

.wa-chat-drawer {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: min(620px, 96vw);
    border-radius: 20px;
    border: 1px solid var(--wa-border);
    background: var(--wa-surface);
    box-shadow: var(--wa-shadow-lg);
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(18px);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}

.wa-chat.is-open .wa-chat-drawer {
    transform: translateX(0);
    opacity: 1;
}

.wa-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-2);
}

.wa-chat-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wa-chat-ava {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #061018;
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
    flex-shrink: 0;
}

.wa-chat-head-meta {
    min-width: 0;
}

.wa-chat-title {
    font-weight: 900;
    color: var(--wa-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-chat-sub {
    font-size: 12px;
    color: var(--wa-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-chat-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-chat-iconbtn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform var(--wa-tr-fast), background var(--wa-tr-fast), border-color var(--wa-tr-fast);
}

.wa-chat-iconbtn:hover {
    transform: translateY(-1px);
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
}

.wa-chat-body {
    flex: 1 1 auto;
    padding: 14px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-msg {
    max-width: 70%;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--wa-border-soft);
    background: rgba(255, 255, 255, .03);
    color: var(--wa-text);
    line-height: 1.35;
    position: relative;
}

body.theme-light .wa-msg {
    background: rgba(0, 0, 0, .02);
}

.wa-msg--me {
    max-width: 70%;
    margin-left: auto;
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
}

.wa-msg--sys {
    max-width: 100%;
    margin: 0 auto;
    opacity: .85;
    text-align: center;
    font-size: 12px;
    background: transparent;
    border: none;
}

.wa-msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.wa-msg-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--wa-muted);
}

.wa-msg-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
}

.wa-msg-status i {
    font-size: 12px;
    opacity: .9;
}

.wa-chat-typing {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wa-muted);
    border-top: 1px solid var(--wa-border-soft);
}

.wa-chat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wa-muted);
    animation: waDot 1.1s infinite ease-in-out;
    opacity: .75;
}

.wa-chat-dot:nth-child(2) {
    animation-delay: .15s;
}

.wa-chat-dot:nth-child(3) {
    animation-delay: .30s;
}

@keyframes waDot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .55;
    }
    40% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.wa-chat-typing-text {
    font-size: 12px;
}

.wa-chat-foot {
    padding: 10px 12px;
    border-top: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-2);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.wa-chat-input {
    flex: 1 1 auto;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--wa-field-border, var(--wa-border-soft));
    background: var(--wa-field-bg, rgba(12, 16, 30, 1));
    color: var(--wa-field-text, var(--wa-text));
    outline: none;
}

.wa-chat-input:focus {
    border-color: var(--wa-field-focus, var(--wa-accent));
    box-shadow: 0 0 0 4px var(--wa-field-focus-soft, rgba(52, 255, 182, .16));
}

.wa-chat-send {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border: 1px solid var(--wa-accent-border);
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
    color: #061018;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform var(--wa-tr-fast), filter var(--wa-tr-fast);
}

.wa-chat-send:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

/* Статусы (галочки) показываем только у моих сообщений */
.wa-msg:not(.wa-msg--me) .wa-msg-status {
    display: none !important;
}

/* floating down button like WhatsApp */
.wa-chat-down {
    position: absolute;
    right: 18px;
    bottom: 86px; /* над инпутом */
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface);
    color: var(--wa-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--wa-shadow-md);
    z-index: 50;
}

.wa-chat-down:hover {
    border-color: var(--wa-accent-border);
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-chat-down:hover {
    background: rgba(0, 0, 0, .03);
}

.wa-chat-down-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    background: rgba(255, 90, 90, .95);
    color: #fff;
    border: 2px solid var(--wa-surface);
}

/* Chat FAB (down) */
.wa-chat-fab {
    position: absolute;
    right: 14px;
    bottom: 78px; /* над инпутом */
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-text);
    display: none;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--wa-shadow-md);
    z-index: 20;
}

.wa-chat-fab:hover {
    border-color: var(--wa-accent-border);
    background: var(--wa-accent-soft);
}

.wa-chat-fab.is-show {
    display: grid;
}

.wa-chat-fab-badge {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 90, 90, .95);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: grid;
    place-items: center;
}

/* ===== Chat FAB (down) ===== */
#waChatDown.wa-chat-fab {
    position: absolute; /* важно: внутри панели чата */
    right: 14px;
    bottom: 86px; /* над инпутом */
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface);
    color: var(--wa-text);
    display: grid;
    place-items: center;

    opacity: 0;
    transform: translateY(8px) scale(.92);
    pointer-events: none;

    transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
    z-index: 10;
}

#waChatDown.wa-chat-fab.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#waChatDown.wa-chat-fab:hover {
    border-color: var(--wa-accent-border);
    background: rgba(255, 255, 255, .06);
}

body.theme-light #waChatDown.wa-chat-fab:hover {
    background: rgba(0, 0, 0, .04);
}

/* Badge */
#waChatDownBadge.wa-chat-fab-badge {
    position: absolute;
    right: -6px;
    top: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 90, 90, .95);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);

    opacity: 0;
    transform: scale(.92);
    transition: opacity 180ms ease, transform 180ms ease;
}

#waChatDown.wa-chat-fab.is-visible #waChatDownBadge.wa-chat-fab-badge {
    opacity: 1;
    transform: scale(1);
}

.wa-msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    opacity: .92;
}

.wa-msg-who {
    font-size: 12px;
    font-weight: 800;
    color: var(--wa-muted);
}

.wa-msg-ava {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--wa-border-soft);
    flex: 0 0 auto;
}

.wa-msg-ava--ph {
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--wa-text);
    background: rgba(255, 255, 255, .06);
}

body.theme-light .wa-msg-ava--ph {
    background: rgba(0, 0, 0, .05);
}

/* Chat message layout: avatar+name outside bubble */
.wa-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.wa-msg-row--me {
    justify-content: flex-end;
}

.wa-msg-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 54px;
}

.wa-msg-side--me {
    align-items: center;
}

.wa-msg-ava {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 12px;
    color: var(--wa-text);
    flex: 0 0 auto;
}

.wa-msg-ava--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wa-msg-name {
    /*max-width: 74px;*/
    font-size: 11px;
    font-weight: 400;
    color: var(--wa-muted);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;

}

.wa-msg-name--me {
    color: var(--wa-muted);
}

.wa-msg-bubble {
    /*max-width: min(420px, 74%);*/
}

.wa-msg-bubble--me {
    /*max-width: min(420px, 74%);*/
}


.wa-iconbtn, .wa-subicon {
    position: relative;
}

.wa-chat-badge {
    position: absolute;

    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    background: rgba(255, 90, 90, .95);
    color: #fff;
}

/* ===== Chat bubble meta: time pinned to corner ===== */

/* bubble must be relative */
.wa-msg-bubble,
.wa-msg-bubble--me {
    /*position: relative;*/
}

/* reserve space for pinned time so text doesn't overlap */
.wa-msg-bubble .wa-msg-text,
.wa-msg-bubble--me .wa-msg-text {
    padding-bottom: 18px; /* место под время */
}

/* incoming: time in bottom-right corner */
.wa-msg-row .wa-msg-bubble .wa-msg-meta {
    position: absolute;
    right: 15px;
    bottom: 6px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    opacity: .75;
    pointer-events: none;
}

/* outgoing: time + checks in bottom-right corner of outgoing bubble */
.wa-msg-row--me .wa-msg-bubble--me .wa-msg-meta {
    position: absolute;
    right: 10px;
    bottom: 6px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    opacity: .75;
    pointer-events: none;
}

/* checks a bit tighter */
.wa-msg-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transform: translateY(1px);
}

/* if you want time even closer to the corner */
.wa-msg-row .wa-msg-bubble .wa-msg-meta span,
.wa-msg-row--me .wa-msg-bubble--me .wa-msg-meta span {
    line-height: 1;
}

.wa-plusbadge {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    background: rgba(52, 255, 182, .18);
    border: 1px solid rgba(52, 255, 182, .35);
    color: var(--wa-text-strong);
}

/* Chat files modal OVER everything */
#waChatFilesModal {
    position: fixed;
    inset: 0;
    z-index: 100600; /* выше чата и confirm */
    display: none;
}

#waChatFilesModal.is-open {
    display: block;
}

#waChatFilesModal .wa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
}

#waChatFilesModal .wa-modal-dialog {
    position: relative;
    width: min(900px, 94vw);
    margin: 10vh auto 0;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 18px;
    box-shadow: var(--wa-shadow-lg);
    overflow: visible;
}

/* чат ниже модалки */
#waChat {
    z-index: 100100;
    position: fixed;
}

.wa-confirm {
    z-index: 100000;
}

/* confirm ниже файлов */


.wa-chat-drop {
    position: absolute;
    inset: 0;
    z-index: 100700;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-chat-drop-box {
    min-width: 280px;
    max-width: 360px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(52, 255, 182, .45);
    background: rgba(14, 20, 40, .92);
    color: rgba(233, 238, 251, .92);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.wa-chat-drop-box i {
    font-size: 22px;
    color: var(--wa-accent);
}

/* time pinned to bubble corner */
.wa-msg-bubble {
    position: relative;
}

.wa-msg-text {
    padding-bottom: 18px;
}

.wa-msg-meta.wa-msg-meta--corner {
    position: absolute;
    right: 10px;
    bottom: 6px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    opacity: .85;
}


/* Chat overlay below confirm/modal */
.wa-chat {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

/* Confirm modal must be ABOVE chat */
.wa-confirm {
    z-index: 100500 !important;
}

/* If you use wa-modal for files too */
.wa-modal {
    z-index: 100400;
}

/* just in case chat drawer has its own z-index */
.wa-chat-drawer {
    z-index: 100010;
}

.wa-filemeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.wa-filedel-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid var(--wa-border-soft);
    background: var(--wa-surface-3);
    color: var(--wa-danger-text);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.wa-filedel-icon:hover {
    border-color: var(--wa-danger-border);
    background: rgba(255, 90, 90, .12);
}

/* =========================================
   MODALS: scrolling for ALL WA modals
   (wa-modal, wa-confirm, wa-view, chat files)
   ========================================= */

/* Общая логика: overlay фиксированный, скроллим внутри окна */
.wa-modal,
.wa-confirm,
.wa-view,
#waChatFilesModal {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important; /* НЕ страница, а содержимое окна */
    -webkit-overflow-scrolling: touch;
}

/* Backdrop всегда fixed */
.wa-modal-backdrop,
.wa-confirm-backdrop,
.wa-view-backdrop {
    position: fixed !important;
    inset: 0 !important;
}

/* Диалог: ограничиваем по высоте */
.wa-modal-dialog,
.wa-confirm-box,
.wa-view-box,
#waChatFilesModal .wa-modal-dialog {
    max-height: calc(100vh - 220px) !important;
    overflow: hidden !important;
}

/* Body модалки = скроллится */
.wa-modal-body,
.wa-confirm-text,
.wa-view-body,
#waChatFilesModal .wa-modal-body {
    overflow: auto !important;
    max-height: calc(100vh - 370px) !important; /* запас под head/actions */
    -webkit-overflow-scrolling: touch;
}

/* Если у тебя есть футер с кнопками - держим его видимым */
.wa-modal-head,
.wa-modal-actions,
.wa-view-head,
.wa-view-actions {
    position: sticky;
    z-index: 2;
}

/* Верх/низ: чтобы sticky работал корректно */
.wa-modal-head {
    top: 0;
}

.wa-modal-actions {
    bottom: 0;
}

.wa-view-head {
    top: 0;
}

.wa-view-actions {
    bottom: 0;
}

/* Confirm: тоже sticky кнопки */
.wa-confirm-actions {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-top: 12px;
}

/* На маленьких экранах — меньше отступы */
@media (max-width: 640px) {
    .wa-modal-dialog,
    .wa-view-box,
    .wa-confirm-box {
        max-height: calc(100vh - 32px) !important;
        margin: 16px auto 0 !important;
    }

    .wa-modal-body,
    .wa-view-body,
    .wa-confirm-text {
        max-height: calc(100vh - 170px) !important;
    }
}

/* контейнер дерева */
.wa-tree {
    margin-top: 6px;
}

/* узел */
.wa-subnode {
    position: relative;
}

/* дети: вертикальная линия слева */
.wa-subchildren {
    position: relative;
    margin-left: 18px; /* базовый отступ дерева */
    padding-left: 14px;
}

.wa-subchildren:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 10px;
    width: 2px;
    background: rgba(0, 0, 0, .10);
    border-radius: 0;
}

/* строка подзадачи */
.wa-subrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 10px 10px;
    margin: 6px 0;
    background: rgba(0, 0, 0, .03);
}

/* горизонтальная “ветка” к ребенку */
.wa-subnode .wa-subrow:before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 14px;
    border-top: 2px solid rgba(0, 0, 0, .10);
    transform: translateY(-50%);
}

/* корень без линии слева */
.wa-tree > .wa-subnode > .wa-subrow:before {
    display: none;
}

/* fold button */
.wa-treefold {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    opacity: .75;
    cursor: pointer;
}

.wa-treefold--empty {
    opacity: 0;
}

.wa-subnode.is-collapsed > .wa-subrow .wa-treefold i {
    transform: rotate(-90deg);
}

.wa-treefold i {
    transition: transform .15s ease;
}

/* collapse behavior */
.wa-subnode.is-collapsed > .wa-subchildren {
    display: none;
}

/* разные размеры “плашек” по уровням */
.wa-subrow.level-0 {
    padding: 12px 12px;
    border-radius: 14px;
}

.wa-subrow.level-0 .wa-subtext {
    font-size: 15px;
    font-weight: 700;
}

.wa-subrow.level-1 {
    padding: 10px 10px;
    border-radius: 12px;
}

.wa-subrow.level-1 .wa-subtext {
    font-size: 14px;
    font-weight: 650;
}

.wa-subrow.level-2 {
    padding: 9px 9px;
    border-radius: 11px;
}

.wa-subrow.level-2 .wa-subtext {
    font-size: 13px;
    font-weight: 600;
}

.wa-subrow.level-3,
.wa-subrow.level-4,
.wa-subrow.level-5 {
    padding: 8px 8px;
    border-radius: 10px;
}

.wa-subrow.level-3 .wa-subtext,
.wa-subrow.level-4 .wa-subtext,
.wa-subrow.level-5 .wa-subtext {
    font-size: 12.5px;
    font-weight: 600;
}

/* чуть компактнее чекбокс/иконки, если нужно */
.wa-subrow .wa-subactions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* =========================
   SUBTASK TREE (rounded lines)
   Требования по HTML:
   - каждый узел: .wa-subnode  (обёртка)
   - внутри строка: .wa-subitem
   - уровень хранить в data-level="0/1/2..."
   ========================= */

.wa-subtree {
    position: relative;
    padding: 6px 0;
}

/* узел */
.wa-subnode {
    position: relative;
    margin: 4px 0;
}

/* строка подзадачи (плашка) */
.wa-subnode > .wa-subitem {
    position: relative;
    /*margin-left: calc(var(--wa-tree-indent, 20px) * var(--level, 0));*/
    border-radius: 14px;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* разные размеры плашек по уровню */
.wa-subnode[data-level="0"] > .wa-subitem {
    padding: 10px 12px;
    font-size: 14px;
}

.wa-subnode[data-level="1"] > .wa-subitem {
    padding: 8px 10px;
    font-size: 13px;
    opacity: .98;
}

.wa-subnode[data-level="2"] > .wa-subitem {
    padding: 7px 10px;
    font-size: 12.5px;
    opacity: .96;
}

.wa-subnode[data-level="3"] > .wa-subitem {
    padding: 6px 9px;
    font-size: 12px;
    opacity: .94;
}

/* hover — чуть приподнять */
.wa-subnode > .wa-subitem:hover {
    transform: translateY(-1px);
}

/* вертикальная линия "ствол" (закруглённая) */
.wa-subnode::before {
    content: "";
    position: absolute;
    /*left: calc(var(--wa-tree-indent, 20px) * var(--level, 0) - 12px);*/
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}

/* горизонтальная линия-ветка к плашке (закруглённая) */
.wa-subnode::after {
    content: "";
    position: absolute;
    /*left: calc(var(--wa-tree-indent, 20px) * var(--level, 0) - 12px);*/
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    transform: translateY(-50%);
    pointer-events: none;
}

/* корневой уровень — без линии слева */
.wa-subnode[data-level="0"]::before,
.wa-subnode[data-level="0"]::after {
    display: none;
}

/* "колено" (rounded corner) у ветки */
/*.wa-subnode[data-level]:not([data-level="0"]) .wa-subitem::before{*/
/*    content:"";*/
/*    position:absolute;*/
/*    left: -14px;*/
/*    top: 50%;*/
/*    width: 14px;*/
/*    height: 14px;*/
/*    border-left: 2px solid rgba(255,255,255,.14);*/
/*    border-bottom: 2px solid rgba(255,255,255,.14);*/
/*    border-bottom-left-radius: 14px;*/
/*    transform: translateY(-50%);*/
/*    pointer-events:none;*/
/*}*/

/* скрытие детей, если узел свернут */
.wa-subnode.is-collapsed > .wa-subchildren {
    display: none;
}

/* ===== TREE LINES (rounded) + sizes ===== */
.wa-subtree {
    position: relative;
    padding: 6px 0;
    --wa-tree-indent: 20px;
}

.wa-subnode {
    position: relative;
    margin: 6px 0;
}

/* разные размеры "плашек" по уровню */
.wa-subnode[data-level="0"] > .wa-subitem {
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
}

.wa-subnode[data-level="1"] > .wa-subitem {
    padding: 9px 11px;
    border-radius: 14px;
    font-size: 13px;
}

.wa-subnode[data-level="2"] > .wa-subitem {
    padding: 8px 10px;
    border-radius: 13px;
    font-size: 12.5px;
}

.wa-subnode[data-level="3"] > .wa-subitem {
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.wa-subnode > .wa-subitem {
    /*margin-left: calc(var(--wa-tree-indent) * var(--level));*/
    position: relative;
}

/* "ствол" */
.wa-subnode::before {
    content: "";
    position: absolute;
    /*left: calc(var(--wa-tree-indent) * var(--level) - 12px);*/
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}

/* ветка к плашке */
.wa-subnode::after {
    content: "";
    position: absolute;
    left: calc(var(--wa-tree-indent) * var(--level) - 12px);
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    transform: translateY(-50%);
    pointer-events: none;
}

/* корень без линий */
.wa-subnode[data-level="0"]::before,
.wa-subnode[data-level="0"]::after {
    display: none;
}

/* округлённое "колено" */
/*.wa-subnode[data-level]:not([data-level="0"]) > .wa-subitem::before{*/
/*    content:"";*/
/*    position:absolute;*/
/*    left: -14px;*/
/*    top: 50%;*/
/*    width: 14px; height: 14px;*/
/*    border-left: 2px solid rgba(255,255,255,.14);*/
/*    border-bottom: 2px solid rgba(255,255,255,.14);*/
/*    border-bottom-left-radius: 14px;*/
/*    transform: translateY(-50%);*/
/*    pointer-events:none;*/
/*}*/

/* fold button */
.wa-treefold {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .8;
}

.wa-treefold--empty {
    display: inline-block;
    width: 26px;
    height: 26px;
    opacity: 0;
}

.wa-subnode.is-collapsed > .wa-subchildren {
    display: none;
}

.wa-subnode.is-collapsed > .wa-subitem .wa-treefold i {
    transform: rotate(-90deg);
}

/* ===== Task "in work" animated border ===== */
.wa-tcard.is-work {
    position: relative;
}

.wa-tcard.is-work::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    padding: 2px;
    background: linear-gradient(90deg,
    rgba(0, 255, 200, 0),
    rgba(0, 255, 200, .45),
    rgba(140, 90, 255, .55),
    rgba(0, 255, 200, .45),
    rgba(0, 255, 200, 0)
    );
    background-size: 220% 220%;
    animation: waBorderRun 2.2s linear infinite;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
    opacity: .95;
}

@keyframes waBorderRun {
    0% {
        background-position: 0% 50%
    }
    100% {
        background-position: 220% 50%
    }
}

/* =========================
   Subtask "in work" highlight
   ========================= */

/* базовая подзадача */
/* контейнер узла (важно для линий дерева, но не обязателен) */
.wa-subnode {
    position: relative;
}

/* базовая строка подзадачи */
.wa-subitem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;
    border-radius: 22px;

    /* фон плашки */
    background: rgba(255, 255, 255, .78); /* если темная тема — поменяешь */
    backdrop-filter: blur(8px);

    /* чтоб псевдо-элементы не вылезали */
    overflow: hidden;
}

/* градиентная рамка (как у первой) */
.wa-subitem::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px; /* толщина рамки */
    background: linear-gradient(90deg, #61A5FF, #3FF0C5);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .55; /* рамка по умолчанию */
}

/* мягкое свечение */
.wa-subitem::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 50%, rgba(97, 165, 255, .18), transparent 60%),
    radial-gradient(circle at 85% 50%, rgba(63, 240, 197, .16), transparent 60%);
    filter: blur(10px);
    pointer-events: none;
    opacity: .25; /* свечение по умолчанию */
}

/* hover — усиливаем эффект */
.wa-subnode:hover > .wa-subitem::before {
    opacity: .85;
}

.wa-subnode:hover > .wa-subitem::after {
    opacity: .45;
}

/* active (если будешь ставить класс is-active) */
.wa-subnode.is-active > .wa-subitem::before {
    opacity: 1;
}

.wa-subnode.is-active > .wa-subitem::after {
    opacity: .55;
}

/* БЕГАЮЩАЯ рамка (IN_PROGRESS) */
.wa-subitem.is-work::before {
    background: linear-gradient(90deg,
    #61A5FF, #3FF0C5, #61A5FF, #3FF0C5, #61A5FF
    );
    background-size: 300% 100%;
    animation: waBorderRun 2.2s linear infinite;
    opacity: 1;
}

/* свечение сильнее, когда "в работе" */
.wa-subitem.is-work::after {
    opacity: .70;
}

@keyframes waBorderRun {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.wa-subadd-inline {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    margin-bottom: 10px;
}

.wa-subadd-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wa-subadd-input {
    flex: 1;
    min-width: 180px;
}

.wa-flash .wa-subitem {
    animation: waFlash 1.2s ease-out;
}

@keyframes waFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .20);
    }
    40% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .10);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.wa-upload-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 6px;
    border-radius: 2px;
    overflow: hidden;
}

.wa-upload-fill {
    height: 100%;
    width: 0%;
    background: #4caf50;
    transition: width 0.2s ease;
}

.wa-msg--error {
    opacity: 0.7;
}

.wa-iconbtn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #666;
    transition: all .15s ease;
}

.wa-iconbtn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}

.wa-iconbtn--primary {
    color: #0d6efd;
}

.wa-iconbtn--primary:hover {
    background: rgba(13, 110, 253, 0.1);
}

.wa-iconbtn--warn {
    color: #f59e0b;
}

.wa-iconbtn--warn:hover {
    background: rgba(245, 158, 11, 0.12);
}

.wa-iconbtn--danger {
    color: #ef4444;
}

.wa-iconbtn--danger:hover {
    background: rgba(239, 68, 68, 0.12);
}


/* контейнер */
.wa-userchip--rich {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background .2s;
    cursor: pointer;
}

.wa-userchip--rich:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* аватар */
.wa-userchip-ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2b2f3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    overflow: visible;
    position: relative;
}

.wa-userchip-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* 🔥 важно */
}

/* статус (онлайн) */
.wa-userchip-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #1f2430;
}

/* текст */
.wa-userchip-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.wa-userchip-name {
    font-size: 13px;
    font-weight: 600;
}

.wa-userchip-sub {
    font-size: 11px;
    opacity: 0.6;
}

.wa-userchip-ava {
    cursor: pointer;
    position: relative;
}

.wa-userchip-ava::after {
    content: "📷";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: .2s;
    font-size: 14px;
    object-fit: cover;
    border-radius: 50%;
}

.wa-userchip-ava:hover::after {
    opacity: 1;
}

.wa-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

.wa-modal.is-open {
    display: block;
}

.wa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.wa-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 60px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.wa-modal-md {
    max-width: 640px;
}

.wa-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.wa-modal-title {
    font-size: 20px;
    font-weight: 700;
}

.wa-modal-x {
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.wa-modal-body {
    padding: 20px;
}

.wa-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

.wa-anim-in {
    animation: waIn 320ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes waIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
        filter: blur(6px);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
        filter: blur(0);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.wa-anim-out {
    animation: waOut 260ms ease forwards;
}

@keyframes waOut {
    to {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
        filter: blur(4px);
    }
}


.wa-anim-update {
    animation: waPulse 400ms ease;
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    30% {
        box-shadow: 0 0 25px rgba(80, 150, 255, 0.6);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

.wa-subnode {
    transition: all 0.25s ease;
}

.wa-subnode.wa-sub-in {
    animation: waSubIn 260ms ease;
}

@keyframes waSubIn {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.wa-subnode.wa-sub-out {
    animation: waSubOut 200ms ease forwards;
}

@keyframes waSubOut {
    to {
        opacity: 0;
        transform: translateX(10px);
    }
}

.wa-tcard {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-tcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.wa-ripple {
    position: relative;
    overflow: hidden;
}

.wa-ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.3);
    animation: waRipple 400ms linear;
}

@keyframes waRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* по умолчанию (desktop) */
.wa-submenu-btn {
    display: none;
}

@media (max-width: 768px) {

    .wa-subactions {
        display: none;
    }

    .wa-submenu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }

}

.wa-submenu-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.wa-submenu-btn:hover {
    background: var(--wa-surface-2);
}

.wa-submenu {
    position: absolute;
    right: 10px;
    top: 36px;
    background: var(--wa-surface-3);
    border: 1px solid var(--wa-border-soft);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
    min-width: 140px;
}

.wa-submenu-item {
    border: none;
    background: transparent;
    padding: 8px 10px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
}

.wa-submenu-item:hover {
    background: var(--wa-surface-2);
}

.wa-subnode {
    position: relative;
    overflow: visible;
}

.wa-submenu {
    position: absolute;
    z-index: 9999;
}

/* =========================================
   SUBTASK OVERFLOW / COMPACT ACTIONS
   Canonical final overrides
   ========================================= */

/* card and subtask containers must allow floating menus */
.wa-tcard,
.wa-sublist,
.wa-subitem,
.wa-subactions {
    overflow: visible;
}

.wa-tcard {
    position: relative;
    z-index: 1;
}

.wa-tcard.is-active {
    z-index: 1000;
}

/*.wa-tcard {*/
/*    overflow: hidden;*/
/*}*/

/* each subtask node creates its own stacking context */
.wa-subnode {
    position: relative;
    overflow: visible;
    z-index: 1;
}

/* active node rises above siblings so submenu is never clipped */
.wa-subnode.is-active {
    z-index: 50;
}

/* base subtask row layout */
.wa-subitem {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
}

/* text truncation inside compact row */
.wa-subtext {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* right action group */
.wa-subactions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* kebab button is hidden in regular mode */
.wa-submenu-btn {
    display: none;
}

/* floating submenu */
.wa-submenu {
    position: absolute;
    right: 10px;
    top: 36px;
    z-index: 9999;
    min-width: 140px;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--wa-surface-3);
    border: 1px solid var(--wa-border-soft);
    border-radius: 12px;
}

/* compact mode: hide inline actions, show submenu trigger */
.wa-subitem.is-compact .wa-subactions {
    display: none !important;
}

.wa-subitem.is-compact .wa-submenu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.wa-subitem.is-compact .wa-submenu-btn:hover {
    background: var(--wa-surface-2);
}

/* mobile: always collapse inline actions into submenu button */
@media (max-width: 768px) {
    .wa-subactions {
        display: none;
    }

    .wa-submenu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 8px;
    }

    .wa-submenu-btn:hover {
        background: var(--wa-surface-2);
    }
}


.wa-modules-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* карточка */
.wa-module-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;

    background: var(--wa-surface-2);
    border: 1px solid var(--wa-border-soft);
}

/* текст */
.wa-module-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--wa-text-strong);
}

.wa-module-desc {
    margin-top: 4px;
    font-size: 12px;
    color: var(--wa-muted);
}

/* SWITCH */
/* =========================
   MODULE SWITCH (WA THEME)
   ========================= */

.wa-switch {
    margin-top: 3%;
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
    flex: 0 0 auto;
}

.wa-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* фон */
.wa-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;

    border-radius: var(--wa-radius-pill);

    background: var(--wa-border-soft);
    border: 1px solid var(--wa-border);

    transition: var(--wa-tr-fast);
}

/* кружок */
.wa-slider:before {
    content: "";
    position: absolute;

    width: 24px;
    height: 24px;

    left: 3px;
    top: 2.5px;

    border-radius: 50%;

    background: var(--wa-surface-3);

    box-shadow: var(--wa-shadow-md);

    transition: var(--wa-tr-fast);
}

/* ВКЛ */
.wa-switch input:checked + .wa-slider {
    background: linear-gradient(
            135deg,
            var(--wa-accent),
            var(--wa-accent2)
    );

    border-color: var(--wa-accent-border);
}

/* движение */
.wa-switch input:checked + .wa-slider:before {
    transform: translateX(24px);
}

/* hover */
.wa-switch:hover .wa-slider {
    filter: brightness(1.08);
}

/* focus */
.wa-switch input:focus + .wa-slider {
    box-shadow: 0 0 0 3px var(--wa-accent-soft);
}

.wa-dep-row {
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--wa-surface-2);
    border: 1px solid var(--wa-border-soft);
    margin-bottom: 8px;
}


.wa-dep-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--wa-surface-2);
    border: 1px solid var(--wa-border-soft);
    margin-bottom: 8px;
}

.wa-dep-name {
    color: var(--wa-text-strong);
    font-weight: 600;
}

.wa-dep-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================
   MODAL LAYER
========================= */

.wa-modal {
    position: fixed;
    inset: 0;
    /*z-index: 9999;*/

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity var(--wa-tr-fast), visibility var(--wa-tr-fast);
}

.wa-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* =========================
   DIALOG
========================= */

.wa-modal-dialog {
    position: relative;
    z-index: 2;

    width: min(100%, 560px);
    max-height: calc(100vh - 48px);
    overflow: auto;

    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius-xl);
    box-shadow: var(--wa-shadow-lg);

    color: var(--wa-text);
    transform: translateY(14px) scale(.98);
    opacity: 0;

    transition: transform var(--wa-tr-med),
    opacity var(--wa-tr-med),
    background var(--wa-tr-fast),
    border-color var(--wa-tr-fast);
}

.wa-modal.is-open .wa-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.wa-modal-dialog--sm {
    width: min(100%, 420px);
}

/* =========================
   SECTIONS
========================= */

.wa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wa-border-soft);
}

.wa-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--wa-text-strong);
    line-height: 1.2;
}

.wa-modal-body {
    padding: 18px 20px;
}

.wa-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--wa-border-soft);
}

/* =========================
   CONTENT
========================= */

.wa-modal-text {
    color: var(--wa-text);
    font-size: 14px;
    line-height: 1.45;
}

.wa-modal-note {
    margin-top: 8px;
    color: var(--wa-muted2);
    font-size: 12px;
    line-height: 1.4;
}

.wa-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wa-label {
    color: var(--wa-text-strong);
    font-size: 13px;
    font-weight: 600;
}

/* =========================
   CLOSE BUTTON
========================= */

.wa-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border: 1px solid var(--wa-border-soft);
    border-radius: 10px;
    background: transparent;
    color: var(--wa-muted);
    cursor: pointer;

    transition: color var(--wa-tr-fast),
    border-color var(--wa-tr-fast),
    background var(--wa-tr-fast),
    transform var(--wa-tr-fast);
}

.wa-modal-close:hover {
    color: var(--wa-text-strong);
    background: var(--wa-surface-2);
    border-color: var(--wa-border);
}

.wa-modal-close:active {
    transform: scale(.96);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {
    .wa-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .wa-modal-dialog,
    .wa-modal-dialog--sm {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 18px 18px 0 0;
    }

    .wa-modal.is-open .wa-modal-dialog {
        transform: translateY(0) scale(1);
    }
}


.wa-file-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
}

.wa-file-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(6px);
}

.wa-file-dialog {
    position: absolute;
    inset: 40px;
    display: flex;
    flex-direction: column;

    background: var(--wa-surface);
    border-radius: var(--wa-radius-xl);
    overflow: hidden;

    box-shadow: var(--wa-shadow-lg);
}

.wa-file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--wa-border-soft);
}

.wa-file-title {
    font-weight: 600;
}

.wa-file-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

/* viewer */
.wa-file-body iframe,
.wa-file-body img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
}

/* close */
.wa-file-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--wa-muted);
}

.wa-fileitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wa-fileitem > i,
.wa-fileitem > span {
    flex: 0 1 auto;
}

.wa-filemeta {
    display: flex;
    align-items: center;
    gap: 6px; /* 🔥 расстояние между кнопками */
}

.wa-fileleft {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0; /* 🔥 важно для обрезки */
    flex: 1; /* занимает остаток */
}

.wa-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 🔥 троеточие */
}

.wa-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.wa-pagination li {
    list-style: none;
}

.wa-page-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 10px;
    border: 1px solid var(--wa-border);

    background: var(--wa-surface);
    color: var(--wa-text);

    text-decoration: none;
    transition: .2s;
}

.wa-page-link:hover {
    background: var(--wa-surface-2);
}

/* активная */
.wa-pagination .is-active a {
    background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent2));
    color: #fff;
    border: none;
}

/* disabled */
.wa-pagination .is-disabled a {
    opacity: .4;
    pointer-events: none;
}

li.prev.disabled,
li.next.disabled {
    display: none;
}

.wa-msg-filelink,
.wa-msg-fileimg-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.wa-msg-filelink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
}

.wa-msg-file-deleted {
    opacity: .65;
    font-style: italic;
}

.wa-msg-filemeta {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .7;
}

.wa-msg-fileimg {
    max-width: 220px;
    max-height: 180px;
    border-radius: 12px;
    display: block;
    object-fit: cover;
}

.wa-subdrag {
    cursor: grab;
    opacity: 0.6;
    margin-right: 6px;
}

.wa-subdrag:active {
    cursor: grabbing;
}

.wa-subnode {
    position: relative;
}

.wa-subnode.is-dragging {
    opacity: 0.4;
}

.wa-drop-before {
    border-top: 2px solid #4f8cff;
}

.wa-drop-after {
    border-bottom: 2px solid #4f8cff;
}

.wa-drop-inside {
    background: rgba(79, 140, 255, 0.1);
}

.wa-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0.9;
}

/*.wa-tcard {*/
/*    min-height: 60px;*/
/*}*/

.wa-tcard.is-drop {
    outline: 2px dashed #4f8cff;
}

/* =========================
   DRAG BUTTON (Notion style)
   ========================= */

.wa-subdrag {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 8px;
    background: transparent;

    padding: 0; /* важно */
    line-height: 0; /* важно */
    font-size: 0; /* чтобы не тянуло вверх */

    cursor: grab;

    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease, background .15s ease;
}

.wa-subitem:hover .wa-subdrag,
.wa-subdrag:hover {
    opacity: 1;
    visibility: visible;
}

.wa-subdrag:hover {
    background: rgba(255, 255, 255, .06);
}


.wa-subdrag::before {

    content: '';

    position: absolute; /* 🔥 ключ */

    top: 40%;

    left: 5%;

    transform: translate(-50%, -50%);

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #9ca3af;

    box-shadow: 0 5px 0 #9ca3af,
    0 10px 0 #9ca3af,
    6px 0 0 #9ca3af,
    6px 5px 0 #9ca3af,
    6px 10px 0 #9ca3af;

}

/* иконка */


/* чуть сдвигаем контент */
.wa-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-subdrag-handle {
    display: grid;
    grid-template-columns: repeat(2, 3px);
    gap: 2px;
}

.wa-subdrag-handle::before,
.wa-subdrag-handle::after {
    content: '';
}

.wa-subdrag-handle i {
    display: none; /* скрываем fontawesome */
}

.wa-date-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    transition: all .2s ease;
}

.wa-date-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .15);
    outline: none;
}

.wa-date-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.wa-date-modal {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-date-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.wa-date-row {
    display: flex;
    gap: 8px;
}

.wa-date-row--2 > * {
    flex: 1 1 0;
}

.wa-date-input {
    width: 100%;
}

/* =========================
   DEADLINE ANIMATIONS
   ========================= */

@keyframes wa-deadline-icon-soft {
    0%, 100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes wa-deadline-icon-warn {
    0%, 100% {
        transform: scale(1);
        opacity: 0.94;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes wa-deadline-icon-danger {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.16);
        opacity: 1;
    }
}

@keyframes wa-deadline-icon-overdue {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.20);
        opacity: 1;
    }
}

@keyframes wa-deadline-ring-soft {
    0% {
        transform: scale(1);
        opacity: 0.00;
    }
    30% {
        opacity: 0.18;
    }
    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

@keyframes wa-deadline-ring-warn {
    0% {
        transform: scale(1);
        opacity: 0.00;
    }
    30% {
        opacity: 0.22;
    }
    100% {
        transform: scale(1.26);
        opacity: 0;
    }
}

@keyframes wa-deadline-ring-danger {
    0% {
        transform: scale(1);
        opacity: 0.00;
    }
    30% {
        opacity: 0.26;
    }
    100% {
        transform: scale(1.30);
        opacity: 0;
    }
}

@keyframes wa-deadline-ring-overdue {
    0% {
        transform: scale(1);
        opacity: 0.00;
    }
    25% {
        opacity: 0.32;
    }
    100% {
        transform: scale(1.34);
        opacity: 0;
    }
}

/* =========================
   BASE
   ========================= */

.wa-subicon.wa-subicon--date {
    position: relative;
    border-radius: 12px !important;
    overflow: visible;
    transition: background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.wa-subicon.wa-subicon--date::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.wa-subicon.wa-subicon--date i {
    position: relative;
    z-index: 1;
    color: inherit;
    display: inline-block;
    transform-origin: center;
    will-change: transform, opacity;
}

/* =========================
   <= 5 DAYS
   ========================= */

.wa-subicon.wa-subicon--date.wa-deadline--soon {
    background: #fff8e8;
    color: #9a6b00;
    border: 1px solid #fde3a7;
    box-shadow: 0 0 0 1px rgba(250, 173, 20, 0.06);
}

.wa-subicon.wa-subicon--date.wa-deadline--soon i {
    animation: wa-deadline-icon-soft 2.2s ease-in-out infinite;
}

.wa-subicon.wa-subicon--date.wa-deadline--soon::after {
    background: rgba(250, 173, 20, 0.16);
    animation: wa-deadline-ring-soft 2.2s ease-out infinite;
}

/* =========================
   <= 3 DAYS
   ========================= */

.wa-subicon.wa-subicon--date.wa-deadline--warn {
    background: #fff3e6;
    color: #a14f03;
    border: 1px solid #ffd7a8;
    box-shadow: 0 0 0 1px rgba(250, 140, 22, 0.08);
}

.wa-subicon.wa-subicon--date.wa-deadline--warn i {
    animation: wa-deadline-icon-warn 1.7s ease-in-out infinite;
}

.wa-subicon.wa-subicon--date.wa-deadline--warn::after {
    background: rgba(250, 140, 22, 0.18);
    animation: wa-deadline-ring-warn 1.7s ease-out infinite;
}

/* =========================
   <= 1 DAY
   ========================= */

.wa-subicon.wa-subicon--date.wa-deadline--danger {
    background: #fff1f0;
    color: #cf1322;
    border: 1px solid #ffc1bd;
    box-shadow: 0 0 0 1px rgba(207, 19, 34, 0.10);
}

.wa-subicon.wa-subicon--date.wa-deadline--danger i {
    animation: wa-deadline-icon-danger 1.15s ease-in-out infinite;
}

.wa-subicon.wa-subicon--date.wa-deadline--danger::after {
    background: rgba(207, 19, 34, 0.20);
    animation: wa-deadline-ring-danger 1.15s ease-out infinite;
}

/* =========================
   OVERDUE
   ========================= */

.wa-subicon.wa-subicon--date.wa-deadline--overdue {
    background: #fff1f0;
    color: #a8071a;
    border: 1px solid #ffb3b0;
    box-shadow: 0 0 0 1px rgba(168, 7, 26, 0.12),
    0 0 10px rgba(168, 7, 26, 0.08);
}

.wa-subicon.wa-subicon--date.wa-deadline--overdue i {
    animation: wa-deadline-icon-overdue 0.9s ease-in-out infinite;
}

.wa-subicon.wa-subicon--date.wa-deadline--overdue::after {
    background: rgba(168, 7, 26, 0.24);
    animation: wa-deadline-ring-overdue 0.9s ease-out infinite;
}

/* =========================
   HOVER
   ========================= */

.wa-subicon.wa-subicon--date.wa-deadline--soon:hover,
.wa-subicon.wa-subicon--date.wa-deadline--warn:hover,
.wa-subicon.wa-subicon--date.wa-deadline--danger:hover,
.wa-subicon.wa-subicon--date.wa-deadline--overdue:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
}

/* =========================
   DONE = NO ANIMATION
   ========================= */

.wa-subitem.is-done .wa-subicon--date,
.wa-subitem.is-done .wa-subicon--date i,
.wa-subitem.is-done .wa-subicon--date::after {
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.wa-deadline-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.wa-deadline-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
}

.wa-deadline-dialog {
    position: relative;
    width: min(680px, calc(100vw - 32px));
    margin: 72px auto 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.wa-deadline-head {
    padding: 18px 20px 12px;
    border-bottom: 1px solid #eef0f3;
}

.wa-deadline-title {
    font-size: 18px;
    font-weight: 700;
}

.wa-deadline-body {
    padding: 16px 20px;
    max-height: 60vh;
    overflow: auto;
}

.wa-deadline-foot {
    padding: 14px 20px 18px;
    border-top: 1px solid #eef0f3;
    display: flex;
    justify-content: flex-end;
}

.wa-deadline-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wa-deadline-item {
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafbfc;
}

.wa-deadline-project {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.wa-deadline-sub {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.wa-deadline-text {
    font-size: 13px;
    color: #374151;
}

.wa-deadline-chip {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.wa-deadline-chip--5d {
    background: #fff8e8;
    color: #9a6b00;
}

.wa-deadline-chip--3d {
    background: #fff3e6;
    color: #a14f03;
}

.wa-deadline-chip--1d {
    background: #fff1f0;
    color: #cf1322;
}

.wa-deadline-chip--custom {
    background: #eef6ff;
    color: #155eef;
}

.wa-deadline-chip--overdue {
    background: #fff1f0;
    color: #a8071a;
}

/* =========================
   VIEW SWITCH
   ========================= */

.wa-view-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.wa-view-btn {
    border: none;
    background: #f3f4f6;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.wa-view-btn.is-active {
    background: #155eef;
    color: #fff;
}

/* =========================
   KANBAN
   ========================= */
.wa-kanban-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* 👉 свайп как перелистывание */
    scroll-snap-type: x mandatory;
}

.wa-kanban {
    display: flex;
    gap: 16px;
    align-items: stretch;
    height: calc(100vh - 140px);
    min-height: 520px;

    overflow-y: hidden;
    padding-bottom: 4px;
    width: max-content;
}

.wa-kanban-col {
    flex: 0 0 420px; /* 👈 фикс ширина */
    min-width: 420px;

    display: flex;
    flex-direction: column;

    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;

    /* 👉 для свайпа */
    scroll-snap-align: start;
}

.wa-kanban-head {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 2;
}

.wa-kanban-title {
    font-weight: 700;
    font-size: 15px;
    color: #111827;
}

.wa-kanban-count {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.wa-kanban-body {
    flex: 1;
    min-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.wa-kanban-body.is-over {
    background: rgba(21, 94, 239, 0.05);
    outline: 2px dashed #3b82f6;
    outline-offset: -6px;
}

.wa-kanban-body::-webkit-scrollbar {
    width: 6px;
}

.wa-kanban-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.wa-kanban-body::-webkit-scrollbar-track {
    background: transparent;
}

.wa-tcard {
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.wa-tcard.is-dragging {
    opacity: .55;
    transform: scale(.98);
}

/* =========================
   DARK THEME
   ========================= */

body.dark .wa-view-btn {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark .wa-view-btn.is-active {
    background: #2563eb;
    color: #fff;
}

body.dark .wa-kanban-col {
    background: #1f2937;
    border-color: #374151;
}

body.dark .wa-kanban-head {
    background: #111827;
    border-color: #374151;
}

body.dark .wa-kanban-title {
    color: #f3f4f6;
}

body.dark .wa-kanban-count {
    background: #374151;
    color: #e5e7eb;
}

body.dark .wa-kanban-body {
    scrollbar-color: #4b5563 transparent;
}

body.dark .wa-kanban-body.is-over {
    background: rgba(59, 130, 246, 0.08);
    outline-color: #60a5fa;
}

body.dark .wa-kanban-body::-webkit-scrollbar-thumb {
    background: #4b5563;
}

body.dark .wa-tcard {
    background: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 1100px) {
    .wa-kanban-col {
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .wa-kanban {
        height: calc(100vh - 120px);
        gap: 12px;
    }

    .wa-kanban-col {
        min-width: 260px;
    }

    .wa-kanban-head {
        padding: 10px 12px;
    }

    .wa-kanban-body {
        padding: 10px;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .wa-kanban-wrap {
        scroll-snap-type: x mandatory;
    }

    .wa-kanban-col {
        flex: 0 0 90vw; /* 👈 почти на весь экран */
        min-width: 90vw;
    }
}

.wa-nav-item--projects-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wa-nav-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wa-view-mode-label {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.wa-view-switch {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.wa-view-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}

.wa-view-btn:hover {
    background: #e5e7eb;
}

.wa-view-btn.is-active {
    background: #155eef;
    color: #fff;
}

/* =========================
   COLOR COLUMNS (добавка, не ломает текущие стили)
   ========================= */

/* НОВЫЕ */
.wa-kanban-col--new {
    background: #f5f9ff;
    border-color: #dbeafe;
}

.wa-kanban-col--new .wa-kanban-head {
    background: #eaf3ff;
}

/* В РАБОТЕ */
.wa-kanban-col--in_progress {
    background: #fff8f1;
    border-color: #fde7c7;
}

.wa-kanban-col--in_progress .wa-kanban-head {
    background: #fff1df;
}

/* ВАЖНЫЕ */
.wa-kanban-col--important {
    background: #fff8fb;
    border-color: #f7d7e6;
}

.wa-kanban-col--important .wa-kanban-head {
    background: #fdeef5;
}

/* ПРОСРОЧЕННЫЕ */
.wa-kanban-col--overdue {
    background: #fff5f5;
    border-color: #f5caca;
}

.wa-kanban-col--overdue .wa-kanban-head {
    background: #fde8e8;
}

/* ЗАВЕРШЕННЫЕ */
.wa-kanban-col--done {
    background: #f5fbf7;
    border-color: #d7eadc;
}

.wa-kanban-col--done .wa-kanban-head {
    background: #eaf7ee;
}

/* =========================
   DARK COLOR COLUMNS
   ========================= */

body.dark .wa-kanban-col--new {
    background: #172554;
    border-color: #1d4ed8;
}

body.dark .wa-kanban-col--new .wa-kanban-head {
    background: #1e3a8a;
}

body.dark .wa-kanban-col--in_progress {
    background: #4a2f14;
    border-color: #9a6700;
}

body.dark .wa-kanban-col--in_progress .wa-kanban-head {
    background: #5b3a18;
}

body.dark .wa-kanban-col--important {
    background: #4a2038;
    border-color: #a855f7;
}

body.dark .wa-kanban-col--important .wa-kanban-head {
    background: #5b2744;
}

body.dark .wa-kanban-col--overdue {
    background: #4a1f1f;
    border-color: #dc2626;
}

body.dark .wa-kanban-col--overdue .wa-kanban-head {
    background: #5a2626;
}

body.dark .wa-kanban-col--done {
    background: #1d3b2a;
    border-color: #15803d;
}

body.dark .wa-kanban-col--done .wa-kanban-head {
    background: #244632;
}

.wa-toast-container {
    position: fixed;
    top: 75px;
    right: 75px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wa-toast {
    min-width: 280px;
    max-width: 360px;
    padding: 14px 16px;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);

    display: flex;
    align-items: center;
    gap: 10px;

    transform: translateX(120%);
    opacity: 0;
    transition: all .35s ease;

    position: relative;
    overflow: hidden;
}

.wa-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.wa-toast--success {
    background: linear-gradient(135deg, #28a745, #34d058);
}

.wa-toast--error {
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

.wa-toast--info {
    background: linear-gradient(135deg, #007bff, #4dabf7);
}

.wa-toast--warn {
    background: linear-gradient(135deg, #fd7e14, #ffa94d);
}

.wa-toast-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.wa-toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    cursor: pointer;
    opacity: .7;
    font-size: 14px;
}

.wa-toast-close:hover {
    opacity: 1;
}

.wa-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, .7);
    width: 100%;
    transform-origin: left;
}


/*.wa-subitem.is-compact .wa-subactions {*/
/*    display: none !important;*/
/*}*/

/*.wa-subitem.is-compact .js-submenu-open {*/
/*    display: inline-flex !important;*/
/*}*/

/*.wa-subitem:not(.is-compact) .js-submenu-open {*/
/*    display: none !important;*/
/*}*/

/*@media (max-width: 768px) {*/

/*    .wa-subactions {*/
/*        display: none !important;*/
/*    }*/

/*    .js-submenu-open {*/
/*        display: inline-flex !important;*/
/*        z-index: 10;*/
/*    }*/

/*}*/


/* final stacking fixes for subtask menus */
.wa-submenu {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    z-index: 999999999;
}

.wa-submenu.is-floating {
    position: fixed !important;
}

.wa-submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
}

.wa-submenu-item:hover {
    background: #f3f4f6;
}

.wa-submenu-item .wa-ico-badge {
    position: static;
    margin-left: auto;
}

.wa-subitem.is-compact .wa-subactions {
    display: none !important;
}

.wa-subitem.is-compact .js-submenu-open {
    display: inline-flex !important;
}

.wa-subitem:not(.is-compact) .js-submenu-open {
    display: none;
}

.wa-module-access {
    margin-top: 10px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
}

.wa-deps-list {
    margin-top: 6px;
}

.wa-dep-item {
    display: block;
    font-size: 13px;
    margin: 4px 0;
}

.is-hidden {
    display: none;
}

.wa-flash {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    animation: waFlashIn .3s ease;
}

.wa-flash-error {
    background: #fee2e2;
    color: #991b1b;
}

.wa-flash-success {
    background: #dcfce7;
    color: #166534;
}

@keyframes waFlashIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wa-gantt-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.wa-gantt-shell {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

}

.wa-gantt-pro {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* внутренний широкий слой */
.wa-gantt-inner {
    display: block;
    width: max-content;
    min-width: 100%;
}

.wa-gantt-head,
.wa-gantt-row,
.wa-gantt-project-row {
    display: flex;
    width: max-content;
}

.wa-gantt-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.wa-gantt-name-head,
.wa-gantt-name {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    position: sticky;
    left: 0;
    z-index: 20;
    background: #fff;
    border-right: 1px solid #e5e7eb;
}

.wa-gantt-name-head {
    padding: 12px;
    font-weight: 800;
    z-index: 40;
}

.wa-gantt-time-head {
    display: flex;
    flex: 0 0 auto;
}

.wa-gantt-day {
    flex: 0 0 auto;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748b;
    border-right: 1px solid #eef2f7;
}

.wa-gantt-row {
    min-height: 38px;
    border-bottom: 1px solid #f1f5f9;
}

.wa-gantt-project-row {
    height: 44px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.wa-gantt-project-name {
    font-weight: 800;
    padding: 12px;
    background: #f8fafc;
}

.wa-gantt-tree-title {
    min-height: 38px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    white-space: normal;
    line-height: 1.2;
    padding: 6px 8px;
}

.wa-gantt-line {
    position: relative;
    flex: 0 0 auto;
    background-image: linear-gradient(to right, #eef2f7 1px, transparent 1px);
    background-size: 34px 100%;
    min-height: 38px;
}

.wa-gantt-bar {
    position: absolute;

    height: 32px;
    border-radius: 999px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .25);
    top: 50%;

    transform: translateY(-50%);
}

.wa-gantt-bar.is-new {
    background: #64748b;
}

.wa-gantt-bar.is-work {
    background: #2563eb;
}

.wa-gantt-bar.is-done {
    background: #16a34a;
}

.wa-gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ef4444;
    z-index: 4;
}

.wa-gantt-toggle {
    border: 0;
    margin-left: 15px;
    background: transparent;
    cursor: pointer;
    width: 18px;
    min-width: 18px;
    height: 50%;
    font-size: 10px;
    transition: transform .15s ease;
}

.wa-gantt-toggle.is-open {
    transform: rotate(180deg);
}

.wa-gantt-toggle-empty {
    width: 18px;
    min-width: 18px;
}

.wa-gantt-no-date {
    color: #94a3b8;
    font-size: 11px;
    margin-left: 6px;
}

.wa-bar-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: rgba(255, 255, 255, .3);
}

.wa-gantt-bar.dragging {
    opacity: .7;
}

.wa-gantt-pro {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;

}

.wa-gantt-pro.drag-scroll {

}


.wa-gantt-pro.is-drag-scroll {

}

.wa-gantt-inner {
    width: max-content !important;
    min-width: 100%;
}

.wa-content,
.wa-main,
.wa-page,
.wa-box {
    max-width: 100%;
    overflow-x: hidden;
}

.wa-gantt-bar {
    cursor: grab;
}

.wa-gantt-bar.dragging {
    cursor: grabbing;
    transition: none;
}

.wa-bar-text {
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-bar-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 2;
    background: transparent;
}

.wa-bar-resize:hover {
    background: rgba(255, 255, 255, .35);
}

.wa-bar-resize--left {
    left: 0;
    cursor: w-resize;
}

.wa-bar-resize--right {
    right: 0;
    cursor: e-resize;
}

.wa-gantt-project-title,
.wa-gantt-tree-title {
    position: relative;
}

.wa-gantt-menu-btn {
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.wa-gantt-menu-btn:hover {
    background: #f1f5f9;
}

.wa-gantt-menu {
    position: absolute;
    left: 300px;
    top: 6px;
    z-index: 999999;
    min-width: 210px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}

.wa-submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wa-submenu-item .wa-ico-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wa-gantt-day.is-weekend {
    background: rgba(255, 255, 255, .04);
    color: #ffb86b;
}

.wa-gantt-line {
    position: relative;
}

.wa-gantt-weekend-col {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .03);
    pointer-events: none;
}

.wa-gantt-bar.is-overdue {
    box-shadow: 0 0 0 2px #ff3b30 inset;
}

.wa-gantt-bar.is-danger {
    box-shadow: 0 0 0 2px #ff6b35 inset;
}

.wa-gantt-bar.is-warn {
    box-shadow: 0 0 0 2px #ffb020 inset;
}

.wa-gantt-bar.is-soon {
    box-shadow: 0 0 0 2px #ffd84d inset;
}

.wa-gantt-line {
    position: relative;
    overflow: hidden;
}

.wa-gantt-weekend-col {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
    z-index: 1;
}

.wa-gantt-bar {
    position: absolute;
    z-index: 5;
}

.wa-gantt-today {
    z-index: 6;
}

.wa-gantt-day.is-weekend {

    background: rgba(255, 184, 107, .12);

    color: #ffb86b;

}

.wa-gantt-weekend-col {
    background: rgba(255, 184, 107, .05);
}

.wa-gantt-day.is-weekend {
    background: rgba(255, 184, 107, .10);
    color: #ffb86b;
}

.wa-gantt-line {
    position: relative;
    overflow: hidden;
}

.wa-gantt-weekends {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.wa-gantt-weekend-col {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255, 184, 107, .06);
}

.wa-gantt-bar {
    z-index: 5;
}

.wa-gantt-today {
    z-index: 6;
}

.js-sub-assign-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wa-deadline-item {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #1e1f25;
    margin-bottom: 12px;
}

/* 5 дней */
.wa-deadline-item--5d {
    border-left: 4px solid #5bc0ff;
    background: rgba(91, 192, 255, .08);
}

/* 3 дня */
.wa-deadline-item--3d {
    border-left: 4px solid #4fd18b;
    background: rgba(79, 209, 139, .08);
}

/* 1 день */
.wa-deadline-item--1d {
    border-left: 4px solid #ffb86b;
    background: rgba(255, 184, 107, .08);
}

/* сегодня */
.wa-deadline-item--0d {
    border-left: 4px solid #ff8a4c;
    background: rgba(255, 138, 76, .10);
}

/* просрочено */
.wa-deadline-item--overdue {
    border-left: 4px solid #ff5f6d;
    background: rgba(255, 95, 109, .10);
}

/* кастом */
.wa-deadline-item--custom {
    border-left: 4px solid #b388ff;
    background: rgba(179, 136, 255, .10);
}

.wa-gantt-toggle {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cfd7e6;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}

.wa-gantt-toggle:hover {
    background: #f4f7fb;
}

.wa-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(2px);

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 999999;
}

.wa-loader-overlay.is-active {
    display: flex;
}

.wa-loader-box {
    text-align: center;
}

.wa-loader-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid #d7dce5;
    border-top-color: #3b82f6;
    border-radius: 50%;

    animation: waSpin .8s linear infinite;
}

.wa-loader-text {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
}

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


.wa-gantt-add-root {
    display: flex;
    min-height: 42px;
    border-top: 1px dashed rgba(255, 255, 255, .08);
}

.wa-gantt-add-box {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
}

.wa-gantt-add-input {
    width: 180px;
}


.wa-subtask-create-modal {
    max-width: 460px;
    border-radius: 18px;
    overflow: hidden;
}

.wa-subtask-create-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.wa-subtask-create-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    flex: 0 0 auto;
}

.wa-subtask-create-head .wa-modal-x {
    margin-left: auto;
}

.wa-subtask-create-subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: #7b8494;
}

.wa-subtask-create-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.wa-subtask-create-input {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    font-size: 15px;
}

.wa-subtask-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.wa-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    pointer-events: none;
}

.wa-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.wa-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .45);

    opacity: 0;
    transition: opacity .25s ease;
}

.wa-modal.is-open .wa-modal-backdrop {
    opacity: 1;
}

.wa-modal-dialog {
    position: relative;
    z-index: 2;

    opacity: 0;

    transform: translateY(18px) scale(.96);

    transition: transform .25s cubic-bezier(.22, 1, .36, 1),
    opacity .25s ease;

    will-change: transform, opacity;
}

.wa-modal.is-open .wa-modal-dialog {
    opacity: 1;

    transform: translateY(0) scale(1);
}

.wa-subtask-create-modal {
    box-shadow: 0 30px 80px rgba(0, 0, 0, .18),
    0 10px 25px rgba(0, 0, 0, .12);
}

.wa-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .25s ease,
    visibility .25s ease;
}

.wa-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wa-modal-dialog {
    transform: translateY(20px) scale(.96);
    opacity: 0;

    transition: transform .25s cubic-bezier(.22, 1, .36, 1),
    opacity .25s ease;
}

.wa-modal.is-open .wa-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.wa-modal--subtask-create {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: block;
    visibility: hidden;
    pointer-events: none;
}

.wa-modal--subtask-create.is-open {
    visibility: visible;
    pointer-events: auto;
}

.wa-modal--subtask-create .wa-modal-backdrop {
    opacity: 0;
    transition: opacity .22s ease;
}

.wa-modal--subtask-create.is-open .wa-modal-backdrop {
    opacity: 1;
}

.wa-modal--subtask-create .wa-modal-dialog {
    position: absolute;
    top: 90px;
    left: 50%;

    transform: translateX(-50%) translateY(-18px) scale(.96);
    opacity: 0;

    transition: transform .22s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease;
}

.wa-modal--subtask-create.is-open .wa-modal-dialog {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
}


.wa-gantt-bar-avatars {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: 6px;
    flex-shrink: 0;
}

.wa-gantt-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    background: #fff;
    margin-left: -6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.wa-gantt-avatar:first-child {
    margin-left: 0;
}

.wa-gantt-avatar--more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
}


.wa-gantt-bar {
    overflow: visible;
}

.wa-gantt-link-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
    transform: translateY(-50%);
    z-index: 20;
    cursor: crosshair;
    pointer-events: auto;

    user-select: none;
}

.wa-gantt-link-dot--in {
    left: -7px;
}

.wa-gantt-link-dot--out {
    right: -7px;
}

.wa-gantt-link-dot:hover {
    transform: translateY(-50%) scale(1.25);
}

.wa-gantt-link-dot.is-target {
    background: #16a34a;
}

.wa-gantt-link-svg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999998;
    pointer-events: none;
}

.wa-gantt-link-temp {
    stroke: #2563eb;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 5 4;
}

.wa-gantt-project-block {
    position: relative;
}

.wa-gantt-links-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

.wa-gantt-link-line {
    fill: none;
    stroke: #2563eb;
    stroke-width: 2;
}

.wa-gantt-project-block {
    position: relative;
}

.wa-gantt-links-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 4;
}

.wa-gantt-bar {
    z-index: 10;
}

.wa-gantt-link-line {
    fill: none;
    stroke: #2563eb;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: stroke;

    cursor: pointer;
}

.wa-gantt-link-line:hover {
    stroke: #dc2626;
    stroke-width: 3;
}

.wa-subicon--disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: auto;
}


.wa-kanban-wrap {
    height: calc(100vh - 140px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.wa-kanban {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow: hidden !important;
}

.wa-kanban-col {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.wa-kanban-head {
    flex: 0 0 auto !important;
}

.wa-kanban-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.wa-kanban-body {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}

.wa-kanban-body::-webkit-scrollbar {
    width: 8px;
}

.wa-kanban-body::-webkit-scrollbar-track {
    background: transparent;
}

.wa-kanban-body::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

.wa-kanban-body::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}


/*НОВОСТИ*/

/* =========================================================
   HERO
========================================================= */

.wa-news-hero__content {
    position: relative;
    z-index: 2;
}

.wa-news-hero__badge {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    border-radius: 999px;

    background: #eef6ff;

    color: #2563eb;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .03em;
    text-transform: uppercase;
}

.wa-news-hero {
    position: relative;

    padding: 40px 48px;

    border-radius: 28px;

    background: radial-gradient(
            circle at top right,
            rgba(59, 130, 246, .12),
            transparent 42%
    ),
    linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
    );

    border: 1px solid #e6edf7;

    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);

    overflow: hidden;

    margin-bottom: 28px;
}

.wa-news-hero__title {
    margin: 18px 0 12px;

    font-size: 44px;
    line-height: 1.05;
    font-weight: 900;

    color: #0f172a;
}

.wa-news-hero__subtitle {
    max-width: 760px;

    font-size: 17px;
    line-height: 1.7;

    color: #64748b;
}

.wa-news-hero__btn {
    position: absolute;

    top: 34px;
    right: 34px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 22px;

    border-radius: 16px;

    background: #2563eb;

    color: #fff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .22s;
}

.wa-news-hero__btn:hover {
    background: #1d4ed8;
    color: #fff;

    transform: translateY(-2px);
}

.wa-news-hero__icon {
    position: absolute;

    right: 120px;
    bottom: -24px;

    font-size: 120px;

    color: rgba(37, 99, 235, .08);

    pointer-events: none;
}

/* =========================================================
   MASONRY GRID
========================================================= */

.wa-news-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill, minmax(320px, 1fr));

    grid-auto-rows:12px;

    gap:22px;
}
/* =========================================================
   CARD
========================================================= */

.wa-news-card{
    position:relative;

    width:100%;

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-shadow:
            0 12px 30px rgba(15,23,42,.08);

    transition:
            transform .28s ease,
            box-shadow .28s ease;
}

.wa-news-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 24px 55px rgba(15, 23, 42, .16);
}

/* =========================================================
   RANDOM HEIGHTS
========================================================= */

.wa-news-card--1{

    grid-row:span 36;

    height:320px;

}

.wa-news-card--2{

    grid-row:span 54;

    height:430px;

}

.wa-news-card--3{

    grid-row:span 74;

    height:560px;

}

/* =========================================================
   LINK
========================================================= */

.wa-news-card__link {
    position: absolute;
    inset: 0;

    color: #fff;
    text-decoration: none;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.wa-news-card__bg {
    position: absolute;
    inset: 0;
}

.wa-news-card__bg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.wa-news-card:hover .wa-news-card__bg img {
    transform: scale(1.08);
}

/* =========================================================
   OVERLAY
========================================================= */

.wa-news-card__overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(

            to top,

            rgba(0, 0, 0, .90) 0%,

            rgba(0, 0, 0, .65) 45%,

            rgba(0, 0, 0, .35) 100%

    );
}

/* =========================================================
   CONTENT
========================================================= */

.wa-news-card__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 100%;

    padding: 24px;
}

/* =========================================================
   TOP
========================================================= */

.wa-news-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}

.wa-news-date {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .16);

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

.wa-news-pin {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    border-radius: 999px;

    background: #facc15;

    color: #111827;

    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   BOTTOM
========================================================= */

.wa-news-card__bottom {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.wa-news-title {
    font-size: 30px;
    line-height: 1.08;
    font-weight: 900;

    color: #fff;

    text-shadow: 0 3px 16px rgba(0, 0, 0, .45);
}

.wa-news-text {
    font-size: 15px;
    line-height: 1.6;

    color: rgba(255, 255, 255, .88);
}

.wa-news-more {
    display: inline-flex;
    align-items: center;

    width: max-content;

    padding: 11px 18px;

    border-radius: 14px;

    background: rgba(255, 255, 255, .14);

    backdrop-filter: blur(14px);

    color: #fff;

    font-size: 14px;
    font-weight: 800;

    transition: .2s;
}

.wa-news-card:hover .wa-news-more {
    background: rgba(255, 255, 255, .22);
}

/* =========================================================
   FORM
========================================================= */

.wa-news-form {
    width: 100%;
}

.wa-news-form-head,
.wa-news-view-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.wa-news-form-badge {
    display: inline-flex;

    padding: 7px 13px;

    border-radius: 999px;

    background: #eef6ff;

    color: #2563eb;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}

.wa-news-form-title {
    margin: 14px 0 8px;

    font-size: 34px;

    color: #0f172a;
}

.wa-news-form-subtitle {
    color: #64748b;
}

.wa-news-form-card {
    width: 100%;
    max-width: 980px;

    background: #fff;

    border: 1px solid #e6edf7;

    border-radius: 24px;

    padding: 26px;

    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.wa-news-label {
    display: block;

    margin: 18px 0 8px;

    color: #0f172a;

    font-weight: 800;
}

.wa-news-form-card .wa-input,
.wa-news-form-card input[type="text"],
.wa-news-form-card textarea,
.wa-news-form-card input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box;
}

.wa-news-textarea {
    width: 100% !important;

    min-height: 260px;

    resize: vertical;
}

.wa-news-current-image img {
    margin-top: 14px;

    max-width: 260px;

    border-radius: 18px;
}

.wa-news-checks {
    display: flex;
    gap: 18px;

    margin-top: 18px;
}

.wa-news-form-actions {
    display: flex;
    gap: 12px;

    margin-top: 24px;
}

/* =========================================================
   ARTICLE
========================================================= */

.wa-news-article {
    background: #fff;

    border: 1px solid #e6edf7;

    border-radius: 28px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.wa-news-article-cover {
    height: 420px;
}

.wa-news-article-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.wa-news-article-body {
    padding: 34px;
}

.wa-news-article-pin {
    display: inline-flex;

    padding: 7px 13px;

    border-radius: 999px;

    background: #fff7ed;

    color: #c2410c;

    font-size: 12px;
    font-weight: 900;

    margin-bottom: 16px;
}

.wa-news-article-title {
    margin: 0;

    font-size: 40px;
    line-height: 1.1;
    font-weight: 900;

    color: #0f172a;
}

.wa-news-article-meta {
    margin-top: 12px;

    color: #64748b;
}

.wa-news-article-text {
    margin-top: 28px;

    font-size: 17px;
    line-height: 1.85;

    color: #334155;
}

/* =========================================================
   POLL
========================================================= */

.wa-news-poll {
    margin-top: 24px;

    background: #fff;

    border: 1px solid #e6edf7;

    border-radius: 24px;

    padding: 24px;
}

.wa-news-poll-title {
    font-size: 20px;
    font-weight: 900;

    margin-bottom: 18px;
}

.wa-news-poll-option {
    position: relative;

    width: 100%;

    overflow: hidden;

    margin-bottom: 12px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #f8fafc;

    padding: 15px 18px;

    text-align: left;

    cursor: pointer;

    transition: .2s;
}

.wa-news-poll-option:hover {
    border-color: #93c5fd;
}

.wa-news-poll-option span,
.wa-news-poll-option b {
    position: relative;
    z-index: 2;
}

.wa-news-poll-option b {
    float: right;
}

.wa-news-poll-option i {
    position: absolute;
    inset: 0 auto 0 0;

    background: rgba(37, 99, 235, .12);

    z-index: 1;
}

.wa-news-poll-option.is-selected {
    border-color: #2563eb;
}

/* =========================================================
   MODAL
========================================================= */

.wa-modal-news {
    width: min(1000px, 96vw);
}

.wa-modal-news .wa-modal-body {
    max-height: 70vh;
    overflow: auto;
}

.wa-modal-news .wa-input {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .wa-news-grid {
        column-count: 2;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .wa-news-grid {
        column-count: 1;
        grid-auto-rows:5px;
        gap:0px;
    }

    .wa-news-hero {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .wa-news-hero__title {
        font-size: 32px;
        line-height: 1.15;
    }

    .wa-news-hero__subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    .wa-news-hero__btn {
        position: static;

        margin-top: 20px;

        width: 100%;

        justify-content: center;
    }

    .wa-news-hero__icon {
        display: none;
    }

    .wa-news-card {
        border-radius: 24px;
    }

    .wa-news-card--1,
    .wa-news-card--2,
    .wa-news-card--3 {
        height: 340px;
    }

    .wa-news-card__content {
        padding: 18px;
    }

    .wa-news-title {
        font-size: 24px;
    }

    .wa-news-text {
        font-size: 14px;
    }

    .wa-news-form-head,
    .wa-news-view-head {
        flex-direction: column;
    }

    .wa-news-article-cover {
        height: 240px;
    }

    .wa-news-article-body {
        padding: 22px;
    }

    .wa-news-article-title {
        font-size: 28px;
    }

    .wa-modal-news {
        width: 96vw;
        max-height: 92vh;
    }

    .wa-modal-news .wa-modal-body {
        max-height: 65vh;
    }

}

/* =========================================
   ACTIONS
========================================= */

.wa-news-actions{

    position:absolute;

    z-index:20;

    top:18px;

    right:18px;

    display:flex;

    flex-direction:column;

    gap:10px;

}
.wa-news-badges{

    display:flex;

    flex-direction:column;

    gap:8px;

    align-items:flex-start;

}
.wa-news-card-btn{
    width:42px;
    height:42px;

    border:0;
    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,.92);

    box-shadow:
            0 8px 18px rgba(15,23,42,.18);

    transition:.2s;
}

.wa-news-card-btn i{
    font-size:14px;
}

.wa-news-card-btn:hover{
    transform:translateY(-2px);
}

.wa-news-card-btn--edit{
    color:#2563eb;
}

.wa-news-card-btn--delete{
    color:#dc2626;
}

.wa-news-card__top{

    display:flex;

    align-items:flex-start;

    gap:10px;

    /* резерв справа под кнопки */

    padding-right:58px;

}

.wa-news-top-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

/* =========================================
   DATE
========================================= */

.wa-news-date{
    display:inline-flex;
    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:13px;
    font-weight:800;

    box-shadow:
            0 4px 14px rgba(0,0,0,.18);
}

/* =========================================
   PIN
========================================= */

.wa-news-pin{
    display:inline-flex;
    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:#ffcc00;

    color:#111827;

    font-size:12px;
    font-weight:900;

    box-shadow:
            0 4px 14px rgba(0,0,0,.22);
}

/* =========================================
   DRAFT
========================================= */

.wa-news-draft{
    display:inline-flex;
    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:#ef4444;

    color:#fff;

    font-size:12px;
    font-weight:900;

    letter-spacing:.02em;

    box-shadow:
            0 4px 14px rgba(0,0,0,.22);
}
@media(max-width:768px){
    .wa-news-actions{
        flex-direction:row;
        top:14px;
        right:14px;
    }

    .wa-news-card__top{
        padding-right:100px;
    }

    .wa-news-date,
    .wa-news-pin,
    .wa-news-draft{
        padding:7px 10px;
        font-size:11px;
    }
}

.wa-news-related{
    margin-top:34px;
}

.wa-news-related-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.wa-news-related-kicker{
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    background:#eef6ff;
    color:#2563eb;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.wa-news-related h2{
    margin:10px 0 0;
    font-size:30px;
    font-weight:900;
    color:#0f172a;
}

.wa-news-related-all{
    color:#2563eb;
    font-weight:800;
    text-decoration:none;
}

.wa-news-related-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

.wa-news-related-grid .wa-news-card{
    height:320px;
}

@media(max-width:900px){
    .wa-news-related-grid{
        grid-template-columns:1fr;
    }

    .wa-news-related-head{
        flex-direction:column;
        align-items:flex-start;
    }
}
/* =========================================
   LAYOUT
========================================= */

.wa-news-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:28px;
    align-items:start;
}

.wa-news-main{
    min-width:0;
}

.wa-news-sidebar{
    position:sticky;
    top:20px;
}

/* =========================================
   RELATED
========================================= */

.wa-news-related{
    background:#fff;
    border:1px solid #e6edf7;
    border-radius:24px;
    padding:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.wa-news-related-head{
    margin-bottom:18px;
}

.wa-news-related-kicker{
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    background:#eef6ff;
    color:#2563eb;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.wa-news-related h2{
    margin:12px 0 0;
    font-size:26px;
    font-weight:900;
    color:#0f172a;
}

.wa-news-related-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.wa-news-related-item{
    display:flex;
    gap:14px;
    text-decoration:none;
    color:inherit;

    padding:10px;
    border-radius:18px;

    transition:.2s;
}

.wa-news-related-item:hover{
    background:#f8fafc;
}

.wa-news-related-item__image{
    width:110px;
    height:90px;
    border-radius:16px;
    overflow:hidden;
    flex:0 0 auto;
}

.wa-news-related-item__image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.wa-news-related-item__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.wa-news-related-item__date{
    font-size:12px;
    color:#64748b;
    margin-bottom:6px;
}

.wa-news-related-item__title{
    font-size:15px;
    font-weight:800;
    line-height:1.35;
    color:#0f172a;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:1100px){

    .wa-news-layout{
        grid-template-columns:1fr;
    }

    .wa-news-sidebar{
        position:static;
    }

}
.wa-news-poll-builder{
    margin-top:22px;
    padding:18px;
    border:1px solid #e6edf7;
    border-radius:20px;
    background:#f8fbff;
}

.wa-news-poll-enable{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    color:#0f172a;
}

.wa-news-poll-fields{
    margin-top:16px;
}

.wa-poll-option-row{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

.wa-poll-option-row .wa-input{
    flex:1;
}

.wa-poll-remove{
    width:42px;
    border:0;
    border-radius:12px;
    background:#fee2e2;
    color:#dc2626;
    font-size:22px;
    cursor:pointer;
}

.wa-news-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

.wa-news-section-card {
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 130px;
    padding: 24px;

    background: #fff;
    border: 1px solid #e6edf7;
    border-radius: 26px;

    color: #0f172a;
    text-decoration: none;

    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    transition: .22s;
}

.wa-news-section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.wa-news-section-card__icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #eef6ff;
    color: #2563eb;

    font-size: 24px;
}

.wa-news-section-card__title {
    font-size: 20px;
    font-weight: 900;
}

.wa-news-section-card__text {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
}

.wa-news-gallery {
    margin-top: 34px;
}

.wa-news-gallery-head h2 {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 900;
    color: #0f172a;
}

.wa-news-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.wa-news-gallery-item {
    height: 130px;
    border: 0;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background: #f1f5f9;
}

.wa-news-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-gallery-viewer {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.92);

    backdrop-filter: blur(8px);
}

.wa-gallery-viewer.is-open {
    display: flex;
}

.wa-gallery-viewer__img {
    max-width: 88vw;
    max-height: 86vh;
    border-radius: 18px;
}

.wa-gallery-viewer__close,
.wa-gallery-viewer__nav {
    position: absolute;
    border: 0;
    color: #fff;
    background: rgba(255,255,255,.16);
    cursor: pointer;
}

.wa-gallery-viewer__close {
    top: 24px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 32px;
}

.wa-gallery-viewer__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 70px;
    border-radius: 18px;
    font-size: 52px;
}

.wa-gallery-viewer__nav--prev {
    left: 28px;
}

.wa-gallery-viewer__nav--next {
    right: 28px;
}

.wa-gallery-viewer__download {
    position: absolute;
    right: 90px;
    top: 24px;
    padding: 13px 18px;
    border-radius: 14px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.wa-news-gallery-edit {
    margin-top: 16px;
}

.wa-news-gallery-edit-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.wa-news-gallery-edit-item {
    position: relative;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    background: #f1f5f9;
}

.wa-news-gallery-edit-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-news-gallery-edit-item button {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 10px;

    background: rgba(220, 38, 38, .95);
    color: #fff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.wa-news-gallery {
    margin-top: 30px;
    padding: 26px;

    background:
            linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);

    border: 1px solid #e6edf7;
    border-radius: 28px;

    box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
}

.wa-news-gallery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
}

.wa-news-gallery-kicker {
    display: inline-flex;
    align-items: center;

    padding: 7px 13px;

    border-radius: 999px;

    background: #eef6ff;
    color: #2563eb;

    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.wa-news-gallery-head h2 {
    margin: 12px 0 8px;

    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;

    color: #0f172a;
}

.wa-news-gallery-head p {
    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.6;
}

.wa-news-gallery-count {
    flex: 0 0 auto;

    padding: 10px 15px;

    border-radius: 16px;

    background: #0f172a;
    color: #fff;

    font-size: 13px;
    font-weight: 900;
}

.wa-news-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.wa-news-gallery-wrap {
    position: relative;

    height: 150px;

    border-radius: 20px;

    overflow: hidden;

    background: #f1f5f9;
}

.wa-news-gallery-item {
    width: 100%;
    height: 100%;

    border: 0;
    padding: 0;

    cursor: pointer;

    background: transparent;
}

.wa-news-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease, filter .35s ease;
}

.wa-news-gallery-wrap:hover img {
    transform: scale(1.08);
    filter: brightness(.78);
}

.wa-news-gallery-wrap::after {
    content: "Открыть";

    position: absolute;
    left: 12px;
    bottom: 12px;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .18);
    color: #fff;

    backdrop-filter: blur(12px);

    font-size: 12px;
    font-weight: 900;

    opacity: 0;
    transform: translateY(8px);

    transition: .25s;

    pointer-events: none;
}

.wa-news-gallery-wrap:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.wa-news-gallery-download {
    position: absolute;
    right: 10px;
    bottom: 10px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(37, 99, 235, .95);
    color: #fff;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(15, 23, 42, .28);

    z-index: 3;
}

.wa-news-gallery-download:hover {
    background: #1d4ed8;
    color: #fff;
}

@media(max-width:768px) {
    .wa-news-gallery {
        padding: 18px;
        border-radius: 22px;
    }

    .wa-news-gallery-head {
        flex-direction: column;
    }

    .wa-news-gallery-head h2 {
        font-size: 24px;
    }

    .wa-news-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wa-news-gallery-wrap {
        height: 120px;
    }
}

.wa-news-card__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-news-article-cover video,
.wa-news-article-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-news-related-item__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   MEDIA FIT FIX: img + video
========================================= */

.wa-news-card__bg,
.wa-news-article-cover,
.wa-news-related-item__image,
.wa-news-gallery-wrap,
.wa-news-gallery-item {
    overflow: hidden;
}

.wa-news-card__bg img,
.wa-news-card__bg video,
.wa-news-article-cover img,
.wa-news-article-cover video,
.wa-news-related-item__image img,
.wa-news-related-item__image video,
.wa-news-gallery-item img,
.wa-news-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

/* hover для фото и видео в карточках */
.wa-news-card__bg img,
.wa-news-card__bg video {
    transition: transform .7s ease;
}

.wa-news-card:hover .wa-news-card__bg img,
.wa-news-card:hover .wa-news-card__bg video {
    transform: scale(1.08);
}

/* hover для галереи фото и видео */
.wa-news-gallery-item img,
.wa-news-gallery-item video {
    transition: transform .35s ease, filter .35s ease;
}

.wa-news-gallery-wrap:hover .wa-news-gallery-item img,
.wa-news-gallery-wrap:hover .wa-news-gallery-item video {
    transform: scale(1.08);
    filter: brightness(.78);
}

@media (max-width: 768px) {
    .wa-news-grid {
        display: flex !important;
        flex-direction: column;
        gap: 18px !important;
    }

    .wa-news-card,
    .wa-news-card--1,
    .wa-news-card--2,
    .wa-news-card--3 {
        height: 360px !important;
        grid-row: auto !important;
    }

    .wa-news-card__link {
        position: absolute;
        inset: 0;
    }
}

@media (max-width: 1100px) {
    .wa-news-grid {
        grid-auto-rows: auto !important;
    }

    .wa-news-card,
    .wa-news-card--1,
    .wa-news-card--2,
    .wa-news-card--3 {
        grid-row: auto !important;
    }
}

.wa-news-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px !important;
    grid-auto-rows: auto !important;
}

.wa-news-card,
.wa-news-card--1,
.wa-news-card--2,
.wa-news-card--3 {
    grid-row: auto !important;
    height: 420px !important;
}

@media (max-width: 768px) {
    .wa-news-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .wa-news-card,
    .wa-news-card--1,
    .wa-news-card--2,
    .wa-news-card--3 {
        height: 360px !important;
    }
}

.wa-news-gallery-item img,
.wa-news-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wa-news-gallery-video-badge {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(15, 23, 42, .72);
    color: #fff;

    z-index: 4;
}

.wa-gallery-viewer__content {
    max-width: 88vw;
    max-height: 86vh;
}

.wa-gallery-viewer__img,
.wa-gallery-viewer__video {
    max-width: 88vw;
    max-height: 86vh;
    border-radius: 18px;
    display: block;
}

.wa-top-logout-form {
    margin: 0;
}

.wa-top-logout {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: rgba(220, 53, 69, .08);
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
}

.wa-top-logout:hover {
    background: rgba(220, 53, 69, .16);
    transform: translateY(-1px);
}

.wa-top-logout i {
    font-size: 16px;
}

.wa-tcard.wa-event-highlight {
    position: relative;
    overflow: visible;
    z-index: 20;
    animation: waEventHighlight 6s ease;
}

.wa-tcard.wa-event-highlight::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 3px solid #0d6efd;
    pointer-events: none;
    animation: waEventBorder 6s ease;
}

@keyframes waEventHighlight {
    0% {
        transform: scale(1);
        background: rgba(13,110,253,.15);
    }

    15% {
        transform: scale(1.02);
        background: rgba(13,110,253,.25);
    }

    100% {
        transform: scale(1);
        background: transparent;
    }
}

@keyframes waEventBorder {
    0% {
        opacity: 1;
        box-shadow:
                0 0 0 0 rgba(13,110,253,.8),
                0 0 30px rgba(13,110,253,.5);
    }

    100% {
        opacity: 0;
        box-shadow:
                0 0 0 20px rgba(13,110,253,0),
                0 0 0 rgba(13,110,253,0);
    }
}

.wa-nav-item{
    display:flex;
    align-items:center;
    gap:8px;
}

.wa-nav-badge{
    margin-left:auto;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#e2e8f0;
    color:#334155;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wa-nav-badge-danger{
    background:#ef4444;
    color:#fff;
}


.wa-chat-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    z-index: 99990;
    box-shadow: 0 18px 40px rgba(37, 99, 235, .35);
}

.wa-chat-fab:hover {
    transform: translateY(-2px);
}

.wa-chat-window {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 540px;
    max-height: calc(100vh - 130px);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    z-index: 99991;
    display: none;
    overflow: hidden;
    border: 1px solid #e5eaf3;
}

.wa-chat-window.is-open {
    display: flex;
    flex-direction: column;
}

.wa-chat-head {
    padding: 16px 18px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.wa-chat-head strong {
    display: block;
    font-size: 16px;
}

.wa-chat-head span {
    display: block;
    font-size: 12px;
    opacity: .85;
    margin-top: 3px;
}

.wa-chat-head button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.wa-chat-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f8fafc;
}

.wa-chat-empty {
    padding: 24px;
    text-align: center;
    color: #64748b;
}

.wa-chat-msg {
    max-width: 82%;
    margin-bottom: 12px;
    padding: 11px 13px;
    border-radius: 16px 16px 16px 4px;
    background: #fff;
    border: 1px solid #e5eaf3;
}

.wa-chat-msg.is-me {
    margin-left: auto;
    background: #dbeafe;
    border-color: #bfdbfe;
    border-radius: 16px 16px 4px 16px;
}

.wa-chat-msg-name {
    font-size: 12px;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 5px;
}

.wa-chat-msg-text {
    color: #0f172a;
    line-height: 1.45;
    word-break: break-word;
}

.wa-chat-msg-time {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
}

.wa-chat-form {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid #e5eaf3;
    background: #fff;
}

.wa-chat-form textarea {
    flex: 1;
    height: 46px;
    max-height: 100px;
    resize: none;
    border: 1px solid #e5eaf3;
    border-radius: 14px;
    padding: 11px 13px;
    outline: none;
}

.wa-chat-form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.wa-chat-form button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.wa-chat-tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #e5eaf3;
}

.wa-chat-tab {
    flex: 1;
    height: 36px;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-weight: 800;
    cursor: pointer;
    position: relative;
}

.wa-chat-tab.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.wa-chat-tab-badge,
.wa-chat-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.wa-chat-private-panel {
    background: #fff;
    border-bottom: 1px solid #e5eaf3;
    max-height: 150px;
    overflow-y: auto;
}

.wa-chat-users {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.wa-chat-user {
    width: 100%;
    border: 1px solid #e5eaf3;
    background: #f8fafc;
    border-radius: 12px;
    padding: 9px 11px;
    text-align: left;
    color: #334155;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.wa-chat-user:hover,
.wa-chat-user.is-active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.wa-chat-head-actions {
    display: flex;
    gap: 6px;
}

.wa-chat-private-toolbar {
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #e5eaf3;
}

.wa-chat-private-toolbar button {
    width: 100%;
    height: 36px;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-weight: 800;
    cursor: pointer;
}

.wa-chat-private-toolbar button:hover {
    background: #e0f2fe;
    color: #0369a1;
}

.wa-chat-window.is-big {
    width: 820px;
    height: 760px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    right: 24px;
    bottom: 24px;
}
.wa-chat-user {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 10px 12px;

    border: 0;
    background: transparent;

    cursor: pointer;
    text-align: left;

    border-radius: 12px;

    transition: .2s;
}

.wa-chat-user:hover {
    background: #f3f6fb;
}

.wa-chat-user.is-active {
    background: #e8f2ff;
}

.wa-chat-user-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    object-fit: cover;
    flex-shrink: 0;
}

.wa-chat-user-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #2563eb;
    color: #fff;

    font-weight: 700;
    font-size: 15px;
}

.wa-chat-user-info {
    flex: 1;
    min-width: 0;
}

.wa-chat-user-name {
    font-weight: 600;
    color: #1e293b;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-user-badge {
    min-width: 22px;
    height: 22px;

    border-radius: 11px;

    background: #ef4444;
    color: #fff;

    font-size: 12px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-user-online{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
    display:inline-block;
    margin-left:6px;
}

.wa-user-offline{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#94a3b8;
    display:inline-block;
    margin-left:6px;
}

.wa-chat-user-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.wa-chat-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-chat-user-avatar-placeholder {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    font-weight: 900;
    font-size: 16px;
}

.wa-chat-user-online-dot {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.wa-chat-user-online-dot.is-online {
    background: #22c55e;
}

.wa-chat-user-online-dot.is-offline {
    background: #94a3b8;
}

.wa-chat-user-status {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
}

.wa-chat-user-status.is-online {
    color: #16a34a;
}

.wa-chat-user-status.is-offline {
    color: #94a3b8;
}

.wa-chat-read-status {
    font-weight: 800;
    color: #2563eb;
}

.wa-chat-msg.is-me .wa-chat-read-status {
    color: #1d4ed8;
}

.wa-chat-typing {
    padding: 6px 16px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    border-top: 1px solid #e5eaf3;
}

.wa-chat-window.is-big {
    width: 920px;
    height: 720px;
}

.wa-chat-window.is-big .wa-chat-private-panel {
    display: block !important;
    width: 280px;
    max-height: none;
    border-right: 1px solid #e5eaf3;
    border-bottom: 0;
    overflow-y: auto;
}

.wa-chat-window.is-big .wa-chat-private-toolbar {
    display: none !important;
}

.wa-chat-window.is-big .wa-chat-body {
    position: absolute;
    left: 280px;
    right: 0;
    top: 126px;
    bottom: 72px;
}

.wa-chat-window.is-big .wa-chat-form {
    position: absolute;
    left: 280px;
    right: 0;
    bottom: 0;
}

.wa-chat-window.is-big .wa-chat-private-panel + .wa-chat-body {
    border-left: 0;
}

.wa-chat-window.is-big {
    width: 920px;
    height: 720px;
}

.wa-chat-window.is-big .wa-chat-body {
    flex: 1;
}

.wa-chat-window.is-big .wa-chat-form {
    flex-shrink: 0;
}

/* Сотрудники слева только в личных сообщениях */

.wa-chat-window.is-big.is-private-big .wa-chat-private-panel {
    display: block !important;
    width: 280px;
    max-height: none;
    border-right: 1px solid #e5eaf3;
    border-bottom: 0;
    overflow-y: auto;
}

.wa-chat-window.is-big.is-private-big .wa-chat-private-toolbar {
    display: none !important;
}

.wa-chat-window.is-big.is-private-big .wa-chat-body {
    position: absolute;
    left: 280px;
    right: 0;
    top: 126px;
    bottom: 72px;
}

.wa-chat-window.is-big.is-private-big .wa-chat-form {
    position: absolute;
    left: 280px;
    right: 0;
    bottom: 0;
}

/* В общем чате список сотрудников всегда скрыт */

.wa-chat-window.is-big:not(.is-private-big) .wa-chat-private-panel,
.wa-chat-window.is-big:not(.is-private-big) .wa-chat-private-toolbar {
    display: none !important;
}

.wa-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: 380px;
    height: 100vh;

    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    overflow: hidden;
    z-index: 900;

    display: flex;
    flex-direction: column;
}

.wa-main {
    margin-left: 380px;
    min-width: 0;
    width: auto;
}

.wa-topbar {
    position: sticky;
    top: 0;
    z-index: 950;
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
}

.wa-content {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}

.wa-side-brand {
    flex: 0 0 64px;
    display: flex !important;
    align-items: center;
    gap: 12px;

    min-height: 64px;
    padding: 12px 14px;

    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    color: #0f172a;
    box-sizing: border-box;
}

.wa-side-name {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.wa-side-sub {
    margin-top: 3px;
    font-size: 11px;
    color: #64748b;
}

.wa-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px 24px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.wa-nav::-webkit-scrollbar {
    width: 6px;
}

.wa-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.wa-nav-group-title {
    margin: 14px 0 6px;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #d5471b;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 10px;
    user-select: none;
    position: relative;
}

.wa-nav-group-title::after {
    content: "›";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: 0.2s;
    font-size: 18px;
}

.wa-nav-group-title.is-collapsed::after {
    transform: translateY(-50%) rotate(0deg);
}

.wa-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #0f172a;
    text-decoration: none;
}

.wa-nav-item:hover,
.wa-nav-item.is-active {
    background: #f1f5f9;
}

.wa-nav-hidden-by-title {
    display: none !important;
}

.wa-mobile-menu-btn {
    display: none;
}

.wa-sidebar-overlay {
    display: none;
}

/* MOBILE */
@media (max-width: 768px) {
    .wa-main {
        margin-left: 0;
        width: 100%;
    }

    .wa-content {
        margin-left: 0;
    }
    .wa-notify{
        display: none;
    }

    .wa-mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1200;
        padding: 10px 14px;
        border: none;
        border-radius: 12px;
        background: #0f172a;
        color: #ffffff;
        font-weight: 600;
    }

    .wa-sidebar {
        width: 290px;
        max-width: 86vw;
        height: 100vh;

        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1100;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    }

    .wa-sidebar.is-open {
        transform: translateX(0);
    }

    .wa-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1050;
    }

    .wa-sidebar-overlay.is-open {
        display: block;
    }

    body.wa-menu-open {
        overflow: hidden;
    }
}

@media (min-width: 769px) {
    .wa-mobile-menu-btn,
    .wa-sidebar-overlay {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .wa-mobile-menu-btn {
        z-index: 100000;
    }

    .wa-sidebar {
        z-index: 100001;
    }

    .wa-sidebar-overlay {
        z-index: 99999;
    }
}
@media (max-width: 768px) {
    #companyChatExpand{
        display: none;
    }
    .wa-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
    }

    .wa-topbar-left {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .wa-topbar-right {
        flex: 0 1 auto;
        min-width: 0;
        gap: 8px !important;
    }

    .wa-userchip-info {
        display: none;
    }

    .wa-userchip {
        padding: 4px !important;
        gap: 6px !important;
    }

    .wa-userchip-ava {
        width: 36px;
        height: 36px;
    }

    .wa-top-logout {
        width: 36px;
        height: 36px;
    }

    .wa-notify-btn {
        width: 36px;
        height: 36px;
    }
}

.wa-chat-attach.has-file {
    background: #16a34a !important;
}

.wa-chat-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.75);
    border: 1px solid #dbeafe;
    color: #0f172a;
    text-decoration: none;
}

.wa-chat-file:hover {
    text-decoration: none;
    background: #fff;
}

.wa-chat-file-icon {
    font-size: 22px;
}

.wa-chat-file strong {
    display: block;
    font-size: 13px;
}

.wa-chat-file em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #64748b;
}

.wa-chat-file-preview {
    padding: 8px 12px;
    background: #eef6ff;
    border-top: 1px solid #dbeafe;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
}

.wa-chat-file-preview button {
    border: 0;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.wa-chat-dropzone {
    position: absolute;
    inset: 58px 12px 76px 12px;
    z-index: 20;
    border: 2px dashed #2563eb;
    border-radius: 18px;
    background: rgba(37, 99, 235, .12);
    color: #1d4ed8;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.wa-chat-attach.has-file {
    background: #16a34a !important;
    color: #fff;
}

.wa-chat-file-card {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 8px;
    padding: 10px;

    border-radius: 14px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(148, 163, 184, .35);

    color: inherit;
    text-decoration: none;
}

.wa-chat-file-card:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, .9);
}

.wa-chat-msg.is-me .wa-chat-file-card {
    background: rgba(255, 255, 255, .45);
    border-color: rgba(37, 99, 235, .25);
}

.wa-chat-file-card-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: #e0f2fe;

    font-size: 18px;
    flex-shrink: 0;
}

.wa-chat-file-card-info {
    min-width: 0;
}

.wa-chat-file-card-info strong {
    display: block;
    max-width: 220px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    color: #0f172a;
}

.wa-chat-file-card-info em {
    display: block;
    margin-top: 2px;

    font-style: normal;
    font-size: 11px;
    color: #64748b;
}

.wa-chat-msg {
    position: relative;
}

.wa-chat-msg-edit {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    opacity: 0;
}

.wa-chat-msg:hover .wa-chat-msg-edit {
    opacity: 1;
}

.wa-chat-edited-label {
    margin-left: 4px;
    font-size: 11px;
    color: #94a3b8;
}

.wa-chat-msg-text a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: underline;
}
.wa-chat-msg{
    position: relative;
}
.wa-chat-msg-edit{
    position:absolute;
    top:10px;
    right:10px;

    width:34px;
    height:34px;

    border:none;
    border-radius:10px;

    background:#2563eb;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow:
            0 4px 12px rgba(37,99,235,.35);

    transition:
            transform .15s ease,
            box-shadow .15s ease,
            background .15s ease;

    opacity:0;
}

.wa-chat-msg:hover .wa-chat-msg-edit{
    opacity:1;
}

.wa-chat-msg-edit:hover{
    background:#1d4ed8;

    transform:translateY(-1px);

    box-shadow:
            0 8px 20px rgba(37,99,235,.45);
}

.wa-chat-msg-edit:active{
    transform:scale(.95);
}

.wa-chat-msg.is-me .wa-chat-msg-edit{
    opacity:.9;
}
.wa-chat-msg-name{

    margin-right: 40px;

}

.wa-chat-msg-text{

    margin-top: 10px;

}

.wa-notify-footer {
    padding: 12px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.wa-notify-footer a {
    display: flex;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eef6ff;
    color: #2563eb;
    font-weight: 900;
    text-decoration: none;
}

.wa-chat-msg-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.wa-chat-msg.is-me .wa-chat-msg-wrap {
    flex-direction: row-reverse;
}



.wa-chat-msg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 12px 0;
}

.wa-chat-msg-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.wa-chat-msg.is-me .wa-chat-msg-wrap {
    flex-direction: row-reverse;
}

.wa-chat-msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 38px;
    overflow: hidden;
    background: linear-gradient(135deg, #1d4ed8, #38bdf8);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .35);
    border: 2px solid rgba(255,255,255,.65);
}

.wa-chat-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-chat-msg-content {
    max-width: 76%;
    min-width: 120px;
}

.wa-chat-msg-name {
    margin: 0 0 5px 3px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.wa-chat-msg.is-me .wa-chat-msg-name {
    text-align: right;
    margin-right: 3px;
}

.wa-chat-msg-text,
.wa-chat-file-card {
    position: relative;
    display: block;
    padding: 12px 14px;
    border-radius: 18px 18px 18px 6px;
    background: rgba(255,255,255,.96);
    color: #0f172a;
    box-shadow:
            0 14px 34px rgba(15, 23, 42, .24),
            inset 0 1px 0 rgba(255,255,255,.9);
    border: 1px solid rgba(226,232,240,.85);
    line-height: 1.45;
}

.wa-chat-msg.is-me .wa-chat-msg-text,
.wa-chat-msg.is-me .wa-chat-file-card {
    border-radius: 18px 18px 6px 18px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    border-color: rgba(147,197,253,.55);
}

.wa-chat-msg-time {
    margin-top: 5px;
    font-size: 11px;
    color: rgba(255,255,255,.72);
}

.wa-chat-msg.is-me .wa-chat-msg-time {
    text-align: right;
}

.wa-chat-read-status,
.wa-chat-edited-label {
    color: rgba(255,255,255,.82);
}

.wa-chat-msg-edit {
    margin-top: 4px;
    border: 0;
    background: rgba(255,255,255,.92);
    color: #2563eb;
    border-radius: 10px;
    padding: 4px 7px;
    box-shadow: 0 8px 18px rgba(15,23,42,.18);
}

.wa-chat-msg.is-me .wa-chat-msg-edit {
    float: right;
}
#companyChatBody {
    background:
            linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
            url('/images/chat-bg.png') center/cover no-repeat;
    padding: 20px;
}

.wa-chat-msg-text,
.wa-chat-file-card {
    background: #ffffff;
    border: 1px solid #e5edf8;
    color: #1e293b;
    box-shadow:
            0 8px 25px rgba(15,23,42,.08);
}

.wa-chat-msg.is-me .wa-chat-msg-text,
.wa-chat-msg.is-me .wa-chat-file-card {
    background: linear-gradient(
            135deg,
            #f8fbff,
            #eef6ff
    );
    border: 1px solid #cfe0ff;
    color: #0f172a;
}

.wa-chat-msg-name {
    color: #334155;
    font-weight: 700;
}

.wa-chat-msg-time {
    color: #64748b;
}

.wa-chat-read-status {
    color: #2563eb;
    font-weight: 600;
}

.wa-chat-edited-label {
    color: #94a3b8;
}

.wa-chat-msg-avatar {
    background:
            linear-gradient(
                    135deg,
                    #2563eb,
                    #38bdf8
            );
    border: 2px solid #fff;
}
.wa-chat-date-separator {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.wa-chat-date-separator span {
    padding: 8px 16px;
    border-radius: 999px;

    background: rgba(255,255,255,.92);

    border: 1px solid #dbe7f5;

    color: #475569;

    font-size: 12px;
    font-weight: 700;

    box-shadow:
            0 8px 20px rgba(15,23,42,.06);
}




.wa-chat-image-link {
    display: block;
    margin-top: 8px;
}

.wa-chat-image {
    display: block;
    max-width: 260px;
    max-height: 280px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}
.wa-chat-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 8px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

.wa-chat-preview-img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
}

.wa-chat-preview-file {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    font-size: 24px;
}

.wa-chat-preview-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.wa-chat-preview-info strong {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-preview-info span {
    font-size: 12px;
    color: #64748b;
}