/* ── Draw Canvas Overlay ──────────────────────────────────────────── */

/* Toggle button in hint-row */
.adc-toggle-btn {
    background: #fff;
    color: #374151;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.adc-toggle-btn:hover  { background: #f3f4f6; border-color: #9ca3af; }
.adc-toggle-btn.adc-active { background: #fef9c3; border-color: #facc15; color: #713f12; }

/* Overlay covers the body area */
.adc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 50;
    background: transparent;
}

/* Toolbar */
.adc-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,.96);
    border-bottom: 1.5px solid #e5e7eb;
    flex-shrink: 0;
    flex-wrap: wrap;
    backdrop-filter: blur(4px);
}

.adc-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-right: 1px solid #e5e7eb;
    margin-right: 2px;
}

/* Color swatches */
.adc-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: transform .1s, border-color .1s;
    padding: 0;
    flex-shrink: 0;
}
.adc-color-btn:hover  { transform: scale(1.15); }
.adc-color-btn.adc-sel { border-color: #374151; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #374151; }

/* Size buttons */
.adc-size-btn {
    width: 30px;
    height: 28px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .1s;
}
.adc-size-btn:hover   { background: #e5e7eb; }
.adc-size-btn.adc-sel { background: #dbeafe; border-color: #2563eb; }

.adc-size-dot {
    border-radius: 50%;
    background: #374151;
    display: block;
}

/* Tool buttons (eraser, clear) */
.adc-tool-btn {
    height: 28px;
    padding: 0 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    cursor: pointer;
    font-size: .85rem;
    transition: background .1s;
}
.adc-tool-btn:hover   { background: #e5e7eb; }
.adc-tool-btn.adc-sel { background: #fef3c7; border-color: #f59e0b; }

/* Close button */
.adc-close-btn {
    height: 28px;
    padding: 0 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: #6b7280;
    transition: background .1s;
    margin-left: auto;
}
.adc-close-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* Canvas */
.adc-canvas {
    flex: 1;
    display: block;
    cursor: crosshair;
    touch-action: none;
    background: rgba(255,255,255,.55);
}