/**
 * Version: 7.1.0
 * Purpose: Design-board styles — single-row toolbar (drawing tools wrap into two
 *          rows on the right flank), color sun, contextual action group, transparent
 *          stage, text/sticky overlay, help modal, theme-proof buttons.
 * Decision Log:
 *   - 7.1.0: aligned with board.js 7.1.0. Added `.a-sun-sketch-group--tools`
 *     (wraps into two rows, max-inline-size capped). Removed the dead
 *     `.a-sun-sketch-dot--*` rules (single cycle-size button replaced them, §7.3).
 *   - 7.1.0: help modal widened to 720px with a 4-column grid (was 560px/2-col),
 *     so all shortcuts fit in one glance with less height.
 *   - 7.1.0: consolidated the duplicate `.a-sun-sketch-textinput` definitions into
 *     one base + one `textarea` variant.
 *   - 7.1.0: the contextual group's trailing separator hides together with it
 *     (`[hidden] + .a-sun-sketch-sep`) so no orphan divider is left behind.
 *   - 6.8.0: single-row toolbar, horizontal scroll, no separator under the bar.
 *   - 6.2.0: transparent stage (single dot layer comes from the chat container).
 * Dependencies: core.css
 * Impact Map: board.js DOM
 * Used By: browser DOM
 * Owner: A-SUN Studio
 */

/* Toolbar — ONE nowrap row; the bar scrolls horizontally if it overflows.
   The sun sits in the center grid column; tools hug it on both sides. */
.a-sun-sketch-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--a-sun-border) transparent;
}

.a-sun-sketch-bar::-webkit-scrollbar {
    height: 5px;
}

.a-sun-sketch-bar::-webkit-scrollbar-thumb {
    background: var(--a-sun-border);
    border-radius: 3px;
}

.a-sun-sketch-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    /* 7.2.0: always one row */
    min-width: max-content;
}

.a-sun-sketch-group--outer-end {
    justify-content: flex-end;
}

.a-sun-sketch-group--outer-start {
    justify-content: flex-start;
}

.a-sun-sketch-group--center {
    justify-content: center;
}

.a-sun-sketch-sep {
    width: 1px;
    height: 18px;
    background: var(--a-sun-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* NOTE: the old .a-sun-sketch-group--tools (flex-wrap: wrap) is REMOVED. */
/* ===================== Floating contextual action bar (7.2.0) ===================== */
/* Appears on the selected object. Positioned by JS (left/top + transform). */
.a-sun-floating-bar {
    position: absolute;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: var(--a-sun-popover);
    border: 1px solid var(--a-sun-border);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    border-start-start-radius: 0;
    border-start-end-radius: 7px;
    border-end-end-radius: 0;
    border-end-start-radius: 7px;
}

.a-sun-floating-bar[hidden] {
    display: none;
}

.a-sun-floating-bar .a-sun-sketch-btn {
    min-inline-size: 30px;
    min-block-size: 30px;
    padding: 4px;
}

.a-sun-floating-bar .a-sun-sketch-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
/* 7.1.0: drawing-tools flank wraps into two rows, capped in width.
   Defined AFTER the base group so flex-wrap/min-width overrides win. */
.a-sun-sketch-group--tools {
    flex-wrap: wrap;
    min-width: 0;
    max-inline-size: 280px;
    justify-content: flex-end;
}

/* 7.1.0: when the contextual group is hidden, hide its trailing separator too,
   so no orphan divider is left between undo/redo and clear. */
.a-sun-sketch-group--contextual[hidden]+.a-sun-sketch-sep {
    display: none !important;
}

.a-sun-sketch-sep {
    width: 1px;
    height: 18px;
    background: var(--a-sun-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Mobile: collapse the grid into one horizontally-scrollable flex row. */
@media (max-width: 720px) {
    .a-sun-sketch-bar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 4px 6px;
        padding: 4px 6px;
        -webkit-overflow-scrolling: touch;
    }

    /* Every group stays on one row EXCEPT the tools flank, which keeps wrapping. */
    .a-sun-sketch-group:not(.a-sun-sketch-group--tools),
    .a-sun-sketch-group--center {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .a-sun-color-sun {
        flex-shrink: 0;
        inline-size: 48px;
        block-size: 48px;
    }
}

/* ===================== Icon-only tool buttons ===================== */
.a-sun-ai-advisor .a-sun-sketch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px;
    min-inline-size: 34px;
    min-block-size: 34px;
    position: relative;
    /* anchor for the corner shortcut */
    background: transparent !important;
    border: 1px dashed var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    cursor: pointer;
    font-size: 0;
    font-family: inherit;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.a-sun-ai-advisor .a-sun-sketch-btn:hover {
    background: color-mix(in srgb, var(--a-sun-accent) 10%, transparent) !important;
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
}

.a-sun-ai-advisor .a-sun-sketch-btn.is-active {
    background: color-mix(in srgb, var(--a-sun-accent) 18%, transparent) !important;
    border: 1px solid var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
}

.a-sun-ai-advisor .a-sun-sketch-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.a-sun-sketch-btn:focus-visible,
.a-sun-color-sun__ray:focus-visible {
    outline: 2px solid var(--a-sun-accent);
    outline-offset: 2px;
}

.a-sun-sketch-btn svg {
    inline-size: 17px;
    block-size: 17px;
    display: block;
    flex-shrink: 0;
}

/* Subtle corner shortcut. Full description + shortcut also lives in the
   button's title (hover tooltip). Modifier combos (Ctrl+Z) stay hover-only. */
.a-sun-sketch-kbd {
    position: absolute;
    inset-inline-end: 2px;
    inset-block-end: 1px;
    font-size: 0.5rem;
    line-height: 1.1;
    color: var(--a-sun-muted);
    opacity: 0.8;
    pointer-events: none;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}

/* Zoom label button shows real text. */
.a-sun-sketch-zoom {
    min-inline-size: 46px;
    justify-content: center;
    direction: ltr;
    font-size: 0.72rem !important;
    padding: 5px 8px !important;
}

/* 7.1.0: single cycle-size button. The whole 3-dot icon scales to signal the
   current thickness. (Replaces the old three separate dot buttons.) */
.a-sun-ai-advisor .a-sun-sketch-sizebtn svg {
    transition: transform 0.2s ease;
}

.a-sun-ai-advisor .a-sun-sketch-sizebtn.is-s svg {
    transform: scale(0.75);
}

.a-sun-ai-advisor .a-sun-sketch-sizebtn.is-m svg {
    transform: scale(1);
}

.a-sun-ai-advisor .a-sun-sketch-sizebtn.is-l svg {
    transform: scale(1.25);
}

/* ===================== Color sun ===================== */
.a-sun-color-sun {
    position: relative;
    inline-size: 56px;
    block-size: 56px;
    flex-shrink: 0;
}

.a-sun-color-sun svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
}

.a-sun-color-sun__center {
    transition: fill 0.2s ease;
    stroke: var(--a-sun-panel);
    stroke-width: 2;
}

.a-sun-color-sun__short {
    stroke: var(--a-sun-muted);
    stroke-width: 2.5;
    stroke-linecap: round;
    pointer-events: none;
}

.a-sun-color-sun__ray {
    cursor: pointer;
    stroke-linecap: round;
    stroke-width: 4;
    transition: stroke-width 0.15s ease, filter 0.2s ease;
    outline: none;
}

.a-sun-color-sun__ray:hover {
    stroke-width: 5;
    filter: drop-shadow(0 0 3px currentColor);
}

.a-sun-color-sun__ray.is-active {
    stroke-width: 5;
    filter: drop-shadow(0 0 4px currentColor);
}

/* ===================== Stage — fully transparent ===================== */
/* No background here on purpose — the dot grid shows through from the chat
   container, giving exactly ONE dot layer. The canvas clears to transparent. */
.a-sun-sketch-stage {
    position: relative;
    flex: 1 1 0%;
    min-height: 280px;
    overflow: hidden;
}

.a-sun-sketch-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

/* ===================== Text / sticky-note editor (consolidated, 7.1.0) ===================== */
.a-sun-sketch-textinput {
    position: absolute;
    left: var(--sk-x);
    top: var(--sk-y);
    font-size: var(--sk-size);
    color: var(--sk-color);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--a-sun-accent);
    outline: none;
    font-family: inherit;
    min-inline-size: 140px;
    padding: 2px;
}

/* When it's a textarea (sticky note), adopt the width/background vars. */
textarea.a-sun-sketch-textinput {
    inline-size: var(--sk-width, 160px);
    min-block-size: 60px;
    background: var(--sk-color);
    border: 1px dashed var(--a-sun-accent);
    resize: none;
}

/* Hidden file input (import). */
.a-sun-sketch-file {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
}

/* ===================== Help modal (7.1.0: wider, 4-col, shorter) ===================== */
.a-sun-sketch-help {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a-sun-sketch-help[hidden] {
    display: none;
}

.a-sun-sketch-help__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.a-sun-sketch-help__panel {
    position: relative;
    inline-size: 720px;
    max-inline-size: 92vw;
    max-block-size: 80vh;
    overflow-y: auto;
    background: var(--a-sun-panel, #111217);
    border: 1px solid var(--a-sun-border);
    padding: 20px 24px;
    color: var(--a-sun-text, #f2f3f6);
    border-start-start-radius: 7px;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 7px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.a-sun-sketch-help__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--a-sun-border);
}

.a-sun-sketch-help__close {
    background: transparent;
    border: none;
    color: var(--a-sun-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

/* 4 columns so ~28 shortcuts fit in ~7 rows — one glance, less height. */
.a-sun-sketch-help__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 14px;
}

.a-sun-sketch-help__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.a-sun-sketch-help__row kbd {
    display: inline-block;
    min-inline-size: 44px;
    padding: 3px 8px;
    background: var(--a-sun-surface, rgba(242, 243, 246, 0.08));
    border: 1px solid var(--a-sun-border);
    border-start-start-radius: 4px;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    text-align: center;
    direction: ltr;
}

@media (max-width: 720px) {
    .a-sun-sketch-help__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .a-sun-sketch-help__panel {
        padding: 16px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .a-sun-ai-advisor .a-sun-sketch-btn,
    .a-sun-color-sun__center,
    .a-sun-color-sun__ray,
    .a-sun-ai-advisor .a-sun-sketch-sizebtn svg {
        transition: none;
    }
}