.warning-modal .modal-header {
    background: rgba(255, 149, 0, 0.1);
    border-bottom-color: var(--warning-color);
}

.warning-modal .modal-header h3 {
    color: var(--warning-color);
}

.warning-modal .modal-body {
    text-align: center;
}

.warning-icon {
    font-size: 48px;
    color: var(--warning-color);
    margin-bottom: 20px;
}

.error-modal .modal-header {
    background: rgba(255, 59, 48, 0.1);
    border-bottom-color: var(--danger-color);
}

.error-modal .modal-header h3 {
    color: var(--danger-color);
}

.error-modal .modal-body {
    text-align: center;
}

.error-icon {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: 20px;
}

.success-modal .modal-header {
    background: rgba(52, 199, 89, 0.1);
    border-bottom-color: var(--success-color);
}

.success-modal .modal-header h3 {
    color: var(--success-color);
}

.success-modal .modal-body {
    text-align: center;
}

.success-icon {
    font-size: 48px;
    color: var(--success-color);
    margin-bottom: 20px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .chat-type-selector {
        flex-direction: column;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-cancel {
        width: 100%;
    }
}


/* Monitoring workspace */
.monitoring-persistent-host {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.monitoring-persistent-host[hidden],
.service-persistent-host[hidden] {
    display: none !important;
}

.service-persistent-host {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.service-crm-panel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-primary, #f8fafc);
}

body.is-service-panel,
body.is-service-panel .container,
body.is-service-panel .main-content {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body.is-service-panel .service-persistent-host[data-active-panel="service"] {
    display: flex;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.service-crm-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #f8fafc;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y;
}

@media (max-width: 768px) {
    body.is-service-panel .service-persistent-host[data-active-panel="service"] {
        padding-bottom: var(--app-mobile-nav-height);
    }

    .service-crm-panel,
    .service-crm-frame {
        overscroll-behavior: auto;
        touch-action: pan-x pan-y;
    }
}

.service-crm-loading {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-secondary, #64748b);
    background: var(--bg-primary, #f8fafc);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}

.service-crm-loading.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 90ms ease;
}

.service-crm-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color, #64748b);
    animation: service-crm-pulse 1s ease-in-out infinite;
}

.service-crm-loading span:nth-child(2) { animation-delay: .14s; }
.service-crm-loading span:nth-child(3) { animation-delay: .28s; }
.service-crm-loading strong { margin-left: 6px; font-size: .9rem; }

@keyframes service-crm-pulse {
    0%, 100% { opacity: .35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

.monitoring-panel {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

.monitoring-panel.sites-collapsed .monitoring-sites-pane {
    max-height: 0;
}

.monitoring-panel.sites-collapsed .monitoring-sites-content {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.monitoring-sites-pane {
    position: relative;
    z-index: 15;
    width: 100%;
    max-height: calc(70px * var(--user-ui-scale, 1));
    min-width: 0;
    flex: 0 0 auto;
    overflow: visible;
    transition: max-height .22s ease;
}

.monitoring-sites-content {
    display: flex;
    width: 100%;
    height: calc(70px * var(--user-ui-scale, 1));
    min-width: 0;
    align-items: center;
    overflow: hidden;
    transition: opacity .16s ease, transform .22s ease;
}

.monitoring-pane-controls {
    z-index: 3;
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    margin-right: 2px;
    padding: 0 9px 0 10px;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.monitoring-pane-action,
.monitoring-pane-controls .monitoring-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
}

.monitoring-pane-action {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
}

.monitoring-pane-action:hover,
.monitoring-pane-controls .monitoring-zoom-btn:hover {
    color: var(--primary-color);
    background: var(--bg-hover);
}

.monitoring-pane-controls .monitoring-zoom-btn:disabled {
    opacity: .35;
    cursor: default;
    background: transparent;
}

.monitoring-sites-scroll {
    display: flex;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.monitoring-sites-list {
    display: flex;
    width: 100%;
    min-height: 62px;
    flex: 1;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    scrollbar-width: thin;
}

.monitoring-sites-list.is-site-reordering {
    user-select: none;
}

.monitoring-site-card {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 138px;
    max-width: 210px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--text-primary);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.monitoring-site-card {
    cursor: grab;
    touch-action: pan-x;
    user-select: none;
}

.monitoring-site-card.is-dragging {
    z-index: 2;
    opacity: .48;
    cursor: grabbing;
    transform: scale(.97);
}

.monitoring-site-card.is-drop-before::before,
.monitoring-site-card.is-drop-after::after {
    position: absolute;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
    content: "";
}

.monitoring-site-card.is-drop-before::before { left: -6px; }
.monitoring-site-card.is-drop-after::after { right: -6px; }

.monitoring-site-card:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.monitoring-site-card.active {
    border-color: color-mix(in srgb, var(--primary-color) 26%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-secondary));
}

.monitoring-site-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.monitoring-site-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.monitoring-site-copy strong,
.monitoring-site-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-site-copy small {
    color: var(--text-secondary);
    font-size: 11px;
}

.monitoring-site-dropdown {
    color: var(--text-secondary);
    font-size: 11px;
    transition: transform .18s ease;
}

.monitoring-site-card:hover .monitoring-site-dropdown,
.monitoring-site-card:focus-visible .monitoring-site-dropdown {
    transform: translateY(2px);
}

.monitoring-sites-config {
    z-index: 3;
    display: inline-flex;
    min-width: max-content;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    margin-right: 10px;
    box-shadow: -10px 0 18px var(--bg-secondary);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.monitoring-sites-config:hover,
.monitoring-sites-config:focus-visible {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-secondary));
}

.monitoring-sites-config b {
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--primary-color);
    font-size: 10px;
}

.monitoring-floating-popover {
    position: fixed;
    z-index: 20050;
    width: min(320px, calc(100vw - 20px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
    border-radius: 18px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    box-shadow: 0 20px 55px rgb(15 23 42 / 22%);
    backdrop-filter: blur(22px);
    animation: monitoringPopoverIn .16s ease-out;
}

@keyframes monitoringPopoverIn {
    from { opacity: 0; transform: translateY(-5px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.monitoring-popover-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--border-color);
}

.monitoring-popover-heading > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.monitoring-popover-heading > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.monitoring-popover-heading small {
    color: var(--text-secondary);
    font-size: 11px;
}

.monitoring-csv-options,
.monitoring-visibility-options {
    display: grid;
    gap: 5px;
    padding: 8px;
}

.monitoring-csv-options button,
.monitoring-visibility-reset {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 0;
    border-radius: 11px;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.monitoring-csv-options button:hover,
.monitoring-visibility-reset:hover {
    color: var(--primary-color);
    background: var(--bg-hover);
}

.monitoring-csv-options i {
    color: #16a34a;
}

.monitoring-visibility-popover {
    width: min(350px, calc(100vw - 20px));
}

.monitoring-visibility-options {
    max-height: min(430px, calc(100vh - 190px));
    overflow-y: auto;
    scrollbar-width: thin;
}

.monitoring-visibility-options label {
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 9px;
    border-radius: 10px;
    cursor: pointer;
}

.monitoring-visibility-options label:hover {
    background: var(--bg-hover);
}

.monitoring-visibility-options label span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.monitoring-visibility-options label i {
    width: 18px;
    color: var(--text-secondary);
    text-align: center;
}

.monitoring-visibility-options input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--primary-color);
}

.monitoring-visibility-reset {
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    color: var(--text-secondary);
}

.monitoring-weather-popover {
    width: min(680px, calc(100vw - 20px));
}

.monitoring-weather-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
}

.monitoring-weather-city {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 17px;
    color: var(--text-primary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-primary) 92%, transparent), color-mix(in srgb, #60a5fa 5%, var(--bg-primary)));
}

.monitoring-weather-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.monitoring-weather-card-top > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.monitoring-weather-card-top strong {
    overflow: hidden;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-weather-card-top small {
    color: var(--text-secondary);
    font-size: 13px;
}

.monitoring-weather-card-top small.monitoring-weather-freshness {
    color: #22c55e;
    font-weight: 750;
}

.monitoring-weather-card-top small.monitoring-weather-freshness.is-stale {
    color: #f59e0b;
}

.monitoring-weather-card-top small.monitoring-weather-period {
    color: var(--text-muted);
}

.monitoring-weather-card-top > b {
    font-size: 42px;
    line-height: 1;
}

.monitoring-weather-scene {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    background: rgb(96 165 250 / 8%);
}

.monitoring-weather-icon {
    display: grid;
    width: 88px;
    height: 76px;
    flex: 0 0 88px;
    place-items: center;
    border-radius: 15px;
    color: #f59e0b;
    background: rgb(245 158 11 / 12%);
    font-size: 25px;
}

.weather-icon-group {
    position: relative;
    display: block;
    width: 82px;
    height: 68px;
}

.monitoring-weather-svg {
    position: absolute;
    overflow: visible;
}

.monitoring-weather-svg.top-layer {
    z-index: 2;
    top: 0;
    left: 2px;
    width: 78px;
    height: 48px;
}

.monitoring-weather-svg.bottom-layer {
    z-index: 3;
    bottom: 0;
    left: 5px;
    width: 72px;
    height: 30px;
}

.monitoring-weather-svg.absolute-layer {
    z-index: 4;
    inset: 5px;
    width: 72px;
    height: 58px;
}

.weather-svg-sun circle { fill: #fbbf24; stroke: #f59e0b; stroke-width: 2; }
.weather-svg-sun path { fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linecap: round; }
.weather-svg-moon path { fill: #818cf8; stroke: #6366f1; stroke-width: 1.5; }
.weather-svg-cloud .weather-cloud-shadow { fill: #cbd5e1; stroke: #94a3b8; stroke-width: 2; }
.weather-svg-cloud .weather-cloud-light { fill: #f8fafc; stroke: rgb(255 255 255 / 75%); stroke-width: 1.5; }
.weather-svg-rain path { fill: none; stroke: #3b82f6; stroke-width: 3; stroke-linecap: round; }
.weather-svg-snow path { fill: none; stroke: #38bdf8; stroke-width: 2; stroke-linecap: round; }
.weather-svg-fog path { fill: none; stroke: #94a3b8; stroke-width: 3; stroke-linecap: round; }
.weather-svg-bolt path { fill: #facc15; stroke: #a16207; stroke-width: 1.5; }

.monitoring-weather-condition {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.monitoring-weather-condition strong,
.monitoring-weather-condition small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-weather-condition strong {
    font-size: 17px;
}

.monitoring-weather-condition small {
    color: var(--text-secondary);
    font-size: 13px;
}

.weather-kind-cloud .monitoring-weather-icon,
.weather-kind-fog .monitoring-weather-icon {
    color: #64748b;
    background: rgb(100 116 139 / 13%);
}

.weather-kind-cloud-sun .monitoring-weather-icon,
.weather-kind-cloud-moon .monitoring-weather-icon {
    color: #eab308;
    background: rgb(234 179 8 / 13%);
}

.weather-kind-moon .monitoring-weather-icon {
    color: #818cf8;
    background: rgb(129 140 248 / 13%);
}

.weather-kind-rain .monitoring-weather-icon,
.weather-kind-sleet .monitoring-weather-icon {
    color: #3b82f6;
    background: rgb(59 130 246 / 13%);
}

.weather-kind-snow .monitoring-weather-icon {
    color: #38bdf8;
    background: rgb(56 189 248 / 13%);
}

.weather-kind-thunderstorm .monitoring-weather-icon {
    color: #8b5cf6;
    background: rgb(139 92 246 / 14%);
}

.monitoring-weather-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    color: var(--text-secondary);
    font-size: 13px;
}

.monitoring-weather-meta em {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    padding: 7px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    font-style: normal;
}

.monitoring-weather-meta em i {
    width: 11px;
    flex: 0 0 11px;
    color: var(--primary-color);
    text-align: center;
}

.monitoring-weather-meta em span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-weather-day-toggle {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color));
    border-radius: 11px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-primary));
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.monitoring-weather-day-toggle:hover,
.monitoring-weather-day-toggle.active {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 11%, var(--bg-primary));
}

.monitoring-weather-day-toggle i:last-child {
    margin-left: auto;
    font-size: 10px;
    transition: transform .18s ease;
}

.monitoring-weather-day-toggle.active i:last-child {
    transform: rotate(180deg);
}

.monitoring-weather-day-panel {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 17px;
    background: color-mix(in srgb, var(--bg-primary) 96%, #60a5fa);
    box-shadow: 0 14px 34px rgb(15 23 42 / 9%);
}

.monitoring-weather-day-panel[hidden] {
    display: none;
}

.monitoring-weather-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.monitoring-weather-day-head > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.monitoring-weather-day-head strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-weather-day-head span {
    color: var(--text-secondary);
    font-size: 12px;
}

.monitoring-weather-day-head button {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font-size: 20px;
    cursor: pointer;
}

.monitoring-weather-day-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 35%, transparent) transparent;
}

.monitoring-weather-day-track {
    display: grid;
    width: max-content;
    min-width: 100%;
    grid-template-columns: repeat(8, minmax(108px, 1fr));
    gap: 8px;
}

.monitoring-weather-hour {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px 7px;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: 13px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
}

.monitoring-weather-hour.is-past {
    opacity: .58;
}

.monitoring-weather-hour time {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
}

.monitoring-weather-day-icon {
    display: grid;
    width: 74px;
    height: 58px;
    place-items: center;
}

.monitoring-weather-day-icon .weather-icon-group {
    transform: scale(.78);
    transform-origin: center;
}

.monitoring-weather-hour > strong {
    font-size: 23px;
    line-height: 1;
}

.monitoring-weather-hour > small {
    width: 100%;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-weather-hour-meta {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 2px;
}

.monitoring-weather-hour-meta span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    padding: 4px;
    border-radius: 6px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.monitoring-weather-hour-meta span i {
    color: var(--primary-color);
    font-size: 8px;
}

.monitoring-weather-day-empty {
    padding: 22px;
    color: var(--text-secondary);
    text-align: center;
}

.monitoring-weather-loading,
.monitoring-weather-error {
    display: flex;
    grid-column: 1 / -1;
    min-height: 90px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text-secondary);
}

.monitoring-list-loading,
.monitoring-list-empty,
.monitoring-list-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 62px;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.monitoring-list-error {
    color: var(--danger-color);
}

.monitoring-workspace {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.monitoring-zoom-controls {
    display: inline-flex;
    align-items: center;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
}

.monitoring-pane-controls .monitoring-zoom-btn {
    width: 30px;
    min-width: 30px;
    height: 32px;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
}

.monitoring-zoom-value {
    display: inline-flex;
    width: 48px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-inline: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.monitoring-sites-toggle-btn {
    position: absolute;
    top: calc(100% - 1px);
    right: 16px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 8px 18px rgb(15 23 42 / 12%);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.monitoring-sites-toggle-btn:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
}

.monitoring-sites-toggle-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.monitoring-frame-wrap {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    flex: 1;
    background: #fff;
}

.monitoring-site-view {
    position: relative;
    width: var(--monitoring-frame-size, 100%);
    height: var(--monitoring-frame-size, 100%);
    min-width: 0;
    min-height: 0;
    transform: scale(var(--monitoring-frame-scale, 1));
    transform-origin: 0 0;
}

.monitoring-site-view[hidden] {
    display: none !important;
}

.monitoring-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.monitoring-interface-workspace {
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.monitoring-interface-tabs-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.monitoring-interface-tabs {
    display: flex;
    min-width: 0;
    flex: 1;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.monitoring-interface-tab-tools {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.monitoring-interface-tab,
.monitoring-interface-tool,
.monitoring-interface-close-all {
    display: inline-flex;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.monitoring-interface-tool {
    width: 34px;
    padding: 0;
}

.monitoring-interface-tab:hover,
.monitoring-interface-tool:hover,
.monitoring-interface-close-all:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.monitoring-interface-tool:active {
    transform: scale(.94);
}

.monitoring-interface-add {
    color: var(--primary-color);
}

.monitoring-interface-tool.is-loading {
    pointer-events: none;
    opacity: .58;
}

.monitoring-interface-tab.active {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-primary));
}

.monitoring-interface-tab b {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400;
}

.monitoring-interface-tab b:hover {
    color: #fff;
    background: var(--danger-color);
}

.monitoring-interface-close-all {
    color: var(--danger-color);
    white-space: nowrap;
}

.monitoring-interface-frames {
    position: relative;
    min-width: 0;
    min-height: 0;
    flex: 1;
}

.monitoring-interface-frame {
    position: absolute;
    inset: 0;
}

.monitoring-interface-frame[hidden] {
    display: none;
}

.monitoring-frame-loading {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
}

.monitoring-empty-state {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 32px;
    color: var(--text-secondary);
    text-align: center;
}

.monitoring-empty-state > span {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 24px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
    font-size: 28px;
}

.monitoring-empty-state h3 {
    margin: 18px 0 6px;
    color: var(--text-primary);
}

.monitoring-empty-state p {
    max-width: 440px;
    margin: 0;
}

/* Koralex live data workspace: the DOM contains only the visible row window. */
.monitoring-data-workspace {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.monitoring-data-workspace-tabs {
    display: flex;
    min-height: 43px;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 4px;
    padding: 6px 10px 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.monitoring-data-workspace-tabs button {
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px 10px 0 0;
    color: var(--text-secondary);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.monitoring-data-workspace-tabs button.active {
    color: var(--primary-color);
    background: var(--bg-primary);
    box-shadow: inset 0 2px color-mix(in srgb, var(--primary-color) 75%, transparent);
}

.monitoring-data-pane {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.monitoring-data-pane[hidden],
.monitoring-summary-pane[hidden] {
    display: none;
}

.monitoring-data-tools {
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.monitoring-data-search {
    display: flex;
    min-width: 180px;
    max-width: 470px;
    height: 38px;
    flex: 1 1 340px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    color: var(--text-secondary);
    background: var(--bg-primary);
}

.monitoring-data-search:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.monitoring-data-search input,
.monitoring-data-filter input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
}

.monitoring-data-count {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.monitoring-data-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

.monitoring-data-actions button,
.monitoring-data-columns-head button {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.monitoring-data-actions button:hover,
.monitoring-data-columns-head button:hover {
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary));
}

.monitoring-data-actions button b {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 10px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-primary));
    font-size: 10px;
}

.monitoring-data-actions button.is-active {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    color: var(--primary-color);
}

.monitoring-device-selection-bar {
    display: flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 5px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 26%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-secondary));
    scrollbar-width: none;
}
.monitoring-device-selection-bar::-webkit-scrollbar { display: none; }
.monitoring-device-selection-bar strong { display: inline-flex; align-items: center; gap: 6px; margin-right: 5px; color: var(--primary-color); font-size: 11px; white-space: nowrap; }
.monitoring-device-selection-bar button { display: inline-flex; height: 29px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); background: var(--bg-primary); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.monitoring-device-selection-bar button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.monitoring-device-selection-bar button:disabled { opacity: .42; cursor: default; pointer-events: none; }
.monitoring-device-selection-bar.is-empty strong { color: var(--text-muted); }
.monitoring-device-selection-bar button.is-clear { margin-left: auto; }

.monitoring-data-columns-panel {
    position: absolute;
    z-index: 20;
    top: 50px;
    right: 10px;
    width: min(540px, calc(100% - 20px));
    max-height: min(520px, calc(100% - 70px));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}

.monitoring-data-columns-panel[hidden] {
    display: none;
}

.monitoring-data-filter-panel,
.monitoring-device-command-panel {
    position: absolute;
    z-index: 28;
    top: 50px;
    right: 10px;
    width: min(430px, calc(100% - 20px));
    max-height: min(660px, calc(100% - 64px));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    box-shadow: 0 20px 56px rgba(15, 23, 42, .26);
}

.monitoring-data-filter-panel[hidden],
.monitoring-device-command-panel[hidden] {
    display: none;
}

.monitoring-data-filter-panel {
    position: fixed;
    right: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.monitoring-data-filter-panel-head,
.monitoring-device-command-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.monitoring-data-filter-panel-head > div,
.monitoring-device-command-head > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.monitoring-data-filter-panel-head small,
.monitoring-device-command-head small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.monitoring-data-filter-panel-head strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-data-filter-panel-head button,
.monitoring-device-command-head button {
    min-width: 31px;
    height: 31px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font: inherit;
    cursor: pointer;
}

.monitoring-data-filter-sort {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 10px 12px 0;
}

.monitoring-data-filter-sort button,
.monitoring-data-value-actions button,
.monitoring-data-filter-footer button {
    min-height: 33px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.monitoring-data-filter-field {
    display: grid;
    gap: 5px;
    padding: 10px 12px 0;
}

.monitoring-data-filter-field span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 750;
}

.monitoring-data-filter-field input,
.monitoring-data-value-search,
.monitoring-data-filter-mode-row select,
.monitoring-command-custom input {
    height: 35px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 11px;
}

.monitoring-data-filter-field input {
    padding: 0 10px;
}

.monitoring-data-filter-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 9px 12px 0;
}

.monitoring-data-filter-mode-row select {
    min-width: 0;
    padding: 0 7px;
}

.monitoring-data-value-search {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 9px 12px 0;
    padding: 0 10px;
}

.monitoring-data-value-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
}

.monitoring-data-value-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 8px 12px;
}

.monitoring-data-value-list {
    min-height: 90px;
    max-height: 265px;
    flex: 1 1 auto;
    overflow: auto;
    border-block: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.monitoring-data-value-list label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    min-height: 33px;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    font-size: 11px;
    cursor: pointer;
}

.monitoring-data-value-list label:hover {
    background: var(--bg-hover);
}

.monitoring-data-value-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-data-value-list small {
    color: var(--text-muted);
}

.monitoring-data-value-list p,
.monitoring-data-filter-loading,
.monitoring-data-values-limit {
    margin: 0;
    padding: 14px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.monitoring-data-filter-loading.is-error {
    color: var(--danger-color);
}

.monitoring-data-values-limit {
    padding: 7px 12px 0;
}

.monitoring-data-filter-footer {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    backdrop-filter: blur(12px);
}

.monitoring-data-filter-footer button.is-primary {
    border-color: var(--primary-color);
    color: #fff;
    background: var(--primary-color);
}

.monitoring-device-command-panel {
    width: min(520px, calc(100% - 20px));
    overflow: auto;
}

.monitoring-device-command-panel.is-dragging {
    user-select: none;
    cursor: grabbing;
    box-shadow: 0 26px 74px rgba(15, 23, 42, .34);
}

.monitoring-device-command-panel.is-collapsed {
    max-height: none;
    overflow: hidden;
}

.monitoring-device-command-panel.is-collapsed .monitoring-device-command-body {
    display: none;
}

.monitoring-device-command-head {
    cursor: grab;
    touch-action: none;
}

.monitoring-device-command-head button {
    cursor: pointer;
    touch-action: manipulation;
}

.monitoring-device-command-head > div:last-child {
    display: flex;
    gap: 6px;
}

.monitoring-data-columns-list label[draggable="true"] {
    grid-template-columns: 14px 18px minmax(0, 1fr);
    cursor: grab;
}

.monitoring-data-columns-list label[draggable="true"] > i {
    color: var(--text-muted);
    font-size: 11px;
}

.monitoring-data-columns-list label.is-dragging,
.monitoring-data-heading.is-dragging {
    opacity: .45;
}

.monitoring-data-columns-list label.is-drop-target,
.monitoring-data-heading.is-drop-target {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
    outline-offset: -2px;
}

.monitoring-data-heading[draggable="true"] {
    cursor: grab;
}

.monitoring-device-command-panel section {
    padding: 11px 13px 0;
}

.monitoring-device-command-panel h4 {
    margin: 0 0 7px;
    font-size: 12px;
}

.monitoring-device-credentials {
    border-bottom: 1px solid var(--border-color);
}

.monitoring-device-credentials > small {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
}

.monitoring-device-credential-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.monitoring-device-credential-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.monitoring-device-credential-grid span {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 750;
}

.monitoring-device-credential-grid input {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 11px;
}

.monitoring-command-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.monitoring-command-quick button,
.monitoring-command-custom button,
.monitoring-command-reboot {
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    border-radius: 9px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary));
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.monitoring-command-preset {
    position: relative;
    display: inline-flex;
}

.monitoring-command-preset > button:first-child {
    min-width: 82px;
    padding: 0 25px 0 10px;
}

.monitoring-command-preset > button:last-child {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    color: var(--text-muted);
    background: transparent;
    font-size: 15px;
}

.monitoring-command-add {
    padding: 0 11px;
    border-style: dashed !important;
}

.monitoring-command-custom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-top: 7px;
}

.monitoring-command-custom input {
    min-width: 0;
    padding: 0 10px;
}

.monitoring-command-custom button {
    padding: 0 12px;
}

.monitoring-command-reboot {
    width: calc(100% - 26px);
    margin: 13px;
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 7%, var(--bg-primary));
}

.monitoring-device-command-panel.is-busy button {
    pointer-events: none;
    opacity: .55;
}

.monitoring-device-command-log {
    min-height: 74px;
    max-height: 160px;
    overflow: auto;
    margin: 0 13px 13px;
    padding: 9px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
}

.monitoring-device-command-log .is-success {
    color: #16a34a;
}

.monitoring-device-command-log .is-error {
    color: var(--danger-color);
}


.monitoring-data-columns-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-color);
}

.monitoring-data-columns-head strong {
    font-size: 13px;
}

.monitoring-data-columns-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    max-height: 430px;
    overflow: auto;
    padding: 10px;
}

.monitoring-data-columns-list label {
    display: flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.monitoring-data-columns-list label:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.monitoring-data-columns-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-data-status {
    display: flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    font-size: 11px;
}

.monitoring-data-status.is-ready {
    color: #16a34a;
}

.monitoring-data-status.is-error {
    color: var(--danger-color);
}

.monitoring-data-selection-stats {
    display: flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary));
    font-size: 11px;
    scrollbar-width: none;
    white-space: nowrap;
}

.monitoring-data-selection-stats[hidden] { display: none; }
.monitoring-data-selection-stats::-webkit-scrollbar { display: none; }

.monitoring-data-selection-stats[data-live-filter-column] {
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

.monitoring-data-selection-stats[data-live-filter-column]:hover,
.monitoring-data-selection-stats.is-filter-open {
    border-bottom-color: color-mix(in srgb, var(--primary-color) 56%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-primary));
}

.monitoring-data-selection-stats strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
}

.monitoring-data-selection-stats span b { color: var(--text-primary); }

.monitoring-data-hotkey-hint {
    color: var(--text-muted);
    font-size: 10px;
}

.monitoring-data-hotkey-hint kbd {
    padding: 2px 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: inherit;
    font-weight: 750;
}

.monitoring-data-selection-stats button {
    width: 25px;
    height: 25px;
    margin-left: auto;
    flex: 0 0 25px;
    border: 0;
    border-radius: 8px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 9%, transparent);
    cursor: pointer;
}

.monitoring-data-selection-stats button.is-copy {
    margin-left: auto;
    color: var(--primary-color);
}

.monitoring-data-selection-stats button.is-clear {
    margin-left: 0;
}

.monitoring-data-grid {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.monitoring-data-grid[hidden] {
    display: none;
}

.monitoring-data-grid-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: var(--bg-primary);
}

.monitoring-data-grid-inner {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.monitoring-data-grid-sorts,
.monitoring-data-grid-head,
.monitoring-data-grid-filters,
.monitoring-data-row {
    display: grid;
    min-width: max-content;
}

.monitoring-data-grid-sorts {
    position: sticky;
    z-index: 9;
    top: 0;
    height: 24px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 98%, var(--bg-primary));
}

.monitoring-data-grid-head {
    position: sticky;
    z-index: 8;
    top: 24px;
    height: 38px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.monitoring-data-grid-filters {
    position: sticky;
    z-index: 7;
    top: 62px;
    height: 40px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--bg-primary));
}

.monitoring-data-heading {
    position: relative;
    display: flex;
    min-width: 0;
    height: 38px;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-right: 1px solid var(--border-color);
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
}

.monitoring-data-heading span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-data-sort-control {
    display: grid;
    min-width: 0;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.monitoring-data-sort-control i { font-size: 10px; }
.monitoring-data-sort-control:hover,
.monitoring-data-sort-control.is-sorted {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.monitoring-data-heading > i {
    color: var(--text-muted);
    font-size: 10px;
}

.monitoring-data-heading > i[data-live-sort-control] {
    display: grid;
    width: 24px;
    height: 28px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 7px;
    cursor: pointer;
}

.monitoring-data-heading > i[data-live-sort-control]:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.monitoring-data-heading.is-sorted {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.monitoring-data-heading.is-sorted > i {
    color: var(--primary-color);
}

.monitoring-data-heading.is-column-selected {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-secondary));
}

.monitoring-data-heading [data-live-column-stats] {
    cursor: pointer;
}

.monitoring-data-heading b {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
}

.monitoring-data-heading b::after {
    position: absolute;
    top: 8px;
    right: 3px;
    width: 1px;
    height: 22px;
    background: color-mix(in srgb, var(--text-muted) 35%, transparent);
    content: "";
}

.monitoring-data-filter {
    display: flex;
    min-width: 0;
    height: 40px;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.monitoring-data-filter span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 11px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-data-filter.is-active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.monitoring-data-filter i {
    font-size: 9px;
}

.monitoring-data-select-head,
.monitoring-data-select-sort,
.monitoring-data-select-filter,
.monitoring-data-select-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-color);
}

.monitoring-data-select-head,
.monitoring-data-select-sort,
.monitoring-data-select-filter {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-secondary);
}

.monitoring-data-select-filter {
    color: var(--text-muted);
    font-size: 9px;
}

.monitoring-data-select-sort {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-secondary);
}

.monitoring-data-select-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    cursor: cell;
    user-select: none;
}

.monitoring-data-grid-spacer {
    position: relative;
    min-width: 100%;
}

.monitoring-data-row {
    position: absolute;
    left: 0;
    width: max-content;
    height: 28px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
    background: var(--bg-primary);
}

.monitoring-data-row:nth-child(even) {
    background: color-mix(in srgb, var(--bg-secondary) 48%, var(--bg-primary));
}

.monitoring-data-row:hover {
    z-index: 2;
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary));
}

.monitoring-data-row.is-device-selected {
    background: color-mix(in srgb, var(--primary-color) 11%, var(--bg-primary));
}

.monitoring-data-row.is-device-selected .monitoring-data-select-cell {
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.monitoring-data-row:focus {
    z-index: 3;
    outline: 2px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-primary));
}

.monitoring-data-cell {
    display: block;
    min-width: 0;
    height: 28px;
    overflow: hidden;
    padding: 4px 8px;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 11px;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-data-cell.is-ip {
    color: var(--primary-color);
    font-weight: 800;
    cursor: pointer;
}

.monitoring-data-cell.is-ip:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}

.monitoring-data-cell.is-cell-selected {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 72%, transparent);
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-primary));
    user-select: none;
}

.monitoring-summary-pane {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

.monitoring-summary-mobilebar {
    display: flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 9px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.monitoring-summary-mobilebar strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
    font-size: 11px;
}

.monitoring-summary-mobilebar strong i { color: var(--primary-color); }

.monitoring-summary-mobilebar button {
    display: inline-flex;
    height: 31px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.monitoring-summary-builder {
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
}

.monitoring-summary-builder[hidden] { display: none !important; }
.monitoring-summary-pane.is-builder-collapsed .monitoring-summary-result { flex: 1 1 auto; }

.monitoring-summary-metrics-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.monitoring-summary-run,
.monitoring-summary-metrics-title button {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
    border-radius: 10px;
    color: #fff;
    background: var(--primary-color);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.monitoring-summary-metrics-title button {
    height: 30px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-primary));
}

.monitoring-summary-config-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}

.monitoring-summary-run {
    min-width: 142px;
}

.monitoring-summary-config-grid label,
.monitoring-summary-metric label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.monitoring-summary-config-grid select,
.monitoring-summary-metric select {
    width: 100%;
    height: 36px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    outline: none;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 12px;
}

.monitoring-summary-config-grid select:focus,
.monitoring-summary-metric select:focus {
    border-color: var(--primary-color);
}

.monitoring-summary-metrics { margin-top: 13px; }
.monitoring-summary-metrics-title {
    margin-bottom: 9px;
    padding-top: 11px;
    border-top: 1px solid var(--border-color);
}

.monitoring-summary-metric {
    display: grid;
    grid-template-columns: 24px minmax(150px, 1.4fr) minmax(120px, .8fr) minmax(140px, 1fr) 30px;
    align-items: end;
    gap: 8px;
    margin-top: 7px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-primary) 82%, var(--bg-secondary));
}

.monitoring-summary-metric > span {
    display: grid;
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
    place-items: center;
    border-radius: 8px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 11%, var(--bg-primary));
    font-size: 10px;
    font-weight: 850;
}

.monitoring-summary-metric > button {
    width: 30px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    font-size: 18px;
    cursor: pointer;
}

.monitoring-summary-metric > button:disabled,
.monitoring-summary-metrics-title button:disabled { opacity: .4; cursor: default; }

/* ALL_DATA pivot sandbox */
.monitoring-summary-builder {
    min-height: 330px;
    max-height: 58%;
    overflow: auto;
    padding: 0;
}

.monitoring-summary-viewbar {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.monitoring-summary-viewbar label { display: flex; min-width: 160px; max-width: 310px; height: 32px; flex: 1 1 230px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 9px; color: var(--primary-color); background: var(--bg-primary); }
.monitoring-summary-viewbar input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: inherit; font-size: 11px; font-weight: 800; }
.monitoring-summary-viewbar select { width: min(240px, 28vw); height: 32px; border: 1px solid var(--border-color); border-radius: 9px; color: var(--text-primary); background: var(--bg-primary); font: inherit; font-size: 10px; }
.monitoring-summary-viewbar button { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 9px; color: var(--text-secondary); background: var(--bg-primary); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.monitoring-summary-viewbar button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.monitoring-summary-viewbar button:disabled { opacity: .38; cursor: default; }

.monitoring-summary-ai {
    position: sticky;
    z-index: 6;
    top: 0;
    display: grid;
    grid-template-columns: 38px minmax(240px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(14px);
}

.monitoring-summary-ai-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    box-shadow: 0 7px 20px color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.monitoring-summary-ai label { display: grid; min-width: 0; gap: 3px; }
.monitoring-summary-ai label strong { color: var(--text-primary); font-size: 11px; }
.monitoring-summary-ai textarea {
    width: 100%;
    min-height: 38px;
    max-height: 90px;
    resize: vertical;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    outline: none;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 12px;
}
.monitoring-summary-ai textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent); }
.monitoring-summary-ai > button {
    display: inline-flex;
    height: 38px;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}
.monitoring-summary-ai > button:disabled { opacity: .55; cursor: progress; }
.monitoring-summary-ai > small { grid-column: 2 / -1; min-height: 0; color: var(--text-secondary); font-size: 10px; }
.monitoring-summary-ai-examples { grid-column: 2 / -1; display: flex; min-width: 0; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.monitoring-summary-ai-examples::-webkit-scrollbar { display: none; }
.monitoring-summary-ai-examples button { min-height: 25px; flex: 0 0 auto; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-color)); border-radius: 999px; color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary)); font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }

.monitoring-summary-designer { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 280px; }
.monitoring-summary-fields { min-width: 0; border-right: 1px solid var(--border-color); background: var(--bg-secondary); }
.monitoring-summary-fields-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px 6px; }
.monitoring-summary-fields-head strong { font-size: 12px; }
.monitoring-summary-fields-head span { color: var(--text-muted); font-size: 10px; }
.monitoring-summary-fields-search {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 6px;
    margin: 0 8px 7px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-muted);
    background: var(--bg-primary);
}
.monitoring-summary-fields-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: inherit; font-size: 11px; }
.monitoring-summary-field-list { max-height: 250px; overflow: auto; padding: 0 6px 8px; scrollbar-width: thin; }
.monitoring-summary-field-list button {
    display: grid;
    width: 100%;
    grid-template-columns: 18px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 5px;
    min-height: 29px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    color: var(--text-secondary);
    background: transparent;
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: grab;
}
.monitoring-summary-field-list button:hover { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.monitoring-summary-field-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-summary-field-list button i:last-child { color: var(--text-muted); font-size: 9px; }

.monitoring-summary-canvas { min-width: 0; padding: 10px; background: var(--bg-primary); }
.monitoring-summary-zone-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; }
.monitoring-summary-zone,
.monitoring-summary-values {
    min-width: 0;
    padding: 8px;
    border: 1px dashed color-mix(in srgb, var(--text-muted) 38%, var(--border-color));
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-secondary) 58%, var(--bg-primary));
    transition: border-color .15s, background .15s;
}
.monitoring-summary-zone.is-drag-over,
.monitoring-summary-values.is-drag-over { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-primary)); }
.monitoring-summary-zone header,
.monitoring-summary-values > header { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.monitoring-summary-zone header strong,
.monitoring-summary-values > header strong { font-size: 11px; }
.monitoring-summary-zone header em { color: var(--text-muted); font-size: 9px; font-style: normal; }
.monitoring-summary-zone > div { display: flex; min-height: 28px; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.monitoring-summary-zone > select,
.monitoring-summary-values > select { width: 100%; height: 29px; margin-top: 6px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); background: var(--bg-primary); font: inherit; font-size: 10px; }
.monitoring-summary-drop-hint { align-self: center; color: var(--text-muted); font-size: 10px; }
.monitoring-summary-field-chip { display: inline-flex; max-width: 100%; height: 25px; align-items: center; gap: 5px; padding: 0 4px 0 7px; border-radius: 7px; color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-primary)); font-size: 10px; }
.monitoring-summary-field-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-summary-field-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; color: inherit; background: transparent; cursor: pointer; }

.monitoring-summary-values { margin-top: 8px; border-style: solid; }
.monitoring-summary-values > header button { height: 27px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--primary-color); background: var(--bg-primary); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.monitoring-summary-value-list { display: grid; gap: 5px; }
.monitoring-summary-metric {
    grid-template-columns: 20px minmax(120px, 1.15fr) minmax(105px, .8fr) minmax(90px, .65fr) minmax(110px, .9fr) 28px;
    margin: 0;
    padding: 6px;
    border-radius: 9px;
}
.monitoring-summary-metric label { gap: 2px; font-size: 9px; }
.monitoring-summary-metric select,
.monitoring-summary-metric input { width: 100%; height: 31px; min-width: 0; padding: 0 7px; border: 1px solid var(--border-color); border-radius: 7px; outline: 0; color: var(--text-primary); background: var(--bg-primary); font: inherit; font-size: 10px; }
.monitoring-summary-metric > .monitoring-summary-metric-grip { width: 20px; height: 20px; margin-bottom: 5px; color: var(--text-muted); background: transparent; }
.monitoring-summary-metric > button { width: 28px; height: 31px; border-radius: 7px; }
.monitoring-summary-filter-rules { display: grid; gap: 5px; margin-top: 8px; }
.monitoring-summary-filter-rules > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(120px, .7fr) minmax(150px, 1fr); gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-secondary); font-size: 10px; }
.monitoring-summary-filter-rules select,
.monitoring-summary-filter-rules input { height: 30px; min-width: 0; border: 1px solid var(--border-color); border-radius: 7px; color: var(--text-primary); background: var(--bg-primary); font: inherit; font-size: 10px; }
.monitoring-summary-options { display: flex; align-items: end; justify-content: flex-end; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-color); }
.monitoring-summary-options label { display: grid; gap: 3px; color: var(--text-secondary); font-size: 9px; }
.monitoring-summary-options select { height: 34px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); background: var(--bg-primary); font: inherit; font-size: 10px; }
.monitoring-summary-run { height: 34px; min-width: 155px; }

.monitoring-summary-result {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.monitoring-summary-result-meta {
    display: flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
}

.monitoring-summary-result-meta b { color: var(--text-primary); }
.monitoring-summary-result-meta em { margin-left: auto; color: #d97706; font-style: normal; }

.monitoring-summary-table-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; }
.monitoring-summary-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.monitoring-summary-table th,
.monitoring-summary-table td { padding: 9px 12px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); text-align: left; }
.monitoring-summary-table thead th { position: sticky; z-index: 2; top: 0; background: var(--bg-secondary); font-size: 11px; }
.monitoring-summary-table tbody th { position: sticky; left: 0; color: var(--text-primary); background: var(--bg-primary); font-weight: 800; }
.monitoring-summary-table td { min-width: 150px; background: var(--summary-cell-bg, transparent); }
.monitoring-summary-table td strong,
.monitoring-summary-table td small { display: block; }
.monitoring-summary-table td small { margin-top: 2px; color: var(--text-secondary); font-size: 9px; }

.monitoring-summary-empty,
.monitoring-summary-loading {
    display: flex;
    min-height: 180px;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--text-secondary);
    text-align: center;
}

.monitoring-summary-empty i { color: var(--primary-color); font-size: 28px; }
.monitoring-summary-empty strong { color: var(--text-primary); font-size: 14px; }
.monitoring-summary-empty span { font-size: 11px; }

.monitoring-custom-modal[hidden] {
    display: none;
}

.monitoring-custom-modal {
    position: absolute;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}

.monitoring-custom-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .58);
    backdrop-filter: blur(4px);
}

.monitoring-custom-modal-card {
    position: relative;
    width: min(410px, 100%);
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    box-shadow: 0 28px 80px rgba(2, 6, 23, .38);
    text-align: center;
}

.monitoring-custom-modal-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 16px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-primary));
    font-size: 20px;
}

.monitoring-custom-modal-icon.is-danger {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 12%, var(--bg-primary));
}

.monitoring-custom-modal-card h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.monitoring-custom-modal-card p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.monitoring-custom-modal-card > label {
    display: grid;
    gap: 5px;
    margin-bottom: 13px;
    text-align: left;
}

.monitoring-custom-modal-card > label span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 750;
}

.monitoring-custom-modal-card > label input {
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
}

.monitoring-custom-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.monitoring-custom-modal-actions button {
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.monitoring-custom-modal-actions button.is-primary {
    border-color: var(--primary-color);
    color: #fff;
    background: var(--primary-color);
}

.monitoring-custom-modal-actions button.is-danger {
    border-color: var(--danger-color);
    color: #fff;
    background: var(--danger-color);
}

@media (max-width: 820px) {
    .monitoring-panel {
        display: flex;
        height: calc(100vh - var(--mobile-app-nav-height, 72px));
        height: calc(100dvh - var(--mobile-app-nav-height, 72px));
        min-height: 0;
    }

    .monitoring-pane-controls {
        gap: 4px;
        padding: 0 6px;
    }

    .monitoring-zoom-controls {
        height: 32px;
    }

    .monitoring-pane-controls .monitoring-zoom-btn {
        width: 28px;
        min-width: 28px;
        height: 30px;
    }

    .monitoring-zoom-value {
        width: 42px;
        height: 30px;
        font-size: 11px;
    }

    .monitoring-site-card {
        min-width: 126px;
    }

    .monitoring-sites-toggle-btn {
        right: 10px;
    }

    .monitoring-sites-config span {
        display: none;
    }

    .monitoring-sites-config {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .monitoring-weather-items {
        grid-template-columns: 1fr;
    }

    .monitoring-interface-close-all span {
        display: none;
    }

    .monitoring-data-tools {
        flex-wrap: wrap;
        min-height: 94px;
    }

    .monitoring-data-search {
        max-width: none;
        flex-basis: calc(100% - 10px);
    }

    .monitoring-data-count {
        flex: 1;
    }

    .monitoring-data-actions button span {
        display: none;
    }

    .monitoring-data-actions button {
        width: 36px;
        padding: 0;
    }

    .monitoring-data-columns-panel,
    .monitoring-data-filter-panel,
    .monitoring-device-command-panel {
        top: 92px;
    }

    .monitoring-data-filter-panel {
        width: calc(100vw - 16px) !important;
        max-width: none;
        border-radius: 16px;
        box-shadow: 0 24px 70px rgba(2, 6, 23, .42);
    }

    .monitoring-data-filter-panel-head { flex: 0 0 auto; padding: 9px 11px; }
    .monitoring-data-filter-sort { flex: 0 0 auto; padding: 7px 9px 0; }
    .monitoring-data-filter-field { flex: 0 0 auto; padding: 7px 9px 0; }
    .monitoring-data-filter-mode-row { flex: 0 0 auto; padding: 7px 9px 0; }
    .monitoring-data-value-search { flex: 0 0 auto; margin: 7px 9px 0; }
    .monitoring-data-value-actions { flex: 0 0 auto; padding: 6px 9px; }
    .monitoring-data-value-actions button { min-height: 30px; font-size: 9px; }
    .monitoring-data-value-list { min-height: 80px; max-height: none; }
    .monitoring-data-filter-footer { padding: 8px 9px calc(8px + env(safe-area-inset-bottom)); }

    .monitoring-data-columns-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .monitoring-device-credential-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-summary-builder {
        max-height: 48%;
        overflow-y: auto;
        padding: 10px;
    }

    .monitoring-summary-config-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .monitoring-summary-run { width: 100%; }

    .monitoring-summary-metric {
        grid-template-columns: 22px 1fr 30px;
        padding-top: 7px;
        border-top: 1px solid var(--border-color);
    }

    .monitoring-summary-metric label:first-of-type { grid-column: 2; }
    .monitoring-summary-metric label:nth-of-type(2) { grid-column: 2; }
    .monitoring-summary-metric label:nth-of-type(3) { grid-column: 2; }
    .monitoring-summary-metric > button { grid-column: 3; grid-row: 1; }

    .monitoring-data-selection-stats { gap: 10px; }

    .monitoring-summary-mobilebar { display: flex; }
    .monitoring-summary-builder { min-height: 0; max-height: 62%; padding: 0; }
    .monitoring-summary-builder[hidden] { display: none !important; }
    .monitoring-summary-pane.is-builder-collapsed .monitoring-summary-result { flex: 1 1 auto; }
    .monitoring-summary-pane.is-builder-collapsed .monitoring-summary-table-scroll { min-height: 0; }
    .monitoring-summary-viewbar { flex-wrap: wrap; }
    .monitoring-summary-viewbar label { max-width: none; flex-basis: calc(100% - 4px); }
    .monitoring-summary-viewbar select { min-width: 0; flex: 1 1 150px; width: auto; }
    .monitoring-summary-viewbar button span { display: none; }
    .monitoring-summary-ai { grid-template-columns: 32px minmax(0, 1fr) 36px; gap: 7px; padding: 8px; }
    .monitoring-summary-ai-mark { width: 32px; height: 32px; border-radius: 10px; }
    .monitoring-summary-ai > button { width: 36px; height: 34px; justify-content: center; padding: 0; }
    .monitoring-summary-ai > button span { display: none; }
    .monitoring-summary-ai textarea { min-height: 34px; font-size: 11px; }
    .monitoring-summary-ai-examples { grid-column: 1 / -1; }
    .monitoring-summary-designer { grid-template-columns: 1fr; }
    .monitoring-summary-fields { border-right: 0; border-bottom: 1px solid var(--border-color); }
    .monitoring-summary-field-list { display: flex; max-height: none; overflow-x: auto; padding: 0 7px 7px; }
    .monitoring-summary-field-list button { width: auto; min-width: 104px; flex: 0 0 auto; }
    .monitoring-summary-canvas { padding: 8px; }
    .monitoring-summary-zone-grid { grid-template-columns: 1fr; }
    .monitoring-summary-metric { grid-template-columns: 18px minmax(0, 1fr) 28px; }
    .monitoring-summary-metric label { grid-column: 2; }
    .monitoring-summary-metric > button { grid-column: 3; grid-row: 1; }
    .monitoring-summary-filter-rules > div { grid-template-columns: 1fr; }
    .monitoring-summary-options { flex-wrap: wrap; justify-content: stretch; }
    .monitoring-summary-options label { flex: 1 1 120px; }
    .monitoring-summary-options .monitoring-summary-run { width: 100%; }
}

/* Compound publications: one logical message, independent visual blocks. */
.message-bubble.media-message-bubble.publication-message-bubble {
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.message-bubble.publication-message-bubble .message-publication-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.message.own .message-publication-card {
    align-items: flex-end;
}

.message-publication-card .message-video-list {
    align-items: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
}

.message.own .message-publication-card .message-video-list {
    align-items: flex-end;
}

.message-publication-card .message-video,
.message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: inherit;
    overflow: visible;
    border-radius: 18px;
    background: transparent;
}

.message-publication-card .message-video-frame,
.message-publication-card .message-video:first-child .message-video-frame {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.message-publication-card .video-info {
    position: absolute;
    top: 9px;
    right: auto;
    bottom: auto;
    left: 9px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message-publication-card .video-name {
    display: none;
}

.message-publication-card .video-download-btn {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(12, 14, 14, .62);
    color: #fff;
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-3px);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition: opacity .16s ease, transform .16s ease;
}

.message-publication-card .message-video:hover .video-download-btn,
.message-publication-card .video-download-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.message-publication-card .message-publication-music {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 96px));
    max-width: 100%;
    padding: 0;
}

.message-publication-card .message-attachments {
    width: min(360px, calc(100vw - 96px));
    max-width: 100%;
    gap: 6px;
}

.message-publication-card .message-image-group,
.message-publication-card .message-image-group.single {
    width: min(336px, calc(100vw - 104px));
    max-width: 100%;
    border-radius: 16px;
}

.message-publication-caption-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: fit-content;
    min-width: 112px;
    max-width: min(420px, calc(100vw - 96px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px 18px 18px 8px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.message.own .message-publication-caption-bubble {
    border-color: color-mix(in srgb, var(--primary-color) 36%, transparent);
    border-radius: 18px 18px 8px 18px;
    background: linear-gradient(180deg, rgba(35, 149, 8, .22), rgba(35, 149, 8, .13));
}

.message-publication-caption-bubble .message-attachment-caption {
    width: auto;
    max-width: 100%;
    padding: 9px 13px 2px;
    white-space: normal;
}

.message-publication-caption-bubble > .message-time {
    position: static !important;
    align-self: flex-end;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    margin: 0 9px 7px auto;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message.own .message-publication-caption-bubble > .message-time {
    color: var(--tb-own-message-time, rgba(248, 250, 252, .74)) !important;
}

.message-publication-meta {
    align-self: flex-end;
    height: 20px;
    margin-top: -2px;
}

.message-publication-meta > .message-time {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent) !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1) !important;
}

.message.own .message-publication-meta > .message-time {
    color: var(--tb-own-message-time, rgba(248, 250, 252, .74)) !important;
}

@media (hover: none) and (pointer: coarse) {
    .message-publication-card .video-download-btn {
        opacity: .92;
        transform: none;
    }
}

@media (max-width: 768px) {
    .message-bubble.media-message-bubble.publication-message-bubble,
    .message-bubble.publication-message-bubble .message-publication-card {
        max-width: calc(100vw - 58px);
    }

    .message-publication-card .message-publication-music,
    .message-publication-card .message-attachments,
    .message-publication-caption-bubble {
        max-width: calc(100vw - 58px);
    }
}


.modal-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.modal-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

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

.modal-tab.active {
    background: var(--primary-color);
    color: white;
}

.modal-tab-content {
    display: none;
}

.modal-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.file-input-container {
    position: relative;
    margin-bottom: 20px;
}

.file-input-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.file-input-label:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.file-input-label i {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.file-input-label span {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.file-input-label small {
    color: var(--text-muted);
    font-size: 13px;
}

.file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.selected-files-list {
    margin-top: 20px;
}

.selected-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    margin-bottom: 8px;
}

.selected-file i {
    color: var(--primary-color);
    font-size: 20px;
}

.selected-file-info {
    flex: 1;
}

.selected-file-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.selected-file-size {
    font-size: 12px;
    color: var(--text-muted);
}

.remove-file-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.remove-file-btn:hover {
    background: var(--danger-color);
    color: white;
}

.modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.modal-loading i {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.modal-loading span {
    color: var(--text-primary);
    font-weight: 500;
}

.confirmation-modal .modal-body {
    text-align: center;
}

.confirmation-icon {
    font-size: 64px;
    color: var(--warning-color);
    margin-bottom: 20px;
}

.confirmation-message {
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.confirmation-details {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.field-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.field-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.field-group h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.input-with-icon .form-control {
    padding-left: 44px;
}

.input-with-icon.right-icon i {
    left: auto;
    right: 16px;
}

.input-with-icon.right-icon .form-control {
    padding-left: 16px;
    padding-right: 44px;
}

.expanding-textarea {
    position: relative;
}

.expanding-textarea .form-control {
    min-height: 40px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
}

.expanding-textarea .char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.expanding-textarea .char-count.near-limit {
    color: var(--warning-color);
}

.expanding-textarea .char-count.over-limit {
    color: var(--danger-color);
}
.notifications-list {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.notification-item {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.notification-item.unread {
    background: linear-gradient(90deg, rgba(42, 171, 238, 0.08) 0%, rgba(42, 171, 238, 0.02) 100%);
    border-left: 3px solid var(--primary-color);
    padding-left: 17px;
}

.notification-item.unread:hover {
    background: linear-gradient(90deg, rgba(42, 171, 238, 0.12) 0%, rgba(42, 171, 238, 0.04) 100%);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: var(--radius-circle);
    animation: notificationPulse 2s infinite;
}

@keyframes notificationPulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.2);
    }
}

.notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.notification-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.notification-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    font-size: 10px;
    margin-top: 2px;
}

.notification-icon.message { background: rgba(42, 171, 238, 0.2); color: var(--primary-color); }
.notification-icon.friend { background: rgba(52, 199, 89, 0.2); color: var(--success-color); }
.notification-icon.task { background: rgba(255, 149, 0, 0.2); color: var(--warning-color); }
.notification-icon.system { background: rgba(142, 142, 147, 0.2); color: var(--text-muted); }
.notification-icon.warning { background: rgba(255, 59, 48, 0.2); color: var(--danger-color); }

.notification-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s ease;
}

.notification-item:hover .notification-actions {
    opacity: 1;
    transform: translateX(0);
}

.notification-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.notification-delete-btn:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
    transform: scale(1.1) rotate(90deg);
}

.notification-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.notification-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.notification-time::before {
    content: '🕒';
    font-size: 10px;
    opacity: 0.7;
}

.notification-mark-read-btn {
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-mark-read-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--info-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
}

.notification-item.removing {
    animation: notificationSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes notificationSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
        max-height: 150px;
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom-width: 0;
    }
}

.skeleton-notification {
    height: 100px;
    width: 100%;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.skeleton-notification::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.notification-date-group {
    margin-bottom: 16px;
}

.notification-date-header {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.notifications-actions-bar {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(20px);
}

.notifications-actions-bar .btn-secondary,
.notifications-actions-bar .btn-danger {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .notification-item {
        padding: 14px 16px;
        gap: 6px;
    }
    
    .notification-title {
        font-size: 14px;
    }
    
    .notification-message {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
    
    .notification-actions {
        opacity: 1;
        transform: none;
    }
    
    .notifications-actions-bar {
        flex-direction: column;
        gap: 8px;
    }
    
    .notifications-actions-bar .btn-secondary,
    .notifications-actions-bar .btn-danger {
        width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    .notification-item.unread {
        background: linear-gradient(90deg, rgba(42, 171, 238, 0.15) 0%, rgba(42, 171, 238, 0.05) 100%);
    }
    
    .notification-item.unread:hover {
        background: linear-gradient(90deg, rgba(42, 171, 238, 0.2) 0%, rgba(42, 171, 238, 0.08) 100%);
    }
    
    .skeleton-notification {
        background: linear-gradient(90deg, #101010 25%, #171717 50%, #101010 75%);
    }
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notification-item.new-notification {
    animation: notificationSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.notifications-list::-webkit-scrollbar {
    width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}
.task-details-content {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
}

.task-details-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-details-loading .skeleton {
    height: 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
}

.task-details-loading .skeleton:nth-child(1) { width: 100%; }
.task-details-loading .skeleton:nth-child(2) { width: 90%; }
.task-details-loading .skeleton:nth-child(3) { width: 80%; }
.task-details-loading .skeleton:nth-child(4) { width: 70%; }
.task-details-loading .skeleton:nth-child(5) { width: 60%; }

.task-detail-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.task-detail-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.task-detail-section h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-detail-section h4 i {
    font-size: 16px;
    color: var(--primary-color);
}

.task-detail-row {
    display: flex;
    margin-bottom: 12px;
    padding: 8px 0;
}

.task-detail-label {
    width: 200px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.task-detail-value {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
}

.task-detail-value small {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.task-detail-value .task-overdue {
    color: var(--danger-color);
    font-weight: 600;
}

.task-actions-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-top: 32px;
    border: 1px solid var(--border-color);
}

.task-actions-panel button {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
}

.task-actions-panel button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.compact-task-priority, .compact-task-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.compact-task-priority {
    margin: 4px 0;
}

.priority-low {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.priority-medium {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.priority-high {
    background: rgba(255, 59, 48, 0.15);
    color: var(--danger-color);
    border: 1px solid rgba(255, 59, 48, 0.3);
}

.priority-urgent {
    background: rgba(255, 59, 48, 0.25);
    color: var(--danger-color);
    border: 1px solid rgba(255, 59, 48, 0.4);
    animation: urgentPulse 2s infinite;
}

.status-pending {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.status-in_progress {
    background: rgba(42, 171, 238, 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(42, 171, 238, 0.3);
}

.status-completed {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.status-cancelled {
    background: rgba(142, 142, 147, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(142, 142, 147, 0.3);
}

.task-history-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 8px;
}

.task-history-list::-webkit-scrollbar {
    width: 6px;
}

.task-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.task-history-list::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.task-comments-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.comment-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
}

.comment-item:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
}

.comment-item.regular {
    border-left: 4px solid var(--primary-color);
}

.comment-item.system {
    border-left: 4px solid var(--info-color);
    background: rgba(90, 200, 250, 0.05);
}

.comment-item.warning {
    border-left: 4px solid var(--warning-color);
    background: rgba(255, 149, 0, 0.05);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

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

.comment-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.comment-time {
    font-size: 12px;
    color: var(--text-muted);
}

.comment-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.add-comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.add-comment-form textarea {
    min-height: 80px;
    max-height: 200px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.5;
}

.add-comment-form button {
    align-self: flex-end;
}

.task-attachments-section {
    margin-top: 32px;
}

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.attachment-thumbnail {
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.attachment-thumbnail:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.attachment-thumbnail img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    background: var(--bg-secondary);
}

.attachment-thumbnail > div:not(img) {
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-tertiary);
}

.task-attachments-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.task-attachments-section .btn-secondary {
    margin-left: auto;
    padding: 8px 16px;
    font-size: 14px;
}

#attachments-modal .modal-content {
    max-width: 800px;
    max-height: 80vh;
}

.no-task-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    color: var(--text-secondary);
}

.no-task-selected h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.no-task-selected p {
    font-size: 16px;
    max-width: 300px;
    line-height: 1.5;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .task-detail-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .task-detail-label {
        width: 100%;
    }
    
    .task-actions-panel {
        flex-direction: column;
    }
    
    .task-actions-panel button {
        min-width: 100%;
    }
    
    .attachments-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .task-details-content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .task-detail-section {
        padding-bottom: 16px;
        margin-bottom: 24px;
    }
    
    .task-detail-section h4 {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .attachments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .comments-list {
        max-height: 300px;
    }
    
    .task-history-list {
        max-height: 250px;
    }
}

@keyframes taskDetailsSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.task-details-content > * {
    animation: taskDetailsSlideIn 0.3s ease forwards;
    opacity: 0;
}

.task-details-content > *:nth-child(1) { animation-delay: 0.1s; }
.task-details-content > *:nth-child(2) { animation-delay: 0.2s; }
.task-details-content > *:nth-child(3) { animation-delay: 0.3s; }
.task-details-content > *:nth-child(4) { animation-delay: 0.4s; }
.task-details-content > *:nth-child(5) { animation-delay: 0.5s; }
.task-details-content > *:nth-child(6) { animation-delay: 0.6s; }

.task-details-panel {
    transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-task-item.active {
    background: var(--bg-active);
    position: relative;
    border-left: 4px solid var(--primary-color);
    padding-left: 16px;
}

.compact-task-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-color);
    border-radius: 0 2px 2px 0;
}

.compact-task-item {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.compact-task-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.compact-task-time {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.compact-task-time::before {
    content: '🕒';
    font-size: 10px;
    opacity: 0.7;
}

.compact-task-participants {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.compact-task-participants i {
    font-size: 10px;
    color: var(--text-muted);
}

.compact-task-item .btn-primary,
.compact-task-item .btn-success,
.compact-task-item .btn-danger {
    padding: 4px 12px;
    font-size: 12px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 14px;
    font-weight: 600;
}

.compact-task-item .btn-primary:hover,
.compact-task-item .btn-success:hover,
.compact-task-item .btn-danger:hover {
    transform: translateY(-1px);
}

@keyframes urgentPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
    }
}

.task-progress-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.task-progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width var(--transition-slow);
    border-radius: 2px;
}

.compact-task-item.active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.add-comment-form .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    align-self: flex-end;
    margin-top: 12px;
}

.add-comment-form .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
}

.add-comment-form .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(42, 171, 238, 0.2);
}

.add-comment-form .btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.add-comment-form .btn-primary i {
    font-size: 14px;
}

.task-actions-panel .btn-primary,
.task-actions-panel .btn-success,
.task-actions-panel .btn-danger,
.task-actions-panel .btn-secondary {
    flex: 1;
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    margin: 4px;
}

.task-actions-panel .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
}

.task-actions-panel .btn-success {
    background: linear-gradient(135deg, var(--success-color), #2caa4e);
    color: white;
}

.task-actions-panel .btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #e02e24);
    color: white;
}

.task-actions-panel .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.task-actions-panel .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--info-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 171, 238, 0.4);
}

.task-actions-panel .btn-success:hover {
    background: linear-gradient(135deg, #2caa4e, #259c43);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4);
}

.task-actions-panel .btn-danger:hover {
    background: linear-gradient(135deg, #e02e24, #c5261e);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
}

.task-actions-panel .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.task-actions-panel .btn-primary:active,
.task-actions-panel .btn-success:active,
.task-actions-panel .btn-danger:active,
.task-actions-panel .btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-actions-panel i {
    font-size: 14px;
}

.compact-task-item .btn-primary,
.compact-task-item .btn-success,
.compact-task-item .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    height: 28px;
    margin: 4px;
    flex: 1;
}

.compact-task-item .btn-primary {
    background: var(--primary-color);
    color: white;
}

.compact-task-item .btn-success {
    background: var(--success-color);
    color: white;
}

.compact-task-item .btn-danger {
    background: var(--danger-color);
    color: white;
}

.compact-task-item .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
}

.compact-task-item .btn-success:hover {
    background: #2caa4e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.compact-task-item .btn-danger:hover {
    background: #e02e24;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.compact-task-item .btn-primary:active,
.compact-task-item .btn-success:active,
.compact-task-item .btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.compact-task-item .btn-primary:disabled,
.compact-task-item .btn-success:disabled,
.compact-task-item .btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-attachments-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-attachments-count:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

.task-attachments-section .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: auto;
}

.task-attachments-section .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#complete-task-form .btn-success,
#cancel-task-form .btn-danger,
#reassign-task-form .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    width: auto;
    min-width: 160px;
}

#complete-task-form .btn-success {
    background: linear-gradient(135deg, var(--success-color), #2caa4e);
    color: white;
}

#cancel-task-form .btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #e02e24);
    color: white;
}

#reassign-task-form .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
}

#complete-task-form .btn-success:hover,
#cancel-task-form .btn-danger:hover,
#reassign-task-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

#complete-task-form .btn-success:active,
#cancel-task-form .btn-danger:active,
#reassign-task-form .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-filters .task-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.task-filters .task-filter.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.task-filters .task-filter:hover:not(.active) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

@keyframes buttonClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-secondary:active {
    animation: buttonClick 0.2s ease;
}

.btn-primary i,
.btn-success i,
.btn-danger i,
.btn-secondary i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .add-comment-form .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
    
    .task-actions-panel .btn-primary,
    .task-actions-panel .btn-success,
    .task-actions-panel .btn-danger,
    .task-actions-panel .btn-secondary {
        min-width: 100%;
        margin: 4px 0;
    }
    
    .compact-task-item .btn-primary,
    .compact-task-item .btn-success,
    .compact-task-item .btn-danger {
        padding: 8px 12px;
        font-size: 11px;
    }
    
    #complete-task-form .btn-success,
    #cancel-task-form .btn-danger,
    #reassign-task-form .btn-primary {
        width: 100%;
        min-width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .task-filters {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 4px;
    }
    
    .task-filters .task-filter {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .btn-attachments-count {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .task-attachments-section .btn-secondary {
        padding: 6px 12px;
        font-size: 12px;
    }
}

.btn-primary.loading,
.btn-success.loading,
.btn-danger.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-primary.loading::after,
.btn-success.loading::after,
.btn-danger.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: buttonSpin 0.8s linear infinite;
}

@keyframes buttonSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-share-task {
    background: linear-gradient(135deg, #8a2be2, #9370db);
    color: white;
    border: none;
}

.btn-share-task:hover {
    background: linear-gradient(135deg, #7a20d2, #8360cb);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.button-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.button-group .btn-primary,
.button-group .btn-success,
.button-group .btn-danger,
.button-group .btn-secondary {
    flex: 1;
    min-width: 0;
}

.btn-primary i.fa-plus,
.btn-success i.fa-check,
.btn-danger i.fa-times,
.btn-secondary i.fa-paperclip {
    font-size: 12px;
}

#task-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#task-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

#task-form .form-group {
    margin-bottom: 0;
}

#task-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

#task-form .form-group label[required]::after {
    content: " *";
    color: var(--danger-color);
}

#task-form .form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font-primary);
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

#task-form .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.2);
}

#task-form .form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

#task-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

#task-form input[type="number"].form-control {
    -moz-appearance: textfield;
}

#task-form input[type="number"].form-control::-webkit-outer-spin-button,
#task-form input[type="number"].form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#task-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='16' height='16' fill='%238e8e93' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

#task-form .form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

#task-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

#task-form .btn-primary,
#task-form .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    font-family: var(--font-primary);
    min-width: 120px;
}

#task-form .btn-primary {
    background: var(--primary-color);
    color: white;
}

#task-form .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#task-form .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

#task-form .btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

#task-form .btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

#task-form .btn-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

#task-form .btn-primary.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

#task-form .btn-primary.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: buttonSpin 0.8s linear infinite;
}

#task-form .form-control:invalid:not(:placeholder-shown) {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.1);
}

#task-form .form-control:valid:not(:placeholder-shown) {
    border-color: var(--success-color);
}

@media (max-width: 768px) {
    #task-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    #task-form .form-actions {
        flex-direction: column;
    }
    
    #task-form .btn-primary,
    #task-form .btn-cancel {
        width: 100%;
        min-width: 0;
    }
    
    #task-form .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    #task-form textarea.form-control {
        min-height: 80px;
    }
}

@media (max-width: 480px) {
    #task-form .form-control {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    #task-form .btn-primary,
    #task-form .btn-cancel {
        padding: 10px 16px;
        font-size: 14px;
    }
}

@keyframes fieldAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#task-form .form-group {
    animation: fieldAppear 0.3s ease forwards;
    opacity: 0;
}

#task-form .form-group:nth-child(1) { animation-delay: 0.1s; }
#task-form .form-group:nth-child(2) { animation-delay: 0.2s; }
#task-form .form-row .form-group:nth-child(1) { animation-delay: 0.3s; }
#task-form .form-row .form-group:nth-child(2) { animation-delay: 0.4s; }
#task-form .form-group:nth-child(4) { animation-delay: 0.5s; }
#task-form .form-actions { animation: fieldAppear 0.3s ease 0.6s forwards; opacity: 0; }

.fullscreen-modal {
    padding: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    align-items: flex-start;
    justify-content: flex-start;
}

.fullscreen-modal .modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
}

@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
    .modal {
        padding: 0;
        align-items: flex-end;
    }
}

.chat-item-last-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

.chat-item-last-message.has-long-content {
    font-size: 13px;
}

.chat-item-last-message.with-emoji {
    line-height: 1.6;
}

.chat-item-last-message:has(📎) {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-item-last-message:has(📎)::before {
    content: "📎";
    font-size: 12px;
    flex-shrink: 0;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    min-height: 72px;
}

.chat-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-item-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
}

.chat-item-name .chat-item-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-last-message {
    font-family: var(--font-primary), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.chat-item-last-message .chat-list-asset-emoji {
    width: 26px;
    height: 26px;
    margin: 0 2px 0 0;
    vertical-align: middle;
    transform: translateY(-2px);
}

.chat-item-last-message:has(.chat-list-asset-emoji) {
    min-height: 28px;
    max-height: 28px;
    line-height: 28px;
}

@media (max-width: 768px) {
    .chat-item-last-message {
        font-size: 13px;
        -webkit-line-clamp: 2;
        max-height: 2.6em;
    }
    
    .chat-item {
        padding: 10px 16px;
        min-height: 68px;
    }
}

.chat-item-last-message.very-long {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.chat-item-last-message.has-draft {
    color: var(--text-primary);
    font-weight: 650;
}

.chat-draft-label {
    color: var(--primary-color);
    font-weight: 800;
}

.chat-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.chat-item-time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.chat-item-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scroll-to-bottom-btn {
    position: absolute;
    /* Keep the control next to the centered composer instead of at the
       far edge of wide chat windows. The 20px fallback protects narrow UI. */
    right: max(20px, calc((100% - var(--tb-chat-composer-width, 920px)) / 2 - 20px));
    bottom: 70px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-circle);
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    z-index: 90;
}

.scroll-to-bottom-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    border-radius: 999px;
    background: var(--danger-color);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    font-variant-numeric: tabular-nums;
}

.scroll-to-bottom-badge[hidden] {
    display: none;
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-to-bottom-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.older-messages-control {
    display: flex;
    justify-content: center;
    padding: 10px 0 12px;
}

.older-messages-trigger {
    min-height: 30px;
    max-width: min(360px, calc(100% - 28px));
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.older-messages-trigger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent);
    color: var(--text-primary);
}

.older-messages-trigger:disabled {
    cursor: wait;
    opacity: .78;
}

.older-messages-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#chat-members-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

#chat-members-modal[style*="display: block"] {
    display: flex;
}

#chat-members-modal .modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease;
}

#chat-members-modal .modal-header {
    background: #239508;
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

#chat-members-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    text-align: center;
    letter-spacing: 0.3px;
}

#chat-members-modal .modal-header .close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

#chat-members-modal .modal-header .close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#chat-members-modal .modal-body {
    padding: 0;
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
}

#chat-members-modal .members-list {
    background: white;
}

#chat-members-modal .member-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e6e6e6;
    transition: background-color 0.2s;
    min-height: 60px;
}

#chat-members-modal .member-item:last-child {
    border-bottom: none;
}

#chat-members-modal .member-item:hover {
    background-color: #f8f8f8;
}

#chat-members-modal .member-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #e0e0e0;
}

#chat-members-modal .member-info {
    flex: 1;
    min-width: 0;
}

#chat-members-modal .member-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-members-modal .member-status {
    font-size: 13px;
    display: flex;
    align-items: center;
}

#chat-members-modal .member-status.online {
    color: #4caf50;
}

#chat-members-modal .member-status.online::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #4caf50;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 2s infinite;
}

#chat-members-modal .member-status.offline {
    color: #999;
}

#chat-members-modal .member-status.offline::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #999;
    border-radius: 50%;
    margin-right: 6px;
}

#chat-members-modal .member-role {
    font-size: 13px;
    color: #666;
    text-align: right;
    margin-left: 12px;
    white-space: nowrap;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-members-modal .btn-danger {
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 6px;
}

#chat-members-modal .btn-danger:hover {
    background: #ff1c1c;
    transform: translateY(-1px);
}

#chat-members-modal .btn-danger:active {
    transform: translateY(0);
}

#chat-members-modal .btn-danger i {
    font-size: 12px;
}

#chat-members-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#chat-members-modal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#chat-members-modal .modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#chat-members-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@media (max-width: 768px) {
    #chat-members-modal .modal-content {
        width: 95%;
        max-height: 85vh;
        margin-top: auto;
        margin-bottom: 0;
        animation: slideUpMobile 0.3s ease;
    }
    
    #chat-members-modal {
        align-items: flex-end;
    }
    
    #chat-members-modal .modal-header {
        padding: 18px 20px;
    }
    
    #chat-members-modal .member-item {
        padding: 14px 16px;
    }
    
    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #chat-members-modal .modal-content {
        max-width: 450px;
    }
}

#chat-members-modal .members-list:empty::before {
    content: 'Нет участников';
    display: block;
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

#chat-members-modal .members-list.loading .member-item {
    opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
    #chat-members-modal .modal-content {
        background: #101010;
        color: #ffffff;
    }
    
    #chat-members-modal .modal-body {
        background: #090909;
    }
    
    #chat-members-modal .members-list {
        background: #101010;
    }
    
    #chat-members-modal .member-item {
        border-bottom-color: #232323;
    }
    
    #chat-members-modal .member-item:hover {
        background-color: #171717;
    }
    
    #chat-members-modal .member-name {
        color: #ffffff;
    }
    
    #chat-members-modal .member-role {
        background: #171717;
        color: #cccccc;
    }
    
    #chat-members-modal .modal-body::-webkit-scrollbar-track {
        background: #171717;
    }
    
    #chat-members-modal .modal-body::-webkit-scrollbar-thumb {
        background: #363636;
    }
}
/* Добавьте в style2.css или style4.css */

/* Индикатор свайпа для мобильной версии */
.chat-item-swipe-indicator {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(135deg, #ff3b30, #ff6b6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 12px 12px 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 5;
    gap: 4px;
}

.chat-item-swipe-indicator i {
    font-size: 16px;
}

.chat-item.swiping .chat-item-swipe-indicator {
    transform: translateX(0);
    pointer-events: auto;
}

/* Крестик для выхода на ПК */
.chat-item-leave-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .chat-item:hover .chat-item-leave-btn {
        opacity: 1;
        pointer-events: auto;
    }
    
    .chat-item-leave-btn:hover {
        background: var(--danger-color);
        color: white;
        transform: translateY(-50%) scale(1.1);
    }
}

.chat-item-leave-btn i {
    font-size: 14px;
}

/* Для групповых чатов другой цвет */
.chat-item.is-group .chat-item-leave-btn {
    background: rgba(255, 149, 0, 0.1);
    color: var(--warning-color);
}

.chat-item.is-group .chat-item-leave-btn:hover {
    background: var(--warning-color);
    color: white;
}

/* Анимация удаления */
.chat-item.removing {
    animation: slideOut 0.3s ease forwards;
}

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

/* Модальное окно подтверждения выхода */
.leave-chat-confirm-modal .modal-content {
    max-width: 400px;
}

.leave-chat-confirm-modal .modal-body {
    text-align: center;
    padding: 32px;
}

.leave-chat-confirm-modal .warning-icon {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: 16px;
}

.leave-chat-confirm-modal h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.leave-chat-confirm-modal p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.leave-chat-confirm-modal .chat-info {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.leave-chat-confirm-modal .chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.leave-chat-confirm-modal .chat-details {
    flex: 1;
    text-align: left;
}

.leave-chat-confirm-modal .chat-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.leave-chat-confirm-modal .chat-type {
    font-size: 12px;
    color: var(--text-muted);
}

.leave-chat-confirm-modal .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 24px;
    border-top: 1px solid var(--border-color);
}

.leave-chat-confirm-modal .btn-cancel {
    min-width: 120px;
}

.leave-chat-confirm-modal .btn-danger {
    min-width: 120px;
}
/* ===== СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА СОЗДАНИЯ ЧАТА =====
   Важно: модалка больше не использует prefers-color-scheme.
   Все цвета берутся из глобальных переменных приложения, поэтому корректно
   меняются при html.theme-light / html.theme-dark и при системной теме. */

#create-chat-modal {
    --create-chat-modal-bg: var(--modal-bg, var(--bg-secondary));
    --create-chat-modal-surface: var(--bg-secondary);
    --create-chat-modal-field-bg: var(--bg-tertiary);
    --create-chat-modal-hover-bg: var(--bg-hover);
    --create-chat-modal-text: var(--text-primary);
    --create-chat-modal-secondary-text: var(--text-secondary);
    --create-chat-modal-muted-text: var(--text-muted);
    --create-chat-modal-border: var(--border-color);
    --create-chat-modal-border-soft: var(--border-light);
    --create-chat-modal-accent: var(--primary-color);
    --create-chat-modal-danger: var(--danger-color);

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#create-chat-modal[style*="display: block"],
#create-chat-modal[style*="display: flex"] {
    display: flex !important;
}

#create-chat-modal .modal-content {
    width: min(500px, calc(100vw - 32px));
    max-height: min(90vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--create-chat-modal-bg);
    color: var(--create-chat-modal-text);
    border: 1px solid var(--create-chat-modal-border);
    border-radius: var(--radius-xl, 24px);
    box-shadow: var(--shadow-lg, 0 18px 60px rgba(0, 0, 0, 0.28));
    animation: modalSlideIn 0.22s ease;
}

#create-chat-modal .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 24px;
    background: var(--create-chat-modal-surface);
    border-bottom: 1px solid var(--create-chat-modal-border);
}

#create-chat-modal .modal-header h3 {
    margin: 0;
    color: var(--create-chat-modal-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

#create-chat-modal .modal-header .close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle, 50%);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-secondary-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--transition-fast, 150ms ease),
        color var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease);
}

#create-chat-modal .modal-header .close:hover {
    background: var(--create-chat-modal-danger);
    color: #fff;
    transform: rotate(90deg);
}

#create-chat-modal .modal-body {
    flex: 1 1 auto;
    padding: 24px;
    overflow-y: auto;
    background: var(--create-chat-modal-bg);
}

#create-chat-modal .form-group {
    margin-bottom: 20px;
}

#create-chat-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--create-chat-modal-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

#create-chat-modal .form-group label span:not([style*="red"]),
#create-chat-modal .form-hint,
#create-chat-modal .form-hint i {
    color: var(--create-chat-modal-muted-text) !important;
}

#create-chat-modal .form-control,
#create-chat-modal input.form-control,
#create-chat-modal textarea.form-control,
#create-chat-modal select.form-control {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid var(--create-chat-modal-border-soft);
    border-radius: var(--radius-lg, 16px);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-text);
    caret-color: var(--create-chat-modal-accent);
    font: 500 15px/1.4 var(--font-primary, inherit);
    outline: none;
    transition:
        border-color var(--transition-fast, 150ms ease),
        background var(--transition-fast, 150ms ease),
        box-shadow var(--transition-fast, 150ms ease);
}

#create-chat-modal textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

#create-chat-modal .form-control:hover {
    border-color: var(--create-chat-modal-border);
}

#create-chat-modal .form-control:focus {
    border-color: var(--create-chat-modal-accent);
    box-shadow: 0 0 0 3px rgba(35, 149, 8, 0.16);
}

#create-chat-modal .form-control::placeholder {
    color: var(--create-chat-modal-muted-text);
    opacity: 0.75;
}

#create-chat-modal select[multiple].form-control {
    height: 200px;
    min-height: 200px;
    padding: 8px;
    overflow-y: auto;
    background: var(--create-chat-modal-field-bg);
}

#create-chat-modal select[multiple].form-control option {
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm, 8px);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-text);
    font-size: 14px;
    cursor: pointer;
}

#create-chat-modal select[multiple].form-control option:hover {
    background: var(--create-chat-modal-hover-bg);
    color: var(--create-chat-modal-text);
}

#create-chat-modal select[multiple].form-control option:checked {
    background: var(--create-chat-modal-accent) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 999px var(--create-chat-modal-accent);
}

#create-chat-modal select[multiple].form-control option[style*="--success-color"] {
    color: var(--success-color) !important;
}

#create-chat-modal select[multiple].form-control option[style*="--success-color"]:checked {
    color: #fff !important;
}

#create-chat-modal .form-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}

#create-chat-modal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--create-chat-modal-border);
    flex-direction: row;
}

#create-chat-modal .btn-cancel,
#create-chat-modal .btn-primary {
    min-width: 112px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-lg, 16px);
    font: 700 15px/1.2 var(--font-primary, inherit);
    cursor: pointer;
    transition:
        background var(--transition-fast, 150ms ease),
        color var(--transition-fast, 150ms ease),
        border-color var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease),
        box-shadow var(--transition-fast, 150ms ease),
        opacity var(--transition-fast, 150ms ease);
}

#create-chat-modal .btn-primary {
    border: 1px solid var(--create-chat-modal-accent);
    background: var(--create-chat-modal-accent);
    color: #fff;
}

#create-chat-modal .btn-primary:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.18));
}

#create-chat-modal .btn-cancel {
    border: 1px solid var(--create-chat-modal-border);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-secondary-text);
}

#create-chat-modal .btn-cancel:hover:not(:disabled) {
    background: var(--create-chat-modal-hover-bg);
    color: var(--create-chat-modal-text);
    border-color: var(--create-chat-modal-border);
    transform: translateY(-1px);
}

#create-chat-modal input:-webkit-autofill,
#create-chat-modal textarea:-webkit-autofill,
#create-chat-modal select:-webkit-autofill {
    -webkit-text-fill-color: var(--create-chat-modal-text);
    box-shadow: 0 0 0 1000px var(--create-chat-modal-field-bg) inset;
    transition: background-color 9999s ease-out 0s;
}

@media (max-width: 768px) {
    #create-chat-modal {
        padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: center;
    }

    #create-chat-modal .modal-content {
        width: min(500px, calc(100vw - 24px));
        max-width: 100%;
        max-height: min(92dvh, calc(100dvh - 24px));
        border-radius: var(--radius-xl, 24px);
    }

    #create-chat-modal .modal-header {
        padding: 16px 20px;
    }

    #create-chat-modal .modal-body {
        padding: 20px;
    }

    #create-chat-modal .form-actions {
        padding-top: 16px;
    }

    #create-chat-modal .btn-cancel,
    #create-chat-modal .btn-primary {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    #create-chat-modal {
        padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: center;
    }

    #create-chat-modal .form-control,
    #create-chat-modal input.form-control,
    #create-chat-modal textarea.form-control,
    #create-chat-modal select.form-control {
        padding: 10px 14px;
        font-size: 14px;
    }
}

.skeleton-game {
    height: 320px;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: var(--radius-xl);
}

/* Unified app modal layer */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

.modal[style*="display: block"] {
    display: flex !important;
}

.modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(500px, calc(100vw - 32px));
    max-height: min(90vh, 760px);
    overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer {
    background: var(--bg-secondary);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 20px;
    line-height: 1.25;
}

.modal-body {
    padding: 24px;
    max-height: calc(min(90vh, 760px) - 140px);
    overflow-y: auto;
}

.modal-footer {
    padding: 18px 24px;
    border-top: 1px solid var(--border-color);
    gap: 12px;
}

.modal-header .close,
.modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-circle);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.modal-header .close:hover,
.modal-close:hover {
    background: var(--danger-color);
    color: #fff;
    transform: rotate(90deg);
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-cancel {
    min-height: 42px;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-cancel:focus-visible,
.modal-header .close:focus-visible,
.modal-close:focus-visible {
    outline: 2px solid rgba(35, 149, 8, 0.75);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Unified tasks surface layer */
.tasks-container {
    display: flex;
    min-height: 0;
    padding: 0;
    background: var(--bg-primary);
}

.tasks-list-container {
    width: min(400px, 42vw);
    min-width: 320px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.compact-task-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.compact-task-item:hover {
    background: var(--bg-hover);
}

.compact-task-item.active {
    background: var(--bg-active);
    border-left: 4px solid var(--primary-color);
    padding-left: 16px;
}

.compact-task-status,
.compact-task-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.task-details-panel {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.24);
}

.task-details-content {
    padding: 24px;
}

.task-detail-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.task-detail-row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 14px;
    padding: 8px 0;
}

.task-detail-label {
    width: auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.task-actions-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    margin-top: 28px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 0;
}

.attachment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.attachment-item:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.attachment-item:hover .attachment-overlay {
    opacity: 1;
}

.attachment-image,
.attachment-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.attachment-image {
    object-fit: cover;
}

.attachment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--primary-color);
    font-size: 24px;
}

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

.attachment-name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.attachment-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.attachments-grid .image-attachment {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
}

.attachments-grid .image-attachment .attachment-image {
    width: 100%;
    height: 120px;
}

.attachments-grid .image-attachment .attachment-info {
    margin-top: 8px;
}

.attachments-grid .image-attachment .attachment-overlay {
    border-radius: var(--radius-sm);
}

@media (max-width: 1024px) {
    .tasks-list-container {
        width: 350px;
        min-width: 300px;
    }
}

@media (max-width: 768px) {
    .tasks-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 90px);
    }

    .tasks-list-container {
        width: 100%;
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .task-detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .task-actions-panel {
        flex-direction: column;
    }

    .attachments-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .attachment-item {
        padding: 10px;
    }

    .attachments-grid .image-attachment {
        flex-direction: row;
        align-items: center;
    }

    .attachments-grid .image-attachment .attachment-image {
        width: 60px;
        height: 60px;
    }
}

/* Unified profile layer */
.profile-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.profile-container .profile-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
}

.profile-container .profile-avatar-large {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
}

.profile-container .profile-avatar-large img,
#user-profile-modal .profile-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 3px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

.profile-container .profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.profile-container .stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}

.profile-container .stat-value,
#user-profile-modal .profile-stat .stat-value {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.profile-container .stat-label,
#user-profile-modal .profile-stat .stat-label {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.2;
}

.profile-logout-section {
    display: none;
}

.profile-logout-btn {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 34%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.profile-logout-btn:hover {
    background: color-mix(in srgb, var(--danger-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 48%, transparent);
    transform: translateY(-1px);
}

#user-profile-modal .modal-content {
    width: min(480px, calc(100vw - 32px));
}

#user-profile-modal .modal-body {
    padding: 0;
}

#user-profile-modal .profile-cover {
    padding: 36px 20px 52px;
    text-align: center;
}

#user-profile-modal .profile-avatar-large {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
}

#user-profile-modal .profile-status-badge {
    position: absolute;
    right: -10px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    font-weight: 600;
}

#user-profile-modal .profile-info-section {
    padding: 20px 24px 24px;
    background: var(--bg-secondary);
}

#user-profile-modal .profile-name,
#user-profile-modal .profile-username {
    text-align: center;
}

#user-profile-modal .profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    margin: 18px 0;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}

#user-profile-modal .profile-stat {
    text-align: center;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.role-badge i,
.role-badge img {
    font-size: 10px;
}

.watcher-eyes-badge {
    display: inline-block;
    width: 24px;
    height: 18px;
    margin-left: 5px;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
    vertical-align: middle;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgb(15 23 42 / 24%));
}

.admin-verified-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    object-fit: contain;
    vertical-align: middle;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgb(15 23 42 / 22%));
}

.role-badge .admin-verified-badge,
.role-option-admin-icon.admin-verified-badge,
.message-role-badge.admin-verified-badge,
.member-role-badge.admin-verified-badge,
.chat-role-badge.admin-verified-badge,
.chat-header-role-badge .admin-verified-badge,
.mention-role-badge.admin-verified-badge {
    width: 20px;
    height: 20px;
    margin: 0 0 0 5px;
}

.role-badge .admin-verified-badge,
.role-option-admin-icon.admin-verified-badge {
    margin-left: 0;
}

.role-badge.watcher {
    background: linear-gradient(135deg, #334155, #64748b);
    color: #fff;
}

.role-badge .watcher-eyes-badge,
.role-option-watcher-icon.watcher-eyes-badge,
.message-role-badge.watcher-eyes-badge,
.member-role-badge.watcher-eyes-badge,
.chat-role-badge.watcher-eyes-badge,
.chat-header-role-badge .watcher-eyes-badge,
.mention-role-badge.watcher-eyes-badge {
    width: 24px;
    height: 18px;
    margin: 0 0 0 5px;
}

.role-badge .watcher-eyes-badge,
.role-option-watcher-icon.watcher-eyes-badge {
    margin-left: 0;
}

.role-badge.admin {
    background: linear-gradient(135deg, #34c759, rgba(35, 149, 8, 0.55));
    color: #fff;
}

.role-badge.senior {
    background: linear-gradient(135deg, #ff9500, #ff5722);
    color: #fff;
}

.role-badge.technician {
    background: rgba(52, 199, 89, 0.16);
    color: var(--success-color);
}

.role-badge.user {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .profile-container .profile-header {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .profile-container {
        padding: 16px;
    }

    .profile-container .profile-avatar-large,
    #user-profile-modal .profile-avatar-large {
        width: 86px;
        height: 86px;
    }
}

/* Premium chat surface refinement */
.chat-area-full {
    background: #0b0d0c;
}

.chat-messages-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 16px),
        var(--bg-primary);
}

.chat-messages {
    scrollbar-gutter: stable;
}

.message {
    align-items: flex-end;
}

.message.grouped {
    margin-top: -2px;
}

.message-content {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

.message-sender {
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.54);
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    font-size: 14.5px;
    line-height: 1.42;
    letter-spacing: 0;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    line-height: 1;
    white-space: nowrap;
}

.message-reactions {
    bottom: -12px;
    gap: 4px;
}

.reaction-badge {
    min-height: 21px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.message.own .reaction-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #202124;
}

.chat-date-divider {
    /* Dates belong to the history flow. Sibling sticky chips otherwise all
       remain pinned at the same top edge and accumulate glass/shadows. */
    position: relative;
    top: auto;
    z-index: auto;
    margin: 12px 0 8px;
    gap: 10px;
    justify-content: center;
    pointer-events: none;
}

.chat-date-divider::before,
.chat-date-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
}

.chat-date-divider span,
.chat-unread-divider span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(22, 24, 23, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.chat-unread-divider span {
    color: var(--success-color);
    background: rgba(35, 149, 8, 0.16);
    border-color: rgba(52, 199, 89, 0.24);
}

.chat-input-container {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(16, 17, 17, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.chat-input {
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.chat-input:focus-within {
    border-color: rgba(52, 199, 89, 0.48);
    box-shadow: 0 0 0 3px rgba(35, 149, 8, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.input-actions {
    align-self: flex-end;
    padding-top: 0;
    gap: 6px;
}

.input-action-btn,
.send-button {
    flex: 0 0 auto;
}

.input-action-btn {
    width: 34px;
    height: 34px;
}

.message-input {
    min-width: 0;
    min-height: 34px;
    padding: 6px 2px;
}

.rich-message-input {
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    cursor: text;
}

.rich-message-input:empty::before {
    content: attr(data-placeholder);
    color: var(--chat-input-placeholder, var(--text-muted));
    pointer-events: none;
}

.composer-input-emoji {
    width: 28px;
    height: 28px;
    margin: 0;
    vertical-align: -0.45em;
    pointer-events: none;
    user-select: none;
}

.send-button {
    width: 38px;
    height: 38px;
    box-shadow: 0 8px 18px rgba(35, 149, 8, 0.22);
}

@media (max-width: 768px) {
    .message-avatar {
        width: 31px;
        height: 31px;
    }

    .message.grouped.other {
        padding-left: 0;
    }

    .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .chat-input-container {
        padding: 8px 10px 10px;
    }

    .chat-input {
        border-radius: 18px;
        padding: 6px;
    }

    .input-action-btn {
        width: 32px;
        height: 32px;
    }

    .send-button {
        width: 36px;
        height: 36px;
    }
}

/* Theme-aware chat refinement */
:root {
    --chat-surface-bg: #090909;
    --chat-surface-base: var(--bg-primary);
    --chat-surface-glow: rgba(255, 255, 255, 0.025);
    --chat-texture-line: rgba(255, 255, 255, 0.018);
    --chat-sender-color: rgba(255, 255, 255, 0.58);
    --chat-incoming-bubble: linear-gradient(180deg, #171717, #0F0F0F);
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(42, 156, 24, 0.96), rgba(26, 77, 15, 0.98));
    --chat-incoming-text: var(--text-primary);
    --chat-outgoing-text: #fff;
    --chat-time-color: var(--text-muted);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.76);
    --chat-divider-bg: rgba(22, 22, 22, 0.88);
    --chat-divider-color: rgba(255, 255, 255, 0.72);
    --chat-divider-border: rgba(255, 255, 255, 0.08);
    --chat-input-container-bg: rgba(14, 14, 14, 0.96);
    --chat-input-bg: #171717;
    --chat-input-border: rgba(255, 255, 255, 0.09);
    --chat-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-divider-line: rgba(255, 255, 255, 0.09);
    --chat-reaction-bg: rgba(16, 16, 16, 0.97);
    --chat-reaction-border: rgba(255, 255, 255, 0.12);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-own-reaction-text: #202124;
}

@media (prefers-color-scheme: light) {
    :root {
        --chat-surface-bg: #f5f7f4;
        --chat-surface-base: #eef3ed;
        --chat-surface-glow: rgba(255, 255, 255, 0.62);
        --chat-texture-line: rgba(35, 149, 8, 0.045);
        --chat-sender-color: rgba(38, 86, 52, 0.78);
        --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
        --chat-outgoing-bubble: linear-gradient(180deg, rgba(68, 184, 47, 0.94), rgba(35, 149, 8, 0.9));
        --chat-incoming-text: #1e2721;
        --chat-outgoing-text: #fff;
        --chat-time-color: rgba(30, 39, 33, 0.52);
        --chat-outgoing-time-color: rgba(255, 255, 255, 0.82);
        --chat-divider-bg: rgba(255, 255, 255, 0.76);
        --chat-divider-color: rgba(42, 68, 49, 0.68);
        --chat-divider-border: rgba(35, 149, 8, 0.10);
        --chat-input-container-bg: rgba(245, 247, 244, 0.92);
        --chat-input-bg: rgba(255, 255, 255, 0.88);
        --chat-input-border: rgba(30, 39, 33, 0.10);
        --chat-input-shadow: 0 8px 22px rgba(35, 59, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
        --chat-input-text: #1e2721;
        --chat-input-placeholder: rgba(30, 39, 33, 0.48);
        --chat-divider-line: rgba(30, 39, 33, 0.10);
        --chat-reaction-bg: rgba(255, 255, 255, 0.9);
        --chat-reaction-border: rgba(30, 39, 33, 0.10);
        --chat-own-reaction-bg: rgba(255, 255, 255, 0.92);
        --chat-own-reaction-text: #1e2721;
    }
}

html.theme-light {
    --chat-surface-bg: #f5f7f4;
    --chat-surface-base: #eef3ed;
    --chat-surface-glow: rgba(255, 255, 255, 0.62);
    --chat-texture-line: rgba(35, 149, 8, 0.045);
    --chat-sender-color: rgba(38, 86, 52, 0.78);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(68, 184, 47, 0.94), rgba(35, 149, 8, 0.9));
    --chat-incoming-text: #1e2721;
    --chat-outgoing-text: #fff;
    --chat-time-color: rgba(30, 39, 33, 0.52);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.82);
    --chat-divider-bg: rgba(255, 255, 255, 0.76);
    --chat-divider-color: rgba(42, 68, 49, 0.68);
    --chat-divider-border: rgba(35, 149, 8, 0.10);
    --chat-input-container-bg: rgba(245, 247, 244, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.88);
    --chat-input-border: rgba(30, 39, 33, 0.10);
    --chat-input-shadow: 0 8px 22px rgba(35, 59, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --chat-input-text: #1e2721;
    --chat-input-placeholder: rgba(30, 39, 33, 0.48);
    --chat-divider-line: rgba(30, 39, 33, 0.10);
    --chat-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-reaction-border: rgba(30, 39, 33, 0.10);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.92);
    --chat-own-reaction-text: #1e2721;
}

html.theme-dark {
    --chat-surface-bg: #090909;
    --chat-surface-base: var(--bg-primary);
    --chat-surface-glow: rgba(255, 255, 255, 0.025);
    --chat-texture-line: rgba(255, 255, 255, 0.018);
    --chat-sender-color: rgba(255, 255, 255, 0.58);
    --chat-incoming-bubble: linear-gradient(180deg, #171717, #0F0F0F);
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(42, 156, 24, 0.96), rgba(26, 77, 15, 0.98));
    --chat-incoming-text: var(--text-primary);
    --chat-outgoing-text: #fff;
    --chat-time-color: var(--text-muted);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.76);
    --chat-divider-bg: rgba(22, 22, 22, 0.88);
    --chat-divider-color: rgba(255, 255, 255, 0.72);
    --chat-divider-border: rgba(255, 255, 255, 0.08);
    --chat-input-container-bg: rgba(14, 14, 14, 0.96);
    --chat-input-bg: #171717;
    --chat-input-border: rgba(255, 255, 255, 0.09);
    --chat-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-divider-line: rgba(255, 255, 255, 0.09);
    --chat-reaction-bg: rgba(16, 16, 16, 0.97);
    --chat-reaction-border: rgba(255, 255, 255, 0.12);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-own-reaction-text: #202124;
}

.chat-area-full {
    background: var(--chat-surface-bg);
}

.message-sender {
    color: var(--chat-sender-color);
    text-shadow: none;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    background: var(--chat-incoming-bubble);
    color: var(--chat-incoming-text);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    background: var(--chat-outgoing-bubble);
    color: var(--chat-outgoing-text);
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    color: var(--chat-time-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    color: var(--chat-outgoing-time-color);
}

.message-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 16px;
    min-width: 16px;
    height: 12px;
    margin-left: 2px;
    font-size: 10px;
    line-height: 1;
    opacity: 0.78;
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.message-status:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.message-status:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

.message-status.sent {
    opacity: 0.64;
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.message-status.delivered {
    opacity: 0.86;
    color: color-mix(in srgb, currentColor 58%, transparent);
}

.message-status.delivered i {
    filter: saturate(0.35);
}

.message-status.read {
    opacity: 1;
    color: var(--primary-color);
}

.message-status.read::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-outgoing-bubble) 80%, transparent);
}

.message.own .message-status.read {
    color: color-mix(in srgb, var(--tb-own-message-link) 72%, var(--tb-own-message-text));
}

.message.own .message-status.delivered {
    color: color-mix(in srgb, var(--chat-outgoing-time-color) 66%, transparent);
}

.media-message-bubble .message-time,
.voice-message-bubble .message-time {
    gap: 4px;
}

.media-message-bubble .message-status {
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26));
}

.media-message-bubble .message-status.delivered {
    color: rgba(255, 255, 255, 0.66);
}

.media-message-bubble .message-status.read {
    color: color-mix(in srgb, var(--primary-color) 86%, #fff);
}

.message-receipts-modal {
    z-index: 10020;
}

.message-receipts-modal-content {
    width: min(460px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 28px));
}

.message-receipts-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.message-receipts-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.message-receipt-summary-item {
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-tertiary);
    text-align: center;
}

.message-receipt-summary-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
}

.message-receipt-summary-item span {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
}

.message-receipt-summary-item.read strong {
    color: var(--primary-color);
}

.message-receipt-summary-item.delivered strong {
    color: var(--success-color);
}

.message-receipts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 70px;
    max-height: min(430px, calc(100vh - 250px));
    overflow-y: auto;
    padding-right: 2px;
}

.message-receipt-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--bg-secondary);
}

.message-receipt-avatar {
    position: relative;
    width: 42px;
    height: 42px;
}

.message-receipt-avatar img {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 1px solid var(--border-light);
}

.message-receipt-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-secondary);
    border-radius: 999px;
    background: var(--success-color);
}

.message-receipt-user {
    min-width: 0;
}

.message-receipt-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-receipt-time {
    overflow: hidden;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-receipt-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.message-receipt-row.delivered .message-receipt-status {
    color: var(--success-color);
}

.message-receipt-row.read .message-receipt-status {
    color: var(--primary-color);
}

.message-receipts-loading,
.message-receipts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 98px;
    border: 1px dashed var(--border-light);
    border-radius: 16px;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
}

@media (max-width: 480px) {
    .message-receipts-modal-content {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
    }

    .message-receipts-modal .modal-header {
        padding: 18px;
    }

    .message-receipts-summary {
        gap: 6px;
    }

    .message-receipt-summary-item {
        padding: 10px 6px;
    }

    .message-receipt-summary-item strong {
        font-size: 18px;
    }
}

.chat-date-divider span,
.chat-unread-divider span {
    background: var(--chat-divider-bg);
    border-color: var(--chat-divider-border);
    color: var(--chat-divider-color);
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: none;
    display: none;
}

.chat-input-container {
    background: var(--chat-input-container-bg);
    border-top-color: var(--chat-input-border);
}

.chat-input {
    background: var(--chat-input-bg);
    border-color: var(--chat-input-border);
    box-shadow: var(--chat-input-shadow);
}

.chat-input .message-input {
    color: var(--chat-input-text);
}

.chat-input .message-input::placeholder {
    color: var(--chat-input-placeholder);
}

.reaction-badge {
    background: var(--chat-reaction-bg);
    border-color: var(--chat-reaction-border);
}

.message.own .reaction-badge {
    background: var(--chat-own-reaction-bg);
    color: var(--chat-own-reaction-text);
}

.asset-emoji-img {
    display: inline-block;
    width: 2em;
    height: 2em;
    object-fit: contain;
    vertical-align: -0.32em;
    pointer-events: none;
}

.asset-emoji-fallback {
    width: auto;
    height: auto;
    object-fit: initial;
    vertical-align: baseline;
    font-size: 1em;
    line-height: 1;
}

.inline-asset-emoji {
    margin: 0;
}

.reaction-menu-asset {
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

.reaction-menu-asset.asset-emoji-fallback {
    font-size: 28px;
}

.reaction-badge-asset {
    width: 19px;
    height: 19px;
    vertical-align: -4px;
}

.reaction-badge-asset.asset-emoji-fallback {
    font-size: 15px;
    vertical-align: 0;
}

.reaction-burst {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 8;
    pointer-events: none;
    transform-origin: center;
    animation: reactionBurstPop 0.95s ease-out forwards;
}

.message.other .reaction-burst {
    right: auto;
    left: 12px;
}

.reaction-burst-asset {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.26));
}

.reaction-burst-asset.asset-emoji-fallback {
    font-size: 42px;
}

@keyframes reactionBurstPop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.35) rotate(-8deg);
    }
    18% {
        opacity: 1;
        transform: translateY(-8px) scale(1.12) rotate(5deg);
    }
    48% {
        opacity: 1;
        transform: translateY(-18px) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-38px) scale(0.82) rotate(8deg);
    }
}

.composer-asset-emoji {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.three-birches-send-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
    overflow: visible;
}

.three-birches-send-icon .three-birches-canopy {
    fill: currentColor;
    opacity: 0.95;
}

.three-birches-send-icon .three-birches-canopy-center {
    opacity: 1;
}

.three-birches-send-icon .three-birches-trunk {
    fill: #fff;
}

.three-birches-send-icon .three-birches-mark {
    fill: rgba(35, 149, 8, 0.78);
}

.three-birches-send-icon .three-birches-ground {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: 0.8;
}

.send-button .three-birches-send-icon,
.voice-preview-send .three-birches-send-icon {
    width: 24px;
    height: 24px;
}

.btn-primary .three-birches-send-icon {
    width: 19px;
    height: 19px;
    margin-right: 2px;
}

/* Telegram-like composer */
.chat-input-container {
    padding: 10px 14px 14px;
    position: relative;
}

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 6px;
    border-radius: 24px;
}

.chat-input .input-actions,
.chat-send-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
}

.chat-input .input-actions {
    align-self: flex-end;
    padding: 0;
}

.chat-send-actions {
    justify-content: flex-end;
    min-width: 42px;
}

.chat-input .message-input {
    min-height: 40px;
    max-height: 128px;
    padding: 9px 2px 8px;
    line-height: 1.45;
    align-self: center;
}

.chat-input .input-action-btn,
.chat-input .send-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.chat-input .input-action-btn {
    color: var(--chat-input-placeholder);
    background: transparent;
}

.chat-input .input-action-btn:hover {
    color: var(--chat-input-text);
    background: rgba(255, 255, 255, 0.08);
}

.chat-input .input-action-btn.active {
    color: #fff;
    background: color-mix(in srgb, var(--primary-color) 82%, transparent);
}

.chat-input .send-button {
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.24);
}

.chat-input .send-button i,
.voice-preview-send i {
    font-size: 16px;
    transform: translateX(1px);
}

.chat-input:not(.has-sendable-content) .send-button,
.chat-input.has-sendable-content:not(.is-voice-recording) .voice-record-btn {
    display: none;
}

.chat-input.is-voice-recording .send-button {
    display: none;
}

.chat-input-container.is-recording-video-note .chat-input {
    display: none;
}

.voice-record-btn.is-recording {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    gap: 8px;
    color: #fff;
    background: rgba(220, 53, 69, 0.92);
    box-shadow: 0 10px 22px rgba(220, 53, 69, 0.24);
}

.voice-record-btn.is-recording:hover {
    background: rgba(220, 53, 69, 1);
}

.voice-record-time {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.video-note-btn i {
    font-size: 12px;
}

.video-note-btn.is-recording {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    gap: 8px;
    color: #fff;
    background: rgba(220, 53, 69, 0.92);
    box-shadow: 0 10px 22px rgba(220, 53, 69, 0.24);
}

.video-note-record-time {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chat-composer-popover {
    position: absolute;
    left: 14px;
    bottom: calc(100% - 4px);
    z-index: 125;
    width: min(384px, calc(100vw - 28px));
    max-height: min(360px, calc(100vh - 160px));
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
    color: var(--text-primary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: composerPopoverIn 140ms ease-out;
    overflow-y: auto;
}

.chat-composer-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px 9px;
    color: var(--text-primary);
}

.chat-composer-popover-header strong {
    font-size: 13px;
    line-height: 1.2;
}

.chat-composer-popover-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.chat-composer-popover-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chat-attach-actions {
    display: grid;
    gap: 4px;
}

.chat-attach-option {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.chat-attach-option:hover {
    background: var(--bg-hover);
}

.chat-attach-option:active {
    transform: scale(0.985);
}

.chat-attach-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.chat-attach-icon.media { background: linear-gradient(135deg, #3b82f6, #14b8a6); }
.chat-attach-icon.file { background: linear-gradient(135deg, #64748b, #334155); }
.chat-attach-icon.poll { background: linear-gradient(135deg, #a855f7, #6366f1); }
.chat-attach-icon.task { background: linear-gradient(135deg, #22c55e, #239508); }

.chat-attach-option strong,
.chat-attach-option small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attach-option strong {
    font-size: 13px;
    line-height: 1.25;
}

.chat-attach-option small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.25;
}

.chat-emoji-section-title {
    margin: 8px 7px 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.chat-emoji-grid-all {
    padding-right: 2px;
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

.chat-emoji-dock {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.chat-emoji-dock .chat-composer-popover-header {
    position: sticky;
    top: -8px;
    z-index: 3;
    margin: -8px -8px 0;
    padding: 15px 16px 9px;
    background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.chat-emoji-dock::-webkit-scrollbar {
    display: none;
}

.chat-emoji-option {
    position: relative;
    min-width: 0;
    height: 50px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    overflow: hidden;
    transition: background 0.16s ease, transform 0.16s ease;
}

.chat-emoji-static-preview {
    position: absolute;
    inset: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-hover) 62%, transparent);
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: 0;
    transition: opacity 0.14s ease, transform 0.14s ease;
}


.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 44%, transparent);
}

.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview::after {
    content: '';
    width: 58%;
    height: 58%;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--text-secondary) 20%, transparent),
        color-mix(in srgb, var(--text-secondary) 8%, transparent)
    );
}

.chat-emoji-still-preview {
    position: absolute;
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    object-fit: contain;
    border-radius: 10px;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.chat-emoji-option.is-loading-preview .chat-emoji-still-preview,
.chat-emoji-option.is-preview-failed .chat-emoji-still-preview,
.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 44%, transparent);
}

.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview::after {
    content: '';
    width: 58%;
    height: 58%;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--text-secondary) 20%, transparent),
        color-mix(in srgb, var(--text-secondary) 8%, transparent)
    );
}

.chat-emoji-still-preview {
    opacity: 0;
}

.chat-emoji-option:not(.is-loading-preview):not(.is-preview-failed) .chat-emoji-static-preview {
    opacity: 0;
    transform: scale(0.92);
}

.chat-emoji-option.has-legacy-emoji .chat-emoji-static-preview {
    background: transparent;
    font-size: 24px;
    font-weight: 500;
}

.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
    font-size: 0;
}

.chat-emoji-option.has-generated-label .chat-emoji-static-preview {
    font-size: 0.68rem;
    text-transform: uppercase;
}

.chat-emoji-option .chat-emoji-option-label {
    display: none;
}

.chat-emoji-option[hidden] {
    display: none;
}

.chat-emoji-option:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.chat-emoji-option.is-animated-preview .chat-emoji-still-preview {
    will-change: contents;
}

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

.reply-bar,
.edit-bar {
    margin: 0 0 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--chat-input-border) 88%, transparent);
    border-left: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--chat-input-bg) 86%, var(--bg-secondary));
    box-shadow: var(--chat-input-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: composerPlateIn 150ms ease-out;
}

.reply-bar-content {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px;
}

.edit-bar-content {
    display: grid;
    grid-template-columns: 4px 32px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 8px 8px 0;
}

.edit-bar-content {
    grid-template-columns: 4px minmax(0, 1fr) 34px;
}

.edit-bar-accent {
    width: 4px;
    height: 100%;
    align-self: stretch;
    border-radius: 0 999px 999px 0;
    background: var(--primary-color);
}

.edit-bar-accent {
    background: var(--warning-color);
}

.reply-bar-content .reply-avatar {
    width: 32px;
    height: 32px;
}

.reply-info,
.edit-info {
    min-width: 0;
}

.reply-label,
.edit-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.edit-label {
    color: var(--warning-color);
}

.reply-preview,
.edit-preview {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-info {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.edit-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 14%, transparent);
}

.reply-cancel-btn,
.edit-cancel-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
}

.reply-cancel-btn:hover,
.edit-cancel-btn:hover {
    background: var(--bg-hover);
    color: var(--danger-color);
}

.reply-bar .reply-bar-content {
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    grid-template-rows: 1fr;
    column-gap: 10px;
    row-gap: 0;
    padding: 8px;
    border: 0;
    overflow: hidden;
}

.reply-bar .reply-bar-content .reply-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    align-self: center;
}

.reply-bar .reply-bar-content .reply-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.reply-bar .reply-bar-content .reply-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    display: block;
    align-self: center;
    overflow: hidden;
    white-space: normal;
}

.reply-bar .reply-bar-content .reply-label {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reply-bar .reply-bar-content .reply-label span,
.reply-bar .reply-bar-content .reply-label strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-bar .reply-bar-content .reply-preview {
    grid-column: auto;
    min-width: 0;
    max-width: 100%;
    margin-top: 3px;
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-bar .reply-bar-content .reply-cancel-btn {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}

.pinned-message-bar {
    margin: -2px 14px 8px;
    padding: 0;
    position: relative;
    z-index: 85;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: composerPlateIn 150ms ease-out;
}

.pinned-message-bar:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color) 48%, var(--border-color));
}

.pinned-message-content {
    display: grid;
    grid-template-columns: 8px 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 8px 8px 0;
    cursor: default;
}

.pinned-message-rail {
    width: 8px;
    height: 42px;
    display: grid;
    gap: 3px;
    align-content: center;
    justify-items: end;
}

.pinned-message-rail span {
    width: 3px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 72%, transparent);
}

.pinned-message-rail span:nth-child(2) {
    opacity: 0.64;
}

.pinned-message-rail span:nth-child(3) {
    opacity: 0.34;
}

.pinned-icon {
    width: 34px;
    height: 34px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.pinned-message-label {
    margin: 0 0 3px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.pinned-message-label span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
}

.pinned-message-label small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
}

.pinned-message-preview {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.pinned-sender {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    padding: 0;
    color: var(--text-primary);
    font-size: 12px;
}

.pinned-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 12px;
}

.pinned-message-preview .asset-emoji-img,
.pinned-text .inline-asset-emoji {
    width: 20px;
    height: 20px;
    vertical-align: -5px;
    margin: 0 2px;
}

.unpin-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.unpin-btn:hover {
    background: var(--bg-hover);
    color: var(--danger-color);
}

@keyframes composerPlateIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-input-container.is-recording-voice .chat-input {
    display: none;
}

.voice-recording-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 0 0;
}

.voice-recording-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.voice-recording-action:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.13);
}

.voice-recording-cancel {
    color: #ff6b7a;
}

.voice-recording-stop {
    color: #fff;
    background: rgba(35, 149, 8, 0.92);
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.22);
}

.voice-recording-stop:hover {
    background: rgba(35, 149, 8, 1);
}

.voice-recording-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.voice-recording-lead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
}

.voice-recording-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d5e;
    box-shadow: 0 0 0 rgba(255, 77, 94, 0.34);
    animation: voiceRecordingPulse 1.25s ease-in-out infinite;
}

.voice-recording-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 48px;
    height: 30px;
    overflow: hidden;
}

.voice-recording-waveform span {
    display: block;
    flex: 0 0 3px;
    width: 3px;
    height: var(--voice-bar-height, 14px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(52, 199, 89, 0.95), rgba(35, 149, 8, 0.72));
    opacity: 0.86;
    animation: voiceRecordingWave 1.05s ease-in-out infinite;
    animation-delay: var(--voice-bar-delay, 0s);
}

.voice-recording-panel.is-live .voice-recording-waveform span {
    animation: none;
    transform: scaleY(1);
    transition: height 0.08s linear, opacity 0.08s linear;
}

.voice-recording-timer {
    flex: 0 0 auto;
    min-width: 38px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.video-note-recording-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 8px 0 10px;
}

.video-note-recording-action,
.video-note-preview-cancel,
.video-note-preview-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.video-note-recording-action:hover,
.video-note-preview-cancel:hover,
.video-note-preview-send:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.13);
}

.video-note-recording-action:disabled {
    opacity: 0.62;
    cursor: wait;
    transform: none;
}

.video-note-recording-stop,
.video-note-preview-send {
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.22);
}

.video-note-recording-cancel,
.video-note-preview-cancel {
    color: var(--danger-color);
}

.video-note-recording-switch {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.video-note-recording-switch.is-rear-camera {
    color: var(--info-color, #3b82f6);
    background: color-mix(in srgb, var(--info-color, #3b82f6) 14%, transparent);
}

.video-note-recording-switch.is-switching i {
    animation: spin 0.9s linear infinite;
}

.video-note-recording-preview {
    position: relative;
    width: 188px;
    height: 188px;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.30),
        0 0 0 4px color-mix(in srgb, var(--primary-color) 45%, transparent),
        0 0 0 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
    transition: width 180ms ease, height 180ms ease, box-shadow 180ms ease;
    transform-origin: center;
    animation: video-note-recording-grow 180ms ease-out;
}

@keyframes video-note-recording-grow {
    from {
        opacity: 0.78;
        transform: scale(0.72);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.video-note-recording-video,
.video-note-preview-video,
.video-note-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: none !important;
    scale: 1 !important;
    background: #000;
}

.video-note-recording-dot {
    position: absolute;
    top: 10px;
    right: 13px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.48);
    animation: voiceRecordingPulse 1.25s ease-in-out infinite;
}

.video-note-recording-timer {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.video-note-send-preview {
    width: 100%;
    padding: 0 0 8px;
}

.video-note-send-preview-inner {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.video-note-preview-video {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 38%, transparent);
}

.video-note-preview-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.video-note-preview-info strong {
    color: var(--text-primary);
    font-size: 13px;
}

.video-note-preview-info span {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.theme-light .voice-recording-action {
    background: rgba(35, 149, 8, 0.08);
}

html.theme-light .voice-recording-action:hover {
    background: rgba(35, 149, 8, 0.13);
}

html.theme-light .voice-recording-pill {
    border-color: rgba(35, 149, 8, 0.14);
    background: rgba(255, 255, 255, 0.86);
}

@keyframes voiceRecordingPulse {
    0%, 100% {
        transform: scale(0.86);
        box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.28);
    }

    50% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(255, 77, 94, 0);
    }
}

@keyframes voiceRecordingWave {
    0%, 100% {
        transform: scaleY(0.62);
        opacity: 0.56;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

html.theme-light .chat-input .input-action-btn:hover {
    background: rgba(35, 149, 8, 0.08);
}

@media (prefers-color-scheme: light) {
    .chat-input .input-action-btn:hover {
        background: rgba(35, 149, 8, 0.08);
    }
}

@media (max-width: 768px) {
    .chat-input-container {
        padding: 8px 10px 10px;
    }

    .chat-input {
        gap: 6px;
        min-height: 46px;
        padding: 5px;
        border-radius: 23px;
    }

    .chat-input .input-actions {
        gap: 0;
    }

    .chat-input .message-input {
        min-height: 38px;
        padding-top: 8px;
        padding-bottom: 7px;
        font-size: 14px;
    }

    .chat-input .input-action-btn,
    .chat-input .send-button {
        width: 38px;
        height: 38px;
    }

    .voice-record-btn.is-recording {
        min-width: 78px;
        padding: 0 10px;
    }

    .voice-recording-panel {
        gap: 6px;
    }

    .voice-recording-action {
        width: 38px;
        height: 38px;
    }

    .voice-recording-pill {
        height: 42px;
        gap: 8px;
        padding: 0 10px;
    }

    .voice-recording-waveform {
        gap: 2px;
    }

    .voice-recording-waveform span {
        flex-basis: 2px;
        width: 2px;
    }

    .chat-composer-popover {
        left: 10px;
        bottom: calc(100% - 2px);
        width: calc(100vw - 20px);
        border-radius: 16px;
    }

    .chat-emoji-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .chat-emoji-option {
        height: 40px;
        font-size: 21px;
    }

    .chat-emoji-still-preview,
    .chat-emoji-static-preview {
        inset: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
    }

    .reply-bar-content {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 50px;
    }

    .reply-bar .reply-bar-content {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 50px;
        padding: 7px;
        border-radius: 16px;
    }

    .edit-bar-content {
        grid-template-columns: 4px minmax(0, 1fr) 32px;
        min-height: 50px;
    }

    .reply-bar-content .reply-avatar,
    .edit-icon {
        width: 28px;
        height: 28px;
    }

    .reply-bar .reply-bar-content .reply-avatar {
        width: 28px;
        height: 28px;
    }

    .reply-bar .reply-bar-content .reply-label {
        gap: 5px;
        font-size: 11.5px;
        line-height: 1.15;
    }

    .reply-bar .reply-bar-content .reply-preview {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.2;
    }

    .reply-bar .reply-bar-content .reply-cancel-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .pinned-message-bar {
        margin: -2px 10px 7px;
        border-radius: 16px;
    }

    .pinned-message-content {
        grid-template-columns: 7px 30px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 54px;
    }

    .pinned-icon {
        width: 30px;
        height: 30px;
    }
}

/* Reply-aware chat polish */
:root {
    --chat-reply-bg: rgba(255, 255, 255, 0.065);
    --chat-reply-border: rgba(35, 149, 8, 0.62);
    --chat-reply-text: var(--text-muted);
    --chat-reply-sender: var(--primary-color);
    --chat-list-hover-bg: rgba(255, 255, 255, 0.055);
    --chat-list-active-bg: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: light) {
    :root {
        --chat-reply-bg: rgba(255, 255, 255, 0.74);
        --chat-reply-border: rgba(35, 149, 8, 0.42);
        --chat-reply-text: rgba(30, 39, 33, 0.62);
        --chat-reply-sender: #1f7f12;
        --chat-list-hover-bg: rgba(35, 149, 8, 0.055);
        --chat-list-active-bg: rgba(35, 149, 8, 0.13);
        --chat-list-active-border: rgba(35, 149, 8, 0.26);
    }
}

html.theme-light {
    --chat-reply-bg: rgba(255, 255, 255, 0.74);
    --chat-reply-border: rgba(35, 149, 8, 0.42);
    --chat-reply-text: rgba(30, 39, 33, 0.62);
    --chat-reply-sender: #1f7f12;
    --chat-list-hover-bg: rgba(35, 149, 8, 0.055);
    --chat-list-active-bg: rgba(35, 149, 8, 0.13);
    --chat-list-active-border: rgba(35, 149, 8, 0.26);
}

html.theme-dark {
    --chat-reply-bg: rgba(255, 255, 255, 0.065);
    --chat-reply-border: rgba(35, 149, 8, 0.62);
    --chat-reply-text: var(--text-muted);
    --chat-reply-sender: var(--primary-color);
    --chat-list-hover-bg: rgba(255, 255, 255, 0.055);
    --chat-list-active-bg: rgba(35, 149, 8, 0.17);
    --chat-list-active-border: rgba(52, 199, 89, 0.42);
}

.message-content {
    align-items: flex-start;
}

.message.own .message-content {
    align-items: flex-end;
}

.message-bubble {
    align-self: flex-start;
    position: relative;
}

.message.own .message-bubble {
    align-self: flex-end;
}

.message-reply-preview {
    box-sizing: border-box;
    width: auto;
    max-width: min(360px, 100%);
    padding: 7px 10px;
    gap: 8px;
    border-left-width: 2px;
    border-left-color: var(--chat-reply-border);
    background: var(--chat-reply-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.message-reply-preview:hover {
    transform: translateY(-1px);
}

.reply-preview-avatar {
    width: 24px;
    height: 24px;
}

.reply-preview-content {
    max-width: min(285px, calc(100vw - 138px));
}

.reply-preview-sender {
    color: var(--chat-reply-sender);
    font-size: 11.5px;
    line-height: 1.2;
}

.reply-preview-text {
    color: var(--chat-reply-text);
    font-size: 11.5px;
    line-height: 1.2;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) {
    flex: 0 1 auto;
}

.chat-list-filters {
    display: flex;
    gap: 7px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-list-filters::-webkit-scrollbar {
    display: none;
}

.chat-list-filter-btn {
    flex: 0 0 auto;
    min-height: 34px;
    max-width: 154px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    font-size: 12px;
}

.chat-list-filter-btn i,
.chat-list-filter-btn span,
.chat-list-filter-btn em {
    flex: 0 0 auto;
}

.chat-list-filter-btn span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-list-filter-btn em {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-muted) 13%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.chat-list-filter-btn em[hidden] {
    display: none;
}

.chat-list-filter-btn.active {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-primary));
}

.chat-list-filter-btn.active i {
    color: var(--primary-color);
}

.chat-list-filter-btn.active em {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
    color: var(--text-primary);
}

.sidebar.app-navigation .user-profile {
    cursor: pointer;
}

.sidebar.app-navigation .user-profile:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 70%, transparent);
    outline-offset: 3px;
}

.sidebar.app-navigation .user-profile .logout-form,
.sidebar.app-navigation .user-profile .logout-btn {
    cursor: default;
}

.chat-item {
    border: 1px solid transparent;
    border-radius: 14px;
    margin: 2px 8px;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.chat-item:hover {
    background: var(--chat-list-hover-bg);
    transform: translateY(-1px);
}

.chat-item.active {
    background: var(--chat-list-active-bg);
}

.chat-item.context-open {
    border-color: color-mix(in srgb, var(--primary-color) 44%, transparent);
    transform: translateY(-1px);
}

.chat-item.active::before {
    width: 3px;
    border-radius: 0 999px 999px 0;
}

.chat-item.is-muted .chat-item-title,
.chat-item.is-muted .chat-item-last-message {
    color: var(--text-muted);
}

.chat-item-pin,
.chat-muted-icon,
.chat-item-group-icon {
    flex: 0 0 auto;
}

.chat-muted-icon {
    opacity: 0.72;
}

.chat-item-avatar,
.message-avatar,
.chat-avatar-container,
.chat-avatar {
    border-radius: var(--radius-circle);
}

.chat-item-avatar,
.message-avatar,
.chat-avatar-container {
    overflow: visible;
}

.chat-item-avatar img,
.message-avatar img,
.chat-avatar img {
    display: block;
    border-radius: var(--radius-circle);
    border: 0;
    outline: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 16px rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: light) {
    .chat-item-avatar img,
    .message-avatar img,
    .chat-avatar img {
        box-shadow: 0 0 0 1px rgba(30, 39, 33, 0.08), 0 6px 16px rgba(35, 59, 39, 0.10);
    }
}

html.theme-light .chat-item-avatar img,
html.theme-light .message-avatar img,
html.theme-light .chat-avatar img {
    box-shadow: 0 0 0 1px rgba(30, 39, 33, 0.08), 0 6px 16px rgba(35, 59, 39, 0.10);
}

.reaction-menu,
.message-menu {
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.reaction-menu {
    width: 344px;
    max-width: 344px;
    min-width: 344px;
}

.chat-context-menu {
    position: fixed;
    z-index: 10030;
    width: 238px;
    padding: 7px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: chatContextMenuIn 120ms ease-out;
}

.chat-context-menu-header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 7px 9px;
    margin-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.chat-context-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    object-fit: cover;
}

.chat-context-title {
    min-width: 0;
}

.chat-context-title strong,
.chat-context-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-context-title strong {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.25;
}

.chat-context-title span {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.chat-context-menu-item {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.chat-context-menu-item:hover {
    background: var(--bg-hover);
}

.chat-context-menu-item:active {
    transform: scale(0.98);
}

.chat-context-menu-item i {
    width: 18px;
    color: var(--text-secondary);
    text-align: center;
}

.chat-context-menu-item.danger,
.chat-context-menu-item.danger i {
    color: var(--danger-color);
}

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

.reaction-option {
    background: transparent;
}

.reaction-list {
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .reaction-menu:not(.mobile) .reaction-list {
        display: grid;
        grid-template-columns: repeat(6, 50px);
        gap: 4px;
    }
}

.reaction-option {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 16px;
    font-size: 0;
}

.reaction-option:hover,
.reaction-option.active {
    background: var(--bg-hover);
}

.reaction-option.active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 44%, transparent);
}

.reaction-more-btn {
    color: var(--text-secondary);
    font-size: 16px;
    border: 0;
    cursor: pointer;
}

.reaction-more-btn.is-active {
    color: var(--primary-color);
    background: var(--bg-hover);
}

.reaction-all-picker {
    min-width: 0;
    overflow-x: hidden;
    padding: 8px 10px 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.reaction-all-picker[hidden] { display: none; }

.reaction-all-search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--bg-hover);
    color: var(--text-muted);
}

.reaction-all-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.reaction-all-grid {
    width: 100%;
    min-width: 0;
    max-height: min(42vh, 310px);
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(6, 50px);
    justify-content: center;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.reaction-all-grid::-webkit-scrollbar { width: 6px; height: 0; }
.reaction-all-grid::-webkit-scrollbar-track { background: transparent; }
.reaction-all-grid::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 999px; }
.reaction-all-grid::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

.reaction-all-loading {
    grid-column: 1 / -1;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 768px) {
    .reaction-menu.mobile.is-expanded {
        width: min(344px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }
    .reaction-menu.mobile .reaction-all-grid {
        grid-template-columns: repeat(6, minmax(40px, 50px));
        max-height: min(38vh, 290px);
    }
}

.reaction-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.reaction-badge {
    gap: 3px;
    padding: 1px 6px 1px 4px;
}

.message-menu-item {
    min-height: 42px;
    border-radius: 12px;
    margin: 2px 6px;
}

.message-menu-item.delete-btn {
    color: var(--danger-color);
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    border-color: 
color-mix(in srgb, var(--primary-color) 36%, transparent);
    box-shadow: 0 8px 22px rgba(35, 149, 8, 0.20);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.055));
}

.message-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 96px));
    max-width: 100%;
}

.message-file.document-message {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 66%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    overflow: hidden;
}

.message.own .message-file.document-message {
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent);
    background: linear-gradient(180deg, rgba(35, 149, 8, 0.20), rgba(35, 149, 8, 0.11));
}

.message-file.document-message .file-icon-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 15%, var(--bg-tertiary));
    color: var(--primary-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.message-file.document-message .file-icon-wrap i {
    font-size: 21px;
    color: currentColor;
}

.message-file.document-message .file-icon-wrap em {
    position: absolute;
    right: 4px;
    bottom: 4px;
    max-width: 34px;
    padding: 1px 4px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    color: var(--text-secondary);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.message-file.document-message .file-info {
    min-width: 0;
}

.message-file.document-message .file-name {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-file.document-message .file-meta {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.file-local-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: var(--primary-color);
    font-weight: 750;
}

.file-local-state i {
    font-size: 11px;
}

.document-message.is-file-cached .file-local-state {
    color: #2fa84f;
}

.document-message.is-file-loading {
    cursor: progress;
    opacity: .82;
}

.file-text-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-tertiary));
    color: var(--primary-color);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.file-text-preview-btn i {
    font-size: 11px !important;
}

.file-text-preview-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.chat-text-preview {
    grid-column: 1 / -1;
    width: 100%;
    max-height: min(48vh, 440px);
    overflow: auto;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
    color: var(--text-primary);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.chat-text-preview[hidden] {
    display: none !important;
}

.chat-text-preview pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: 12.5px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    color: inherit;
    user-select: text;
}

.chat-text-preview-status {
    color: var(--text-muted);
    font-size: 12px;
}

.message-file.document-message .file-download-btn {
    display: none !important;
}

.file-preview-bar {
    margin: 0 0 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.file-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 760;
}

.file-preview-cancel-all,
.preview-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.file-preview-cancel-all {
    width: 28px;
    height: 28px;
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

.file-preview-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 1px 2px 8px;
    scrollbar-width: thin;
}

.file-preview-item {
    position: relative;
    flex: 0 0 196px;
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 34px 10px 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.file-preview-item.image-preview {
    grid-template-columns: 52px minmax(0, 1fr);
}

.file-preview-icon,
.file-preview-item .preview-thumb {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.file-preview-icon {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-tertiary));
    color: var(--primary-color);
    font-size: 18px;
}

.file-preview-item .preview-thumb {
    object-fit: cover;
}

.file-preview-caption {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.file-preview-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-caption small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
    color: var(--text-muted);
}

.file-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.message-file:hover,
.message-task-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 46%, var(--border-color));
    transform: translateY(-1px);
}

.voice-message {
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    border-radius: 18px;
}

.message.own .voice-message {
    background: linear-gradient(180deg, rgba(68, 184, 47, 0.96), rgba(35, 149, 8, 0.92));
    border-color: color-mix(in srgb, var(--primary-color) 52%, transparent);
}

.voice-play-btn {
    box-shadow: 0 8px 18px rgba(35, 149, 8, 0.22);
}

.voice-wave span {
    border-radius: 999px;
}

.message-poll {
    background: color-mix(in srgb, var(--bg-secondary) 91%, transparent);
    border-radius: 16px;
    overflow: hidden;
}

.poll-header {
    gap: 8px;
    padding-bottom: 10px;
}

.poll-question {
    line-height: 1.28;
}

.poll-option {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.poll-option:hover {
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-primary));
}

.poll-progress {
    border-radius: 999px;
}

.message-task-card {
    background: color-mix(in srgb, var(--bg-secondary) 93%, transparent);
    border-radius: 16px;
}

.task-card-header,
.task-card-footer {
    background: color-mix(in srgb, var(--bg-primary) 58%, transparent);
}

.task-card-title span:first-of-type {
    color: var(--primary-color);
}

.message-menu {
    min-width: 224px;
    padding: 7px;
}

.message-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px 10px;
    margin-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.message-menu-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.message-menu-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.message-menu-actions {
    display: grid;
    gap: 2px;
}

.chat-search-tabs {
    display: flex;
    gap: 6px;
    margin: 12px 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-search-tabs::-webkit-scrollbar {
    display: none;
}

.chat-search-tab {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.chat-search-tab.active {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--primary-color) 44%, var(--border-color));
    color: var(--text-primary);
}

.chat-search-result-item {
    border-radius: 8px;
    margin: 6px 8px;
    border: 1px solid transparent;
}

.chat-search-result-item.active {
    border-color: color-mix(in srgb, var(--primary-color) 42%, transparent);
}

.chat-search-result-sender em {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
}

.chat-search-file-size {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--border-color);
}

.chat-search-media-kind {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
}

.chat-search-result-item.type-file .chat-search-result-sender em {
    color: var(--primary-color);
}

.chat-search-result-item.type-media .chat-search-result-sender em {
    color: var(--success-color, var(--primary-color));
}

.chat-search-result-item.type-link .chat-search-result-sender em {
    color: var(--info-color, var(--primary-color));
}

.chat-search-loading i {
    animation: subtlePulse 1.1s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        opacity: .55;
        transform: scale(.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* Voice messages: final chat component layer */
.voice-message-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.voice-message-bubble .voice-message {
    box-sizing: border-box;
    width: min(352px, calc(100vw - 108px));
    min-width: 268px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px 70px 24px 11px;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    border-radius: 18px 18px 18px 8px !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 96%, transparent), color-mix(in srgb, var(--bg-primary) 86%, transparent)) !important;
    color: var(--text-primary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.message.own .voice-message-bubble .voice-message {
    border-color: color-mix(in srgb, var(--primary-color) 42%, transparent) !important;
    border-radius: 18px 18px 8px 18px !important;
    background: linear-gradient(180deg, rgba(64, 177, 44, 0.98), rgba(35, 149, 8, 0.94)) !important;
    color: #fff;
    box-shadow: 0 10px 24px rgba(35, 149, 8, 0.22) !important;
}

.voice-message-bubble .voice-play-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 92%, #fff 8%) !important;
    color: #fff;
    box-shadow: 0 8px 18px rgba(35, 149, 8, 0.26);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.voice-message-bubble .voice-play-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.32);
}

.message.own .voice-message-bubble .voice-play-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.voice-message-bubble .voice-message-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.voice-message-bubble .voice-wave {
    height: 24px;
    display: grid;
    grid-template-columns: repeat(var(--voice-wave-bars, 28), minmax(2px, 1fr));
    align-items: center;
    gap: 3px;
    opacity: 0.88;
}

.voice-message-bubble .voice-wave span {
    width: 100%;
    max-width: 5px;
    justify-self: center;
    height: var(--voice-wave-height, 12px);
    border-radius: 999px;
    background: currentColor;
    opacity: 0.58;
}

.voice-message-bubble .voice-wave span:nth-child(1) { height: 8px; }
.voice-message-bubble .voice-wave span:nth-child(2) { height: 17px; }
.voice-message-bubble .voice-wave span:nth-child(3) { height: 12px; }
.voice-message-bubble .voice-wave span:nth-child(4) { height: 22px; }
.voice-message-bubble .voice-wave span:nth-child(5) { height: 14px; }
.voice-message-bubble .voice-wave span:nth-child(6) { height: 19px; }
.voice-message-bubble .voice-wave span:nth-child(7) { height: 9px; }

.voice-message-bubble .voice-wave span[style] {
    height: var(--voice-wave-height, 12px);
}

.voice-message-bubble .voice-message.is-playing .voice-wave span {
    animation: voiceBarPulse 0.9s ease-in-out infinite;
}

.voice-message-bubble .voice-message.is-playing .voice-wave span:nth-child(2n) {
    animation-delay: 0.12s;
}

.voice-message-bubble .voice-message.is-playing .voice-wave span:nth-child(3n) {
    animation-delay: 0.22s;
}

@keyframes voiceBarPulse {
    0%, 100% { opacity: 0.48; transform: scaleY(0.78); }
    50% { opacity: 0.92; transform: scaleY(1.08); }
}

.voice-message-bubble .voice-progress {
    width: 100%;
    height: 18px;
    margin: -1px 0 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    --voice-progress: 0%;
}

.voice-message-bubble .voice-progress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, currentColor var(--voice-progress), color-mix(in srgb, currentColor 22%, transparent) var(--voice-progress));
}

.voice-message-bubble .voice-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.voice-message-bubble .voice-progress::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
}

.voice-message-bubble .voice-progress::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: currentColor;
}

.voice-message-bubble .voice-meta-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: color-mix(in srgb, currentColor 74%, transparent);
    font-size: 12px;
    line-height: 1.1;
}

.voice-message-bubble .voice-duration {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.voice-message-bubble .voice-time-separator {
    opacity: 0.55;
}

.voice-message-bubble .voice-speed-btn {
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: currentColor;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.voice-message-bubble .voice-transcript-toggle {
    min-width: 0;
    max-width: 142px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.voice-message-bubble .voice-transcript-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.message.own .voice-message-bubble .voice-transcript-toggle {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.94);
}

.voice-message-bubble .voice-transcript-toggle:disabled {
    opacity: 0.58;
}

.voice-message-bubble .voice-transcript {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 2px 0 0 !important;
    padding: 8px 9px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-primary) 76%, transparent) !important;
    color: var(--text-secondary) !important;
    font-size: 12.5px;
    line-height: 1.42;
}

.message.own .voice-message-bubble .voice-transcript {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.voice-message-bubble .voice-transcript.is-hidden {
    display: none !important;
}

.voice-message-bubble .message-time {
    right: 10px;
    bottom: 7px;
    color: color-mix(in srgb, currentColor 66%, transparent);
}

@media (max-width: 768px) {
    .voice-message-bubble .voice-message {
        width: min(304px, calc(100vw - 74px));
        min-width: 226px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        padding: 9px 56px 23px 10px;
    }

    .voice-message-bubble .voice-play-btn {
        width: 38px;
        height: 38px;
    }

    .voice-message-bubble .voice-wave {
        gap: 3px;
    }

    .voice-message-bubble .voice-transcript-toggle {
        max-width: 112px;
        padding-inline: 7px;
        font-size: 11.5px;
    }
}

/* Zoomable chat images */
.image-modal .image-modal-container {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 18px);
}

.image-modal .image-modal-actions {
    flex-wrap: nowrap;
}

.image-modal .image-modal-body {
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
    border-radius: 16px;
    background: #050505;
}

.image-modal.is-zoomed .image-modal-body,
.image-modal.is-zoomed .image-modal-img {
    cursor: grab;
}

.image-modal .image-modal-img {
    transform-origin: center center;
    transition: transform 0.14s ease;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

@media (max-width: 768px) {
    .image-modal .image-modal-header {
        gap: 8px;
        padding-inline: 10px;
    }

    .image-modal .image-modal-name {
        max-width: calc(100vw - 252px);
    }

    .image-modal .image-modal-actions {
        gap: 6px;
    }

    .image-modal .image-modal-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* Telegram-like voice messages */
.voice-message-bubble .voice-message {
    width: min(356px, calc(100vw - 98px)) !important;
    min-width: 252px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 58px 18px 8px;
    border-radius: 22px 22px 22px 10px !important;
}

.message.own .voice-message-bubble .voice-message {
    border-radius: 22px 22px 10px 22px !important;
}

.voice-message-bubble .voice-play-btn {
    width: 44px;
    height: 44px;
    align-self: center;
    font-size: 15px;
}

.message.own .voice-message-bubble .voice-play-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--primary-color);
}

.voice-message-bubble .voice-message-main {
    position: relative;
    gap: 3px;
}

.voice-message-bubble .voice-wave {
    height: 29px;
    grid-template-columns: repeat(var(--voice-wave-bars, 28), minmax(2px, 1fr));
    gap: 2px;
    padding: 0 1px;
    opacity: 1;
}

.voice-message-bubble .voice-wave span {
    max-width: 4px;
    opacity: 0.62;
    background: color-mix(in srgb, currentColor 86%, transparent);
    transform-origin: center;
}

.voice-message-bubble .voice-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    height: 31px;
    margin: 0;
    opacity: 0;
}

.voice-message-bubble .voice-meta-row {
    min-height: 22px;
    gap: 6px;
    font-size: 11.5px;
}

.voice-message-bubble .voice-duration {
    font-size: 11.5px;
}

.voice-message-bubble .voice-speed-btn,
.voice-message-bubble .voice-transcript-toggle {
    min-height: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
}

.voice-message-bubble .voice-transcript-toggle {
    margin-left: auto;
    max-width: 128px;
}

.voice-message-bubble .voice-transcript {
    margin-top: 7px !important;
    border-radius: 14px;
}

.voice-message-bubble .message-time {
    right: 11px;
    bottom: 6px;
    font-size: 10.5px;
}

@media (max-width: 768px) {
    .voice-message-bubble .voice-message {
        width: min(296px, calc(100vw - 72px)) !important;
        min-width: 224px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 48px 18px 8px;
    }

    .voice-message-bubble .voice-play-btn {
        width: 40px;
        height: 40px;
    }

    .voice-message-bubble .voice-transcript-toggle {
        max-width: 96px;
    }
}

/* Round video messages */
.video-note-message-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.video-note-message-bubble .video-note-message {
    position: relative;
    width: 184px;
    height: 184px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 50%;
    background: #000;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    cursor: pointer;
    transition: width 180ms ease, height 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.message.own .video-note-message-bubble .video-note-message {
    border-color: color-mix(in srgb, var(--primary-color) 54%, transparent);
}

.video-note-message-bubble .video-note-message.is-playing {
    width: 244px;
    height: 244px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.28);
}

.video-note-message-bubble .video-note-player {
    cursor: pointer;
}

.video-note-message-bubble .video-note-play-btn {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 54px;
    height: 54px;
    margin: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

.video-note-message-bubble .video-note-play-btn:hover {
    transform: scale(1.04);
    background: rgba(0, 0, 0, 0.58);
}

.video-note-message-bubble .video-note-message.is-playing .video-note-play-btn {
    opacity: 0;
    pointer-events: none;
}

.video-note-message-bubble .video-note-ring {
    position: absolute;
    inset: 6px;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    pointer-events: none;
}

.video-note-message-bubble .video-note-duration {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 3;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.56);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.video-note-message-bubble .message-time {
    justify-content: center;
    margin-top: 4px;
    color: var(--text-muted);
}

.video-note-message-bubble .message-reactions {
    left: 50% !important;
    right: auto !important;
    bottom: -12px;
    justify-content: center;
    max-width: 100%;
    transform: translateX(-50%);
}

.video-note-message--missing {
    width: auto !important;
    height: auto !important;
    min-width: 180px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent) !important;
    color: var(--text-secondary);
}

.video-note-fallback {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

@media (max-width: 768px) {
    .video-note-recording-panel {
        gap: 9px;
        padding: 8px 0 10px;
    }

    .video-note-recording-preview {
        width: 168px;
        height: 168px;
    }

    .video-note-recording-action {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .video-note-send-preview-inner {
        grid-template-columns: 56px minmax(0, 1fr) 38px 38px;
        gap: 8px;
        padding: 9px;
    }

    .video-note-preview-video {
        width: 56px;
        height: 56px;
    }

    .video-note-message-bubble .video-note-message {
        width: 158px;
        height: 158px;
    }

    .video-note-message-bubble .video-note-message.is-playing {
        width: min(232px, calc(100vw - 104px));
        height: min(232px, calc(100vw - 104px));
    }

    .message-attachments {
        width: min(328px, calc(100vw - 84px));
    }

    .message-file.document-message {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 68px;
        padding: 9px;
        border-radius: 17px;
    }

    .message-file.document-message .file-icon-wrap {
        width: 46px;
        height: 46px;
    }

    .file-preview-bar {
        border-radius: 18px;
        padding: 9px;
    }

    .file-preview-item {
        flex-basis: 176px;
    }
}

/* Chat right-side information panel */
.chat-info-panel {
    width: 0;
    min-width: 0;
    flex: 0 0 0;
    overflow: hidden;
    border-left: 1px solid transparent;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    transition: width var(--transition-normal), min-width var(--transition-normal), border-color var(--transition-normal);
}

.chat-info-panel.is-open {
    width: 336px;
    min-width: 336px;
    flex-basis: 336px;
    border-left-color: var(--border-color);
}

.chat-info-panel-header {
    min-height: 64px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
}

.chat-info-panel-header strong,
.chat-info-panel-header span {
    display: block;
    min-width: 0;
}

.chat-info-panel-header strong {
    font-size: 14px;
    color: var(--text-primary);
}

.chat-info-panel-header span {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-info-panel-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: transparent;
}

.chat-info-panel-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

.chat-info-panel-tab {
    min-width: 0;
    min-height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--text-muted);
    background: transparent;
    font-size: 11px;
}

.chat-info-panel-tab i {
    font-size: 13px;
}

.chat-info-panel-tab.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
}

.chat-info-panel-content {
    height: calc(100% - 116px);
    overflow-y: auto;
    padding: 12px;
}

.chat-info-card,
.chat-info-section,
.chat-info-pinned-card,
.chat-info-search-box,
.chat-info-search-shortcuts {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
}

.chat-info-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.chat-info-avatar img,
.chat-info-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-info-profile h4 {
    margin: 0;
    font-size: 15px;
    color: var(--text-primary);
}

.chat-info-profile p,
.chat-info-muted {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.chat-info-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.chat-info-stats button,
.chat-info-actions-grid button {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    color: var(--text-secondary);
}

.chat-info-stats button {
    min-height: 56px;
    display: grid;
    place-items: center;
}

.chat-info-stats strong {
    color: var(--text-primary);
    font-size: 16px;
}

.chat-info-stats span {
    font-size: 11px;
}

.chat-info-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.chat-info-actions-grid button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.chat-info-section {
    padding: 10px;
    margin-bottom: 10px;
}

.chat-info-section h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.chat-info-section h4 span {
    min-width: 24px;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.chat-info-material-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.chat-info-material-summary button {
    min-width: 0;
    min-height: 72px;
    padding: 8px 5px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    color: var(--text-secondary);
}

.chat-info-material-summary i {
    color: var(--primary-color);
    font-size: 14px;
}

.chat-info-material-summary strong {
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1;
}

.chat-info-material-summary span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.chat-info-material-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-info-material-filters::-webkit-scrollbar {
    display: none;
}

.chat-info-material-filters button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
}

.chat-info-material-filters button.active {
    border-color: color-mix(in srgb, var(--primary-color) 44%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--text-primary);
}

.chat-info-material-filters em {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
}

.chat-info-media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.chat-info-media-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.chat-info-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-info-list {
    display: grid;
    gap: 7px;
}

.chat-info-file-row,
.chat-info-link-row,
.chat-info-task-row {
    min-width: 0;
    min-height: 42px;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
    text-align: left;
}

.chat-info-file-row span,
.chat-info-link-row span,
.chat-info-task-row {
    min-width: 0;
}

.chat-info-file-row strong,
.chat-info-link-row strong,
.chat-info-task-row strong {
    display: block;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-info-file-row small,
.chat-info-link-row small,
.chat-info-task-row small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-info-inline-empty {
    min-height: 86px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: 8px;
    display: grid;
    place-items: center;
    gap: 5px;
    text-align: center;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 54%, transparent);
}

.chat-info-inline-empty i {
    color: var(--primary-color);
    opacity: .78;
}

.chat-info-inline-empty strong {
    color: var(--text-secondary);
    font-size: 13px;
}

.chat-info-inline-empty span {
    font-size: 11px;
    line-height: 1.35;
}

.chat-info-pinned-card {
    padding: 12px;
    display: grid;
    gap: 8px;
}

.chat-info-pinned-card i {
    color: var(--primary-color);
}

.chat-info-pinned-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.chat-info-pinned-card button,
.chat-info-search-box button {
    min-height: 34px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
}

.chat-info-search-box {
    padding: 8px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.chat-info-search-box input {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    outline: none;
}

.chat-info-search-shortcuts {
    margin-top: 10px;
    padding: 8px;
    display: flex;
    gap: 6px;
}

.chat-info-search-shortcuts button {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
    color: var(--text-secondary);
}

.chat-info-panel-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.chat-action-btn.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

@media (max-width: 1180px) {
    .chat-info-panel.is-open {
        width: 306px;
        min-width: 306px;
        flex-basis: 306px;
    }
}

@media (max-width: 900px) {
    .modal {
        z-index: 1400;
    }

    .chat-info-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        width: min(92vw, 360px);
        min-width: 0;
        flex-basis: auto;
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        box-shadow: -20px 0 40px rgba(0, 0, 0, 0.28);
    }

    .chat-info-panel.is-open {
        width: min(92vw, 360px);
        min-width: 0;
        flex-basis: auto;
        transform: translateX(0);
    }
}

.chat-messages {
    scroll-padding-block: 18px;
    scroll-behavior: auto;
}

.message {
    position: relative;
}

.message.reply-swipe-active .message-bubble::before {
    content: '\f112';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: -32px;
    top: 50%;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-secondary));
    color: var(--primary-color);
    transform: translateY(-50%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.message.own.reply-swipe-active .message-bubble::before {
    left: auto;
    right: -32px;
}

.message-file,
.message-image,
.message-image-group,
.message-poll,
.message-task-card,
.voice-message {
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#notifications-btn #notifications-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--bg-secondary);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.message-file:active,
.message-image:active,
.message-image-group:active,
.message-poll:active,
.message-task-card:active,
.voice-message:active {
    transform: scale(0.99);
}

/* Stable photo geometry: reserve the complete media message before blob loading. */
.message-image-group {
    box-sizing: border-box;
    width: min(336px, calc(100vw - 104px));
    max-width: 100%;
}

.message-image-group.single {
    width: min(280px, calc(100vw - 104px));
}

.message-image-group .image-group-grid {
    width: 100%;
}

.message-image-group.single .image-group-grid {
    display: block;
}

.message-image-group.double .image-group-grid,
.message-image-group.grid-4 .image-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.message-image-group.grid-3 .image-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    aspect-ratio: 4 / 3;
}

.message-image-group.grid-3 .image-group-item:first-child {
    grid-row: 1 / 3;
}

.message-image-group.grid-5 .image-group-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1.1fr .9fr;
    gap: 4px;
    aspect-ratio: 6 / 5;
}

.message-image-group.grid-5 .image-group-item:nth-child(-n + 2) {
    grid-column: span 3;
}

.message-image-group.grid-5 .image-group-item:nth-child(n + 3) {
    grid-column: span 2;
}

.message-image-group.single .image-group-item {
    aspect-ratio: var(--chat-photo-aspect, 4 / 3);
}

.message-image-group.double .image-group-item,
.message-image-group.grid-4 .image-group-item {
    aspect-ratio: 1 / 1;
}

.message-image-group.grid-3 .image-group-item,
.message-image-group.grid-5 .image-group-item {
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
}

.message-image-group .image-group-item,
.message-image .image-container {
    position: relative;
    overflow: hidden;
    background: var(--bg-tertiary, #dfe3e8);
    isolation: isolate;
}

.message-image-group .image-group-item {
    border-radius: 8px;
    cursor: pointer;
}

.message-image-group .image-group-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.message-image-group .image-group-count {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.message-image {
    box-sizing: border-box;
    width: min(var(--chat-photo-width, 336px), calc(100vw - 104px));
    max-width: 100%;
}

.message-image .image-container {
    width: 100%;
    aspect-ratio: var(--chat-photo-aspect, 4 / 3);
}

.message-image-group.single {
    width: min(var(--chat-photo-width, 336px), calc(100vw - 104px));
}

.message-image-group.single .image-group-item,
.message-image .image-container {
    height: var(--chat-photo-height, auto);
    max-height: 340px;
}

.message-image-group .image-group-item > img,
.message-image .image-container > img.chat-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 220ms ease;
}

/* A single photo follows its natural proportions, like a Telegram media card.
   Album cells intentionally keep cover cropping to preserve an even grid. */
.message-image-group.single .image-group-item > img,
.message-image .image-container > img.chat-image {
    object-fit: contain;
    background: color-mix(in srgb, var(--bg-tertiary, #dfe3e8) 92%, transparent);
}

@media (max-width: 768px) {
    .message-image-group.single,
    .message-image {
        width: min(var(--chat-photo-width, 336px), calc(100vw - 72px));
    }

    .message-image-group.single .image-group-item,
    .message-image .image-container {
        max-height: min(330px, 48vh);
    }
}

.media-placeholder > img[data-blob-src]:not([data-media-state="ready"]):not([data-media-state="error"]) {
    opacity: 0;
}

.media-placeholder::before,
.media-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.media-placeholder::before {
    content: '\f03e';
    z-index: 3;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-size: clamp(24px, 9vw, 42px);
    font-weight: 900;
    color: color-mix(in srgb, var(--text-muted) 32%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-tertiary) 82%, white), var(--bg-tertiary));
}

.media-placeholder::after {
    z-index: 4;
    width: 55%;
    transform: translateX(-180%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    animation: chat-media-skeleton 1.35s ease-in-out infinite;
}

.media-placeholder.is-media-ready::before,
.media-placeholder.is-media-ready::after,
.media-placeholder.is-media-error::after {
    opacity: 0;
    animation: none;
}

.message-image .image-overlay,
.message-image-group .image-group-overlay {
    z-index: 5;
}

/* Keep the complete photo-sized skeleton above the transparent blob image.
   It disappears only after utils.js has decoded a drawable image frame. */
.media-placeholder.is-media-loading > img {
    opacity: 0 !important;
}

.media-placeholder.is-media-ready > img {
    opacity: 1;
}

@keyframes chat-media-skeleton {
    to { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
    .monitoring-data-columns-panel:not([hidden]),
    .monitoring-data-filter-panel:not([hidden]),
    .monitoring-device-command-panel:not([hidden]),
    .monitoring-automation-panel:not([hidden]) { animation: none !important; }
    .media-placeholder::after {
        animation: none;
    }

    .message-image-group .image-group-item > img,
    .message-image .image-container > img.chat-image {
        transition: none;
    }
}

/* ===== Compact attachment draft + glass composer + publication cards ===== */
body.is-chats-panel .chat-area-full {
    position: relative;
}

body.is-chats-panel .chat-area-full .chat-input-container {
    position: absolute !important;
    right: 0;
    bottom: 0 !important;
    left: 0;
    z-index: 110;
    padding-top: 10px;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.is-chats-panel .chat-area-full .chat-messages {
    padding-bottom: 82px !important;
}

body.is-chats-panel .chat-area-full .chat-input {
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.file-preview-bar {
    width: min(var(--tb-chat-composer-width), 100%);
    max-width: var(--tb-chat-composer-width);
    margin: 0 auto -1px !important;
    padding: 8px 8px 9px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .11);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.chat-input-container:has(.file-preview-bar) .chat-input {
    border-top-color: color-mix(in srgb, var(--border-color) 34%, transparent);
    border-radius: 0 0 27px 27px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.file-preview-strip {
    gap: 8px;
    padding: 0;
    scrollbar-width: none;
}

.file-preview-strip::-webkit-scrollbar {
    display: none;
}

.file-preview-item {
    flex: 0 0 184px;
    min-height: 56px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 31px 7px 7px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-primary) 48%, transparent);
}

.file-preview-item.image-preview {
    display: block;
    flex-basis: 74px;
    width: 74px;
    min-height: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
}

.file-preview-icon,
.file-preview-item:not(.image-preview) .preview-thumb {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.file-preview-item.image-preview .preview-thumb {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: cover;
}

.file-preview-item.image-preview .file-preview-caption {
    display: none;
}

.file-preview-name {
    font-size: 12px;
}

.preview-remove {
    top: 4px;
    right: 4px;
    width: 21px;
    height: 21px;
    background: rgba(18, 20, 22, .76);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.file-preview-actions {
    display: none !important;
}

.message-bubble.publication-message-bubble {
    width: min(420px, calc(100vw - 96px));
    max-width: min(420px, calc(100vw - 96px));
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.message-publication-card {
    width: 100%;
    overflow: hidden;
}

.message-publication-card .message-image-group,
.message-publication-card .message-image-group.single,
.message-publication-card .message-video-list,
.message-publication-card .message-attachments {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

.message-publication-card .message-image-group.single .image-group-grid,
.message-publication-card .message-image-group.single .image-group-item {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
}

.message-publication-card .message-image-group.single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-publication-card .message-attachment-caption {
    padding: 11px 13px 7px;
    font-size: 14px;
    line-height: 1.42;
}

.message-publication-card > .message-time {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 9px;
}

@media (max-width: 768px) {
    body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        bottom: 0 !important;
        padding-top: 7px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    body.is-chats-panel .chat-area-full.mobile-visible .chat-messages {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .file-preview-bar {
        width: 100%;
        max-width: var(--tb-chat-composer-width);
    }

    .message-bubble.publication-message-bubble {
        width: min(380px, calc(100vw - 58px));
        max-width: min(380px, calc(100vw - 58px));
    }
}

/* The composer is an overlay over the real chat surface, not a second copy
   of the wallpaper. This keeps messages visible through the glass. */
.chat-area-full .chat-input-container {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.message-attachment-caption {
    padding: 10px 12px 4px;
    color: inherit;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.chat-file-drop-overlay {
    position: absolute;
    inset: var(--tb-chat-header-height, 64px) 0 0;
    z-index: 410;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 42px);
    border: 2px dashed color-mix(in srgb, var(--primary-color) 72%, transparent);
    border-radius: 18px 18px 0 0;
    background: color-mix(in srgb, var(--chat-surface-bg) 58%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: scale(.992);
    pointer-events: none;
    backdrop-filter: blur(5px) saturate(120%);
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.chat-area-full.is-dragging-files .chat-file-drop-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.chat-file-drop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: min(360px, calc(100% - 44px));
    min-height: 168px;
    padding: 26px 24px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 48%, var(--border-color));
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .28);
    text-align: center;
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.chat-file-drop-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
    place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
    font-size: 25px;
}

.chat-file-drop-card strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.chat-file-drop-hint {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .chat-file-drop-overlay {
        padding: 14px;
    }

    .chat-file-drop-card {
        width: min(330px, calc(100% - 16px));
        min-height: 148px;
        padding: 22px 18px;
    }
}

/* Desktop task list should not end in an unexplained empty canvas while no
   request is selected. The actual details panel still opens above this hint. */
@media (min-width: 769px) {
    .tasks-container:has(.task-details-panel:not(.open))::after {
        content: "Выберите заявку\A Детали, история и действия появятся здесь";
        display: grid;
        min-height: 300px;
        flex: 1 1 auto;
        margin: 20px;
        place-content: center;
        padding: 28px;
        border: 1px dashed color-mix(in srgb, var(--border-color) 78%, transparent);
        border-radius: 20px;
        background: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.75;
        text-align: center;
        white-space: pre-line;
    }
}

@keyframes realtime-status-spin {
    to { transform: rotate(360deg); }
}

.message-task-card .task-card-title,
.message-task-card .task-card-meta,
.message-task-card .task-card-footer {
    min-width: 0;
}

.message-task-card .task-card-name,
.message-task-card .task-card-description {
    overflow-wrap: anywhere;
}

.message-poll .poll-badge {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .message.reply-swipe-active .message-bubble::before {
        left: -26px;
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .message.own.reply-swipe-active .message-bubble::before {
        right: -26px;
    }

    .message-task-card,
    .message-poll {
        max-width: min(310px, calc(100vw - 74px));
    }
}

@media (max-width: 768px) {
    .reaction-menu.mobile {
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 24px);
        border-radius: 999px;
        overflow: visible;
        padding: 5px 7px;
    }

    .reaction-menu.mobile .reaction-menu-header,
    .reaction-menu.mobile .reaction-menu-footer {
        display: none;
    }

    .reaction-menu.mobile .reaction-list {
        flex-wrap: nowrap;
        gap: 2px;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .reaction-menu.mobile .reaction-list::-webkit-scrollbar {
        display: none;
    }

    .reaction-menu.mobile .reaction-option {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 4px;
        font-size: 22px;
        transform: none;
    }

    .reaction-menu.mobile .reaction-menu-asset {
        width: 31px;
        height: 31px;
    }

    .reaction-menu.mobile .reaction-option.active {
        box-shadow: inset 0 0 0 2px var(--primary-color);
    }

    .message-menu.mobile {
        z-index: 10080;
        width: 200px;
        max-width: calc(100vw - 48px);
        max-height: calc(100dvh - var(--app-mobile-nav-height) - 24px);
        overflow-y: auto;
        min-width: 0;
        border-radius: 18px;
        padding: 5px;
    }

    .reaction-menu.mobile {
        z-index: 10090;
        max-height: calc(100dvh - var(--app-mobile-nav-height) - 24px);
        overflow-y: auto;
    }

    .chat-context-menu.mobile {
        z-index: 10080;
        width: min(244px, calc(100vw - 24px));
        max-height: calc(100dvh - var(--app-mobile-nav-height) - 24px);
        overflow-y: auto;
        border-radius: 18px;
        padding: 6px;
    }

    .chat-context-menu.mobile .chat-context-menu-item {
        min-height: 44px;
        padding: 10px 11px;
    }

    .message-menu.mobile .message-menu-header {
        padding: 8px 10px 10px;
        border-bottom-color: var(--border-light);
    }

    .message-menu.mobile .message-menu-header span {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .message-menu.mobile .message-menu-actions {
        gap: 2px;
        padding-top: 4px;
    }

    .message-menu.mobile .message-menu-item {
        min-height: 40px;
        padding: 9px 10px;
        border-radius: 13px;
        font-size: 13.5px;
        gap: 10px;
    }

    .message-menu.mobile .message-menu-item i {
        width: 18px;
    }
}

.chat-header {
    position: relative;
    z-index: 80;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    min-width: 0;
    min-height: 60px;
    gap: 10px;
}

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

.chat-header .chat-details {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 0;
    row-gap: 1px;
    overflow: hidden;
}

.chat-header .chat-details h3 {
    min-width: 0;
    max-width: 100%;
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header .chat-details:has(.chat-header-role-badge) h3,
.chat-header .chat-details:has(.chat-header-security-badge) h3 {
    max-width: calc(100% - 24px);
}

.chat-header .chat-details:has(.chat-header-role-badge):has(.chat-header-security-badge) h3 {
    max-width: calc(100% - 48px);
}

.chat-header .chat-header-role-badge {
    flex: 0 0 auto;
    min-width: 14px;
    display: inline-flex;
    align-items: center;
}

.chat-header .chat-header-security-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    color: #256f4a;
    background: color-mix(in srgb, #5ed18a 18%, transparent);
    border: 1px solid color-mix(in srgb, #5ed18a 40%, transparent);
    font-size: 9px;
}

.chat-header .chat-status {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header .chat-actions {
    flex: 0 0 auto;
    min-width: max-content;
    margin-left: auto;
}

.chat-messages-container {
    position: relative;
}

.typing-indicator {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    min-height: 22px;
    max-width: none;
    margin: -2px 0 0;
    padding: 0 24px 6px;
    box-sizing: border-box;
    z-index: 50;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
}

.typing-indicator.active {
    display: flex !important;
}

.chat-messages-container:has(.typing-indicator.active) .chat-messages {
    padding-bottom: 12px;
}

.typing-content {
    max-width: min(420px, 100%);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.typing-text {
    color: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: none;
}

.typing-text strong {
    color: color-mix(in srgb, var(--primary-color) 82%, var(--text-secondary));
    font-weight: 800;
}

.typing-dots {
    display: none;
}

body.is-chats-panel .chat-area-full .chat-header {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .chat-header {
        padding: 8px 10px;
        gap: 6px;
    }

    .chat-header .chat-info {
        gap: 8px;
        overflow: hidden;
    }

    .chat-header .chat-avatar-container {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .chat-header #back-to-list-btn {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        min-width: 34px;
    }

    .chat-header .chat-details {
        flex: 1 1 auto;
        column-gap: 0;
    }

    .chat-header .chat-details h3 {
        font-size: 15px;
        line-height: 1.15;
    }

    .chat-header .chat-status {
        font-size: 11.5px;
        line-height: 1.2;
    }

    .chat-header .chat-actions {
        gap: 3px;
    }

    .chat-header .chat-action-btn {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        min-width: 34px;
        font-size: 13px;
    }

    .typing-indicator {
        padding: 0 14px 5px;
        min-height: 20px;
        margin-top: -1px;
    }

    .typing-content {
        max-width: calc(100vw - 32px);
    }

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

    .message-reply-preview {
        max-width: min(292px, 100%);
        padding: 6px 8px;
        border-radius: 12px;
    }

    .reply-preview-avatar {
        width: 22px;
        height: 22px;
    }

    .reply-preview-content {
        max-width: min(230px, calc(100vw - 126px));
    }

    .chat-item {
        margin: 2px 6px;
        border-radius: 13px;
    }
}

@media (max-width: 380px) {
    .chat-header {
        padding-inline: 8px;
        gap: 4px;
    }

    .chat-header .chat-info {
        gap: 6px;
    }

    .chat-header .chat-avatar-container {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .chat-header #back-to-list-btn,
    .chat-header .chat-action-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        flex-basis: 32px;
    }

    .chat-header .chat-actions {
        gap: 2px;
    }

    .chat-header .chat-details h3 {
        font-size: 14px;
    }

    .chat-header .chat-status {
        font-size: 11px;
    }
}

/* Pinned overlay refinements */
.chat-messages-container.has-pinned-message {
    position: relative;
}

.chat-messages-container.has-pinned-message .chat-messages {
    padding-top: calc(20px + var(--pinned-message-height, 78px));
}

.chat-messages-container > .pinned-message-bar {
    position: absolute;
    top: 10px;
    left: 14px;
    right: 14px;
    margin: 0;
    z-index: 95;
    pointer-events: auto;
}

.chat-messages-container > .pinned-message-bar::before {
    content: '';
    position: absolute;
    inset: -10px -14px;
    z-index: -1;
    background: linear-gradient(180deg, var(--bg-primary) 0%, color-mix(in srgb, var(--bg-primary) 82%, transparent) 70%, transparent 100%);
    pointer-events: none;
}

/* Inline chat video previews */
.message-video,
.message-video-list {
    width: 100%;
    max-width: min(460px, 78vw);
}

.message-video-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-video {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}

.chat-video {
    display: block;
    width: 100%;
    max-height: 440px;
    background: #000;
    border-radius: 16px 16px 0 0;
}

.video-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.video-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video-download-btn {
    border: 0;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    padding: 4px;
}


/* Fix emoji dock preview visibility and composer/message colors */
.chat-emoji-option:not(.is-loading-preview):not(.is-preview-failed) .chat-emoji-still-preview {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.chat-emoji-option.is-loading-preview .chat-emoji-still-preview,
.chat-emoji-option.is-preview-failed .chat-emoji-still-preview {
    opacity: 0 !important;
}

.chat-emoji-option.is-loading-preview .chat-emoji-static-preview {
    opacity: 1;
}

.chat-emoji-option:not(.is-loading-preview) .chat-emoji-static-preview {
    opacity: 0;
}

.message.own .message-text,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    color: #0f172a !important;
}

.message.own .message-text a {
    color: #0645ad !important;
}

/* ===== ThreeBirches readability fix: own message text/time follow theme ===== */
:root {
    --tb-own-message-text: #f8fafc;
    --tb-own-message-time: rgba(248, 250, 252, 0.74);
    --tb-own-message-link: #d8f3ff;
    --tb-own-message-code-bg: rgba(255, 255, 255, 0.10);
}

@media (prefers-color-scheme: light) {
    :root:not(.theme-dark) {
        --tb-own-message-text: #0f172a;
        --tb-own-message-time: rgba(15, 23, 42, 0.58);
        --tb-own-message-link: #0645ad;
        --tb-own-message-code-bg: rgba(15, 23, 42, 0.06);
    }
}

html.theme-light {
    --tb-own-message-text: #0f172a;
    --tb-own-message-time: rgba(15, 23, 42, 0.58);
    --tb-own-message-link: #0645ad;
    --tb-own-message-code-bg: rgba(15, 23, 42, 0.06);
}

html.theme-dark {
    --tb-own-message-text: #f8fafc;
    --tb-own-message-time: rgba(248, 250, 252, 0.74);
    --tb-own-message-link: #d8f3ff;
    --tb-own-message-code-bg: rgba(255, 255, 255, 0.10);
}

.message.own .message-text,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text,
.message.own .message-caption,
.message.own .voice-transcript {
    color: var(--tb-own-message-text) !important;
}

.message.own .message-text a,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text a,
.message.own .message-caption a,
.message.own .voice-transcript a {
    color: var(--tb-own-message-link) !important;
}

.message.own .message-time,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time,
.message.own .message-edited,
.message.own .voice-duration,
.message.own .voice-time-separator {
    color: var(--tb-own-message-time) !important;
}

.message.own .message-text code,
.message.own .message-text pre {
    background: var(--tb-own-message-code-bg) !important;
    color: var(--tb-own-message-text) !important;
}


/* Mobile gesture containment: swipes inside chat popovers/modals must not open the navigation drawer. */
.chat-composer-popover,
.chat-emoji-dock,
.chat-attach-popover,
.message-menu,
.reaction-menu,
.chat-context-menu,
.modal,
.modal-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Emoji dock no longer has a search field; keep spacing compact. */
.chat-emoji-dock .chat-composer-popover-header + .chat-emoji-section-title {
    margin-top: 10px;
}

/* Stage40: GIF tab and stronger inline video player */
.chat-emoji-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 0 10px;
}

.chat-emoji-tab {
    flex: 1;
    border: 0;
    border-radius: 12px;
    padding: 9px 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 800;
    cursor: pointer;
}

.chat-emoji-tab.active {
    background: var(--primary-color);
    color: #fff;
}

.chat-emoji-tab-panel {
    display: none;
}

.chat-emoji-tab-panel.active {
    display: block;
}

.chat-emoji-dock {
    max-height: min(440px, calc(100dvh - 150px));
}

.chat-emoji-search-wrap {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 13px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.chat-emoji-search-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
}

.chat-emoji-pack-navigation {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 4px;
    margin: 0 -2px 8px;
}

.chat-emoji-pack-scroll {
    width: 30px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    cursor: pointer;
    transition: color .16s ease, background .16s ease, opacity .16s ease;
}

.chat-emoji-pack-scroll:hover:not(:disabled) {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-secondary));
}

.chat-emoji-pack-scroll:disabled {
    opacity: .28;
    cursor: default;
}

.chat-emoji-pack-strip {
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 1px 2px 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.chat-emoji-pack-strip::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .chat-emoji-pack-navigation {
        display: block;
        margin: 0 -2px 8px;
    }

    .chat-emoji-pack-scroll {
        display: none;
    }
}

.chat-emoji-pack-tab {
    flex: 0 0 58px;
    min-width: 0;
    height: 54px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 0;
    border-radius: 13px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.chat-emoji-pack-tab img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.chat-emoji-pack-tab i {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.chat-emoji-pack-tab span {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-emoji-pack-tab .chat-emoji-pack-symbol {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.chat-emoji-pack-tab:hover,
.chat-emoji-pack-tab.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
}

.chat-emoji-grid-all {
    display: block;
}

.chat-emoji-grid-all.is-virtualized {
    position: relative;
    contain: layout style;
    content-visibility: visible;
}

.chat-emoji-virtual-title,
.chat-emoji-virtual-row {
    position: absolute;
    left: 0;
    right: 2px;
    margin: 0;
}

.chat-emoji-virtual-title {
    display: flex;
    align-items: center;
    padding: 0 7px;
}

.chat-emoji-pack-section {
    content-visibility: auto;
    contain-intrinsic-size: 78px;
}

.chat-emoji-pack-section + .chat-emoji-pack-section {
    margin-top: 8px;
}

.chat-emoji-pack-section .chat-emoji-section-title {
    position: sticky;
    top: 49px;
    z-index: 2;
    width: fit-content;
    margin-left: 3px;
    padding: 4px 7px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.chat-emoji-empty {
    min-height: 112px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .chat-emoji-dock {
        max-height: min(56dvh, 440px);
    }

    .chat-emoji-pack-tab {
        flex-basis: 52px;
        height: 50px;
    }

    .chat-emoji-pack-tab img,
    .chat-emoji-pack-tab i {
        width: 27px;
        height: 27px;
    }
}

.chat-gif-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 9px 12px;
    margin: 2px 0 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.chat-gif-search-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.chat-gif-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-height: 120px;
}

.chat-gif-option {
    border: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-secondary);
    cursor: pointer;
    aspect-ratio: 1.35 / 1;
}

.chat-gif-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-gif-empty {
    grid-column: 1 / -1;
    padding: 18px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-gif-load-more {
    width: 100%;
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 800;
    cursor: pointer;
}

.message-gif {
    width: min(380px, calc(100vw - 104px));
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
}

.message-gif-media {
    position: relative;
    width: 100%;
    max-height: 360px;
    aspect-ratio: var(--gif-aspect-ratio, 1 / 1);
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.chat-gif-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    opacity: 1;
    transition: opacity 220ms ease;
}

.message-gif-media:not(.is-media-ready):not(.is-media-error) .chat-gif-image {
    opacity: 0;
}

.message-gif-media.media-placeholder::before {
    content: 'GIF';
    font-family: inherit;
    font-size: clamp(18px, 6vw, 30px);
    font-weight: 900;
    letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
    .chat-gif-image {
        transition: none;
    }
}

.gif-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.gif-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.message-video,
.message-video-list {
    max-width: min(520px, 82vw);
}

.chat-video {
    min-height: 190px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .chat-gif-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .message-gif,
    .message-video,
    .message-video-list {
        max-width: 86vw;
    }
    .chat-video {
        min-height: 160px;
    }
}

/* Stage55: compact rich media in chat info panel */
.chat-info-media-thumb {
    position: relative;
    border: 0;
    padding: 0;
    color: var(--text-primary);
    text-align: left;
}

.chat-info-media-thumb video,
.chat-info-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.chat-info-media-thumb.chat-media-thumb-video,
.chat-info-media-thumb.chat-media-thumb-gif {
    display: flex;
    flex-direction: column;
    min-height: 126px;
    aspect-ratio: auto;
}

.chat-info-media-thumb.chat-media-thumb-video video,
.chat-info-media-thumb.chat-media-thumb-gif img {
    height: 94px;
    min-height: 94px;
}

.chat-info-media-thumb span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 7px 6px;
    color: #fff;
    font-size: 10px;
    background: linear-gradient(to top, rgba(0,0,0,.68), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-info-file-row.chat-media-voice-row {
    align-items: flex-start;
}

.chat-info-file-row.chat-media-voice-row audio {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
}

/* Bot chats */
.chat-item.is-bot-chat .chat-item-avatar img {
    filter: saturate(0.95) contrast(1.05);
}
.chat-bot-icon {
    color: var(--primary-color);
    font-size: 0.9em;
    margin-right: 6px;
}
.bot-control-panel {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 28;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
        rgba(18, 24, 32, 0.82);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    transform: translateX(-50%);
}

.chat-messages-container.is-bot-control-visible .chat-messages {
    padding-bottom: 94px;
}

.bot-control-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.bot-status-badge,
.bot-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.bot-status-badge {
    padding: 0 13px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.08);
}

.bot-status-badge.enabled {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.13);
    border-color: rgba(74, 222, 128, 0.24);
}

.bot-status-badge.disabled {
    color: rgba(226, 232, 240, 0.72);
    background: rgba(148, 163, 184, 0.12);
}

.bot-control-btn {
    min-width: 92px;
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.bot-control-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.bot-start-btn:not(:disabled) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.88));
    border-color: rgba(74, 222, 128, 0.4);
}

.bot-stop-btn:not(:disabled) {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.92), rgba(239, 68, 68, 0.84));
    border-color: rgba(248, 113, 113, 0.4);
}

.bot-control-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.role-badge.bot {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-color);
}
@media (max-width: 768px) {
    .bot-control-panel {
        bottom: 14px;
        padding: 7px;
    }
    .bot-control-actions {
        gap: 6px;
    }
    .bot-status-badge,
    .bot-control-btn {
        min-height: 36px;
        font-size: 0.8rem;
    }
    .bot-control-btn {
        min-width: 78px;
        padding: 0 12px;
    }
}

@media (max-width: 420px) {
    .bot-status-badge {
        padding: 0 10px;
    }
    .bot-control-btn {
        min-width: 42px;
        padding: 0 12px;
    }
    .bot-control-btn span {
        display: none;
    }
}

/* Stage56.6: clickable device IPs in bot/chat messages */
.chat-link.device-ip-link,
.device-ip-link {
    font-weight: 700;
    white-space: nowrap;
}


/* Bot messages are system events, not user profiles. */
.message.is-bot-message .message-avatar,
.message-avatar.is-bot-avatar,
.message-avatar[data-is-bot-sender="1"] {
    cursor: default !important;
    pointer-events: auto;
}
/* Modern navigation shell: compact app rail on desktop, bottom tabs on mobile. */
:root {
    --app-nav-width: 88px;
    --app-mobile-safe-bottom: 0px;
    --app-mobile-nav-height: 70px;
    --app-nav-glass-bg: color-mix(in srgb, var(--bg-secondary) 64%, transparent);
    --app-nav-glass-bg-strong: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
}

.sidebar.app-navigation,
.sidebar.app-navigation.collapsed {
    width: var(--app-nav-width);
    padding: 12px 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 82%, transparent), color-mix(in srgb, var(--bg-primary) 78%, transparent));
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: visible;
}

.sidebar.app-navigation .logo,
.sidebar.app-navigation .sidebar-toggle-btn,
.sidebar.app-navigation .swipe-indicator {
    display: none !important;
}

.main-content,
.main-content.sidebar-collapsed {
    margin-left: var(--app-nav-width);
}

.sidebar.app-navigation .nav-menu {
    width: 100%;
    padding: 60px 0;
    gap: 8px;
    overflow: visible;
}

.sidebar.app-navigation .nav-item,
.sidebar.app-navigation.collapsed .nav-item {
    width: 100%;
    min-height: 64px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 16px;
    color: var(--text-secondary);
    text-align: center;
    background: transparent;
}

.sidebar.app-navigation .nav-item:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.sidebar.app-navigation .nav-item.active {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 16%, transparent), color-mix(in srgb, var(--primary-color) 8%, transparent));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 34%, transparent);
}

.sidebar.app-navigation .nav-item.active::before {
    display: none;
}

.sidebar.app-navigation .nav-item i,
.sidebar.app-navigation.collapsed .nav-item i {
    width: auto;
    font-size: 19px;
    line-height: 1;
    color: inherit;
}

.sidebar.app-navigation .nav-item span:not(.badge),
.sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.app-navigation .badge,
.sidebar.app-navigation.collapsed .badge {
    position: absolute;
    top: 6px;
    right: 9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--danger-color), color-mix(in srgb, var(--primary-color) 52%, var(--danger-color)));
    box-shadow: 0 8px 18px rgba(255, 59, 48, 0.24);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
}

.sidebar.app-navigation .badge[hidden],
.sidebar.app-navigation.collapsed .badge[hidden] {
    display: none !important;
}

.sidebar.app-navigation .badge.has-count,
.sidebar.app-navigation.collapsed .badge.has-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar.app-navigation .nav-item:has(.badge.has-count) i {
    color: var(--primary-color);
}

.sidebar.app-navigation .user-profile,
.sidebar.app-navigation.collapsed .user-profile {
    position: relative;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 2px;
    margin-top: auto;
    background: transparent;
    border-top: 0;
}

.sidebar.app-navigation .user-profile::before,
.sidebar.app-navigation.collapsed .user-profile::before {
    content: '';
    width: 42px;
    height: 1px;
    margin-bottom: 4px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.sidebar.app-navigation .user-info,
.sidebar.app-navigation.collapsed .user-info {
    display: none;
}

.sidebar.app-navigation .user-avatar,
.sidebar.app-navigation.collapsed .user-avatar {
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 74%, transparent);
}

.sidebar.app-navigation .user-avatar img,
.sidebar.app-navigation.collapsed .user-avatar img {
    width: 42px;
    height: 42px;
    margin: 2px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.sidebar.app-navigation .user-avatar.with-status .user-status,
.sidebar.app-navigation.collapsed .user-avatar.with-status .user-status {
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 3px solid color-mix(in srgb, var(--bg-secondary) 86%, transparent);
    border-radius: 999px;
    background: var(--text-muted);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-primary) 42%, transparent);
}

.sidebar.app-navigation .user-avatar.with-status .user-status.online,
.sidebar.app-navigation.collapsed .user-avatar.with-status .user-status.online {
    background: var(--success-color);
}

.sidebar.app-navigation .user-avatar.with-status .user-status.offline,
.sidebar.app-navigation.collapsed .user-avatar.with-status .user-status.offline {
    background: var(--text-muted);
}

.sidebar.app-navigation .logout-form,
.sidebar.app-navigation.collapsed .logout-form {
    display: flex;
    margin: 0;
}

.sidebar.app-navigation .logout-btn,
.sidebar.app-navigation.collapsed .logout-btn {
    display: inline-flex;
    width: 36px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

.sidebar.app-navigation .logout-btn:hover,
.sidebar.app-navigation.collapsed .logout-btn:hover {
    background: color-mix(in srgb, var(--danger-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 28%, transparent);
    color: var(--danger-color);
    transform: translateY(-1px);
}

#mobile-menu-btn {
    display: none !important;
}

body.is-chats-panel .main-content {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body.is-chats-panel .content-area {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

body.is-chats-panel .chat-container {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.is-chats-panel .chat-list-container,
body.is-chats-panel .chat-area-full,
body.is-chats-panel .chat-area-placeholder,
body.is-chats-panel .chat-info-panel {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

body.is-chats-panel .chat-list-container {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.is-chats-panel .chat-list-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    contain: layout paint;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;            
    -ms-overflow-style: none;         
}
body.is-chats-panel .chat-list-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

body.is-chats-panel .chat-area-full {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.is-chats-panel .chat-header,
body.is-chats-panel .chat-input-container {
    flex: 0 0 auto;
}

body.is-chats-panel .chat-messages-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.is-chats-panel .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.is-chats-panel .chat-info-panel {
    display: flex;
    flex-direction: column;
}

body.is-chats-panel .chat-info-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

#task-modal-from-chat {
    z-index: 1320;
}

@media (max-width: 1200px) and (min-width: 1025px) {
    body.is-chats-panel .chat-list-container {
        flex-basis: 320px;
    }
}

@media (max-width: 1024px) {
    .sidebar.app-navigation,
    .sidebar.app-navigation.collapsed,
    .sidebar.app-navigation.mobile-open {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 0;
        left: 12px;
        width: auto;
        height: 64px;
        padding: 6px;
        flex-direction: row;
        transform: none !important;
        border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
        border-radius: 22px;
        background:
            linear-gradient(180deg, var(--app-nav-glass-bg-strong), var(--app-nav-glass-bg));
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(22px) saturate(1.15);
        -webkit-backdrop-filter: blur(22px) saturate(1.15);
        transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
        z-index: 1200;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        margin-left: 0;
    }

    .content-area {
        padding-bottom: var(--app-mobile-nav-height);
    }

    body.is-chats-panel .content-area {
        padding-bottom: 0;
    }

    body.is-chats-panel .chat-container {
        height: 100%;
    }

    body.is-chats-panel .chat-list-container {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    body.is-chats-panel .chat-area-full {
        height: 100vh;
        height: 100dvh;
        max-height: none;
    }

    body.is-chats-panel .chat-area-full.mobile-visible {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        overflow: hidden !important;
        z-index: 360 !important;
    }

    html.tb-keyboard-open body.is-chats-panel .chat-area-full.mobile-visible,
    body.is-chats-panel .chat-area-full.mobile-visible.is-keyboard-open {
        top: var(--tb-visual-viewport-top, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        height: var(--tb-visual-viewport-height, 100dvh) !important;
        max-height: var(--tb-visual-viewport-height, 100dvh) !important;
    }

    body.is-chats-panel .chat-area-full.mobile-visible .chat-header {
        position: relative !important;
        top: auto !important;
        z-index: 3 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 60px;
    }

    body.is-chats-panel .chat-area-full.mobile-visible #back-to-list-btn {
        display: inline-flex !important;
    }

    body.is-chats-panel:not(.app-nav-hidden-for-chat) .chat-list-content {
        padding-bottom: calc(var(--app-mobile-nav-height) + 8px);
    }

    body.app-nav-hidden-for-chat .content-area,
    body:has(.chat-area-full.mobile-visible) .content-area,
    body:has(#call-interface) .content-area,
    body:has(#group-call-interface) .content-area,
    body:has(.task-details-panel.open) .content-area,
    body:has(#task-modal-from-chat[style*="display: flex"]) .content-area,
    body:has(#task-modal-from-chat[style*="display: block"]) .content-area {
        padding-bottom: 0;
    }

    body.app-nav-hidden-for-chat .sidebar.app-navigation,
    body:has(.chat-area-full.mobile-visible) .sidebar.app-navigation,
    body:has(#call-interface) .sidebar.app-navigation,
    body:has(#group-call-interface) .sidebar.app-navigation,
    body:has(.task-details-panel.open) .sidebar.app-navigation,
    body:has(#task-modal-from-chat[style*="display: flex"]) .sidebar.app-navigation,
    body:has(#task-modal-from-chat[style*="display: block"]) .sidebar.app-navigation {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 22px)) scale(0.98) !important;
    }

    .sidebar-overlay,
    .sidebar.app-navigation .swipe-indicator {
        display: none !important;
    }

    .sidebar.app-navigation .nav-menu {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 0;
        overflow: visible;
    }

    .sidebar.app-navigation .nav-item,
    .sidebar.app-navigation.collapsed .nav-item {
        min-width: 0;
        min-height: 52px;
        height: 52px;
        flex: 1 1 0;
        gap: 4px;
        padding: 6px 2px;
        border-radius: 16px;
    }

    .sidebar.app-navigation .nav-item.active {
        background: color-mix(in srgb, var(--primary-color) 15%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 28%, transparent);
    }

    .sidebar.app-navigation .nav-item i,
    .sidebar.app-navigation.collapsed .nav-item i {
        font-size: 18px;
    }

    .sidebar.app-navigation .nav-item span:not(.badge),
    .sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
        font-size: 10px;
    }

    .sidebar.app-navigation .badge,
    .sidebar.app-navigation.collapsed .badge {
        top: 4px;
        right: 50%;
        transform: translateX(20px);
        border-color: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    }

    .sidebar.app-navigation .user-profile,
    .sidebar.app-navigation.collapsed .user-profile {
        display: none;
    }

    .profile-logout-section {
        display: block;
        padding: 0 24px 24px;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .sidebar.app-navigation,
    .sidebar.app-navigation.collapsed,
    .sidebar.app-navigation.mobile-open {
        right: 8px;
        bottom: 0;
        left: 8px;
        height: 62px;
        border-radius: 20px;
    }

    .sidebar.app-navigation .nav-menu {
        gap: 2px;
    }

    .sidebar.app-navigation .nav-item,
    .sidebar.app-navigation.collapsed .nav-item {
        min-height: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .sidebar.app-navigation .nav-item i,
    .sidebar.app-navigation.collapsed .nav-item i {
        font-size: 17px;
    }

    .sidebar.app-navigation .nav-item span:not(.badge),
    .sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
        font-size: 10px;
    }

    .profile-logout-section {
        padding: 0 16px 18px;
    }
}

@media (max-width: 380px) {
    .sidebar.app-navigation .nav-item span:not(.badge),
    .sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
        display: none;
    }

    .sidebar.app-navigation .nav-item,
    .sidebar.app-navigation.collapsed .nav-item {
        gap: 0;
    }
}

/* Theme preferences: system by default, user override via html.theme-light/theme-dark. */
@media (prefers-color-scheme: light) {
    :root:not(.theme-dark) {
        color-scheme: light;
        --bg-primary: #f4f7f2;
        --bg-secondary: #ffffff;
        --bg-tertiary: #edf2ec;
        --card-background: var(--bg-secondary);
        --modal-bg: var(--bg-secondary);
        --bg-hover: rgba(30, 39, 33, 0.06);
        --bg-active: rgba(35, 149, 8, 0.12);
        --text-primary: #18201b;
        --text-secondary: #5f6b62;
        --text-muted: #7e8a82;
        --border-color: rgba(30, 39, 33, 0.12);
        --border-light: rgba(30, 39, 33, 0.07);
        --shadow-sm: 0 2px 8px rgba(35, 59, 39, 0.08);
        --shadow-md: 0 4px 16px rgba(35, 59, 39, 0.12);
        --shadow-lg: 0 8px 32px rgba(35, 59, 39, 0.16);
    }
}

html.theme-light {
    color-scheme: light;
    --bg-primary: #f4f7f2;
    --bg-secondary: #ffffff;
    --bg-tertiary: #edf2ec;
    --card-background: var(--bg-secondary);
    --modal-bg: var(--bg-secondary);
    --bg-hover: rgba(30, 39, 33, 0.06);
    --bg-active: rgba(35, 149, 8, 0.12);
    --text-primary: #18201b;
    --text-secondary: #5f6b62;
    --text-muted: #7e8a82;
    --border-color: rgba(30, 39, 33, 0.12);
    --border-light: rgba(30, 39, 33, 0.07);
    --shadow-sm: 0 2px 8px rgba(35, 59, 39, 0.08);
    --shadow-md: 0 4px 16px rgba(35, 59, 39, 0.12);
    --shadow-lg: 0 8px 32px rgba(35, 59, 39, 0.16);
}

html.theme-dark {
    color-scheme: dark;
    --bg-primary: #090909;
    --bg-secondary: #101010;
    --bg-tertiary: #171717;
    --card-background: var(--bg-secondary);
    --modal-bg: var(--bg-secondary);
    --bg-hover: #171717;
    --bg-active: #232323;
    --text-primary: #F7F7F7;
    --text-secondary: #B3B3B3;
    --text-muted: #898989;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-light: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.theme-dark .chat-input .input-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

html.theme-dark .chat-item-avatar img,
html.theme-dark .message-avatar img,
html.theme-dark .chat-avatar img {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 16px rgba(0, 0, 0, 0.16);
}

.theme-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.theme-choice-btn {
    min-height: 76px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.theme-choice-btn i {
    font-size: 18px;
}

.theme-choice-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.theme-choice-btn.active {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--primary-color) 44%, transparent);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

@media (max-width: 560px) {
    .theme-choice-group {
        grid-template-columns: 1fr;
    }

    .theme-choice-btn {
        min-height: 48px;
        flex-direction: row;
    }
}

/* Chat media footer alignment: files, voice notes, and round video notes */
.file-message-bubble,
.voice-message-bubble,
.video-note-message-bubble {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    overflow: visible !important;
}

.message.own .file-message-bubble,
.message.own .voice-message-bubble {
    align-items: flex-end;
}

.video-note-message-bubble,
.message.own .video-note-message-bubble {
    align-items: center;
}

.voice-message-bubble .voice-message {
    padding-bottom: 10px !important;
}

.file-message-bubble .message-time,
.voice-message-bubble .message-time,
.video-note-message-bubble .message-time {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 8px 0 0 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent) !important;
    color: var(--text-muted) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.message.own .file-message-bubble .message-time,
.message.own .voice-message-bubble .message-time {
    margin-right: 8px !important;
    color: var(--tb-own-message-time) !important;
}

.video-note-message-bubble .message-time,
.message.own .video-note-message-bubble .message-time {
    align-self: center;
    margin: 8px auto 0 !important;
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent) !important;
}

.file-message-bubble .message-reactions,
.voice-message-bubble .message-reactions,
.video-note-message-bubble .message-reactions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3;
    align-self: flex-start;
    justify-content: flex-start;
    max-width: 100%;
    margin: 6px 0 0 8px !important;
    transform: none !important;
}

.message.own .file-message-bubble .message-reactions,
.message.own .voice-message-bubble .message-reactions {
    align-self: flex-end;
    justify-content: flex-end;
    margin: 6px 8px 0 0 !important;
}

.video-note-message-bubble .message-reactions,
.message.own .video-note-message-bubble .message-reactions {
    align-self: center;
    justify-content: center;
    margin: 6px auto 0 !important;
}

.video-note-message.is-loading .video-note-play-btn {
    opacity: 1;
    pointer-events: auto;
}

.chat-video[data-lazy-src]:not([data-lazy-loaded="true"]) {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.10), transparent 34%),
        #000;
}

@media (max-width: 768px) {
    .voice-message-bubble .voice-message {
        padding-bottom: 9px !important;
    }

    .file-message-bubble .message-time,
    .voice-message-bubble .message-time {
        margin-top: 5px !important;
    }
}
/* Installed PWA Web Push onboarding (including iOS Home Screen apps). */
.pwa-push-prompt {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2200;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 11px;
    width: min(520px, calc(100vw - 36px));
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    color: var(--text-primary);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34);
    backdrop-filter: blur(22px);
}
.pwa-push-prompt-icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 13px; background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-tertiary)); color: var(--primary-color); }
.pwa-push-prompt strong, .pwa-push-prompt span { display: block; }
.pwa-push-prompt strong { font-size: 13px; }
.pwa-push-prompt span { margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.pwa-push-prompt > button:not(.pwa-push-close) { min-height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--primary-color); color: #fff; font-weight: 700; cursor: pointer; }
.pwa-push-close { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 22px; cursor: pointer; }

@media (max-width: 600px) {
    .pwa-push-prompt { right: 10px; bottom: calc(var(--app-mobile-nav-height, 70px) + 10px); left: 10px; grid-template-columns: 38px minmax(0, 1fr) auto; width: auto; }
    .pwa-push-prompt-icon { width: 38px; height: 38px; }
    .pwa-push-close { position: absolute; top: 4px; right: 5px; }
    .pwa-push-prompt > button:not(.pwa-push-close) { padding: 0 11px; }
}

/* ========================================================================== */
/* ThreeBirches chat polish: compact messenger hierarchy, July 2026           */
/* ========================================================================== */

:root {
    --tb-chat-list-width: 352px;
    --tb-chat-header-height: 66px;
    --tb-chat-stream-width: 980px;
    --tb-chat-composer-width: 920px;
    --tb-chat-glass: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    --tb-chat-line: color-mix(in srgb, var(--border-color) 78%, transparent);
    --tb-chat-hover: color-mix(in srgb, var(--primary-color) 8%, var(--bg-tertiary));
    --tb-chat-active: color-mix(in srgb, var(--primary-color) 16%, var(--bg-secondary));
    --tb-chat-active-line: color-mix(in srgb, var(--primary-color) 42%, transparent);
    --tb-chat-wallpaper-dot: color-mix(in srgb, var(--primary-color) 5%, transparent);
    --tb-chat-wallpaper-glow: color-mix(in srgb, var(--primary-color) 7%, transparent);
    --tb-chat-wallpaper-image: none;
    --tb-chat-wallpaper-overlay: rgba(6, 6, 6, .67);
    --tb-chat-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

.theme-light,
[data-theme="light"] {
    --tb-chat-glass: color-mix(in srgb, #ffffff 90%, transparent);
    --tb-chat-hover: color-mix(in srgb, var(--primary-color) 7%, #ffffff);
    --tb-chat-active: color-mix(in srgb, var(--primary-color) 13%, #ffffff);
    --tb-chat-wallpaper-dot: color-mix(in srgb, var(--primary-color) 4%, transparent);
    --tb-chat-wallpaper-glow: color-mix(in srgb, var(--primary-color) 6%, transparent);
    --tb-chat-wallpaper-overlay: rgba(249, 250, 247, .42);
    --tb-chat-shadow: 0 18px 45px rgba(26, 52, 37, .09);
}

.theme-dark,
[data-theme="dark"] {
    --tb-chat-wallpaper-overlay: rgba(6, 6, 6, .67);
}

/* Left column */
.chat-list-container {
    width: var(--tb-chat-list-width);
    min-width: var(--tb-chat-list-width);
    background: var(--bg-secondary);
    box-shadow: 12px 0 35px rgba(0, 0, 0, .045);
}

.chat-list-header {
    min-height: var(--tb-chat-header-height);
    padding: 10px 14px 8px 18px;
    border-bottom: 0;
    background: var(--tb-chat-glass);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.chat-list-header h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.chat-list-header .header-actions {
    gap: 5px;
}

.chat-list-header .quick-btn,
.chat-header .chat-action-btn,
.chat-header .mobile-menu-btn {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.chat-list-header .quick-btn:hover,
.chat-header .chat-action-btn:hover,
.chat-header .mobile-menu-btn:hover {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(-1px);
}

.chat-search {
    padding: 2px 12px 8px;
    background: var(--tb-chat-glass);
}

.chat-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-tertiary) 82%, transparent);
    color: var(--text-muted);
    cursor: text;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.chat-search-field:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 58%, transparent);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 11%, transparent);
}

.chat-search-field > i {
    flex: 0 0 auto;
    font-size: 14px;
}

.chat-search-field .search-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    box-shadow: none !important;
    font-size: 14px;
}

.chat-list-filters {
    gap: 6px;
    padding: 3px 12px 9px;
    border-bottom: 1px solid var(--tb-chat-line);
    background: var(--tb-chat-glass);
    scrollbar-width: none;
}

.chat-list-filters::-webkit-scrollbar {
    display: none;
}

.chat-list-filter-btn {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
}

.chat-list-content {
    padding: 5px 0 12px;
}

.chat-item {
    min-height: 68px;
    margin: 2px 8px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.chat-item:hover {
    background: var(--tb-chat-hover);
    transform: translateX(1px);
}

.chat-item.active {
    border-color: var(--tb-chat-active-line);
    background: var(--tb-chat-active);
    box-shadow: 0 7px 20px color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.chat-item.active::before {
    display: none;
}

.chat-item-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .11);
}

.chat-item-info {
    gap: 3px;
}

.chat-item-name .chat-item-title {
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -.01em;
}

.chat-item-last-message {
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.35;
}

.chat-item-time {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 650;
}

.chat-item-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid var(--bg-secondary);
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary-color) 30%, transparent);
    font-size: 10.5px;
    font-weight: 800;
}

.chat-item.has-unread:not(.active) {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-secondary));
}

.chat-item.has-unread:not(.active) .chat-item-title {
    color: var(--text-primary);
    font-weight: 850;
}

.chat-item.has-unread:not(.active) .chat-item-last-message {
    color: var(--text-primary);
    font-weight: 620;
}

.chat-item.has-unread:not(.active) .chat-item-time {
    color: var(--primary-color);
    font-weight: 750;
}

/* Conversation header and canvas */
.chat-header {
    min-height: var(--tb-chat-header-height);
    padding: 8px 14px 8px 16px;
    border-bottom: 1px solid var(--tb-chat-line);
    background: var(--tb-chat-glass);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 8px 24px rgba(0, 0, 0, .035);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.chat-header .chat-avatar {
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

.chat-header .chat-details h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.chat-header .chat-status {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
}

.chat-area-full {
    background-color: var(--chat-surface-bg);
    /* «Обычный» фон: чистый цвет текущей темы. Изображения включаются только
       соответствующим классом персонализации. */
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.chat-messages-container {
    background: transparent;
}

.chat-messages {
    padding: 18px clamp(14px, 3vw, 42px) 16px;
}

.chat-messages > .message,
.chat-messages > .date-divider,
.chat-messages > .unread-divider,
.chat-messages > .empty-state {
    width: 100%;
    max-width: var(--tb-chat-stream-width);
    margin-right: auto;
    margin-left: auto;
}

.message {
    margin-top: 7px;
}

.message.grouped {
    margin-top: -2px;
}

.message-content {
    max-width: min(72%, 650px);
}

.message-text {
    border: 1px solid color-mix(in srgb, var(--border-color) 54%, transparent);
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
}

.message.own .message-text {
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 18px 18px 6px 18px;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.message.grouped:not(.group-head):not(.own) .message-text {
    border-top-left-radius: 7px;
}

.message.grouped:not(.group-head).own .message-text {
    border-top-right-radius: 7px;
}

.message:not(.group-tail):not(.own) .message-text {
    border-bottom-left-radius: 7px;
}

.message:not(.group-tail).own .message-text {
    border-bottom-right-radius: 7px;
}

.message-sender {
    margin: 0 8px 4px;
    font-size: 11.5px;
    font-weight: 800;
}

.message-time {
    opacity: .78;
    font-size: 10px;
    font-weight: 650;
}

.date-divider span,
.unread-divider span {
    border: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Floating composer */
.chat-input-container {
    padding: 10px clamp(12px, 3vw, 38px) 12px;
    border-top: 0;
    background: transparent;
}

.chat-composer-popover {
    left: max(12px, calc((100% - var(--tb-chat-composer-width)) / 2 + 8px));
}

.message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
.message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text,
.message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
.message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    min-width: 148px;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    max-width: calc(100% - 18px);
}

.chat-input {
    width: 100%;
    max-width: var(--tb-chat-composer-width);
    min-height: 54px;
    margin: 0 auto;
    padding: 5px 6px 5px 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 27px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: var(--tb-chat-shadow);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.chat-input:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    box-shadow: var(--tb-chat-shadow), 0 0 0 3px color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.chat-input .input-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-muted);
}

.chat-input .input-action-btn:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.chat-input .message-input {
    min-height: 42px;
    padding: 10px 8px;
    line-height: 1.45;
}

.chat-input .send-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 32%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.chat-input .send-button:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 9px 22px color-mix(in srgb, var(--primary-color) 38%, transparent);
    filter: saturate(1.08);
}

.chat-list-header button:focus-visible,
.chat-header button:focus-visible,
.chat-input button:focus-visible,
.chat-list-filter-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1200px) {
    :root {
        --tb-chat-list-width: 330px;
    }
}

@media (max-width: 768px) {
    :root {
        --tb-chat-header-height: 58px;
    }

    .chat-list-container {
        width: 100%;
        min-width: 100%;
        border-right: 0;
        box-shadow: none;
    }

    .chat-list-header {
        min-height: 58px;
        padding: 7px 10px 5px 14px;
    }

    .chat-list-header h3 {
        font-size: 19px;
    }

    .chat-search {
        padding: 2px 10px 7px;
    }

    .chat-search-field {
        min-height: 40px;
    }

    .chat-list-filters {
        padding-right: 10px;
        padding-left: 10px;
    }

    .chat-item {
        min-height: 66px;
        margin-right: 5px;
        margin-left: 5px;
        padding: 8px 9px;
        border-radius: 14px;
    }

    .chat-header {
        min-height: 58px;
        padding: 6px 8px;
    }

    .chat-header .chat-avatar {
        width: 40px;
        height: 40px;
    }

    .chat-header .chat-action-btn,
    .chat-header .mobile-menu-btn {
        width: 38px;
        height: 38px;
    }

    .chat-messages {
        padding: 12px 9px 8px;
    }

    .message-content {
        max-width: 88%;
    }

    .message-text {
        border-radius: 17px 17px 17px 5px;
    }

    .message.own .message-text {
        border-radius: 17px 17px 5px 17px;
    }

    .chat-input-container {
        min-height: 0;
        background: transparent;
    }

    body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        bottom: auto;
        padding-bottom: 8px;
    }

    .chat-composer-popover {
        right: 7px !important;
        left: 7px !important;
        width: auto;
        max-width: none;
    }

    .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
    .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text,
    .message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
    .message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
        min-width: 142px;
    }

    .chat-input {
        min-height: 50px;
        padding: 4px 4px 4px 5px;
        border-radius: 25px;
    }

    .chat-input .input-action-btn {
        width: 38px;
        height: 38px;
    }

    .chat-input .send-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .chat-input .message-input {
        min-height: 40px;
        padding: 9px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-item,
    .chat-list-header .quick-btn,
    .chat-header .chat-action-btn,
    .chat-header .mobile-menu-btn,
    .chat-input .send-button {
        transition: none;
    }
}
/* Mobile controls should not flash a rectangular WebKit tap overlay. */
html {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    button,
    a,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    .input-action-btn,
    .call-control-btn {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }

    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible) {
        outline: none;
    }
}

/* ===== Account appearance and notification preferences ===== */
:root {
    --accent-rgb: 35, 149, 8;
    --user-font-scale: 1;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-primary);
}

body {
    font-size: calc(16px * var(--user-font-scale));
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    font-size: calc(14.5px * var(--user-font-scale)) !important;
}

.chat-item-name,
.profile-container .form-control,
.message-input,
.nav-item span {
    font-size: calc(14px * var(--user-font-scale));
}

html[data-ui-density="compact"] .chat-item {
    min-height: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
}

html[data-ui-density="compact"] .message {
    margin-bottom: 3px;
}

html[data-ui-density="compact"] .profile-section {
    padding: 16px;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

.profile-customization-section,
.profile-notification-section {
    overflow: hidden;
}

.profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-section-heading h3 {
    margin: 0 0 5px;
}

.profile-section-heading p {
    margin: 0;
    max-width: 620px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.profile-settings-reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

.appearance-preview {
    display: grid;
    grid-template-columns: 76px 1fr;
    min-height: 174px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
    border-radius: 18px;
    background: var(--bg-primary);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.appearance-preview-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 20px 14px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.appearance-preview-sidebar i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--primary-color);
    color: #fff;
}

.appearance-preview-sidebar span {
    width: 30px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-color);
}

.appearance-preview-sidebar span:first-of-type {
    background: var(--primary-color);
}

.appearance-preview-chat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 24px;
}

.appearance-preview-chat strong {
    color: var(--text-primary);
    font-size: 16px;
}

.appearance-preview-message {
    max-width: 430px;
    padding: 11px 14px;
    border-radius: 14px 14px 14px 5px;
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-tertiary));
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.45;
}

.appearance-preview-chat button {
    min-height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 750;
}

.profile-settings-form {
    display: grid;
    gap: 16px;
}

.profile-setting-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-setting-copy,
.profile-setting-copy strong,
.profile-setting-copy span {
    display: block;
}

.profile-setting-copy span,
.profile-toggle-row small,
.notification-category-card small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.accent-color-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.accent-swatch,
.accent-custom {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    cursor: pointer;
}

.accent-swatch {
    border: 2px solid transparent;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.accent-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 28%, transparent);
}

.accent-custom {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.accent-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.accent-custom.accent-custom-hex {
    width: 116px;
    flex-basis: 116px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    padding: 0 8px;
    overflow: visible;
}

.accent-custom.accent-custom-hex input {
    position: static;
    width: 100%;
    height: 30px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 1;
    background: transparent;
    color: var(--text-primary);
    cursor: text;
    font: 700 12px/1 var(--font-family);
    text-transform: uppercase;
}

.profile-setting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-setting-field > span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.profile-font-scale {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-tertiary) 65%, transparent);
}

.profile-font-scale > span,
.profile-font-scale > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-font-scale output {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
}

.profile-font-scale input {
    width: 100%;
    accent-color: var(--primary-color);
}

.profile-font-scale small { font-size: 11px; }
.profile-font-scale > div > strong { font-size: 17px; }

.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 11px 13px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-tertiary) 62%, transparent);
    cursor: pointer;
}

.profile-toggle-row > span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-toggle-row > span > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
}

.profile-toggle-row strong,
.profile-toggle-row small {
    display: block;
}

.profile-toggle-row > input,
.notification-category-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-toggle-row > i {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 44px;
    border-radius: 999px;
    background: var(--border-color);
    transition: .2s ease;
}

.profile-toggle-row > i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: .2s ease;
}

.profile-toggle-row > input:checked + i { background: var(--primary-color); }
.profile-toggle-row > input:checked + i::after { transform: translateX(19px); }

.notification-master-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.notification-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.notification-category-card {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr 20px;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 13px;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    background: color-mix(in srgb, var(--bg-tertiary) 58%, transparent);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.notification-category-card > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.notification-category-card strong,
.notification-category-card small { display: block; }

.notification-category-card b {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
}

.notification-category-card > input:checked ~ b {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: inset 0 0 0 4px var(--bg-secondary);
}

.notification-category-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-tertiary));
}

.notification-category-card:has(input:checked) > i {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
}

@media (max-width: 700px) {
    .profile-section-heading,
    .profile-setting-block {
        align-items: stretch;
        flex-direction: column;
    }

    .accent-color-picker { justify-content: flex-start; }
    .profile-setting-grid,
    .notification-master-controls,
    .notification-category-grid { grid-template-columns: 1fr; }
    .appearance-preview { grid-template-columns: 54px 1fr; min-height: 150px; }
    .appearance-preview-sidebar { padding-inline: 8px; }
    .appearance-preview-chat { padding: 18px 14px; }
    .profile-toggle-row { min-height: 60px; }
}

/* ===== Calm navigation transitions between main sections =====
   Keep the animated container free of transforms. A transformed (or merely
   transform-promoted) ancestor becomes the containing block for fixed UI,
   which makes the mobile navigation and music player jump while switching
   sections. */

.content-area.panel-transition-leave {
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

.content-area.panel-transition-enter {
    animation: panel-section-enter 150ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes panel-section-enter {
    from { opacity: .72; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .content-area.panel-transition-enter {
        animation-duration: 130ms;
    }

}

@media (prefers-reduced-motion: reduce) {
    .content-area.panel-transition-leave,
    .content-area.panel-transition-enter {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ===== FIX: mobile reactions menu with 12+ reactions =====
   Причина бага: при 12 реакциях строка шире экрана, а мобильный список
   был горизонтально скроллимым, но не выровнен от начала. На части WebView
   первые элементы оказывались слева за пределами видимой области.
*/
@media (max-width: 768px) {
    .reaction-menu.mobile {
        width: max-content;
        max-width: calc(100vw - 24px);
        min-width: 0;
        overflow: hidden;
        padding: 5px 7px;
        box-sizing: border-box;
    }

    .reaction-menu.mobile .reaction-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .reaction-menu.mobile .reaction-list::-webkit-scrollbar {
        display: none;
    }

    .reaction-menu.mobile .reaction-option {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Expanded picker is a card; the compact quick row alone remains pill-shaped. */
    .reaction-menu.mobile.is-expanded {
        width: min(344px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: min(76dvh, 470px);
        padding: 5px 7px 0;
        border-radius: 20px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .reaction-menu.mobile.is-expanded .reaction-list {
        flex: 0 0 auto;
        border-radius: 14px;
    }

    .reaction-menu.mobile.is-expanded .reaction-all-picker {
        width: 100%;
        min-width: 0;
        padding: 8px 3px 10px;
        border-radius: 0 0 15px 15px;
        box-sizing: border-box;
    }

    .reaction-menu.mobile.is-expanded .reaction-all-grid {
        width: 100%;
        max-height: min(46dvh, 300px);
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* Music as chat attachment/publication */
.chat-attach-icon.music {
    background: linear-gradient(135deg, #ef476f, #7c3aed);
}

.file-preview-item.music-preview {
    border-color: color-mix(in srgb, #ef476f 42%, var(--border-color));
    background: color-mix(in srgb, var(--bg-primary) 82%, #ef476f 7%);
}

.music-preview-icon {
    color: #fff;
    background: linear-gradient(135deg, #ef476f, #7c3aed);
}

.file-preview-item.music-preview .preview-thumb {
    border-radius: 13px;
    object-fit: cover;
}

.chat-music-attach-modal {
    z-index: 10020;
}

.chat-music-attach-content {
    width: min(520px, calc(100vw - 28px));
    max-height: min(720px, calc(100vh - 40px));
}

.chat-music-picker-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.chat-music-picker-search i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.chat-music-picker-search input {
    padding-left: 40px;
}

.chat-music-picker-results {
    display: grid;
    gap: 8px;
    max-height: min(430px, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-music-picker-hint {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.35;
}

.chat-music-picker-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.chat-music-picker-row:hover {
    background: var(--bg-hover);
}

.chat-music-picker-art {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(135deg, #ef476f, #7c3aed);
    color: #fff;
}

.chat-music-picker-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-music-picker-copy {
    min-width: 0;
}

.chat-music-picker-copy strong,
.chat-music-picker-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-music-picker-copy small,
.chat-music-picker-row em,
.chat-music-picker-empty {
    color: var(--text-secondary);
}

.chat-music-picker-row em {
    font-style: normal;
    font-size: 12px;
}

.chat-music-picker-empty {
    padding: 22px 12px;
    text-align: center;
}

.chat-music-picker-empty i,
.chat-music-picker-empty strong,
.chat-music-picker-empty span {
    display: block;
}

.chat-music-picker-empty i {
    margin-bottom: 8px;
}

.chat-music-picker-empty strong {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.message-publication-music {
    padding: 9px 10px 0;
}

.message-publication-card .message-publication-music + .message-attachments,
.message-publication-card .message-video-list + .message-publication-music {
    margin-top: 0;
}

.message-publication-card .message-publication-music .chat-music-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.message-attachment-caption.music-caption {
    margin-top: 7px;
}

@media (max-width: 768px) {
    .chat-music-picker-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .chat-music-picker-row em {
        display: none;
    }
}

/* Keep chat wallpaper variables bound to the explicitly saved light/dark theme. */
html[data-resolved-theme="light"] {
    --chat-surface-bg: #f5f7f4;
    --chat-surface-base: #eef3ed;
    --chat-surface-glow: rgba(255, 255, 255, 0.62);
    --chat-texture-line: rgba(35, 149, 8, 0.045);
    --chat-sender-color: rgba(38, 86, 52, 0.78);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(68, 184, 47, 0.94), rgba(35, 149, 8, 0.9));
    --chat-incoming-text: #1e2721;
    --chat-outgoing-text: #fff;
    --chat-time-color: rgba(30, 39, 33, 0.52);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.82);
    --chat-divider-bg: rgba(255, 255, 255, 0.76);
    --chat-divider-color: rgba(42, 68, 49, 0.68);
    --chat-divider-border: rgba(35, 149, 8, 0.10);
    --chat-input-container-bg: rgba(245, 247, 244, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.88);
    --chat-input-border: rgba(30, 39, 33, 0.10);
    --chat-input-shadow: 0 8px 22px rgba(35, 59, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --chat-input-text: #1e2721;
    --chat-input-placeholder: rgba(30, 39, 33, 0.48);
    --chat-divider-line: rgba(30, 39, 33, 0.10);
    --chat-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-reaction-border: rgba(30, 39, 33, 0.10);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.92);
    --chat-own-reaction-text: #1e2721;
    --tb-chat-wallpaper-dot: color-mix(in srgb, var(--primary-color) 4%, transparent);
    --tb-chat-wallpaper-glow: color-mix(in srgb, var(--primary-color) 6%, transparent);
    --tb-chat-wallpaper-overlay: rgba(249, 250, 247, .42);
}

html[data-resolved-theme="dark"] {
    --chat-surface-bg: #090909;
    --chat-surface-base: var(--bg-primary);
    --chat-surface-glow: rgba(255, 255, 255, 0.025);
    --chat-texture-line: rgba(255, 255, 255, 0.018);
    --chat-sender-color: rgba(255, 255, 255, 0.58);
    --chat-incoming-bubble: linear-gradient(180deg, #171717, #0F0F0F);
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(42, 156, 24, 0.96), rgba(26, 77, 15, 0.98));
    --chat-incoming-text: var(--text-primary);
    --chat-outgoing-text: #fff;
    --chat-time-color: var(--text-muted);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.76);
    --chat-divider-bg: rgba(22, 22, 22, 0.88);
    --chat-divider-color: rgba(255, 255, 255, 0.72);
    --chat-divider-border: rgba(255, 255, 255, 0.08);
    --chat-input-container-bg: rgba(14, 14, 14, 0.96);
    --chat-input-bg: #171717;
    --chat-input-border: rgba(255, 255, 255, 0.09);
    --chat-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-divider-line: rgba(255, 255, 255, 0.09);
    --chat-reaction-bg: rgba(16, 16, 16, 0.97);
    --chat-reaction-border: rgba(255, 255, 255, 0.12);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-own-reaction-text: #202124;
    --tb-chat-wallpaper-overlay: rgba(6, 6, 6, .67);
}
/* ===== AI typing indicator above composer fix ===== */
.chat-input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.chat-input-container > .typing-indicator {
    order: 20;
    position: relative !important;
    inset: auto !important;
    display: none;
    flex: 0 0 auto;
    width: min(var(--tb-chat-composer-width), calc(100% - 24px));
    max-width: var(--tb-chat-composer-width);
    min-height: 0;
    margin: 0 auto 7px !important;
    padding: 0 !important;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 2;
}

.chat-input-container > .typing-indicator.active {
    display: flex !important;
}

.chat-input-container > .typing-indicator .typing-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 28px;
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.chat-input-container > .typing-indicator .typing-text {
    min-width: 0;
    color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input-container > .typing-indicator .typing-text strong {
    color: color-mix(in srgb, var(--primary-color) 86%, var(--text-primary));
    font-weight: 850;
}

.chat-input-container > .typing-indicator .typing-dots {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.chat-input-container > .typing-indicator .typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--primary-color);
    opacity: .82;
    animation: typingDot 1.25s infinite ease-in-out;
}

.chat-input-container > .typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: .16s;
}

.chat-input-container > .typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: .32s;
}

.chat-input-container > .chat-input {
    order: 30;
}

.chat-input-container > .file-preview-bar,
.chat-input-container > .reply-preview,
.chat-input-container > .message-reply-preview {
    order: 10;
}

@media (max-width: 768px) {
    .chat-input-container > .typing-indicator {
        width: min(var(--tb-chat-composer-width), calc(100% - 18px));
        min-height: 17px;
        margin-bottom: 0 !important;
        transform: translateY(2px);
    }

    .chat-input-container > .typing-indicator .typing-content {
        min-height: 17px;
        padding: 0 7px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .chat-input-container > .typing-indicator .typing-text {
        font-size: 11.5px;
        line-height: 17px;
    }
}

/* Desktop chat filter strip: show horizontal scrollbar on PC, hide it on mobile. */
@media (min-width: 769px) {
    .chat-list-filters {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
        -ms-overflow-style: auto;
        padding-bottom: 12px;
    }

    .chat-list-filters::-webkit-scrollbar {
        display: block;
        height: 8px;
    }

    .chat-list-filters::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .chat-list-filters::-webkit-scrollbar-thumb {
        min-width: 36px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-muted) 36%, transparent);
        background-clip: content-box;
    }

    .chat-list-filters:hover::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-muted) 55%, transparent);
        background-clip: content-box;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .chat-list-filters {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 9px;
        -webkit-overflow-scrolling: touch;
    }

    .chat-list-filters::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* Desktop media tabs: show horizontal scrollbar on PC, hide it on mobile. */
@media (min-width: 769px) {
    .chat-media-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
        -ms-overflow-style: auto;
        padding-bottom: 12px;
    }

    .chat-media-tabs::-webkit-scrollbar {
        display: block;
        height: 8px;
    }

    .chat-media-tabs::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .chat-media-tabs::-webkit-scrollbar-thumb {
        min-width: 36px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-muted) 36%, transparent);
        background-clip: content-box;
    }

    .chat-media-tabs:hover::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-muted) 55%, transparent);
        background-clip: content-box;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .chat-media-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 14px;
        -webkit-overflow-scrolling: touch;
    }

    .chat-media-tabs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}


/* ===== Chat-scoped typing indicator + animated dots ===== */
#typing-indicator .typing-content,
.typing-indicator .typing-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#typing-indicator .typing-dots,
.typing-indicator .typing-dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    min-width: 23px;
}

#typing-indicator .typing-dots span,
.typing-indicator .typing-dots span {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: var(--primary-color) !important;
    opacity: .42;
    transform: translateY(0) scale(.86);
    animation: tbTypingDotPulse 1.15s infinite ease-in-out !important;
    will-change: transform, opacity;
}

#typing-indicator .typing-dots span:nth-child(2),
.typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: .15s !important;
}

#typing-indicator .typing-dots span:nth-child(3),
.typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: .30s !important;
}

@keyframes tbTypingDotPulse {
    0%, 60%, 100% {
        opacity: .38;
        transform: translateY(0) scale(.86);
    }
    30% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #typing-indicator .typing-dots span,
    .typing-indicator .typing-dots span {
        animation: tbTypingDotFade 1.4s infinite ease-in-out !important;
        transform: none !important;
    }

    @keyframes tbTypingDotFade {
        0%, 100% { opacity: .35; }
        50% { opacity: 1; }
    }
}

/* Only iOS needs the extra lift above the home indicator. Android WebView
   already keeps content inside its system navigation inset. */
@media (max-width: 1024px) {
    :root {
        --app-mobile-safe-bottom: 0px;
        --app-mobile-nav-height: 70px;
    }

    html.platform-ios {
        --app-mobile-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        --app-mobile-nav-height: calc(70px + var(--app-mobile-safe-bottom));
    }

    .sidebar.app-navigation,
    .sidebar.app-navigation.collapsed,
    .sidebar.app-navigation.mobile-open {
        bottom: var(--app-mobile-safe-bottom);
    }
}

@media (max-width: 768px) {
    body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        bottom: 0 !important;
        padding-bottom: 8px !important;
    }

    html.platform-ios body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Telegram-like inline video sizing and automatic preview state. */
.message-video {
    position: relative;
    align-self: flex-start;
}

.message.own .message-video {
    align-self: flex-end;
}

.message-video-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background:
        radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 35%),
        #080909;
}

.message-video.has-video-metadata.is-video-portrait {
    width: min(300px, 78vw);
    width: min(300px, 78vw, calc(432px * var(--chat-video-ratio)));
}

.message-video.has-video-metadata.is-video-square {
    width: min(432px, 80vw, 54dvh);
}

.message-video.has-video-metadata.is-video-landscape {
    width: min(480px, 82vw);
}

.message-video.is-video-metadata-pending {
    width: min(360px, 82vw);
}

.message-video-frame .chat-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 432px;
    max-height: min(432px, 62dvh);
    aspect-ratio: var(--chat-video-width, 16) / var(--chat-video-height, 9);
    border-radius: 0;
    object-fit: contain;
    transition: opacity .2s ease;
}

.message-video:not(.is-video-ready) .chat-video[data-lazy-src]:not([poster]) {
    opacity: .08;
}

.message-video-poster-bg {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    object-fit: cover;
    filter: blur(14px) brightness(.58) saturate(.9);
    transform: scale(1.05);
    pointer-events: none;
}

.message-video.is-video-loading .message-video-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(255,255,255,.24);
    border-top-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: chat-video-preview-spin .8s linear infinite;
}

.message-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 0 0 0 3px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: rgba(15,17,17,.68);
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.28);
    cursor: pointer;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .16s ease, opacity .16s ease;
}

.message-video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
}

.message-video.is-video-loading .message-video-play-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.message-video.is-video-playing .message-video-play-btn {
    opacity: 0;
}

.message-video-frame:hover .message-video-play-btn,
.message-video-frame:focus-within .message-video-play-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.message-video-controls {
    position: absolute;
    right: 9px;
    bottom: 9px;
    left: 9px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.message-video-frame:hover .message-video-controls,
.message-video-frame:focus-within .message-video-controls,
.message-video:not(.is-video-playing) .message-video-controls {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.message-video-control {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(9, 12, 13, .68);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.message-video-progress {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.message-video-progress span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

@media (hover: none) {
    .message-video.is-video-playing .message-video-controls {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .message-video.is-video-playing .message-video-play-btn {
        visibility: hidden;
        pointer-events: none;
    }
}

.message-video-duration {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.64);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.message-video-duration[hidden] {
    display: none !important;
}

@keyframes chat-video-preview-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .message-video-frame .chat-video {
        transition: none;
    }

    .message-video.is-video-loading .message-video-frame::after {
        animation: none;
    }
}

/* Unified chat publications: media, caption, music and files are one message. */
.message-bubble.publication-message-bubble {
    box-sizing: border-box;
    width: min(420px, calc(100vw - 96px));
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent) !important;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16) !important;
}

.message-publication-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.message-bubble.publication-single-video,
.message-bubble.publication-single-video .message-publication-card,
.message-bubble.publication-single-video .message-video-list {
    width: fit-content;
    max-width: min(480px, calc(100vw - 96px));
}

.message-bubble.publication-single-video .message-video-list,
.message-bubble.publication-single-video .message-video {
    align-self: stretch;
}

.message-publication-card .message-video-list,
.message-publication-card .message-video,
.message-publication-card .message-video-frame {
    box-sizing: border-box;
    margin: 0;
}

.message-publication-card .message-video {
    max-width: 100%;
}

.message-publication-card .message-video,
.message-publication-card .message-video-frame,
.message-publication-card .chat-video {
    -webkit-touch-callout: none;
    user-select: none;
}

.message-publication-card .message-video:first-child,
.message-publication-card .message-video:first-child .message-video-frame {
    border-radius: 17px 17px 0 0;
}

.message-publication-card.has-mixed-attachments .message-video-list {
    align-items: center;
    padding: 0;
}

.message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: center;
}

.message-publication-card .message-attachment-caption {
    display: block;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 13px 8px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
}

.message.own .message-publication-card .message-attachment-caption {
    color: var(--tb-own-message-text, #f8fafc);
}

.message-publication-card .message-attachment-caption .chat-markdown-table-wrap,
.message-publication-card .message-attachment-caption pre,
.message-publication-card .message-attachment-caption blockquote {
    max-width: 100%;
}

.message-bubble.publication-has-caption .message-publication-card > .message-time,
.message-bubble.publication-has-music .message-publication-card > .message-time,
.message-bubble.publication-has-files .message-publication-card > .message-time,
.message-bubble.publication-has-mixed-attachments .message-publication-card > .message-time {
    position: static !important;
    align-self: flex-end;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 9px 8px auto;
    padding: 2px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message.own .message-bubble.publication-has-caption .message-time,
.message.own .message-bubble.publication-has-music .message-time,
.message.own .message-bubble.publication-has-files .message-time,
.message.own .message-bubble.publication-has-mixed-attachments .message-time {
    color: var(--tb-own-message-time, rgba(248, 250, 252, .74)) !important;
}

.message-bubble.publication-message-bubble .message-reactions {
    z-index: 9;
}

.message.action-menu-open .publication-message-bubble {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 36%, transparent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .message-bubble.publication-message-bubble {
        width: min(380px, calc(100vw - 58px));
        max-width: calc(100vw - 58px);
    }

    .message-bubble.publication-single-video,
    .message-bubble.publication-single-video .message-publication-card,
    .message-bubble.publication-single-video .message-video-list {
        width: fit-content;
        max-width: calc(100vw - 58px);
    }
}

/* Final compound-publication cascade. The outside stays transparent, while
   every part shares one column, one shadow and connected corner geometry. */
.message-bubble.media-message-bubble.publication-message-bubble,
.message-bubble.media-message-bubble.publication-message-bubble.publication-single-video {
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.message-bubble.publication-message-bubble .message-publication-card,
.message-bubble.publication-single-video .message-publication-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible;
    border-radius: 0;
    background: transparent;
    filter: none;
}

.message-bubble.publication-message-bubble .message-publication-card:not(.is-single-video-publication) {
    width: min(360px, calc(100vw - 96px));
}

.message-bubble.publication-message-bubble .message-publication-card.has-mixed-attachments {
    width: min(360px, calc(100vw - 96px));
}

.message-bubble.publication-message-bubble .message-video-list,
.message-bubble.publication-single-video .message-video-list {
    align-items: stretch;
    gap: 2px;
    width: 100%;
    max-width: 100%;
}

.message-publication-card .message-video,
.message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: flex-start;
    overflow: visible;
    border-radius: 18px;
    background: transparent;
}

.message.own .message-publication-card .message-video,
.message.own .message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: flex-end;
}

.message-publication-card.has-mixed-attachments .message-video,
.message-publication-card.has-mixed-attachments .message-video.has-video-metadata.is-video-portrait,
.message-publication-card.has-mixed-attachments .message-video.has-video-metadata.is-video-square,
.message-publication-card.has-mixed-attachments .message-video.has-video-metadata.is-video-landscape {
    align-self: stretch;
    width: 100%;
}

.message-publication-card.has-mixed-attachments .message-video-frame .chat-video {
    height: min(432px, 62dvh);
    aspect-ratio: auto;
    object-fit: contain;
}

.message-publication-card .message-video-frame,
.message-publication-card .message-video:first-child .message-video-frame {
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.message-publication-card.has-video.has-mixed-attachments .message-video-frame,
.message-publication-card.has-video.has-mixed-attachments .message-video:first-child .message-video-frame {
    border-radius: 18px;
}

.message-publication-card .message-publication-music {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.message-publication-card .message-attachments {
    width: 100%;
    max-width: 100%;
    gap: 2px;
}

.message-publication-card .message-image-group,
.message-publication-card .message-image-group.single {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
}

.message-publication-details {
    position: relative;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 21px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px 18px 18px 8px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.message.own .message-publication-details {
    border-color: color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px 18px 8px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .055));
}

.message-publication-details .message-publication-music {
    box-sizing: border-box;
    width: 100%;
    padding: 6px;
}

.message-publication-details .chat-music-card,
.message-publication-details .message-file {
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.message.own .message-publication-details .message-file.document-message {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.message-publication-details .message-attachments {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.message-publication-details .message-file {
    width: 100%;
    padding: 9px 10px;
}


.message-publication-details .message-publication-caption-bubble {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 9px 11px 2px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.message.own .message-publication-details .message-publication-caption-bubble {
    border-radius: 0;
    background: transparent;
}

.message-publication-details .message-attachment-caption {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.message-publication-details > .message-time {
    position: absolute !important;
    z-index: 4;
    top: auto !important;
    left: auto !important;
    right: 9px;
    bottom: 5px;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    align-self: auto !important;
    gap: 4px;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* A publication may also be classified as a file/media bubble. Keep its
   timestamp governed by the publication layout, regardless of those generic
   footer rules. */
.message .message-bubble.publication-message-bubble .message-publication-details > .message-time {
    position: absolute !important;
    inset: auto 9px 5px auto !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-self: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.message.own .message-bubble.publication-message-bubble .message-publication-details > .message-time {
    color: var(--tb-own-message-time, rgba(248, 250, 252, .74)) !important;
}

.message-bubble.publication-message-bubble .message-publication-meta {
    align-self: flex-end !important;
    margin-right: 0;
    margin-left: auto;
}

.message-bubble.publication-message-bubble .message-status {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

/* Settle initial chat geometry while its messages are hidden, then reveal the
   final position atomically. Per-message entrance motion looked like a second
   scroll jump when the history and composer finished measuring. */
.chat-messages {
    scrollbar-gutter: stable;
    overflow-anchor: auto;
}

.chat-messages.is-chat-layout-stabilizing {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}

.chat-messages.is-chat-layout-stabilizing .message,
.chat-messages.is-chat-layout-stabilizing .chat-date-divider,
.chat-messages.is-chat-layout-stabilizing .chat-unread-divider,
.chat-messages.is-chat-layout-stabilizing .older-messages-control {
    animation: none !important;
}

/* History is inserted in one settled frame. Only messages received after the
   chat has opened should use the messageAppear animation. */
.chat-messages .message.chat-history-message {
    animation: none !important;
}

@media (max-width: 768px) {
    .message-bubble.media-message-bubble.publication-message-bubble,
    .message-bubble.media-message-bubble.publication-message-bubble.publication-single-video,
    .message-bubble.publication-message-bubble .message-publication-card,
    .message-bubble.publication-single-video .message-publication-card {
        max-width: calc(100vw - 58px);
    }

    .message-bubble.publication-message-bubble .message-publication-card:not(.is-single-video-publication),
    .message-bubble.publication-message-bubble .message-publication-card.has-mixed-attachments {
        width: min(360px, calc(100vw - 58px));
    }
}

/* Light themes can combine a neutral message surface with the user's white
   own-message text preference. Timestamps and delivery marks still need an
   explicit dark contrast in that case. */
html.theme-light .chat-area-full .message.own .message-time,
html.theme-light .chat-area-full .message.own .message-status,
html.theme-light .chat-area-full .message.own .message-status.read,
html.theme-light .chat-area-full .message.own .message-status.delivered,
html.theme-light .chat-area-full .message.own .message-edited,
html[data-theme="light"] .chat-area-full .message.own .message-time,
html[data-theme="light"] .chat-area-full .message.own .message-status,
html[data-theme="light"] .chat-area-full .message.own .message-edited {
    color: rgba(15, 23, 42, .68) !important;
}

/* Monitoring tab context menu + standalone popout window */
.monitoring-site-context-menu {
    position: fixed;
    z-index: 22050;
    min-width: 238px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
    border-radius: 12px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 97%, transparent);
    box-shadow: 0 18px 48px rgb(15 23 42 / 24%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: monitoringContextMenuIn .12s ease-out;
}

@keyframes monitoringContextMenuIn {
    from { opacity: 0; transform: translateY(-3px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.monitoring-site-context-menu button {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 0;
    border-radius: 9px;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.monitoring-site-context-menu button:hover,
.monitoring-site-context-menu button:focus-visible {
    color: var(--primary-color);
    background: var(--bg-hover);
    outline: none;
}

.monitoring-site-context-menu button i {
    width: 18px;
    color: var(--primary-color);
    text-align: center;
}

html.monitoring-popout-window,
html.monitoring-popout-window body,
body.monitoring-popout-window {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}

body.monitoring-popout-window .sidebar.app-navigation,
body.monitoring-popout-window .sidebar-overlay,
body.monitoring-popout-window .content-area:not(#monitoring-persistent-host):not(#monitoring-window-host),
body.monitoring-popout-window .monitoring-sites-pane {
    display: none !important;
}

body.monitoring-popout-window .container,
body.monitoring-popout-window .main-content,
body.monitoring-popout-window .main-content.sidebar-collapsed {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.monitoring-popout-window #monitoring-persistent-host {
    position: fixed;
    inset: 0;
    display: flex !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

body.monitoring-popout-window .monitoring-panel,
body.monitoring-popout-window .monitoring-workspace,
body.monitoring-popout-window .monitoring-frame-wrap {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

body.monitoring-popout-window .monitoring-frame-wrap {
    flex: 1 1 auto;
}

.monitoring-popout-special-workspace,
.monitoring-weather-workspace {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 24px;
    background: var(--bg-primary);
}

.monitoring-popout-special-workspace {
    display: grid;
    place-items: start center;
}

.monitoring-popout-special-card {
    width: min(680px, 100%);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 50px rgb(15 23 42 / 10%);
}

.monitoring-popout-special-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--border-color);
}

.monitoring-popout-special-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.monitoring-popout-special-heading > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.monitoring-popout-special-heading strong {
    font-size: 16px;
}

.monitoring-popout-special-heading small {
    color: var(--text-secondary);
    font-size: 12px;
}

.monitoring-csv-workspace-options {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding: 12px;
}

.monitoring-csv-workspace-options button {
    border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
    background: var(--bg-primary);
}

.monitoring-weather-workspace .monitoring-weather-items {
    width: min(1180px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 700px) {
    .monitoring-popout-special-workspace,
    .monitoring-weather-workspace {
        padding: 12px;
    }

    .monitoring-csv-workspace-options,
    .monitoring-weather-workspace .monitoring-weather-items {
        grid-template-columns: 1fr;
    }
}


body.monitoring-popout-window .monitoring-window-root,
body.monitoring-popout-window #monitoring-window-host {
    display: flex !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Keep refresh controls stable while table snapshots are replaced. */
.monitoring-data-actions { flex-wrap: wrap; }
.monitoring-data-auto-refresh {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}
.monitoring-data-auto-refresh select {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font: inherit;
    cursor: pointer;
}

/* Monitoring data workspace — compact fluid pass (Apple-style principles, 2026-09-17). */
.monitoring-data-workspace {
    --monitoring-float-bg: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
    --monitoring-float-border: color-mix(in srgb, var(--border-color) 78%, rgba(255,255,255,.28));
}

.monitoring-data-tools {
    min-height: 44px;
    gap: 6px;
    padding: 5px 7px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(14px) saturate(135%);
}

.monitoring-data-search {
    min-width: 150px;
    max-width: 390px;
    height: 32px;
    flex-basis: 280px;
    gap: 7px;
    padding: 0 9px;
    border-radius: 9px;
}

.monitoring-data-search input { font-size: 11px; }
.monitoring-data-count { font-size: 10px; }
.monitoring-data-actions { gap: 4px; flex-wrap: nowrap; }
.monitoring-data-actions button,
.monitoring-data-columns-head button {
    height: 32px;
    min-height: 32px;
    gap: 5px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 10px;
    transition: transform 100ms ease-out, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    touch-action: manipulation;
}
.monitoring-data-actions button:active,
.monitoring-data-columns-head button:active,
.monitoring-data-filter-sort button:active,
.monitoring-data-filter-footer button:active,
.monitoring-custom-modal-actions button:active,
.monitoring-automation-panel button:active {
    transform: scale(.97);
}
.monitoring-data-actions button b {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
}
.monitoring-data-auto-refresh {
    min-height: 32px;
    gap: 5px;
    font-size: 10px;
}
.monitoring-data-auto-refresh select {
    height: 32px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 10px;
}

.monitoring-data-columns-panel,
.monitoring-data-filter-panel,
.monitoring-device-command-panel,
.monitoring-automation-panel {
    border-color: var(--monitoring-float-border, color-mix(in srgb, var(--border-color) 78%, rgba(255,255,255,.28)));
    background: var(--monitoring-float-bg, color-mix(in srgb, var(--bg-secondary) 84%, transparent));
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
    box-shadow: 0 18px 46px rgba(2, 6, 23, .20), inset 0 1px rgba(255,255,255,.08);
}

.monitoring-data-columns-panel {
    top: 46px;
    right: 7px;
    width: min(390px, calc(100% - 14px));
    max-height: min(460px, calc(100% - 58px));
    border-radius: 14px;
}
.monitoring-data-columns-head {
    gap: 8px;
    padding: 8px 9px;
}
.monitoring-data-columns-head > div { display: flex; gap: 4px; }
.monitoring-data-columns-head strong { font-size: 11px; letter-spacing: -.01em; }
.monitoring-data-columns-head button span { display: inline; }
.monitoring-data-columns-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    max-height: 390px;
    padding: 6px;
}
.monitoring-data-columns-list label {
    min-height: 29px;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 7px;
    font-size: 10px;
}

.monitoring-data-filter-panel {
    width: min(338px, calc(100vw - 16px)) !important;
    border-radius: 14px;
    transform-origin: top left;
}
.monitoring-data-filter-panel-head,
.monitoring-device-command-head,
.monitoring-automation-head {
    gap: 8px;
    padding: 8px 10px;
}
.monitoring-data-filter-panel-head small,
.monitoring-device-command-head small,
.monitoring-automation-head small {
    font-size: 8px;
    letter-spacing: .055em;
}
.monitoring-data-filter-panel-head strong { font-size: 12px; }
.monitoring-data-filter-panel-head button,
.monitoring-device-command-head button,
.monitoring-automation-head button {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: 10px;
}
.monitoring-data-filter-sort { gap: 5px; padding: 7px 8px 0; }
.monitoring-data-filter-sort button,
.monitoring-data-value-actions button,
.monitoring-data-filter-footer button {
    min-height: 29px;
    border-radius: 8px;
    font-size: 9px;
}
.monitoring-data-filter-field { gap: 3px; padding: 7px 8px 0; }
.monitoring-data-filter-field span { font-size: 9px; }
.monitoring-data-filter-field input,
.monitoring-data-value-search,
.monitoring-data-filter-mode-row select,
.monitoring-command-custom input {
    height: 31px;
    border-radius: 8px;
    font-size: 10px;
}
.monitoring-data-filter-mode-row { gap: 5px; padding: 6px 8px 0; }
.monitoring-data-value-search { margin: 6px 8px 0; padding: 0 8px; }
.monitoring-data-value-actions { gap: 4px; padding: 6px 8px; }
.monitoring-data-value-list { min-height: 70px; max-height: 220px; }
.monitoring-data-value-list label { min-height: 29px; gap: 6px; padding: 4px 9px; font-size: 10px; }
.monitoring-data-filter-footer { padding: 7px 8px; }

.monitoring-device-command-panel {
    width: min(404px, calc(100% - 14px));
    max-height: min(590px, calc(100% - 24px));
    border-radius: 14px;
}
.monitoring-device-command-panel section { padding: 8px 9px 0; }
.monitoring-device-command-panel h4 { margin-bottom: 5px; font-size: 10px; }
.monitoring-device-credential-grid { gap: 5px; }
.monitoring-device-credential-grid span { font-size: 8px; }
.monitoring-device-credential-grid input { height: 30px; border-radius: 8px; font-size: 10px; }
.monitoring-command-quick { gap: 4px; }
.monitoring-command-quick button,
.monitoring-command-custom button,
.monitoring-command-reboot { min-height: 30px; border-radius: 8px; font-size: 10px; }
.monitoring-command-reboot { width: calc(100% - 18px); margin: 9px; }
.monitoring-device-command-log { min-height: 55px; max-height: 120px; margin: 0 9px 9px; padding: 7px; border-radius: 8px; font-size: 9px; }

.monitoring-custom-modal { padding: 12px; }
.monitoring-custom-modal-backdrop {
    background: rgba(2, 6, 23, .34);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
}
.monitoring-custom-modal-card {
    width: min(336px, 100%);
    padding: 15px;
    border-radius: 16px;
    background: var(--monitoring-float-bg, var(--bg-secondary));
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    box-shadow: 0 22px 58px rgba(2, 6, 23, .30), inset 0 1px rgba(255,255,255,.08);
}
.monitoring-custom-modal-icon { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; font-size: 15px; }
.monitoring-custom-modal-card h3 { margin-bottom: 4px; font-size: 14px; letter-spacing: -.015em; }
.monitoring-custom-modal-card p { margin-bottom: 10px; font-size: 10px; line-height: 1.4; }
.monitoring-custom-modal-card > label { gap: 3px; margin-bottom: 9px; }
.monitoring-custom-modal-card > label span { font-size: 9px; }
.monitoring-custom-modal-card > label input { height: 32px; border-radius: 8px; font-size: 10px; }
.monitoring-custom-modal-actions { gap: 6px; }
.monitoring-custom-modal-actions button { min-height: 32px; border-radius: 8px; font-size: 10px; }

.monitoring-data-heading b { right: -5px; width: 10px; touch-action: none; }
.monitoring-data-heading b::after { right: 4px; opacity: .7; }
.monitoring-data-cell { padding-inline: 8px; }

/* Manual-confirmation automation panel. No command is sent until an approval button is pressed. */
.monitoring-automation-panel {
    position: absolute;
    z-index: 34;
    top: 46px;
    right: 7px;
    width: min(440px, calc(100% - 14px));
    max-height: min(650px, calc(100% - 58px));
    overflow: hidden;
    border: 1px solid var(--monitoring-float-border);
    border-radius: 15px;
    color: var(--text-primary);
}
.monitoring-automation-panel[hidden] { display: none; }
.monitoring-automation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
}
.monitoring-automation-head > div:first-child { display: grid; gap: 1px; min-width: 0; }
.monitoring-automation-head strong { overflow: hidden; font-size: 12px; letter-spacing: -.012em; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-automation-head-actions { display: flex !important; align-items: center; gap: 4px !important; margin-left: auto; }
.monitoring-automation-master,
.monitoring-automation-preset-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.monitoring-automation-master input,
.monitoring-automation-preset-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.monitoring-automation-master > span,
.monitoring-automation-preset-toggle > span {
    position: relative;
    display: block;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 28%, var(--bg-primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 85%, transparent);
    transition: background-color 150ms ease;
}
.monitoring-automation-master > span::after,
.monitoring-automation-preset-toggle > span::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(2,6,23,.28);
    content: '';
    transition: transform 160ms cubic-bezier(.22,.9,.34,1);
}
.monitoring-automation-master input:checked + span,
.monitoring-automation-preset-toggle input:checked + span { background: var(--primary-color); }
.monitoring-automation-master input:checked + span::after,
.monitoring-automation-preset-toggle input:checked + span::after { transform: translateX(12px); }
.monitoring-automation-preset-toggle > span { width: 26px; height: 16px; }
.monitoring-automation-preset-toggle > span::after { width: 12px; height: 12px; }
.monitoring-automation-preset-toggle input:checked + span::after { transform: translateX(10px); }
.monitoring-automation-body { max-height: 594px; overflow: auto; padding: 7px; }
.monitoring-automation-section-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 5px; color: var(--text-secondary); font-size: 9px; }
.monitoring-automation-section-title strong { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }
.monitoring-automation-section-title span { min-width: 18px; padding: 1px 5px; border-radius: 999px; text-align: center; background: color-mix(in srgb, var(--text-secondary) 8%, transparent); }
.monitoring-automation-approvals,
.monitoring-automation-presets { display: grid; gap: 5px; }
.monitoring-automation-presets { margin-top: 8px; }
.monitoring-automation-approval,
.monitoring-automation-preset {
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
    box-shadow: 0 4px 14px rgba(2,6,23,.06);
}
.monitoring-automation-approval { padding: 7px 8px 6px; }
.monitoring-automation-approval.is-busy { opacity: .72; }
.monitoring-automation-approval-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.monitoring-automation-approval-top > div { display: grid; min-width: 0; gap: 1px; }
.monitoring-automation-approval-top strong { color: var(--primary-color); font-size: 13px; letter-spacing: -.02em; }
.monitoring-automation-approval-top small { overflow: hidden; color: var(--text-secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-automation-approval-top b { min-width: 29px; padding: 3px 7px; border-radius: 999px; color: var(--text-primary); background: color-mix(in srgb, var(--primary-color) 10%, transparent); font-size: 10px; text-align: center; }
.monitoring-automation-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.monitoring-automation-metrics span { display: flex; min-width: 0; align-items: center; gap: 4px; padding: 4px 5px; border-radius: 7px; color: var(--text-primary); background: color-mix(in srgb, var(--bg-secondary) 80%, transparent); font-size: 9px; font-variant-numeric: tabular-nums; }
.monitoring-automation-metrics i { color: var(--text-muted); font-size: 8px; font-style: normal; font-weight: 850; }
.monitoring-automation-approval-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.monitoring-automation-approval-foot small { color: var(--text-muted); font-size: 8px; }
.monitoring-automation-approval-foot button { height: 27px; padding: 0 9px; border: 0; border-radius: 8px; color: #fff; background: var(--primary-color); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.monitoring-automation-approval-foot button:disabled { opacity: .55; cursor: progress; }
.monitoring-automation-preset { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 7px; }
.monitoring-automation-preset.is-disabled { opacity: .56; }
.monitoring-automation-preset-copy { display: grid; min-width: 0; gap: 1px; }
.monitoring-automation-preset-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-automation-preset-copy span,
.monitoring-automation-preset-copy small { overflow: hidden; color: var(--text-secondary); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-automation-preset-copy small { color: var(--text-muted); }
.monitoring-automation-preset-actions { display: flex; gap: 3px; }
.monitoring-automation-preset-actions button { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 7px; color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 8%, transparent); cursor: pointer; font-size: 9px; }
.monitoring-automation-empty { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 7px; padding: 9px; border: 1px dashed color-mix(in srgb, var(--border-color) 86%, transparent); border-radius: 10px; color: var(--text-muted); font-size: 9px; }
.monitoring-automation-empty i { color: var(--primary-color); }

.monitoring-automation-editor { max-height: 590px; overflow: auto; padding: 8px; }
.monitoring-automation-editor label { display: grid; min-width: 0; gap: 3px; }
.monitoring-automation-editor label > span { color: var(--text-secondary); font-size: 8px; font-weight: 750; }
.monitoring-automation-editor input,
.monitoring-automation-editor select {
    width: 100%;
    min-width: 0;
    height: 29px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    outline: 0;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
    font: inherit;
    font-size: 9px;
}
.monitoring-automation-editor input:focus,
.monitoring-automation-editor select:focus { border-color: color-mix(in srgb, var(--primary-color) 58%, var(--border-color)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 9%, transparent); }
.monitoring-automation-editor-row.is-primary { display: grid; grid-template-columns: minmax(0,1fr) 104px; gap: 6px; }
.monitoring-automation-scope-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 6px; margin-top: 7px; padding: 7px; border-radius: 9px; background: color-mix(in srgb, var(--bg-secondary) 72%, transparent); }
.monitoring-automation-editor-section { margin-top: 8px; }
.monitoring-automation-editor-section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.monitoring-automation-editor-section > header strong { font-size: 9px; }
.monitoring-automation-editor-section > header button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-color); border-radius: 7px; color: var(--primary-color); background: var(--bg-primary); cursor: pointer; font-size: 8px; }
.monitoring-automation-rule-list,
.monitoring-automation-action-list { display: grid; gap: 4px; }
.monitoring-automation-rule-list > div { display: grid; grid-template-columns: minmax(100px, 1fr) 68px minmax(76px,.65fr) 24px; gap: 4px; }
.monitoring-automation-action-list > div { display: grid; grid-template-columns: minmax(100px,1fr) minmax(90px,.7fr) 24px; gap: 4px; }
.monitoring-automation-rule-list button,
.monitoring-automation-action-list button { width: 24px; height: 29px; padding: 0; border: 0; border-radius: 7px; color: var(--text-muted); background: color-mix(in srgb, var(--text-secondary) 7%, transparent); cursor: pointer; }
.monitoring-automation-empty-line { color: var(--text-muted); font-size: 8px; }
.monitoring-automation-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent); }
.monitoring-automation-enabled { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 5px !important; color: var(--text-secondary); font-size: 9px; }
.monitoring-automation-enabled input { width: auto; height: auto; }
.monitoring-automation-editor-footer > div { display: flex; gap: 4px; }
.monitoring-automation-editor-footer button { height: 29px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); background: var(--bg-primary); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.monitoring-automation-editor-footer button.is-primary { border-color: var(--primary-color); color: #fff; background: var(--primary-color); }

@keyframes monitoring-float-in {
    from { opacity: 0; transform: translateY(-3px) scale(.985); filter: blur(.5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.monitoring-data-columns-panel:not([hidden]),
.monitoring-data-filter-panel:not([hidden]),
.monitoring-device-command-panel:not([hidden]),
.monitoring-automation-panel:not([hidden]) {
    animation: monitoring-float-in 150ms cubic-bezier(.2,.82,.24,1) both;
}
.monitoring-data-columns-panel,
.monitoring-device-command-panel,
.monitoring-automation-panel { transform-origin: top right; }
.monitoring-data-filter-panel { transform-origin: top left; }

@media (max-width: 1050px) {
    .monitoring-data-actions button span { display: none; }
    .monitoring-data-auto-refresh { font-size: 0; }
    .monitoring-data-auto-refresh select { font-size: 10px; }
}

@media (max-width: 620px) {
    .monitoring-data-columns-panel,
    .monitoring-automation-panel { left: 7px; right: 7px; width: auto; }
    .monitoring-automation-rule-list > div { grid-template-columns: minmax(90px,1fr) 58px minmax(70px,.7fr) 24px; }
    .monitoring-automation-scope-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .monitoring-data-actions button,
    .monitoring-data-columns-head button,
    .monitoring-data-filter-sort button,
    .monitoring-data-filter-footer button,
    .monitoring-custom-modal-actions button,
    .monitoring-automation-panel button,
    .monitoring-automation-master > span::after,
    .monitoring-automation-preset-toggle > span::after { transition: none !important; }
    .monitoring-data-actions button:active,
    .monitoring-data-columns-head button:active,
    .monitoring-data-filter-sort button:active,
    .monitoring-data-filter-footer button:active,
    .monitoring-custom-modal-actions button:active,
    .monitoring-automation-panel button:active { transform: none; }
}

@media (prefers-contrast: more) {
    .monitoring-data-columns-panel,
    .monitoring-data-filter-panel,
    .monitoring-device-command-panel,
    .monitoring-automation-panel,
    .monitoring-custom-modal-card { background: var(--bg-secondary); border-color: var(--text-secondary); }
}

/* Automation rule editor v2: each action owns its own conditions/device batch. */
.monitoring-automation-rule-cards { display: grid; gap: 6px; }
.monitoring-automation-rule-card {
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
}
.monitoring-automation-rule-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 5px;
}
.monitoring-automation-rule-card > header > b { flex: 0 0 auto; color: var(--text-secondary); font-size: 8px; text-transform: uppercase; letter-spacing: .035em; }
.monitoring-automation-rule-card > header > div {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(92px, 1fr) minmax(78px, .65fr) 24px;
    gap: 4px;
}
.monitoring-automation-rule-card > header select,
.monitoring-automation-rule-card > header input { height: 28px; }
.monitoring-automation-rule-card > header button {
    width: 24px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-secondary) 7%, transparent);
    cursor: pointer;
}
.monitoring-automation-rule-card .monitoring-automation-rule-list { display: grid; gap: 4px; }
.monitoring-automation-rule-card .monitoring-automation-rule-list > div {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) 58px minmax(70px, .65fr) 24px;
    gap: 4px;
}
.monitoring-automation-add-condition {
    height: 24px;
    margin-top: 5px;
    padding: 0 7px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: 7px;
    color: var(--text-secondary);
    background: transparent;
    font: inherit;
    font-size: 8px;
    cursor: pointer;
}

/* Automation editor: compact controls-only footer/header. */
.monitoring-automation-editor-footer > div { margin-left: auto; }


/* Monitoring UX refinements: stable selection row + draggable automation surface. */
.monitoring-data-selection-stats {
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}
.monitoring-data-selection-stats.is-empty {
    border-bottom-color: color-mix(in srgb, var(--border-color) 84%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 52%, var(--bg-primary));
}
.monitoring-data-selection-stats.is-empty strong,
.monitoring-data-selection-stats.is-empty span b {
    color: var(--text-muted);
}
.monitoring-data-selection-stats button:disabled {
    opacity: .34;
    cursor: default;
}

.monitoring-automation-head {
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.monitoring-automation-panel.is-dragging .monitoring-automation-head {
    cursor: grabbing;
}
.monitoring-automation-head > div:not(.monitoring-automation-head-actions) {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.monitoring-automation-drag-handle {
    display: inline-grid;
    width: 20px;
    height: 24px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 9px;
    opacity: .72;
}
.monitoring-automation-head:hover .monitoring-automation-drag-handle,
.monitoring-automation-panel.is-dragging .monitoring-automation-drag-handle {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    opacity: 1;
}
.monitoring-automation-head button,
.monitoring-automation-head input,
.monitoring-automation-head label,
.monitoring-automation-head select,
.monitoring-automation-head textarea,
.monitoring-automation-head a {
    cursor: pointer;
    touch-action: auto;
}
.monitoring-automation-panel.is-dragging {
    animation: none !important;
    box-shadow: 0 22px 58px rgba(2, 6, 23, .28), inset 0 1px rgba(255,255,255,.1);
}

@media (max-width: 620px) {
    .monitoring-automation-head { cursor: default; touch-action: auto; }
    .monitoring-automation-drag-handle { display: none; }
}

/* Automation v3: generic multi-value scopes + sequential preset approvals. */
.monitoring-automation-scope-values {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 3px;
}
.monitoring-automation-scope-values > span {
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 750;
}
.monitoring-automation-value-picker {
    position: relative;
    min-width: 0;
}
.monitoring-automation-value-trigger {
    display: flex;
    width: 100%;
    height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
    font: inherit;
    font-size: 9px;
    text-align: left;
    cursor: pointer;
}
.monitoring-automation-value-trigger span {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.monitoring-automation-value-trigger i {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 8px;
    transition: transform 150ms ease;
}
.monitoring-automation-value-picker.is-open .monitoring-automation-value-trigger {
    border-color: color-mix(in srgb, var(--primary-color) 58%, var(--border-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 9%, transparent);
}
.monitoring-automation-value-picker.is-open .monitoring-automation-value-trigger i { transform: rotate(180deg); }
.monitoring-automation-value-picker.is-disabled .monitoring-automation-value-trigger,
.monitoring-automation-value-trigger:disabled { opacity: .45; cursor: default; }
.monitoring-automation-value-menu {
    position: absolute;
    z-index: 8;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    min-width: 190px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow: 0 14px 34px rgba(2, 6, 23, .22);
}
.monitoring-automation-value-menu[hidden] { display: none; }
.monitoring-automation-value-search {
    display: flex !important;
    grid-template-columns: none !important;
    height: 31px;
    align-items: center;
    gap: 6px !important;
    margin: 6px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-muted);
    background: var(--bg-primary);
}
.monitoring-automation-value-search input {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.monitoring-automation-value-search i { font-size: 8px; }
.monitoring-automation-value-list {
    display: grid;
    max-height: 210px;
    overflow: auto;
    padding: 0 5px 5px;
}
.monitoring-automation-value-list > small {
    padding: 10px 7px;
    color: var(--text-muted);
    font-size: 8px;
    text-align: center;
}
.monitoring-automation-value-list label {
    display: grid !important;
    min-height: 27px;
    grid-template-columns: 15px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 6px !important;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.monitoring-automation-value-list label:hover { background: color-mix(in srgb, var(--text-secondary) 7%, transparent); }
.monitoring-automation-value-list label[hidden] { display: none !important; }
.monitoring-automation-value-list input {
    width: 13px !important;
    height: 13px !important;
    margin: 0;
    accent-color: var(--primary-color);
}
.monitoring-automation-value-list label > span {
    overflow: hidden;
    color: var(--text-primary) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.monitoring-automation-value-list label > small { color: var(--text-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.monitoring-automation-value-footer {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 6px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
}
.monitoring-automation-value-footer span { color: var(--text-muted); font-size: 8px; }
.monitoring-automation-value-footer button {
    height: 23px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    font: inherit;
    font-size: 8px;
    font-weight: 750;
    cursor: pointer;
}

.monitoring-automation-section-title > div {
    display: flex;
    align-items: center;
    gap: 5px;
}
.monitoring-automation-section-title > div small {
    color: var(--primary-color);
    font-size: 8px;
    font-weight: 750;
    text-transform: none;
}
.monitoring-automation-approval.is-queued {
    border-color: color-mix(in srgb, var(--primary-color) 26%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 3%, var(--bg-primary));
}
.monitoring-automation-approval.is-queued .monitoring-automation-approval-foot button,
.monitoring-automation-approval.is-busy .monitoring-automation-approval-foot button {
    min-width: 82px;
}

.monitoring-automation-preset {
    display: block;
    padding: 0;
    overflow: hidden;
}
.monitoring-automation-preset-main {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 6px 7px;
}
.monitoring-automation-preset-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 5px 6px 6px 9px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--primary-color) 3%, transparent);
}
.monitoring-automation-preset-confirm > span {
    overflow: hidden;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.monitoring-automation-preset-confirm > span i { margin-right: 4px; color: var(--primary-color); }
.monitoring-automation-preset-confirm button {
    min-width: 96px;
    height: 25px;
    flex: 0 0 auto;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--primary-color);
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}
.monitoring-automation-preset-confirm button:disabled {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-secondary) 9%, transparent);
    cursor: default;
}

/* Drag uses absolute local coordinates; keep the panel free from transition/animation transforms while grabbed. */
.monitoring-automation-panel.is-dragging {
    transition: none !important;
    transform: none !important;
}

@media (max-width: 620px) {
    .monitoring-automation-preset-confirm { align-items: stretch; flex-direction: column; }
    .monitoring-automation-preset-confirm button { width: 100%; }
}

/* ===== Rune recorder/composer geometry stability (2026-09-20) ===== */
.chat-input-container.is-recording-voice,
.chat-input-container.is-recording-video-note {
    min-height: 0;
}

.voice-recording-panel,
.video-note-recording-panel {
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--tb-chat-composer-width, 760px);
    transform-origin: bottom center;
}

.voice-recording-action,
.video-note-recording-action {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.voice-recording-action:active,
.video-note-recording-action:active {
    transform: scale(.94);
    transition-duration: 90ms;
}

@media (max-width: 768px) {
    .voice-recording-panel {
        padding-top: 0;
    }

    .video-note-recording-panel {
        gap: 10px;
        padding: 5px 0 7px;
    }

    .video-note-recording-preview {
        width: min(44vw, 174px);
        height: min(44vw, 174px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice-recording-action,
    .video-note-recording-action,
    .video-note-recording-preview {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ===== Rune monitoring sheet · desktop productivity pass (Apple HIG inspired) ===== */
.monitoring-data-workspace {
    --sheet-chrome-height: 24px;
    --sheet-row-height: 20px;
    --sheet-row-header-width: 40px;
    --sheet-control-fill: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    --sheet-hover: color-mix(in srgb, var(--primary-color) 7%, transparent);
    --sheet-selection: color-mix(in srgb, var(--primary-color) 14%, var(--bg-primary));
    --sheet-selection-strong: color-mix(in srgb, var(--primary-color) 80%, transparent);
}

.monitoring-data-tools {
    min-height: 48px;
    gap: 10px;
    padding: 6px 9px;
    background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.monitoring-data-tools-primary {
    display: flex;
    min-width: 220px;
    flex: 1 1 420px;
    align-items: center;
    gap: 8px;
}

.monitoring-data-search {
    min-width: 180px;
    max-width: 430px;
    height: 32px;
    flex: 1 1 320px;
    gap: 7px;
    padding: 0 10px;
    border-color: color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    box-shadow: inset 0 1px color-mix(in srgb, #fff 16%, transparent);
}

.monitoring-data-search:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 11%, transparent), inset 0 1px color-mix(in srgb, #fff 16%, transparent);
}

.monitoring-data-search input { font-size: 11px; }
.monitoring-data-count { font-size: 10px; font-weight: 700; }

.monitoring-data-status {
    display: inline-flex;
    min-height: 0;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-secondary) 7%, transparent);
    font-size: 9px;
    white-space: nowrap;
}
.monitoring-data-status.is-ready { color: color-mix(in srgb, #16a34a 84%, var(--text-primary)); background: color-mix(in srgb, #16a34a 9%, transparent); }
.monitoring-data-status.is-error { color: var(--danger-color); background: color-mix(in srgb, var(--danger-color) 9%, transparent); }

.monitoring-data-reset-compact {
    display: inline-flex;
    min-width: 0;
    height: 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 7px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.monitoring-data-reset-compact:hover {
    border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color));
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary));
}
.monitoring-data-reset-compact:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 48%, transparent);
    outline-offset: 2px;
}

.monitoring-data-actions {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.monitoring-data-action-group {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    border-radius: 9px;
    background: var(--sheet-control-fill);
    box-shadow: inset 0 1px color-mix(in srgb, #fff 11%, transparent);
}

.monitoring-data-action-group > button,
.monitoring-data-action-group > .monitoring-data-auto-refresh {
    min-width: 28px;
    height: 30px;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.monitoring-data-action-group > :last-child { border-right: 0; }
.monitoring-data-action-group > button { padding: 0 9px; font-size: 10px; }
.monitoring-data-action-group > button:hover,
.monitoring-data-action-group > .monitoring-data-auto-refresh:hover {
    color: var(--primary-color);
    background: var(--sheet-hover);
}
.monitoring-data-action-group.is-primary > button:first-child.is-active,
.monitoring-data-action-group.is-primary > button:first-child:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.monitoring-data-auto-refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    color: var(--text-muted);
    font-size: 10px;
}
.monitoring-data-auto-refresh select {
    height: 24px;
    max-width: 68px;
    padding: 0 3px;
    border: 0;
    outline: 0;
    color: var(--text-secondary);
    background: transparent;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.monitoring-data-filter-chips {
    display: flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    padding: 4px 9px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 66%, var(--bg-primary));
    scrollbar-width: none;
}
.monitoring-data-filter-chips[hidden] { display: none; }
.monitoring-data-filter-chips::-webkit-scrollbar { display: none; }
.monitoring-data-filter-chips-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--text-muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.monitoring-data-chip,
.monitoring-data-chip-clear-all {
    display: inline-flex;
    height: 25px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color));
    border-radius: 7px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}
.monitoring-data-chip:hover { border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary)); }
.monitoring-data-chip > span { color: var(--text-primary); font-weight: 750; }
.monitoring-data-chip > small { max-width: 165px; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.monitoring-data-chip > b { display: grid; width: 16px; height: 16px; place-items: center; margin-left: 2px; border-radius: 5px; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.monitoring-data-chip > b:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-secondary) 10%, transparent); }
.monitoring-data-chip.is-sort i { color: var(--primary-color); }
.monitoring-data-chip-clear-all { border-color: transparent; color: var(--primary-color); background: transparent; font-weight: 700; }
.monitoring-data-chip-clear-all:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }

.monitoring-data-formula-bar {
    display: flex;
    min-height: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.monitoring-data-address {
    width: 86px;
    height: 100%;
    flex: 0 0 86px;
    padding: 0 9px;
    border: 0;
    border-right: 1px solid var(--border-color);
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
}
.monitoring-data-address:focus { background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-secondary)); box-shadow: inset 0 -2px var(--primary-color); }
.monitoring-data-address.is-invalid { box-shadow: inset 0 -2px var(--danger-color); }
.monitoring-data-formula-symbol {
    display: grid;
    width: 34px;
    height: 100%;
    flex: 0 0 34px;
    place-items: center;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    font: italic 700 11px/1 Georgia, serif;
}
.monitoring-data-formula-value {
    min-width: 80px;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0 9px;
    color: var(--text-secondary);
    font: 500 10px/32px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.monitoring-data-formula-shortcuts {
    flex: 0 0 auto;
    padding: 0 9px;
    color: var(--text-muted);
    font-size: 8px;
    white-space: nowrap;
}
.monitoring-data-formula-shortcuts kbd {
    padding: 1px 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    font: inherit;
    font-weight: 750;
}

.monitoring-device-selection-bar {
    min-height: 35px;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-secondary));
}

.monitoring-data-selection-stats {
    min-height: 34px;
    height: 34px;
    gap: 11px;
    padding: 4px 9px;
    border-bottom-color: var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 72%, var(--bg-primary));
    font-size: 9px;
}
.monitoring-data-selection-stats strong { color: var(--text-secondary); }
.monitoring-data-selection-stats:not(.is-empty) strong { color: var(--primary-color); }
.monitoring-data-hotkey-hint { font-size: 8px; }
.monitoring-data-hotkey-hint kbd { padding: 1px 4px; }
.monitoring-data-selection-stats button { width: 23px; height: 23px; flex-basis: 23px; border-radius: 7px; }

.monitoring-data-grid-sorts,
.monitoring-data-grid-filters { display: none !important; }

.monitoring-data-grid-head {
    top: 0;
    z-index: 12;
    height: var(--sheet-chrome-height);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 94%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--bg-primary));
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 3px 9px color-mix(in srgb, #000 4%, transparent);
}

.monitoring-data-heading {
    height: var(--sheet-chrome-height);
    gap: 0;
    padding: 0 2px;
    background: transparent;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.monitoring-data-heading:active { cursor: grabbing; }
.monitoring-data-heading:hover { background: color-mix(in srgb, var(--text-secondary) 5%, transparent); }
.monitoring-data-heading.is-sorted,
.monitoring-data-heading.is-filtered { background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-secondary)); }
.monitoring-data-heading.is-column-selected { background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-secondary)); }

.monitoring-data-heading-label {
    display: flex;
    min-width: 0;
    height: 22px;
    flex: 1 1 auto;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: cell;
}
.monitoring-data-heading-label > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.monitoring-data-heading-label > i { flex: 0 0 auto; color: var(--primary-color); font-size: 8px; }
.monitoring-data-cell.is-ip.is-device-picked {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 46%, transparent);
}

.monitoring-data-heading-label:focus-visible,
.monitoring-data-row-number:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary-color) 70%, transparent); outline-offset: -2px; border-radius: 5px; }

/* Header interaction: click toggles ascending/descending sort; context-click / long-press opens filters. */
.monitoring-data-heading.is-filter-open {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-secondary));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary-color) 72%, transparent);
}
.monitoring-data-heading.is-long-pressing {
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-secondary));
}
.monitoring-data-heading b { right: -5px; width: 10px; }
.monitoring-data-heading b::after { top: 3px; right: 4px; height: 18px; opacity: .65; }

.monitoring-data-select-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 2px;
    padding: 0 5px;
    background: color-mix(in srgb, var(--bg-secondary) 98%, var(--bg-primary));
}
.monitoring-data-corner-mark { justify-self: center; color: var(--text-muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .7; }
.monitoring-data-select-head input,
.monitoring-data-select-cell input { width: 13px; height: 13px; margin: 0; accent-color: var(--primary-color); cursor: pointer; }

.monitoring-data-select-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 3px;
    align-items: center;
    padding: 0 5px;
    background: inherit;
}
.monitoring-data-row-number {
    display: block;
    min-width: 0;
    height: 19px;
    overflow: hidden;
    padding: 0 3px;
    border: 0;
    border-radius: 5px;
    color: var(--text-muted);
    background: transparent;
    font: 500 11px/19px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-align: right;
    text-overflow: ellipsis;
    cursor: cell;
}
.monitoring-data-row-number:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-secondary) 7%, transparent); }
.monitoring-data-row-checkbox-placeholder { width: 13px; height: 13px; }
.monitoring-data-row.is-row-cell-selected .monitoring-data-row-number { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, transparent); }

.monitoring-data-row {
    height: var(--sheet-row-height);
    border-bottom-color: color-mix(in srgb, var(--border-color) 55%, transparent);
}
.monitoring-data-row:nth-child(even) { background: color-mix(in srgb, var(--bg-secondary) 34%, var(--bg-primary)); }
.monitoring-data-row:hover { background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-primary)); }
.monitoring-data-row.is-device-selected { background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-primary)); }

.monitoring-data-cell {
    height: var(--sheet-row-height);
    padding: 0 2px;
    border-right-color: color-mix(in srgb, var(--border-color) 50%, transparent);
    font-size: 12px;
    font-weight: 400;
    line-height: 19px;
    cursor: cell;
}
.monitoring-data-cell.is-ip { font-weight: 600; }
.monitoring-data-cell.is-cell-selected {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 48%, transparent);
    background: var(--sheet-selection);
}
.monitoring-data-cell.is-cell-focus {
    position: relative;
    z-index: 2;
    box-shadow: inset 0 0 0 2px var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-primary));
}

.monitoring-data-grid-scroll {
    /* Keep Chromium's pixel-sized scrollbar rules active (non-auto standard
       properties override ::-webkit-scrollbar in current browser versions). */
    scrollbar-color: auto;
    scrollbar-width: auto;
}
.monitoring-data-grid-scroll::-webkit-scrollbar { width: 14px; height: 14px; }
.monitoring-data-grid-scroll::-webkit-scrollbar-track { background: var(--bg-secondary); }
.monitoring-data-grid-scroll::-webkit-scrollbar-corner { background: var(--bg-secondary); }
.monitoring-data-grid-scroll::-webkit-scrollbar-thumb { min-width: 48px; min-height: 48px; border: 2px solid var(--bg-secondary); border-radius: 8px; background: var(--text-muted); background-clip: padding-box; }
.monitoring-data-grid-scroll::-webkit-scrollbar-thumb:hover,
.monitoring-data-grid-scroll::-webkit-scrollbar-thumb:active { background: var(--text-secondary); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
    .monitoring-data-grid-scroll { scrollbar-color: var(--text-muted) var(--bg-secondary); }
}

.monitoring-data-context-menu {
    position: fixed;
    z-index: 10050;
    width: min(286px, calc(100vw - 16px));
    overflow: hidden;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: 12px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    box-shadow: 0 18px 46px rgba(2, 6, 23, .22), inset 0 1px rgba(255, 255, 255, .09);
    backdrop-filter: blur(20px) saturate(1.16);
    -webkit-backdrop-filter: blur(20px) saturate(1.16);
}
.monitoring-data-context-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 7px 7px; color: var(--text-primary); }
.monitoring-data-context-caption span { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-data-context-caption small { color: var(--text-muted); font-size: 8px; white-space: nowrap; }
.monitoring-data-context-menu button {
    display: grid;
    width: 100%;
    min-height: 30px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    color: var(--text-secondary);
    background: transparent;
    font: inherit;
    font-size: 10px;
    text-align: left;
    cursor: pointer;
}
.monitoring-data-context-menu button:hover { color: var(--text-primary); background: color-mix(in srgb, var(--primary-color) 9%, transparent); }
.monitoring-data-context-menu button:disabled { opacity: .38; cursor: default; }
.monitoring-data-context-menu button i { width: 18px; color: var(--text-muted); text-align: center; }
.monitoring-data-context-menu button:hover i { color: var(--primary-color); }
.monitoring-data-context-menu button kbd { padding: 1px 4px; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-muted); background: color-mix(in srgb, var(--bg-primary) 70%, transparent); font: inherit; font-size: 8px; }
.monitoring-data-context-separator { height: 1px; margin: 4px 5px; background: color-mix(in srgb, var(--border-color) 80%, transparent); }

@media (max-width: 1220px) {
    .monitoring-data-formula-shortcuts { display: none; }
    .monitoring-data-tools { gap: 6px; }
    .monitoring-data-action-group > button span { display: none; }
    .monitoring-data-action-group > button { padding-inline: 8px; }
}

@media (max-width: 820px) {
    .monitoring-data-tools { min-height: 44px; padding: 5px 7px; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .monitoring-data-tools-primary { min-width: 140px; }
    .monitoring-data-count, .monitoring-data-status { display: none; }
    .monitoring-data-reset-compact { width: 28px; padding: 0; }
    .monitoring-data-reset-compact span { display: none; }
    .monitoring-data-actions { gap: 4px; }
    .monitoring-data-action-group.is-primary { display: none; }
    .monitoring-data-formula-bar { display: none; }
    .monitoring-data-selection-stats { height: 34px; min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .monitoring-data-context-menu,
    .monitoring-data-chip,
    .monitoring-data-heading,
    .monitoring-data-row-number { transition: none !important; animation: none !important; }
}

@media (prefers-contrast: more) {
    .monitoring-data-action-group,
    .monitoring-data-search,
    .monitoring-data-context-menu { border-color: var(--text-secondary); }
    .monitoring-data-cell.is-cell-selected { box-shadow: inset 0 0 0 1px var(--primary-color); }
    .monitoring-data-cell.is-cell-focus { box-shadow: inset 0 0 0 2px var(--primary-color); }
}

/* Spreadsheet corner: select all cells without mixing it with device-action selection. */
.monitoring-data-corner-mark {
    min-width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    cursor: cell;
}
.monitoring-data-corner-mark:hover,
.monitoring-data-corner-mark:focus-visible {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    outline: none;
}

/* Excel workspace: device selection follows cell/IP selection; no row checkboxes. */
.monitoring-data-select-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.monitoring-data-select-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 6px 0 3px;
}

.monitoring-data-row-number {
    width: 100%;
    padding-inline: 4px;
}

.monitoring-data-row.is-device-selected {
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-primary));
}

.monitoring-data-row.is-device-selected .monitoring-data-select-cell {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--primary-color) 72%, transparent);
}

/* Compact monitoring tabs and Excel-density text, scoped to monitoring only. */
.monitoring-sites-list {
    min-height: 40px;
    gap: 3px;
    padding: 4px 6px;
}
.monitoring-site-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
}
.monitoring-site-copy { gap: 1px; }
.monitoring-site-copy strong { font-size: 12px; }
.monitoring-site-copy small { font-size: 10px; }
.monitoring-site-card.is-drop-before::before { left: -2px; }
.monitoring-site-card.is-drop-after::after { right: -2px; }
.monitoring-data-cell,
.monitoring-data-heading-label { font-family: "Segoe UI", Arial, sans-serif; }

/* Compact Interface tabs, CSV actions and weather cards. */
.monitoring-interface-tabs-row { gap: 4px; padding: 4px 6px; }
.monitoring-interface-tabs { gap: 3px; }
.monitoring-interface-tab-tools { gap: 3px; }
.monitoring-interface-tab,
.monitoring-interface-tool,
.monitoring-interface-close-all { height: 28px; gap: 4px; padding: 0 7px; border-radius: 7px; font-size: 12px; }
.monitoring-interface-tool { width: 28px; padding: 0; }
.monitoring-interface-close-all > i { display: none; }
.monitoring-csv-options { gap: 4px; }
.monitoring-csv-options button { min-height: 28px; gap: 4px; padding: 5px 8px; border-radius: 7px; font-size: 12px; }
.monitoring-csv-options button > i { display: none; }
.monitoring-weather-items { gap: 8px; padding: 8px; }
.monitoring-weather-workspace .monitoring-weather-items { width: min(740px, 100%); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.monitoring-weather-city { gap: 8px; padding: 10px; border-radius: 11px; }
.monitoring-weather-card-top { gap: 6px; }
.monitoring-weather-card-top strong { font-size: 15px; }
.monitoring-weather-card-top small { font-size: 11px; }
.monitoring-weather-card-top > b { font-size: 30px; }
.monitoring-weather-scene { gap: 8px; padding: 6px; border-radius: 9px; }
.monitoring-weather-icon { width: 56px; height: 48px; flex-basis: 56px; border-radius: 9px; }
.monitoring-weather-icon .weather-icon-group { transform: scale(.65); transform-origin: center; }
.monitoring-weather-condition strong { font-size: 14px; }
.monitoring-weather-condition small { font-size: 11px; }
.monitoring-weather-meta { gap: 4px; font-size: 11px; }
.monitoring-weather-meta em { padding: 4px 5px; gap: 4px; border-radius: 5px; }
.monitoring-weather-day-toggle { min-height: 28px; padding: 5px 8px; gap: 5px; border-radius: 7px; font-size: 12px; }
@media (max-width: 700px) {
    .monitoring-weather-workspace .monitoring-weather-items { grid-template-columns: 1fr; }
}

/* Expanded accent palette: compact swatches with names on hover/focus. */
.profile-setting-block:has(.accent-color-picker) {
    align-items: flex-start;
}
.accent-color-picker {
    width: min(100%, 430px);
    justify-content: flex-start;
}
.accent-swatch > span {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: calc(100% + 7px);
    width: max-content;
    max-width: 160px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .12s ease, transform .12s ease;
}
.accent-swatch:hover > span,
.accent-swatch:focus-visible > span {
    opacity: 1;
    transform: translate(-50%, 0);
}
.accent-swatch:focus-visible,
.accent-custom:focus-within {
    outline: 2px solid color-mix(in srgb, var(--swatch, var(--primary-color)) 56%, transparent);
    outline-offset: 2px;
}
@media (max-width: 760px) {
    .profile-setting-block:has(.accent-color-picker) { align-items: stretch; }
    .accent-color-picker { width: 100%; max-width: none; }
    .accent-swatch > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .accent-swatch > span { transition: none !important; }
}

/* Media controls keep their geometry while files buffer or enter fullscreen. */
.message-video-controls { padding: 4px 6px; border-radius: 12px; background: rgba(17,24,39,.88); }
.message-video-seek { min-width: 30px; width: 100%; flex: 1 1 70px; height: 32px; margin: 0; padding: 0; accent-color: #fff; cursor: pointer; }
.message-video-seek:disabled { cursor: wait; opacity: .5; }
.message-video-time { flex: 0 0 auto; color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.message-video-retry { position: absolute; z-index: 8; inset: 30% 8%; border: 1px solid #94a3b8; border-radius: 12px; padding: 10px; background: #111827; color: #fff; cursor: pointer; }
.message-video-retry[hidden] { display: none; }
.message-video :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.message-video-frame:fullscreen { width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0; background: #000; }
.message-video-frame:fullscreen .chat-video { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; }
.message-video-frame:fullscreen .message-video-controls { left: max(16px,env(safe-area-inset-left)); right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); }
@media (max-width: 768px) { .message-video-seek { min-height: 44px; } .message-video-control { min-width: 40px; min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .message-video-controls { transition: none; } }

.message > .message-content { position: relative; }
.tb-message-quick-trigger { display: none; }
.tb-quick-reaction-palette {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 44px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 24px;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #111827);
    box-shadow: 0 6px 22px rgb(0 0 0 / .18);
}
.tb-quick-reaction-palette button {
    display: grid;place-items: center;
    width: 34px;height: 34px;min-width: 34px;min-height: 34px;
    padding: 4px;border: 0;border-radius: 50%;
    background: transparent;color: inherit;cursor: pointer;
}
.tb-quick-reaction-palette button img { width: 25px;height: 25px;object-fit: contain;pointer-events: none; }
.tb-quick-reaction-window {display:flex;flex-direction:column;gap:2px;position:relative;overscroll-behavior:contain;}
.tb-quick-reaction-window[data-has-previous="true"]::before,
.tb-quick-reaction-window[data-has-next="true"]::after {content:'';position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--text-secondary);opacity:.45;pointer-events:none;}
.tb-quick-reaction-window[data-has-previous="true"]::before {top:0;}
.tb-quick-reaction-window[data-has-next="true"]::after {bottom:0;}
.tb-quick-reaction-palette button:hover,
.tb-quick-reaction-palette button[aria-pressed="true"] { background: var(--bg-hover, rgb(128 128 128 / .18)); }
.tb-quick-reaction-palette button:active { transform: scale(.92); }
.tb-message-quick-trigger:focus-visible,
.tb-quick-reaction-palette button:focus-visible { outline: 2px solid var(--primary-color, #2563eb);outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .tb-message-quick-trigger {
        position: absolute;right: -13px;bottom: -5px;z-index: 4;
        display: grid;place-items: center;width: 28px;height: 28px;padding: 3px;
        box-sizing: border-box;border: 0;border-radius: 50%;
        background: transparent;color: var(--text-primary, #111827);
        opacity: 0;pointer-events: none;cursor: pointer;
        transform: translateY(3px) scale(.8);
        transition: opacity 160ms ease, transform 160ms ease;
    }
    .tb-message-quick-trigger .tb-quick-trigger-emoji { width: 22px;height: 22px;object-fit: contain;pointer-events: none;font-size: 20px;line-height: 22px; }
    .message.own .tb-message-quick-trigger { right: auto;left: -13px; }
    .message-content:hover > .tb-message-quick-trigger,
    .message-content:focus-within > .tb-message-quick-trigger,
    .tb-message-quick-trigger[aria-expanded="true"] { opacity: 1;pointer-events: auto;transform: none; }
    .tb-message-quick-trigger:active { transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-message-quick-trigger { transition: none;transform: none; }
    .tb-message-quick-trigger:active { transform: none; }
    .tb-quick-reaction-palette button:active { transform: none; }
}