/* ============================================================
 * Ceiling AI — Custom styles (выходят за рамки Tailwind)
 * Загружается ПОСЛЕ tailwind.min.css
 *
 * Содержит:
 *  - Premium animations (skeleton, ripple, shimmer, etc.)
 *  - Сложные hover-эффекты
 *  - Кастомные keyframes
 *  - Accessibility
 * ============================================================ */

/* =================== Page transitions =================== */
.fade-in { animation: fadeIn 0.25s ease-out; }
.fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger child elements (apply to parent) */
.stagger > * { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger > *:nth-child(9)  { animation-delay: 0.45s; }
.stagger > *:nth-child(10) { animation-delay: 0.50s; }
.stagger > *:nth-child(n+11) { animation-delay: 0.55s; }

/* =================== Skeleton loader =================== */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
    display: block;
}
.skeleton-text { height: 12px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text.short { width: 60%; }
.skeleton-text.long  { width: 100%; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; }
.skeleton-card {
    height: 160px;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.04);
    padding: 1rem;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =================== Card hover (lift + glow) =================== */
.card-interactive {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
    will-change: transform;
}
.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(124, 92, 255, 0.15);
    border-color: rgba(124, 92, 255, 0.3);
}
.card-interactive:active {
    transform: translateY(-2px) scale(0.99);
}

.glass-hover { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.glass-hover:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(124, 92, 255, 0.3);
    transform: translateY(-1px);
}

/* =================== Image hover zoom =================== */
.img-zoom { overflow: hidden; }
.img-zoom img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.img-zoom:hover img { transform: scale(1.08); }

/* =================== Ripple effect (Material-like) =================== */
.btn { position: relative; overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transform: scale(0);
    animation: ripple-spread 0.6s ease-out;
}
@keyframes ripple-spread {
    to { transform: scale(4); opacity: 0; }
}

/* =================== Button press =================== */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(124, 92, 255, 0.4);
}

/* Icon hover in buttons */
.icon { transition: transform 0.2s ease; }
.btn:hover .icon { transform: scale(1.15); }
.btn-icon:hover .icon { transform: rotate(5deg) scale(1.1); }

/* =================== Animated gradient =================== */
.gradient-animated {
    background: linear-gradient(135deg, #7C5CFF, #22D3EE, #7C5CFF);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* =================== Pulse animations =================== */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22D3EE;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

.pulse { animation: pulseAnim 2s ease-in-out infinite; }
@keyframes pulseAnim {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.03); }
}

/* =================== Bounce =================== */
.bounce { animation: bounce 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-12px); }
    60%  { transform: translateY(0); }
    80%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* =================== Shimmer (CTA) =================== */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer-sweep 3s infinite;
    pointer-events: none;
}
@keyframes shimmer-sweep { 100% { left: 200%; } }

/* =================== Progress bar animated stripes =================== */
.progress-bar-animated {
    background-image:
        linear-gradient(90deg, #7C5CFF, #22D3EE),
        linear-gradient(45deg,
            rgba(255,255,255,0.15) 25%, transparent 25%,
            transparent 50%, rgba(255,255,255,0.15) 50%,
            rgba(255,255,255,0.15) 75%, transparent 75%);
    background-size: 100% 100%, 1rem 1rem;
    animation: progress-stripes 0.6s linear infinite;
}
@keyframes progress-stripes {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 1rem 0; }
}

/* =================== Live dot =================== */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F43F5E;
    position: relative;
}
.live-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #F43F5E;
    opacity: 0.4;
    animation: live-ping 1.5s ease-out infinite;
}
@keyframes live-ping {
    0%   { transform: scale(0.8); opacity: 0.4; }
    100% { transform: scale(2);   opacity: 0; }
}

/* =================== Voice button recording state =================== */
.btn-voice.recording {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border-color: rgba(239, 68, 68, 0.5);
    animation: voice-glow 1.5s ease-in-out infinite;
}

/* push-to-talk на мобильном: нет text-select и context-menu.
   v8.1 (v2.10): touch-action none → manipulation — кнопки микрофона лежат
   в горизонтальной карусели .action-bar; при touch-action:none свайп,
   начатый на кнопке, не скроллил карусель и запускал запись.
   manipulation разрешает пан/скролл, но сохраняет запрет двойного тап-зума. */
.btn-voice,
.btn-voice-target {
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
}


@keyframes voice-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.voice-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F43F5E;
    animation: voice-bounce 1s ease-in-out infinite;
}
@keyframes voice-bounce {
    0%, 100% { transform: scale(0.8); }
    50%      { transform: scale(1.2); }
}
.voice-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    background: rgba(34, 211, 238, 0.1);
    color: #22D3EE;
    border: 1px solid rgba(34, 211, 238, 0.2);
}

/* =================== Slide-in animations =================== */
.slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.slide-in-left { animation: slideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.scale-in { animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes scaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* =================== Drawer =================== */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 26, 0.7);
    backdrop-filter: blur(4px);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 280px;
    background: #1A2030;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 46;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 1rem;
}
.drawer-left { left: 0; transform: translateX(-100%); }
.drawer-left.open { transform: translateX(0); }
.drawer-right { right: 0; transform: translateX(100%); }
.drawer-right.open { transform: translateX(0); }

/* =================== Modal =================== */
/* z-index 50 — ниже, чем у .dt-overlay (10000). DrawingTool открывается ИЗ формы
   создания комнаты (в #modal) и должен перекрывать её. Confirm-диалоги внутри
   DrawingTool рисуются в его собственном слое .dt-modal (внутри .dt-overlay),
   поэтому конфликта z-index нет. */
#modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(11, 15, 26, 0.8);
    backdrop-filter: blur(4px);
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#modal.hidden {
    display: none !important;
}
.modal-card {
    background: #1A2030;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 540px;
    width: 100%;
    margin: auto;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
    .modal-card { padding: 1.5rem; max-width: 600px; }
}
.modal-card.modal-lg { max-width: 800px; }
.modal-card.modal-xl { max-width: 1000px; }

/* =================== Modal — mobile fullscreen =================== */
/* На узких экранах модалка разворачивается во весь экран:
   убираем padding/scaling, карточка занимает 100% viewport.
   Контент модалок с длинным текстом прокручивается внутри.
   Кнопки в confirm-диалоге растягиваются на всю ширину — удобнее тапать. */
@media (max-width: 768px) {
    #modal {
        padding: 0;
        background: rgba(11, 15, 26, 0.96);
        backdrop-filter: blur(8px);
        align-items: stretch;
        justify-content: stretch;
    }
    .modal-card {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        border: none;
        padding: 1.25rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        animation: fadeIn 0.2s ease-out;
    }
    /* Если внутри есть .flex.items-start (как в confirm-диалоге с иконкой) —
       центрируем по вертикали, чтобы короткое окно подтверждения было посередине. */
    .modal-card:has(.flex.items-start.gap-3.mb-4):not(:has(.modal-section, .grid)) {
        justify-content: center;
    }
    /* Кнопки диалога — растянутые, крупные, по 48px высоты (Apple HIG min tappable).
       column-reverse ставит основную (confirm) кнопку ВНИЗУ — большой палец естественнее
       достаёт до неё, чем до верхней cancel. */
    .modal-card .flex.gap-2.justify-end {
        flex-direction: column-reverse;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }
    .modal-card .flex.gap-2.justify-end > .btn {
        width: 100%;
        min-height: 48px;
        font-size: 14px;
        justify-content: center;
    }
}

/* =================== Toast =================== */
#toast {
    position: fixed;
    bottom: calc(64px + 1rem);
    right: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
}
@media (min-width: 768px) {
    #toast { bottom: 1.5rem; right: 1.5rem; max-width: 360px; }
}
.toast {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #E2E8F0;
    font-size: 0.875rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: toast-in 0.25s ease-out;
    touch-action: pan-y;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.accordion-content {
    padding: 6px;
}

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

@media (hover: none) {
    [data-tooltip]::after {
        display: none;
    }
}

.toast-success { border-left: 3px solid #22C55E; }
.toast-error   { border-left: 3px solid #EF4444; }
.toast-info    { border-left: 3px solid #22D3EE; }
.toast.swiping { transition: none; }

/* =================== Tooltip =================== */
[data-tooltip] { position: relative;overflow: inherit; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #1A2030;
    color: #E2E8F0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
[data-tooltip]:hover::after { opacity: 1; }
[data-tooltip]:active::after { opacity: 1; }

/* =================== Loading overlay =================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 26, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}
/* When .hidden is added, override display:flex from above */
.loading-overlay.hidden {
    display: none !important;
}

/* =================== Dropzone =================== */
.dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
}
.dropzone:hover, .dropzone.dragover {
    transform: scale(1.02);
    border-color: #7C5CFF !important;
    background: rgba(124, 92, 255, 0.12) !important;
}

/* =================== Refresh icon rotation =================== */
.refresh-icon { transition: transform 0.4s ease; }
.refresh-icon:hover { transform: rotate(180deg); }

/* =================== Number flash =================== */
.flash-once { animation: flashOnce 0.6s ease-out; }
@keyframes flashOnce {
    0%   { background-color: rgba(124, 92, 255, 0.3); }
    100% { background-color: transparent; }
}

/* =================== Empty state pulse =================== */
.empty svg { animation: emptyPulse 3s ease-in-out infinite; }
@keyframes emptyPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.05); }
}

/* =================== Loading dots =================== */
.loading-dots::after {
    content: '';
    animation: dots 1.4s infinite;
}
@keyframes dots {
    0%, 20%  { content: ''; }
    40%      { content: '.'; }
    60%      { content: '..'; }
    80%, 100%{ content: '...'; }
}

/* =================== Image lazy load =================== */
img.lazy-load {
    opacity: 0;
    /* transition: opacity 0.4s ease; */
}
img.lazy-load.loaded { opacity: 1; }

.accordion-item .chevron {transition: transform 0.3s ease;}
.accordion-item.open .chevron {transform: rotate(180deg);}
/* =================== Counter =================== */
.counter { display: inline-block; transition: opacity 0.3s; }

/* =================== Icon sizes =================== */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 32px; height: 32px; }

/* =================== Hide utilities =================== */
.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: initial; } }
.hidden-desktop { display: initial; }
@media (min-width: 1024px) { .hidden-desktop { display: none; } }

/* =================== Number input cleanup =================== */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* =================== Misc text utilities =================== */
.font-mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }
.text-muted { color: #94A3B8; }
.text-accent { color: #A385FF; }
.text-success { color: #86EFAC; }
.text-danger { color: #FCA5A5; }
.text-warning { color: #FCD34D; }

/* Safe area for iOS notch */
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* =================== Accessibility =================== */
@media (prefers-reduced-motion: reduce) {
    .fade-in, .fade-in-up, .stagger > *, .bounce, .pulse, .pulse-dot,
    .shimmer::after, .gradient-animated, .scale-in, .slide-in-right, .slide-in-left,
    .live-dot::before, .progress-bar-animated {
        animation: none !important;
    }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.my-scrol::-webkit-scrollbar
 {
    height: 8px;
    width: 4px;
}

.toolbar {
    padding-right: .75rem;
    padding-left: 0.8rem;
}


.bg-ink-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(8 11 20);
}

.min-w-\[140px\] {
    min-width: 200px;
}
.h-44 {
    height: 19rem; /* 176 пикселей */
}

/* ============================================================
   Coordinate grid toggle switch (show/hide X/Y axes on room drawing)
   ============================================================ */
.grid-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.grid-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #94a3b8;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.grid-toggle:checked {
    background: rgba(34, 211, 238, 0.3);
    border-color: rgba(34, 211, 238, 0.5);
}
.grid-toggle:checked::before {
    transform: translateX(14px);
    background: #22D3EE;
}
.grid-toggle:hover {
    border-color: rgba(34, 211, 238, 0.4);
}

/* ============================================================
   Fullscreen drawing overlay — для детального просмотра чертежа
   ============================================================ */
.drawing-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 15, 26, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    transition: background 0.2s, backdrop-filter 0.2s;
}
.drawing-fullscreen-overlay.is-visible {
    background: rgba(10, 15, 26, 0.95);
    backdrop-filter: blur(8px);
}
.drawing-fullscreen-container {
    background: #0B0F1A;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    transform: scale(0.98);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
}
.drawing-fullscreen-overlay.is-visible .drawing-fullscreen-container {
    transform: scale(1);
    opacity: 1;
}
.drawing-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.drawing-fullscreen-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.drawing-fullscreen-close:hover {
    background: rgba(176, 57, 47, 0.15);
    border-color: rgba(176, 57, 47, 0.4);
    color: #ef4444;
}
.drawing-fullscreen-body {
    flex: 1;
    overflow: hidden;
    padding: 16px;
    min-height: 0;
    position: relative;
    background: rgba(15, 23, 42, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawing-fullscreen-body svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}
.drawing-fullscreen-footer {
    padding: 8px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    flex-shrink: 0;
}

/* Поворот вида: иконка превьюшит направление при наведении */
.tri-rot .icon {
    transition: transform .25s cubic-bezier(.34,1.56,.64,1); /* лёгкий «пружинный» доворот */
    transform-box: fill-box;     /* чтобы вращалась вокруг своего центра, а не угла SVG */
    transform-origin: center;
}
.tri-rot[data-rot="90"]:hover  .icon { transform: rotate(90deg);  }
.tri-rot[data-rot="-90"]:hover .icon { transform: rotate(-90deg); }

/* ============================================================
   Drawing Tool — visual triangulation editor
   ============================================================ */
.dt-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10, 15, 26, 0);
  backdrop-filter: blur(0px);
  display: flex; flex-direction: column;
  transition: background 0.2s, backdrop-filter 0.2s;
}
.dt-overlay.is-visible { background: rgba(10, 15, 26, 0.96); backdrop-filter: blur(8px); }

.dt-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.dt-header-left { display: flex; align-items: center; gap: 12px; }

/* Mobile-only hamburger toggle — hidden on desktop */
.dt-sidebar-toggle {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: #94A3B8;
  cursor: pointer; transition: all 0.15s;
}
.dt-sidebar-toggle:hover { color: #E2E8F0; border-color: rgba(124,92,255,0.3); }
.dt-sidebar-toggle.is-active {
  background: rgba(124,92,255,0.15); border-color: rgba(124,92,255,0.5);
  color: #A385FF;
}

.dt-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 20px; border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

/* Mode buttons carousel — on desktop behaves like inline-flex wrap,
   on mobile becomes horizontally scrollable strip without wrapping. */
.dt-toolbar-modes {
  display: contents;
}
@media (max-width: 768px) {
  .dt-toolbar {
    flex-wrap: nowrap;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,92,255,0.4) transparent;
  }
  .dt-toolbar::-webkit-scrollbar { height: 4px; }
  .dt-toolbar::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.4); border-radius: 2px; }
  .dt-toolbar-modes {
    display: flex; flex: 1 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
  }
  /* Compact mode buttons on mobile — icon-only with labels hidden */
  .dt-mode-btn { flex-shrink: 0; }
  .dt-mode-btn .dt-btn-label { display: none; }
  /* But keep labels for primary mode buttons (those inside .dt-toolbar-modes) */
  .dt-toolbar-modes .dt-mode-btn .dt-btn-label { display: inline; }
}

.dt-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: #94A3B8; font-size: 12px;
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}

#dtAlignBtn, #dtGridBtn {
    display: none;
}

.dt-mode-btn:hover { color: #E2E8F0; border-color: rgba(124,92,255,0.3); }
.dt-mode-btn.active {
  background: rgba(124,92,255,0.15); border-color: rgba(124,92,255,0.5);
  color: #A385FF; font-weight: 600;
}

/* Clear-all danger button — leftmost, red-tinted */
.dt-clear-btn {
  border-color: rgba(239,68,68,0.25) !important;
  color: #F87171 !important;
}
.dt-clear-btn:hover {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.5) !important;
  color: #FCA5A5 !important;
}

/* Snap toggle — distinct cyan-tinted when active */
.dt-snap-btn.active {
  background: rgba(34,211,238,0.15) !important;
  border-color: rgba(34,211,238,0.5) !important;
  color: #22D3EE !important;
  font-weight: 600;
}

.dt-body { flex: 1; display: flex; min-height: 0; }

.dt-canvas-wrap {
  flex: 1; position: relative; overflow: hidden;
  /* По умолчанию — фоновые «декоративные» квадратики 50×50px в экранных
     координатах. Они служат визуальной опорой при свободном рисовании
     (snap выключен). Когда включается snap — класс .no-css-grid прячет
     этот фон, чтобы не накладывался поверх SVG-сетки мировых координат. */
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 50px 50px,
    #0B0F1A;
}
/* Snap включён → гасим CSS-фон, остаётся только SVG-сетка (мировые координаты). */
.dt-canvas-wrap.no-css-grid {
  background: #0B0F1A;
}
.dt-canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.dt-canvas[data-mode="move"]    { cursor: grab; }
.dt-canvas[data-mode="move"].dragging { cursor: grabbing; }
.dt-canvas[data-mode="delete"]  { cursor: not-allowed; }
.dt-canvas[data-mode="measure"] { cursor: text; }
/* Snap-mode — cursor показывает что клик привяжется к сетке */
.dt-canvas.is-snap[data-mode="add"]    { cursor: cell; }
.dt-canvas.is-snap[data-mode="move"]   { cursor: cell; }
.dt-canvas.is-snap[data-mode="delete"] { cursor: cell; }

.dt-sidebar {
  width: 280px; flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.05);
  background: rgba(15,23,42,0.4);
  padding: 12px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}

.dt-results {
  padding: 10px; border-radius: 8px;
  background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.2);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #94A3B8;
  text-align: center;
}
.dt-results.ok    { background: rgba(34,197,94,0.08);  border-color: rgba(34,197,94,0.25); color: #4ADE80; }
.dt-results.err   { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.25); color: #F87171; }

.dt-vertex        { fill: #7C5CFF; stroke: #A385FF; stroke-width: 1.5; cursor: pointer; }
.dt-vertex:hover  { fill: #A385FF; }
.dt-vertex.selected { fill: #22D3EE; stroke: #22D3EE; }
/* v8.7.28: font-size убран — размер задаёт атрибут в drawing-tool.js (fsV, на телефоне x1.45); CSS перебивал атрибут, из-за чего на мобильном подписи были 14px */
.dt-vertex-label  { fill: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; pointer-events: none; }

.dt-seg-wall      { stroke: #7C5CFF; stroke-width: 2.5; }
.dt-seg-diagonal  { stroke: #22D3EE; stroke-width: 1.5; stroke-dasharray: 6 4; }
.dt-seg-pending   { stroke: #F59E0B; stroke-width: 2; stroke-dasharray: 8 4; animation: dt-pulse 1.5s ease-in-out infinite; }
/* v8.7.28: font-size убран — размер задаёт атрибут в drawing-tool.js (fsL, на телефоне x1.45); CSS перебивал атрибут, из-за чего на мобильном цифры были 11px */
.dt-seg-label     { fill: #A385FF; font-family: 'JetBrains Mono', monospace; font-weight: 600; pointer-events: none; }
.dt-seg-hit       { stroke: transparent; stroke-width: 12; cursor: pointer; }

.dt-segment-input {
  position: absolute; transform: translate(-50%, -50%);
  width: 70px; padding: 4px 6px;
  background: #1A2030; border: 1px solid #7C5CFF; border-radius: 6px;
  color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px;
  text-align: center; z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.dt-segment-input:focus { outline: none; border-color: #22D3EE; }

.dt-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* Показываем гамбургер в шапке только на мобильных */
  .dt-sidebar-toggle { display: inline-flex; }

  /* Body — canvas растягивается, sidebar уходит вниз как collapsible panel */
  .dt-body { flex-direction: column; }

  .dt-sidebar {
    width: 100%;
    max-height: 45vh;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.05);
    /* По умолчанию свёрнут — пользователь открывает гамбургером когда нужно */
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    background: rgba(15,23,42,0.98);
    backdrop-filter: blur(8px);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
    border-radius: 12px 12px 0 0;
    padding: 16px 12px 20px;
  }
  .dt-sidebar:not(.is-collapsed) {
    transform: translateY(0);
  }
  /* Когда сайдбар открыт — добавляем верхний «grabber» для визуального фидбека */
  .dt-sidebar::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    margin: -8px auto 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
  }
  /* .dt-sidebar.is-collapsed — дублирующее правило не нужно: стартовый transform
     уже translateY(100%), а .is-collapsed лишь форсирует то же значение. */

  /* Canvas на мобильном занимает всё свободное место */
  .dt-canvas-wrap { flex: 1; min-height: 50vh; }

  /* Footer hint — короче на мобильном */
  .dt-footer { padding: 6px 12px; font-size: 10px; }
}

@keyframes dt-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ============================================================
   DrawingTool — собственный модальный диалог (внутри .dt-overlay)
   НЕ использует глобальный #modal, чтобы не конфликтовать с z-index
   формы создания комнаты (которая открыта ПОД DrawingTool).
   ============================================================ */
.dt-modal {
  position: absolute;
  inset: 0;
  z-index: 100;            /* выше, чем canvas/sidebar внутри .dt-overlay */
  background: rgba(11, 15, 26, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out;
}
.dt-modal-card {
  background: #1A2030;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dt-modal-card .dt-modal-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dt-modal-card .dt-modal-title {
  font-family: 'Inter', 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 1.125rem; line-height: 1.4;
  color: #E2E8F0; margin-bottom: 0.25rem;
}
.dt-modal-card .dt-modal-message {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem; line-height: 1.5;
  color: #94A3B8;
}
.dt-modal-card .dt-modal-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-top: 1.25rem;
}
/* Мобильная версия — кнопки стопкой, как в #modal */
@media (max-width: 768px) {
  .dt-modal {
    padding: 0;
    background: rgba(11, 15, 26, 0.96);
    backdrop-filter: blur(8px);
    align-items: stretch;
    justify-content: stretch;
  }
  .dt-modal-card {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    border: none;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
  .dt-modal-card .dt-modal-actions {
    flex-direction: column-reverse;
    margin-top: 1.5rem;
  }
  .dt-modal-card .dt-modal-actions > .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 14px;
  }
}

/* ============================================================
   DrawingTool — нижний блок сайдбара + чекбокс «как нарисовано»
   Полностью кастомно, НЕ зависит от tailwind-сборки.
   ============================================================ */
.dt-sidebar-bottom{
  display:flex; flex-direction:column; gap:10px; width:100%;
}
.dt-force-toggle{
  display:flex; align-items:flex-start; gap:8px;
  width:100%; box-sizing:border-box;
  padding:9px 10px; border-radius:10px;
  border:1px solid rgba(251,191,36,.35);
  background:rgba(251,191,36,.06);
  cursor:pointer; -webkit-user-select:none; user-select:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dt-force-toggle:hover{
  background:rgba(251,191,36,.12);
  border-color:rgba(251,191,36,.55);
  box-shadow:0 0 0 1px rgba(251,191,36,.15);
}
.dt-force-toggle-box{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin:1px 0 0; flex:0 0 auto;
  border:1px solid rgba(251,191,36,.6); border-radius:4px;
  background:rgba(0,0,0,.25); cursor:pointer; position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.dt-force-toggle-box:hover{ border-color:#FBBF24; }
.dt-force-toggle-box:checked{ background:#FBBF24; border-color:#FBBF24; }
.dt-force-toggle-box:checked::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #1A2030; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.dt-force-toggle-box:focus-visible{ outline:2px solid rgba(251,191,36,.6); outline-offset:2px; }
.dt-force-toggle-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dt-force-toggle-title{ font-size:11px; font-weight:600; line-height:1.25; color:#FDE68A; }
.dt-force-toggle-sub{ font-size:10px; line-height:1.3; color:rgba(253,230,138,.6); }
.dt-sidebar-actions{ display:flex; gap:8px; width:100%; }
.dt-sidebar-btn{ flex:1 1 0; min-width:0; }
.dt-results.warn{ background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); color:#FCD34D; }
.dt-results-note{ display:block; font-size:10px; line-height:1.3; margin-top:4px; opacity:.85; }

/* ============================================================
   Чекбоксы в фирменном стиле: глушим синий focus/hover tailwind
   (preflight ставит appearance:none → accent-color мёртв;
   :focus даёт border #2563eb; :checked:hover даёт currentColor)
   ============================================================ */

/* ---------- Карточка замера: «Активна» и «Режим редактирования» ---------- */
.room-active-toggle,
.room-edit-toggle {
  -webkit-appearance: none; appearance: none;
  background-color: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .25rem;
  cursor: pointer; flex-shrink: 0;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.room-active-toggle:hover, .room-edit-toggle:hover { border-color: #A385FF; }

.room-active-toggle:checked,
.room-active-toggle:checked:hover,
.room-active-toggle:checked:focus,
.room-active-toggle:checked:focus-visible,
.room-edit-toggle:checked,
.room-edit-toggle:checked:hover,
.room-edit-toggle:checked:focus,
.room-edit-toggle:checked:focus-visible {
  background-color: #7C5CFF;               /* акцент, а не currentColor */
  border-color: #7C5CFF;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  background-position: 50%; background-repeat: no-repeat; background-size: 100% 100%;
}
.room-active-toggle:focus, .room-active-toggle:focus-visible,
.room-edit-toggle:focus, .room-edit-toggle:focus-visible {
  border-color: #A385FF;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  outline: 2px solid rgba(163,133,255,.4);
  outline-offset: 2px;
}

/* ---------- Редактор: «Применить как нарисовано» (янтарная) ---------- */
.dt-force-toggle-box:focus, .dt-force-toggle-box:focus-visible {
  border-color: #FBBF24;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  outline: 2px solid rgba(251,191,36,.45);
  outline-offset: 2px;
}
.dt-force-toggle-box:checked:hover, .dt-force-toggle-box:checked:focus,
.dt-force-toggle-box:checked:focus-visible {
  background-color: #FBBF24;               /* не даём currentColor сменить янтарь */
  border-color: #FBBF24;
}

/* ---------- Тумблеры «Сетка» (grid-toggle) — та же болезнь ---------- */
.grid-toggle:focus, .grid-toggle:focus-visible {
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  outline: 2px solid rgba(34,211,238,.4);
  outline-offset: 2px;
}
.grid-toggle:checked:hover, .grid-toggle:checked:focus {
  background: rgba(34,211,238,.3);
  border-color: rgba(34,211,238,.5);
}
/* ============================================================
DrawingTool — попап режима «Угол» (.dt-angle-input)
Правки под уже собранный tailwind:
• утилиты w-[70px] в билде нет — добавляем;
• .min-w-[140px] в app.css расширен до 200px — в узком попапе
  это распирает CustomSelect и сжимает числовое поле в полоску;
• .bg-ink-100 в app.css почти чёрный — поля сливаются с фоном,
  добавляем локальную подсветку карточки и инпутов.
============================================================ */
.w-\[70px\] { width: 70px; }


.dt-angle-input .input {
    min-width: 0;                          /* глушим 200px у триггера CustomSelect */
    background: rgba(255,255,255,.06);     /* поля видны на тёмном фоне */
}
.dt-angle-input input[type="number"] {
    width: 70px;
    flex: 0 0 70px;                        /* не сжимается и не растягивается */
    text-align: center;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
.dt-angle-input .dt-angle-card {
    background: #161d31;                   /* чуть светлее фона холста */
}

#modal .min-w-\[140px\],
#modal button.min-w-\[140px\],
#modal .min-w-\[100px\],
#modal .min-w-\[100px\] button {
    min-width: 0 !important;
}

/* DrawingTool — блокировка инструментов, пока показано решение */
.dt-toolbar .dt-mode-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.dt-sidebar-actions { flex-wrap: wrap; }
.dt-sidebar-actions #dtResetBtn { flex: 1 1 100%; }

/* ========== Иконка чертежа в шапке комнаты ========== */
.btn-drawing {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px; border: 1px solid rgba(34,211,238,.35);
    background: rgba(34,211,238,.08); color: #22D3EE;
    cursor: pointer; transition: all .15s ease;
        padding: 0; line-height: 0;
}
/* ========== btn-drawing: центровка SVG внутри квадрата ========== */

.btn-drawing > span {
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 0;
}
.btn-drawing .icon { display: block; }   /* убираем baseline--gap у inline-block svg */
.btn-drawing:hover  { background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.55); transform: translateY(-1px); }
.btn-drawing:active { transform: scale(.96); }
.btn-drawing.is-disabled { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: #475569; cursor: default; }
@media (max-width: 640px) { .btn-drawing { width: 28px; height: 28px; } }

/* Белый «лист» под PDF-версию SVG на тёмном фоне */
.drawing-paper { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 12px; overflow: hidden; }

/* ========== Красивый чертёж в попапе (иконка в шапке комнаты) ========== */
.drawing-fullscreen-body.pp {
    background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 50px 50px,
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 50px 50px,
        rgba(15,23,42,.5);
}
.pp-svg  { font-family: 'JetBrains Mono', monospace; }
.pp-wall { stroke: #7C5CFF; stroke-width: 2.5; stroke-linecap: round; }
.pp-chip rect { fill: rgba(11,15,26,.8); stroke: rgba(124,92,255,.35); stroke-width: 1; }
.pp-chip text { fill: #C4B5FD; font-weight: 600; }
.pp-diag { stroke: #22D3EE; stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .7; }
.pp-diag-label { fill: rgba(34,211,238,.85); }
.pp-vert-halo { fill: rgba(124,92,255,.22); }
.pp-vert { fill: #A385FF; stroke: #7C5CFF; stroke-width: 1.5; }
.pp-letter { fill: #fff; font-weight: 700; paint-order: stroke; stroke: rgba(11,15,26,.9); stroke-width: 3px; }

/* ============================================================
Блокировка фоновой прокрутки, пока открыт оверлей (попап чертежа / редактор).
Убирает боковой скроллбар страницы, просвечивающий сквозь оверлей.
============================================================ */
html.scroll-locked,
html.scroll-locked body {
    overflow: hidden !important;
}
/* ========== Тумблер голоса «дописывать» ========== */
.voice-append-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; -webkit-user-select: none; user-select: none; flex-shrink: 0;
}
.voice-append-label { font-size: 11px; color: #94A3B8; transition: color .15s ease; }
.voice-append-toggle input:checked ~ .voice-append-label { color: #22D3EE; }

/* ========== Тултипы: перенос строк вместо одной строки ========== */
[data-tooltip]::after {
    white-space: normal;      /* было nowrap — разрешаем перенос */
    width: max-content;
    max-width: 240px;         /* длинные подсказки уходят в 2–3 строки */
    line-height: 1.45;
    text-align: center;
}
/* Тумблер «дописывать» сидит у правого края модалки — центрированный пузырь
   вылезает за границу и даёт горизонтальный скролл.
   выравниваем пузырь по правому краю элемента, растёт влево. */
.voice-append-toggle[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);   /* убираем translateX(-50%) */
    text-align: left;
}

/* ========== Модалки на мобильном: селект не распирает сетку ========== */
@media (max-width: 640px) {
    /* глушим фиксированные min-width у CustomSelect внутри модалок —
       иначе триггер 174–200px сжимает/рвёт grid-колонки на узком экране */
    #modal .min-w-\[140px\],
    #modal button.min-w-\[140px\],
    #modal .min-w-\[100px\],
    #modal .min-w-\[100px\] button { min-width: 0 !important; }
    /* дропдаун не шире экрана */
    #modal .cs-dropdown { max-width: calc(100vw - 2.5rem); }
}
/* ========== CustomSelect: раскрытие вверх, когда снизу нет места ========== */
.cs-drop-up {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 4px;
}

/* ============================================================
Profile — карточка провайдера: мобильная адаптивность
• длинная модель переносится по любым символам (в tailwind-сборке
  нет break-words / break-all);
• на <640px кнопки «Сбросить/Сохранить» растягиваются на всю ширину.
============================================================ */
.provider-footer code { overflow-wrap: anywhere; }
@media (max-width: 639px) {
    .provider-actions { width: 100%; }
    .provider-actions .btn { flex: 1 1 0; }
}

/* ============================================================
Grants-модалка («Доступ к общему ключу»): мобильная раскладка
На <640px заметка и кнопка «Добавить» получают полную ширину —
иначе заметка сжимается до «Заметка (необ…» рядом с кнопкой.
Контейнер уже flex-wrap, поэтому flex-basis:100% переносит
каждый элемент на свою строку.
============================================================ */
@media (max-width: 640px) {
    #grantNote {
        flex: 1 1 100%;
        width: 100%;
    }
    #addGrantBtn {
        flex: 1 1 100%;
        min-height: 48px;   /* как у кнопок confirm-диалогов на мобильном */
    }
}

/* ============================================================
UI.prompt — модальный ввод вместо нативного prompt()
Слой поверх #modal (z-index 50), ниже тостов (z-index 100).
На мобильном карточка наследует fullscreen-поведение .modal-card.
============================================================ */
.ui-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(11, 15, 26, 0.7);
    backdrop-filter: blur(6px);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}
@media (min-width: 769px) {
    .ui-prompt-card { max-width: 440px; }
}
.ui-prompt-card .input { background: rgba(255, 255, 255, .06); }
@keyframes uiPromptShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
.ui-prompt-shake { animation: uiPromptShake .18s ease-in-out 2; }



/* ============================================================
v7.12: кнопка-переключатель «по умолчанию» на карточке прайс-листа
Кликабельный бейдж: «по умолчанию» (зелёный) ↔ «по умолчанию?» (серый)
============================================================ */
.default-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: #94A3B8;
}
.default-toggle:hover {
    background: rgba(124,92,255,0.08);
    border-color: rgba(124,92,255,0.35);
    color: #C4B5FD;
    transform: translateY(-1px);
}
.default-toggle:active { transform: scale(0.97); }
.default-toggle.is-default {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.35);
    color: #86EFAC;
}
.default-toggle.is-default:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.35);
    color: #FCA5A5;
}
.default-toggle.is-default:hover::after {
    content: ' (снять?)';
    font-size: 0.6rem;
    opacity: 0.7;
}

/* Селектор категорий в «Новой позиции» — перенос длинных названий */
#catWrapperAdd .cs-dropdown li span {
    white-space: normal;
    overflow-wrap: break-word;
}
.-mt-1 { margin-top: -0.25rem; }

/* ============================================================
   v8.2 — модалка правила словаря: блок SKU + тултипы
   ============================================================ */

/* Крестик «отвязать SKU»: строго по центру селекта, квадратная зона тапа */
#drSkuClear {
    align-self: center;          /* центрируем по высоте ряда (перебивает items-end) */
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;                  /* глушим padding от btn-sm */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}

/* Скрытые тултип-пузыри не должны распирать модалки по горизонтали.
   opacity:0 участвует в overflow, display:none — нет. */
[data-tooltip]::after { display: none; }
[data-tooltip]:hover::after,
[data-tooltip]:active::after { display: block; opacity: 1; }

/* ============================================================
Mobile: карусель экшен-бара + компактные модалки расчёта
============================================================ */
.sc-commit-short { display: none; }   /* десктоп: полное «Подтвердить смету» */


.sc-help-toggle {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 2px;
}
@media (min-width: 768px) {
        .sc-help-more   { display: inline !important; } /* перебивает .hidden */
        .sc-help-toggle { display: none; }
}

.leading-snug {
    font-size: .78rem;
}

@media (max-width: 768px) {
  /* --- Экшен-бар комнаты: горизонтальная карусель, кнопки не обрезаются --- */
  .action-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .action-bar::-webkit-scrollbar { display: none; }
  .action-bar > .btn { flex: 0 0 auto; }
  .action-bar .ml-auto { margin-left: 0; }

  /* --- Расчёт сметы: textarea выше, кнопки в 2 колонки, прибиты к низу --- */
  #calcPromptText { min-height: 260px; }
  .modal-card .flex.gap-2.justify-end.calc-actions {
    flex-direction: row;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #1A2030;
    padding-top: .5rem;
  }
  .modal-card .flex.gap-2.justify-end.calc-actions > .btn {
    width: auto;
    flex: 1 1 0;
    min-height: 44px;
    font-size: 13px;
  }

  /* --- Умный расчёт: компактный футер, прибит к низу --- */
  .sc-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #1A2030;
  }
  .sc-footer .btn { min-height: 44px; font-size: 13px; }
  .sc-commit-full  { display: none; }
  .sc-commit-short { display: inline; }
  
  .action-bar {
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;  /* инерция как у каруселей на iOS */
                scroll-snap-type: x proximity;      /* лёгкая доводка к кнопкам */
                scroll-padding-left: .75rem;
                overscroll-behavior-x: contain;     /* не тянет страницу за собой */
                scrollbar-width: none;              /* Firefox: без скроллбара */
        }
        .action-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
        .action-bar > * {
                flex: 0 0 auto;          /* не сжимаются — бар скроллится */
                scroll-snap-align: start;
        }
  
}

.voice-btn { touch-action: manipulation; user-select: none; -webkit-user-select: none;
             -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
                         
                         .textarea.pr-32 {
                                padding-right: .7rem;
                        padding-bottom: 2.5rem;
                }
                
                
/* NEW v8.2: утилиты, отсутствующие в компилированном tailwind.min.css
   (пресеты промтов, модалка истории генераций) */
.max-h-24 { max-height: 6rem; }
.h-36 { height: 9rem; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.max-h-\[65vh\] { max-height: 65vh; }
.pr-1 { padding-right: .25rem; }
.max-w-full { max-width: 100%; }

/* NEW v8.3: зона фото «до» — drag&drop подсветка при перетаскивании файла */
.img-upload-zone { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.img-upload-zone.drag-over {
        border-color: #A385FF !important;
        box-shadow: inset 0 0 0 2px rgba(163, 133, 255, .35);
        background-color: rgba(124, 92, 255, .08);
}
.img-upload-zone.drag-over .btn-upload { color: #A385FF; }

/* NEW v8.3.1: подсказка замены фото — ВНУТРИ зоны фото (снизу, при hover),
   вместо всплывающего data-tooltip, который «болтался» над зоной */
.img-upload-zone { position: relative; }
.photo-replace-hint {
        position: absolute; left: 0; right: 0; bottom: 0;
        display: flex; align-items: center; justify-content: center; gap: .35rem;
        padding: .4rem .5rem;
        font-size: 10px; line-height: 1.2; color: #cbd5e1;
        background: rgba(11, 15, 26, .74);
        opacity: 0; transition: opacity .15s ease;
        pointer-events: none; /* клики проходят сквозь — зум фото не ломаем */
}
.img-upload-zone:hover .photo-replace-hint { opacity: 1; }
/* Телефоны: hover нет — подсказка не показывается, замена через кнопку/drag */
@media (hover: none) { .photo-replace-hint { display: none; } }


/* ============================================================
 * NEW v8.5.1: стилизованные тумблеры (toggle switch) — чекбоксы
 * настроек в ЛК: автоотправка в CRM, приём заявок извне,
 * «Активен» в модалке замерщика. В акцентном фиолетовом (#7C5CFF).
 * Разметка:
 *   <span class="switch">
 *       <input type="checkbox"> <span class="slider"></span>
 *   </span>
 * ============================================================ */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.switch .slider {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transition: background .2s ease, border-color .2s ease;
}
.switch .slider::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 999px;
    background: #94A3B8;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.switch:hover .slider { border-color: rgba(163, 133, 255, 0.35); }
.switch input:checked + .slider { background: rgba(124, 92, 255, 0.35); border-color: rgba(124, 92, 255, 0.65); }
.switch input:checked + .slider::before {
    transform: translateX(18px);
    background: #A385FF;
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.55);
}
.switch input:focus-visible + .slider { outline: 2px solid rgba(163, 133, 255, 0.6); outline-offset: 2px; }


/* ============================================================
 * NEW v8.7.8: inline-редактирование «Кол-во» в таблице позиций
 * сметы. В «Режиме редактирования» (edit-on) ячейка становится
 * тапабельной: пунктирное подчёркивание числа + подсветка при
 * наведении. Инпут — компактный, по центру ячейки.
 * ============================================================ */
.items-table.edit-on td.cell-qty { cursor: pointer; }
.items-table.edit-on td.cell-qty .qty-value {
        border-bottom: 1px dashed rgba(163, 133, 255, 0.55);
        padding-bottom: 1px;
}
.items-table.edit-on td.cell-qty:hover { background: rgba(124, 92, 255, 0.10); }
.qty-inline-input {
        width: 76px;
        max-width: 100%;
        text-align: center;
        padding: 3px 6px;
        font-size: 12px;
        line-height: 1.2;
}

/* =================== v8.7.12: статус «Отменён» (сине-красная гамма) =================== */
/* Бейдж «Отменён»: градиент синий → красный, красный текст, красный бордер */
.badge-cancelled {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(239, 68, 68, 0.22) 100%);
        color: #fca5a5;
        border: 1px solid rgba(239, 68, 68, 0.45);
}
/* Карточка отменённого замера: лёгкий сине-красный градиент фона,
   красная рамка и двухцветная боковая подсветка (синяя полоса слева) */
.card-cancelled {
        border-color: rgba(239, 68, 68, 0.40);
        background-image: linear-gradient(120deg, rgba(59, 130, 246, 0.10) 0%, rgba(239, 68, 68, 0.12) 100%);
        box-shadow: inset 3px 0 0 0 rgba(59, 130, 246, 0.85),
                    inset 5px 0 12px -6px rgba(239, 68, 68, 0.55);
}
.card-cancelled.card-interactive:hover {
        border-color: rgba(239, 68, 68, 0.60);
        box-shadow: inset 3px 0 0 0 rgba(59, 130, 246, 0.85),
                    inset 5px 0 12px -6px rgba(239, 68, 68, 0.55),
                    0 12px 32px rgba(239, 68, 68, 0.12);
}

/* =================== v8.7.23: календарь замеров на дашборде =================== */
/* Обёртка кнопки + попап: тёмная карточка в палитре UI (ink-100 + accent) */
.mcal-wrap { position: relative; }
.mcal-popup {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 45;
        width: 312px;
        max-width: calc(100vw - 24px);
        background: rgba(34, 42, 63, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 14px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
        padding: 12px;
        backdrop-filter: blur(8px);
        animation: fadeIn 0.18s ease-out;
}
.mcal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.mcal-title { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; font-size: 13px; color: #E2E8F0; white-space: nowrap; }
.mcal-nav { display: flex; align-items: center; gap: 4px; }
.mcal-nav .btn { padding: 2px 8px; }
.mcal-today-btn { font-size: 11px !important; padding: 2px 8px !important; }
.mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mcal-wd { text-align: center; font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(148, 163, 184, 0.75); padding: 2px 0 4px; }
.mcal-wd.mcal-wend { color: rgba(148, 163, 184, 0.45); }
.mcal-day {
        position: relative;
        height: 40px;
        border-radius: 9px;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.03);
        color: #CBD5E1;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 0;
        line-height: 1;
        transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.mcal-day:hover { background: rgba(124, 92, 255, 0.16); border-color: rgba(124, 92, 255, 0.35); transform: translateY(-1px); }
.mcal-num { font-size: 12px; font-weight: 600; }
.mcal-day.mcal-wend .mcal-num { color: rgba(148, 163, 184, 0.55); }
.mcal-cnt {
        min-width: 14px;
        height: 13px;
        padding: 0 3px;
        border-radius: 7px;
        background: rgba(124, 92, 255, 0.85);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 13px;
        text-align: center;
}
/* день, в котором есть замеры */
.mcal-day.has-m { background: rgba(124, 92, 255, 0.12); border-color: rgba(124, 92, 255, 0.28); }
.mcal-day.has-m .mcal-num { color: #A385FF; }
/* сегодня — циановая обводка */
.mcal-day.is-today { border-color: rgba(34, 211, 238, 0.55); }
.mcal-day.is-today .mcal-num { color: #22D3EE; }
/* выбранный день-фильтр — акцентный градиент */
.mcal-day.is-sel { background: linear-gradient(135deg, #7C5CFF, #5A3FCC); border-color: #A385FF; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.4); }
.mcal-day.is-sel .mcal-num { color: #fff; }
.mcal-day.is-sel .mcal-cnt { background: rgba(255, 255, 255, 0.25); }
.mcal-empty { height: 40px; }
.mcal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.mcal-legend { display: flex; align-items: center; font-size: 10px; color: rgba(148, 163, 184, 0.85); }
.mcal-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.mcal-total { font-size: 11px; color: #A385FF; font-weight: 600; }
/* точка-индикатор на кнопке, когда фильтр «конкретный день» активен */
.mcal-btn-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
        margin-left: 2px;
}

/* =================== v8.7.24: поля «с/по» в стиле UI =================== */
/* Нативный input[type=date] убран — его попап нельзя стилизовать; вместо него
   кнопки в палитре .input (тёмный фон, бордер, фокус-кольцо акцентом). */
.mcal-wrap-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcal-range-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #E2E8F0;
        font-size: 12px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        white-space: nowrap;
        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.mcal-range-btn:hover { border-color: rgba(124, 92, 255, 0.55); background: rgba(124, 92, 255, 0.10); }
.mcal-range-btn:focus-visible { outline: none; border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15); }
.mcal-range-btn.is-empty { color: #64748B; font-weight: 500; }
/* кнопка, чей шаг выбора активен («с» или «по») */
.mcal-range-btn.is-pick { border-color: #7C5CFF; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18); }
/* края диапазона «с…по» — акцентный градиент (как выбранный день) */
.mcal-day.is-edge { background: linear-gradient(135deg, #7C5CFF, #5A3FCC); border-color: #A385FF; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.4); }
.mcal-day.is-edge .mcal-num { color: #fff; }
.mcal-day.is-edge .mcal-cnt { background: rgba(255, 255, 255, 0.25); }
/* дни между краями — мягкая заливка, «цепочка» между краями */
.mcal-day.is-inrange { background: rgba(124, 92, 255, 0.18); border-color: rgba(124, 92, 255, 0.25); border-radius: 4px; }
.mcal-day.is-inrange .mcal-num { color: #C9B8FF; }
/* подсказка текущего шага выбора в подвале попапа */
.mcal-hint { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #22D3EE; }