.fixed-left {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: 100px;
 }

 .fixed-left .btn {
    margin: 10px 0;
 }
 .settings-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
 }

#userBar {
    display: inline-flex;
    align-items: center;
}

 .copylink-button {
    margin-right: 8px;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--timer-bg, rgba(0,0,0,0.16)) !important;
    border: none !important;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease, box-shadow 150ms ease;
 }

.copylink-button:hover,
.copylink-button:focus,
.copylink-button:active {
    background: var(--timer-bg, rgba(0,0,0,0.16)) !important;
    border: none !important;
    color: #ffffff;
    box-shadow: none !important;
}

.copylink-button:active {
    transform: scale(1.06);
}

.copylink-button i {
    line-height: 1;
 }

.my-avatar-action-trigger,
.user-avatar-action-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.my-avatar-action-trigger .rounded-circle,
.user-avatar-action-trigger .rounded-circle {
    margin: 0 !important;
}

.my-avatar-action-overlay,
.user-avatar-action-overlay {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.62);
    color: #ffffff;
    padding: 0;
    opacity: 0;
    transform: scale(0.76);
    pointer-events: none;
    transition: opacity 190ms ease, transform 190ms ease;
}

.my-avatar-action-overlay svg,
.user-avatar-action-overlay svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-avatar-action-overlay svg circle {
    fill: currentColor;
    stroke: none;
}

@media (hover: hover) and (pointer: fine) {
    .my-avatar-action-trigger:hover .my-avatar-action-overlay,
    .my-avatar-action-trigger:focus-visible .my-avatar-action-overlay,
    .user-avatar-action-trigger:hover .user-avatar-action-overlay,
    .user-avatar-action-trigger:focus-visible .user-avatar-action-overlay {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}

.my-avatar-action-trigger.is-tap-armed .my-avatar-action-overlay,
.user-avatar-action-trigger.is-tap-armed .user-avatar-action-overlay {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.my-avatar-action-trigger:active .my-avatar-action-overlay,
.user-avatar-action-trigger:active .user-avatar-action-overlay {
    transform: scale(1.04);
}

/* «+N» чип и выпадающий список скрытых участников в userBar */
.userbar-overflow-hidden {
    display: none !important;
}

.userbar-overflow-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    cursor: pointer;
    background: var(--timer-bg, rgba(0, 0, 0, 0.16));
    color: var(--text-color, #ffffff);
    font-weight: 600;
    font-size: 15px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease, background 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .userbar-overflow-trigger:hover {
        transform: scale(1.06);
    }
}

.userbar-overflow-trigger:active {
    transform: scale(0.98);
}

.userbar-overflow-list {
    position: fixed;
    z-index: 10060;
    min-width: 200px;
    max-width: 280px;
    max-height: min(60vh, 340px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    font-family: inherit;
}

.userbar-overflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.userbar-overflow-item:hover {
    background: #f1f5f9;
}

.userbar-overflow-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 30px;
    background: #f0f0f0;
}

.userbar-overflow-name {
    font-size: 14px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 .btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
}
.dropdown-menu{
    background-color: #E6E6FA;
}
.dropdown-header{
    color: black;
    text-align: left;
}
.btn-image {
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 15px;
    background-image: url('64.png') ;
    background-size: contain;
    width: 64px; /* Ширина кнопки. Подгоните под ваше изображение. */
    height: 64px; /* Высота кнопки. Подгоните под ваше изображение. */
    border: none; /* Убираем рамку вокруг кнопки */
    cursor: pointer; /* Курсор при наведении */
    outline: none;
  }
  
.btn-image:hover {
    filter: brightness(0.8); /* Эффект при наведении, опционально */
}
.btn:focus,
.btn:active:focus {
  outline: 0;
    box-shadow: none;
}

/* Tool buttons are aligned to the right of the sidebar; the left edge stays off-screen. */
#toolContainer .btn {
    transform: translateX(0);
    transition: transform 140ms ease, filter 120ms ease;
}

/* Внутри выпадающих меню палитры не применяем сдвиг, иначе сетка цветов уезжает влево. */
#toolContainer .dropdown-menu .btn {
    transform: none;
}

#toolContainer .shape-toolbar-menu {
    min-width: 420px;
    max-width: min(86vw, 520px);
    max-height: min(72vh, 520px);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: linear-gradient(180deg, #f7f8fb 0%, #eef2f9 100%);
}

.shape-toolbar-layout {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 0;
    min-height: 280px;
}

.shape-toolbar-types {
    border-right: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.6);
    padding: 8px;
    overflow: auto;
}

.shape-toolbar-type-btn {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    padding: 8px 10px;
    color: #1f2937;
    background: transparent;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.shape-toolbar-type-btn .premium-lock-indicator {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 10px;
    color: #9a5f00;
    background: #ffe7b8;
    border: 1px solid #ffc56f;
    flex-shrink: 0;
}

.shape-toolbar-type-btn.active .premium-lock-indicator {
    color: #9a5f00;
    background: #ffe2ab;
    border-color: #f4b85f;
}

.shape-toolbar-type-btn.is-locked .premium-lock-indicator {
    color: #9a5f00;
    background: #ffe7b8;
    border-color: #ffc56f;
    filter: saturate(0.75);
}

.shape-toolbar-type-btn:hover {
    background: rgba(43, 108, 255, 0.08);
    border-color: rgba(43, 108, 255, 0.2);
}

.shape-toolbar-type-btn.active {
    background: rgba(43, 108, 255, 0.16);
    border-color: rgba(43, 108, 255, 0.35);
    color: #0f172a;
    transform: translateX(2px);
}

.shape-toolbar-type-btn.is-locked {
    opacity: 0.65;
}

.shape-toolbar-shapes {
    padding: 10px;
    overflow: auto;
}

.shape-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
    gap: 8px;
}

.shape-toolbar-item {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    padding: 8px;
    min-height: 94px;
    display: grid;
    grid-template-rows: 48px auto;
    align-items: center;
    justify-items: center;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.shape-toolbar-item:hover {
    transform: translateY(-1px);
    border-color: rgba(43, 108, 255, 0.35);
    box-shadow: 0 8px 18px rgba(43, 108, 255, 0.12);
}

.shape-toolbar-item.is-locked {
    opacity: 0.62;
}

.shape-toolbar-item svg {
    width: 46px;
    height: 46px;
}

.shape-toolbar-item-label {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

.shape-toolbar-empty {
    margin: 8px;
    padding: 10px;
    border-radius: 10px;
    color: #6b7280;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
    #toolContainer .shape-toolbar-menu {
        min-width: min(92vw, 420px);
        max-width: min(92vw, 420px);
    }

    .shape-toolbar-layout {
        grid-template-columns: 142px 1fr;
        min-height: 250px;
    }

    .shape-toolbar-grid {
        grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    }
}

/* Undo/redo buttons are aligned right so the left edge stays off-screen. */
.fixed-left > .btn-group-vertical:not(#toolContainer) .btn {
    transform: translateX(0);
    transition: transform 120ms ease, filter 120ms ease;
}

#goBack svg,
#goForward svg {
    transition: transform 120ms ease;
}

/* Arrow nudge relative to the 35px right-shift applied to all buffer icons. */
#goBack:active:not(:disabled) svg,
#goBack.is-action-buffer-pressed svg {
    transform: translateX(32px);
}

#goForward:active:not(:disabled) svg,
#goForward.is-action-buffer-pressed svg {
    transform: translateX(38px);
}

/* Явное выделение текущего инструмента (без белой рамки, независимо от focus). */
#toolContainer .btn.tool-selected {
    box-shadow: none;
    /* Активный инструмент остаётся у края экрана, остальные уходят левее. */
    transform: translateX(0) scale(1.07);
}

#toolContainer .btn.tool-selected i,
#toolContainer .btn.tool-selected svg {
    filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.9));
}

#changeToEraser:focus{
    box-shadow: 0 0 0 0.25rem rgba(147, 155, 164, 0.5);
}

/* ======================== Unified glass style for toolbar / buffer buttons ======================== */

/* Align toolbar children to the right: buttons are wider than the sidebar,
   so their left edge stays off-screen and they slide out to the right when active. */
#toolContainer {
    align-items: flex-end;
}

/* Tool buttons: rectangular, a bit wider than the sidebar, all same size. */
#toolContainer > .btn,
#toolContainer > .btn-group > .btn,
#toolContainer > .btn-group > .btn-group > .btn {
    width: 180px;
    height: 44px;
    padding: 0;
    border: none !important;
    border-radius: 10px;
    background: hsla(210, 98%, 42%, 0.785) !important;
    color: var(--text-color, #ffffff) !important;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms ease, background 120ms ease, filter 120ms ease;
}

/* Vertical spacing between tool buttons / tool button groups. */
#toolContainer > .btn,
#toolContainer > .btn-group {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Inner buttons inside tool groups should not add extra vertical space. */
#toolContainer > .btn-group > .btn,
#toolContainer > .btn-group > .btn-group > .btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Larger gap between text and shape toolbar to match upload-to-buffer spacing. */
#changeToText + #shapeToolbarDropdown {
    margin-top: 15px !important;
}

/* Slightly larger gap above the first undo buffer button to match upload spacing. */
#goBack {
    margin-top: 15px !important;
}

/* Shift icons right so they look centered inside the visible (rightmost 100px) area. */
#toolContainer .btn > i,
#toolContainer .btn > svg,
#goBack > svg,
#goForward > svg {
    transform: translateX(35px);
    opacity: 1 !important;
}

/* Keep the pencil icon at its previous offset so it stays centered over the pencil button. */
#toolContainer .btn#changeToDraw > i,
#toolContainer .btn#changeToDraw > svg {
    transform: translateX(40px);
}

/* Dropdown toggles (shape button) also center their icon in the visible right area. */
#toolContainer .btn.dropdown-toggle > i,
#toolContainer .btn.dropdown-toggle > svg {
    transform: translateX(35px);
}

/* Tool button groups (pencil + palette, shapes) share the same 180px footprint. */
#toolContainer > .btn-group {
    width: 180px;
}

/* Pencil split button: left 125px, right 55px. The seam at x=125 aligns with the
   center of icons in other buttons (transformed to x=125 in the visible area). */
#changeToDraw {
    flex: 0 0 125px !important;
    width: 125px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#changeToDraw2 {
    flex: 0 0 55px !important;
    width: 55px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Remove Bootstrap's -1px overlap margin for nested groups so the two parts
   meet edge-to-edge without a 1px line. */
#toolContainer > .btn-group > .btn-group {
    margin-left: 0 !important;
}

/* Pencil + palette buttons reflect the current draw color, keeping the translucent glass style. */
#toolContainer > .btn-group > .btn#changeToDraw,
#toolContainer > .btn-group > .btn-group > .btn#changeToDraw2 {
    background: rgba(var(--pencil-color-rgb, 0,0,0), 0.785) !important;
    color: rgba(var(--pencil-contrast-rgb, 255,255,255), 1) !important;
}
#toolContainer > .btn-group > .btn#changeToDraw:hover,
#toolContainer > .btn-group > .btn-group > .btn#changeToDraw2:hover {
    background: rgba(var(--pencil-color-rgb, 0,0,0), 0.885) !important;
}
#toolContainer > .btn-group > .btn#changeToDraw:active,
#toolContainer > .btn-group > .btn-group > .btn#changeToDraw2:active,
#toolContainer > .btn-group > .btn#changeToDraw.tool-selected,
#toolContainer > .btn-group > .btn-group > .btn#changeToDraw2.tool-selected {
    background: rgba(var(--pencil-color-rgb, 0,0,0), 1.0) !important;
}

/* Undo/redo buffer buttons — red for undo, green for redo. */
#goBack,
#goForward {
    width: 180px;
    height: 44px;
    padding: 0;
    border: none !important;
    border-radius: 10px;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    transition: transform 120ms ease, background 120ms ease, filter 120ms ease;
}
#goBack {
    background: rgba(220, 53, 69, 0.785) !important;
    color: var(--text-color, #ffffff) !important;
}
#goForward {
    background: rgba(40, 167, 69, 0.785) !important;
    color: var(--text-color, #ffffff) !important;
}

/* Hover: tool buttons keep the navbar blue, buffer keep their semantic color. */
#toolContainer > .btn:hover,
#toolContainer > .btn-group > .btn:hover,
#toolContainer > .btn-group > .btn-group > .btn:hover {
    background: hsla(210, 98%, 42%, 0.885) !important;
}
#goBack:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.885) !important;
}
#goForward:hover:not(:disabled) {
    background: rgba(40, 167, 69, 0.885) !important;
}

/* Undo/redo click feedback: slide out to the right, no scale. */
#goBack:active:not(:disabled),
#goBack.is-action-buffer-pressed:not(:disabled) {
    transform: translateX(20px);
    background: rgba(220, 53, 69, 1.0) !important;
}
#goForward:active:not(:disabled),
#goForward.is-action-buffer-pressed:not(:disabled) {
    transform: translateX(20px);
    background: rgba(40, 167, 69, 1.0) !important;
}

/* Tool button press feedback: slide out to the right while pressed. */
#toolContainer > .btn:active,
#toolContainer > .btn-group > .btn:active,
#toolContainer > .btn-group > .btn-group > .btn:active {
    background: hsla(210, 98%, 42%, 1.0) !important;
    transform: translateX(20px);
}

/* Active/selected tool: stands out with a stronger background and slides out. */
#toolContainer > .btn.tool-selected,
#toolContainer > .btn-group > .btn.tool-selected,
#toolContainer > .btn-group > .btn-group > .btn.tool-selected {
    background: hsla(210, 98%, 42%, 1.0) !important;
    transform: translateX(20px);
}

/* Eraser button is gray so it's easy to spot. */
#toolContainer > .btn#changeToEraser {
    background: hsla(220, 10%, 50%, 0.785) !important;
}
#toolContainer > .btn#changeToEraser:hover {
    background: hsla(220, 10%, 50%, 0.885) !important;
}
#toolContainer > .btn#changeToEraser:active,
#toolContainer > .btn#changeToEraser.tool-selected {
    background: hsla(220, 10%, 50%, 1.0) !important;
}

/* No slide-out for shape dropdown and media library buttons — their dropdown/menu behavior is enough. */
#shapeDropdownToggle:active,
#openMediaLibrary:active,
#shapeDropdownToggle.tool-selected,
#openMediaLibrary.tool-selected {
    transform: none !important;
}

/* Disabled undo/redo look dimmer. */
#goBack:disabled,
#goForward:disabled {
    opacity: 0.45;
}

/* Consistent translucent focus / selected ring. */
#toolContainer > .btn:focus,
#toolContainer > .btn-group > .btn:focus,
#toolContainer > .btn-group > .btn-group > .btn:focus,
#toolContainer > .btn.tool-selected,
#toolContainer > .btn-group > .btn.tool-selected,
#toolContainer > .btn-group > .btn-group > .btn.tool-selected,
#goBack:focus,
#goForward:focus,
#changeToEraser:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.35) !important;
}

/* Pencil group outline follows the outer contour of the combined button,
   not the inner seam between the main pencil and palette toggle.
   The whole group slides out, so the ring stays aligned with the real button position. */
#toolContainer > .btn-group.pencil-group {
    transition: transform 140ms ease;
}
#toolContainer > .btn-group.pencil-group:has(> .btn:focus),
#toolContainer > .btn-group.pencil-group:has(> .btn-group > .btn:focus),
#toolContainer > .btn-group.pencil-group:has(> #changeToDraw.tool-selected) {
    border-radius: 10px;
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.35) !important;
}
#toolContainer > .btn-group.pencil-group:has(> #changeToDraw.tool-selected),
#toolContainer > .btn-group.pencil-group:has(> #changeToDraw:active) {
    transform: translateX(20px);
}
#toolContainer > .btn-group.pencil-group > .btn:focus,
#toolContainer > .btn-group.pencil-group > .btn-group > .btn:focus,
#toolContainer > .btn-group.pencil-group > .btn.tool-selected,
#toolContainer > .btn-group.pencil-group > .btn-group > .btn.tool-selected,
#toolContainer > .btn-group.pencil-group > .btn:active,
#toolContainer > .btn-group.pencil-group > .btn-group > .btn:active {
    box-shadow: none !important;
    transform: none !important;
}

/* Upload split button: left media library, right upload.
   The seam is at x=125 so it aligns with the center of icons in other buttons.
   Left part is 125px (visible 45px), right part is 55px (visible 55px). */
#toolContainer > .btn-group.upload-group {
    width: 180px;
    transition: transform 140ms ease;
}
#toolContainer > .btn-group.upload-group > .btn-group {
    flex: 0 0 125px !important;
    width: 125px !important;
}
#toolContainer > .btn-group.upload-group > .btn-group > .btn#openMediaLibrary {
    width: 100% !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 0;
}
#toolContainer > .btn-group.upload-group > .btn#uploadFileButton {
    flex: 0 0 55px !important;
    width: 55px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: 0 !important;
}
#toolContainer > .btn-group.upload-group > .btn:active,
#toolContainer > .btn-group.upload-group > .btn-group > .btn:active,
#toolContainer > .btn-group.upload-group > .btn.tool-selected,
#toolContainer > .btn-group.upload-group > .btn-group > .btn.tool-selected,
#toolContainer > .btn-group.upload-group > .btn:focus,
#toolContainer > .btn-group.upload-group > .btn-group > .btn:focus {
    transform: none !important;
    box-shadow: none !important;
}
#toolContainer > .btn-group.upload-group:focus-within {
    border-radius: 10px;
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.35) !important;
}

/* Center the media library icon in the visible left half (shift from 65px to 105px). */
#toolContainer .btn#openMediaLibrary > i {
    transform: translateX(40px);
}

/* Keep the upload icon centered in the visible right half (no extra shift). */
#toolContainer .btn#uploadFileButton > i {
    transform: translateX(0);
}

.custom-range {
    width: 160px; 
  }

/* ─── Палетка: ряд кнопок типа линии ─────────────────────────── */
.draw-style-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
}

.draw-style-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 40px;
    padding: 0;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.draw-style-btn svg {
    color: #1f2937;
    overflow: visible;
}

.draw-style-btn:hover {
    background: #e8eeff;
    border-color: rgba(43, 108, 255, 0.40);
    color: #1f2937;
}

.draw-style-btn.active,
.draw-style-btn[aria-pressed="true"] {
    background: #dce6ff;
    border-color: #3b6fef;
    color: #0d47e8;
}

.draw-style-btn.active svg,
.draw-style-btn[aria-pressed="true"] svg {
    color: #0d47e8;
}

/* ─── Палетка: ряд кнопки режима линии ───────────────────────── */
.draw-mode-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
    padding: 0 4px;
}

.draw-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    font-size: 12px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.draw-mode-btn svg {
    color: #1f2937;
    flex-shrink: 0;
}

.draw-mode-btn:hover {
    background: #e8eeff;
    border-color: rgba(43, 108, 255, 0.40);
    color: #1f2937;
}

.draw-mode-btn.active,
.draw-mode-btn[aria-pressed="true"] {
    background: #dce6ff;
    border-color: #3b6fef;
    color: #0d47e8;
}

.draw-mode-btn.active svg,
.draw-mode-btn[aria-pressed="true"] svg {
    color: #0d47e8;
}

.draw-mode-label {
    white-space: nowrap;
    user-select: none;
}
/* Анимации для кнопки настроек (шестерёнки) */
.settings-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: hsla(210, 98%, 42%, 0.75) !important;
    color: #ffffff !important;
    /* чтобы масштаб при клике выглядел плавно */
    transition: transform 150ms ease, box-shadow 150ms ease, background 120ms ease;
}
.settings-button:hover {
    background: hsla(210, 98%, 42%, 0.85) !important;
}
.settings-button:active {
    background: hsla(210, 98%, 42%, 0.9) !important;
}
.settings-button:focus {
    outline: none;
}
.settings-button i {
    display: inline-block;
    /* центр трансформации для аккуратного вращения */
    transform-origin: 50% 50%;
}

/* медленная непрерывная прокрутка при наведении */
.settings-button:hover i {
    animation: spin-slow 6s linear infinite;
}

/* быстрый оборот и лёгкое увеличение при нажатии */
.settings-button:active i {
    /* При клике не прерываем медленную анимацию, чтобы не было рывка */
    animation: spin-slow 6s linear infinite;
}
.settings-button:active {
    transform: scale(1.06);
}

/* Ключевые кадры: медленный бесконечный спин и быстрый одноразовый */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Прежний быстрый keyframes удалён (не используется) */

/* Если дропдаун открыт — держим медленный спин вне зависимости от hover */
.settings-button.open-dropdown i {
    animation: spin-slow 6s linear infinite;
}

/* DOM-хэндл поворота выделенной группы поверх canvas. */
.board-rotate-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    font-size: 0 !important;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-rotate-handle::before {
    content: '↺';
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    transform: translate(-46%, -58%);
}

.board-rotate-handle:hover,
.board-rotate-handle:focus,
.board-rotate-handle:active {
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* DOM-хэндл удаления выделенной группы поверх canvas. */
.board-delete-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-size: 0;
    background: rgba(220, 53, 69, 0.76) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-delete-handle:hover,
.board-delete-handle:focus,
.board-delete-handle:active {
    background: rgba(220, 53, 69, 0.76) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-delete-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 1);
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(45deg);
}

.board-delete-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 1);
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* DOM-хэндлы копирования/перемещения выделения поверх canvas. */
.board-copy-handle,
.board-move-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-size: 0;
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-copy-handle:hover,
.board-copy-handle:focus,
.board-copy-handle:active,
.board-save-handle:hover,
.board-save-handle:focus,
.board-save-handle:active,
.board-move-handle:hover,
.board-move-handle:focus,
.board-move-handle:active {
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* DOM-хэндл сохранения выделения в медиатеку поверх canvas. */
.board-save-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-size: 0;
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-save-handle .far,
.board-save-handle .fas {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
}

.board-save-handle.is-save-success .far,
.board-save-handle.is-save-success .fas {
    font-weight: 900;
}

.board-save-handle.is-save-success {
    animation: board-save-success 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes board-save-success {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); filter: brightness(1); }
    35% { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 10px rgba(56, 189, 248, 0.35); filter: brightness(1.08); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); filter: brightness(1); }
}

.board-copy-handle::before,
.board-copy-handle::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 2px;
    box-sizing: border-box;
    background: transparent;
    transition: background 120ms ease;
}

.board-copy-handle::before {
    transform: translate(-1px, -1px);
}

.board-copy-handle::after {
    transform: translate(3px, 3px);
}

.board-copy-handle.is-copy-success::before,
.board-copy-handle.is-copy-success::after {
    background: rgba(255, 255, 255, 1);
}

.board-copy-handle.is-copy-success {
    animation: board-copy-success 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.board-copy-handle.is-copy-success::before {
    animation: board-copy-icon-pop-front 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.board-copy-handle.is-copy-success::after {
    animation: board-copy-icon-pop-back 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.board-move-handle i {
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

@keyframes board-copy-success {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
        filter: brightness(1);
    }
    35% {
        transform: translate(-50%, -50%) scale(1.14);
        box-shadow: 0 0 0 8px rgba(56, 189, 248, 0.18);
        filter: brightness(1.14);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
        filter: brightness(1);
    }
}

@keyframes board-copy-icon-pop-front {
    0% {
        transform: translate(-1px, -1px) scale(1);
    }
    35% {
        transform: translate(-1px, -1px) scale(1.12);
    }
    100% {
        transform: translate(-1px, -1px) scale(1);
    }
}

@keyframes board-copy-icon-pop-back {
    0% {
        transform: translate(3px, 3px) scale(1);
    }
    35% {
        transform: translate(3px, 3px) scale(1.16);
    }
    100% {
        transform: translate(3px, 3px) scale(1);
    }
}

/* Единая анимация для кнопок действий selGroup: hover и нажатие. */
.board-rotate-handle,
.board-delete-handle,
.board-copy-handle,
.board-move-handle {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 190ms ease, filter 190ms ease;
    will-change: transform, box-shadow, filter;
}

@media (hover: hover) and (pointer: fine) {
    .board-rotate-handle:hover,
    .board-rotate-handle:focus-visible,
    .board-delete-handle:hover,
    .board-delete-handle:focus-visible,
    .board-copy-handle:hover,
    .board-copy-handle:focus-visible,
    .board-move-handle:hover,
    .board-move-handle:focus-visible {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.26) !important;
        filter: brightness(1.05);
    }
}

.board-rotate-handle:active,
.board-delete-handle:active,
.board-copy-handle:active,
.board-move-handle:active {
    transform: translate(-50%, -50%) scale(0.94);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.2) !important;
    filter: brightness(0.97);
}

/* DOM-хэндлы вписанной и описанной окружностей для выделенных фигур. */
.board-incircle-handle,
.board-circumcircle-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 700;
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-incircle-handle:hover,
.board-incircle-handle:focus,
.board-incircle-handle:active,
.board-circumcircle-handle:hover,
.board-circumcircle-handle:focus,
.board-circumcircle-handle:active {
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Иконка вписанной окружности (круг внутри квадрата) */
.board-incircle-handle::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.board-incircle-handle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
    opacity: 0.5;
}

/* Иконка описанной окружности (круг снаружи треугольника/фигуры) */
.board-circumcircle-handle::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.board-circumcircle-handle::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
    opacity: 0.6;
}

/* Анимации для кнопок окружностей */
.board-incircle-handle,
.board-circumcircle-handle {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 190ms ease, filter 190ms ease;
    will-change: transform, box-shadow, filter;
}

@media (hover: hover) and (pointer: fine) {
    .board-incircle-handle:hover,
    .board-incircle-handle:focus-visible,
    .board-circumcircle-handle:hover,
    .board-circumcircle-handle:focus-visible {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.26) !important;
        filter: brightness(1.05);
    }
}

.board-incircle-handle:active,
.board-circumcircle-handle:active {
    transform: translate(-50%, -50%) scale(0.94);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.2) !important;
    filter: brightness(0.97);
}

/* DOM-кнопки +/- для изменения размерности системы координат. */
.board-coord-size-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-size: 22px;
    font-weight: 700;
    border: none !important;
    box-shadow: none !important;
}

.board-coord-size-plus,
.board-coord-size-minus {
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
}

.board-coord-size-handle:hover,
.board-coord-size-handle:focus,
.board-coord-size-handle:active {
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-coord-size-plus:hover,
.board-coord-size-plus:focus,
.board-coord-size-plus:active,
.board-coord-size-minus:hover,
.board-coord-size-minus:focus,
.board-coord-size-minus:active {
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
}

.board-coord-size-handle:disabled {
    opacity: 0.45;
    cursor: default;
}

/* DOM-хэндл палитры выделенной группы поверх canvas (полупрозрачный, как copy/save). */
.board-palette-handle {
    position: absolute;
    z-index: 990;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-size: 0;
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-palette-handle:hover,
.board-palette-handle:focus,
.board-palette-handle:active {
    background: var(--timer-bg, rgba(0,0,0,0.24)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.board-palette-handle .fas {
    font-size: 14px;
    color: #ffffff;
}

.board-palette-handle.is-open {
    background: rgba(43, 108, 255, 0.55) !important;
}

/* Мини-палитра выделенной группы: стиль / толщина / цвет (уменьшенная версия палитры карандаша). */
.selection-palette-pop {
    position: absolute;
    z-index: 991;
    display: none;
    width: 122px;
    padding: 8px;
    border-radius: 10px;
    background: #e6e6fa;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -50%);
    user-select: none;
}

.selection-palette-pop .sel-style-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.selection-palette-pop .sel-style-btn {
    height: 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background: #ffffff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.selection-palette-pop .sel-style-btn svg {
    display: block;
}

.selection-palette-pop .sel-style-btn.is-active {
    border-color: #2b6cff;
    box-shadow: 0 0 0 1px #2b6cff;
}

.selection-palette-pop .sel-width-range {
    width: 100%;
    height: 18px;
    margin: 0 0 8px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    --slider-progress: 50%;
    cursor: pointer;
}

.selection-palette-pop .sel-width-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        #0d6efd 0,
        #0d6efd var(--slider-progress),
        rgba(128, 128, 128, 0.6) var(--slider-progress),
        rgba(128, 128, 128, 0.6) 100%
    );
    border: none;
}

.selection-palette-pop .sel-width-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #0d6efd;
}

.selection-palette-pop .sel-width-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.6);
    border: none;
}

.selection-palette-pop .sel-width-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: #0d6efd;
}

.selection-palette-pop .sel-width-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #0d6efd;
}

.selection-palette-pop .sel-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    gap: 6px;
    justify-content: center;
}

.selection-palette-pop .sel-swatch {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    padding: 0;
    cursor: pointer;
}

.selection-palette-pop .sel-swatch.selected-color {
    box-shadow:
        0 0 0 2px #2b6cff,
        0 0 0 4px rgba(43, 108, 255, 0.2);
}

.selection-palette-pop .sel-custom-cell {
    position: relative;
    width: 30px;
    height: 30px;
}

.selection-palette-pop .sel-custom-btn {
    position: relative;
    overflow: hidden;
}

.selection-palette-pop .sel-custom-icon {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    line-height: 1;
    color: #333;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.selection-palette-pop .sel-custom-input {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

/* ─── Компактный тулбар для низких вьюпортов ─────────────────────────────
   Срабатывает в демо-iframe на телефоне (~420px) и на реальной доске
   в ландшафтной ориентации/низких окнах, где обычный тулбар (~450px)
   обрезался бы сверху и снизу.
   Панель уже: 80px вместо 100px — кнопки меньше выпячиваются вправо.
   Видимая часть кнопок — правые 80px (кнопки 180px, прижаты к правому краю,
   левая часть за экраном). Центр иконок: 90 + T − (180 − 80) = T − 10,
   поэтому T = 50px держит иконки по центру полосы.
   ВАЖНО: .fixed-left нельзя делать скролл-контейнером (overflow) —
   выпадающие меню внутри неё обрежутся по ширине панели. */
@media (max-height: 500px) {
    .fixed-left {
        width: 80px;
    }

    #toolContainer > .btn,
    #toolContainer > .btn-group > .btn,
    #toolContainer > .btn-group > .btn-group > .btn,
    #goBack,
    #goForward {
        height: 32px;
    }

    #toolContainer > .btn,
    #toolContainer > .btn-group {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .fixed-left .btn {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    #changeToText + #shapeToolbarDropdown,
    #goBack {
        margin-top: 8px !important;
    }

    /* Иконки меньше; сдвиг пересчитан под полосу 80px. */
    #toolContainer .btn > svg,
    #goBack > svg,
    #goForward > svg {
        width: 18px;
        height: 18px;
        transform: translateX(50px);
    }

    #toolContainer .btn > i {
        font-size: 13px;
        transform: translateX(50px);
    }

    /* Левая половина сплит-кнопок (карандаш, медиатека): видно 25px,
       центр ~12.5px — тот же сдвиг 50px. */
    #toolContainer .btn#changeToDraw > i,
    #toolContainer .btn#changeToDraw > svg,
    #toolContainer .btn#openMediaLibrary > i {
        transform: translateX(50px);
    }

    /* Тогл дропдауна (фигуры) — тоже центрируем в полосе. */
    #toolContainer .btn.dropdown-toggle > i,
    #toolContainer .btn.dropdown-toggle > svg {
        transform: translateX(50px);
    }

    /* Выезд нажатой/выбранной кнопки пропорционально меньше. */
    #toolContainer > .btn:active,
    #toolContainer > .btn-group > .btn:active,
    #toolContainer > .btn-group > .btn-group > .btn:active,
    #toolContainer > .btn.tool-selected,
    #toolContainer > .btn-group > .btn.tool-selected,
    #toolContainer > .btn-group > .btn-group > .btn.tool-selected,
    #toolContainer > .btn-group.pencil-group:has(> #changeToDraw.tool-selected),
    #toolContainer > .btn-group.pencil-group:has(> #changeToDraw:active),
    #goBack:active:not(:disabled),
    #goBack.is-action-buffer-pressed:not(:disabled),
    #goForward:active:not(:disabled),
    #goForward.is-action-buffer-pressed:not(:disabled) {
        transform: translateX(12px);
    }

    /* Микро-сдвиг иконок стрелок при нажатии — пропорционально. */
    #goBack:active:not(:disabled) svg,
    #goBack.is-action-buffer-pressed svg {
        transform: translateX(46px);
    }
    #goForward:active:not(:disabled) svg,
    #goForward.is-action-buffer-pressed svg {
        transform: translateX(54px);
    }

    /* Шестерёнка компактнее и ближе к углу, чтобы не наезжать на тулбар. */
    .settings-button {
        bottom: 8px;
        left: 8px;
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 13px;
    }

    /* Палетка не должна уезжать за край низкого вьюпорта. */
    #toolContainer .dropdown-menu.p-2 {
        max-height: calc(100vh - 16px);
        overflow-y: auto;
    }
}

/* Совсем низкие экраны (ландшафт старых телефонов): ещё одна ступень. */
@media (max-height: 340px) {
    #toolContainer > .btn,
    #toolContainer > .btn-group > .btn,
    #toolContainer > .btn-group > .btn-group > .btn,
    #goBack,
    #goForward {
        height: 26px;
    }

    #toolContainer > .btn,
    #toolContainer > .btn-group {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .fixed-left .btn {
        margin-top: 2px;
        margin-bottom: 2px;
    }
}