/* ── COLOR PICKER BAR ── */
.colorPickerBar {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: calc(100vw - 24px);

    background: #ffffff;
    border: 1.5px solid #e2ddd6;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.colorPickerBar.cooldown-active .current-color,
.colorPickerBar.cooldown-active .swatch,
.colorPickerBar.cooldown-active .expand-btn {
    pointer-events: none;
}

.colorPickerBar .admin-tool {
    display: none;
}

.colorPickerBar.admin-mode .admin-tool {
    display: inline-flex;
}

.colorPickerBar.admin-mode .cooldown-indicator,
.colorPickerBar.admin-mode .cooldown-indicator + .sep {
    display: none;
}

.current-color {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.current-color:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.current-color.eraser-selected {
    background:
            linear-gradient(135deg, transparent 0 46%, #d63a2f 46% 54%, transparent 54%),
            #fff7f7 !important;
}

.sep {
    width: 1px;
    height: 30px;
    background: #e2ddd6;
    margin: 0 2px;
    flex-shrink: 0;
}

.swatch-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.swatch {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.1s, box-shadow 0.1s;
    flex-shrink: 0;
}
.swatch:hover {
    transform: scale(1.22);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.swatch.disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.swatch.disabled:hover {
    transform: none;
    box-shadow: none;
}

.expand-btn {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid #e2ddd6;
    background: #f5f2ed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
    margin-left: 2px;
}
.expand-btn:hover {
    background: #ece7df;
    border-color: #c8c2b8;
}

.expand-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.expand-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.22s ease;
}
.expand-btn.open svg {
    transform: rotate(180deg);
}
.expand-btn svg path {
    stroke: #6b6560;
}

/* ── PALETTE POPUP ── */
.palette-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;

    background: #ffffff;
    border: 1.5px solid #e2ddd6;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);

    display: grid;
    grid-template-columns: repeat(8, 32px);
    gap: 6px;

    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.palette-popup.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* ── COORDS LABEL── */
.coords {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: #b0aa9f;
    margin-left: 2px;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

/* ── BUTTONS ── */
.btn {
    height: 34px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #e2ddd6;
    background: #f5f2ed;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    color: #6b6560;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.btn:hover {
    background: #ece7df;
    border-color: #c8c2b8;
    color: #1a1714;
}
.btn:active { transform: scale(0.97); }

.btn-cancel {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #e2ddd6;
    background: #f5f2ed;
    color: #6a6560;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-cancel:hover {
    background: #fdf1f0;
    border-color: #f0c8c5;
    color: #d63a2f;
}

.btn-eraser {
    gap: 6px;
}

.btn-eraser svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-eraser.active {
    background: #fdf1f0;
    border-color: #f0c8c5;
    color: #d63a2f;
}

/* ── COOLDOWN INDICATOR ── */
.cooldown-indicator {
    height: 34px;
    min-width: 78px;
    padding: 0 11px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: #f5f2ed;
    border: 1px solid #e2ddd6;
    border-radius: 999px;

    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;

    color: #6b6560;
    white-space: nowrap;

    transition:
            background 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease,
            transform 0.15s ease;
}

.cooldown-dot {
    width: 9px;
    height: 9px;

    border-radius: 2px;
    background: #42d66b;

    box-shadow: 0 0 7px rgba(66, 214, 107, 0.55);

    transition:
            background 0.15s ease,
            box-shadow 0.15s ease;
}

.cooldown-indicator.ready {
    background: #f2fbf3;
    border-color: #cdebd2;
    color: #2d8c45;
}

.cooldown-indicator.ready .cooldown-dot {
    background: #42d66b;
    box-shadow: 0 0 8px rgba(66, 214, 107, 0.6);
}

.cooldown-indicator.waiting {
    background: #fff7ea;
    border-color: #efd8b0;
    color: #a46a20;
}

.cooldown-indicator.waiting .cooldown-dot {
    background: #e59500;
    box-shadow: 0 0 8px rgba(229, 149, 0, 0.5);
}

.cooldown-indicator.shake {
    animation: cooldownShake 0.28s ease;
}

@keyframes cooldownShake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    50% {
        transform: translateX(3px);
    }
    75% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(0);
    }
}