/* ============================================================
   WHITEBOARD (and shared canvas chrome: tooltips, zoom pill, shortcut sheet)
   Loaded after app.css, so these rules win over the older wb-/mm- rules there.
   ============================================================ */

.canvas-body { overflow: hidden; }

/* Tooltips: [data-tip] shows a small dark label after a short delay. */
[data-tip] { position: relative; }
[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 30;
    padding: 0.32rem 0.55rem;
    border-radius: 7px;
    background: #0b111a;
    color: #f3efe6;
    font: 600 0.72rem/1.2 var(--font);
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
    animation: cv-tip 0.12s ease-out 0.45s both;
}
.wb-zoom [data-tip]:hover::after, .wb-panel [data-tip]:hover::after { top: auto; bottom: calc(100% + 8px); }
.wb-panel .swatch[data-tip]:hover::after { bottom: calc(100% + 6px); }
@keyframes cv-tip { from { opacity: 0; } to { opacity: 1; } }

/* Floating tool pill, top centre */
.canvas-body .wb-toolbar,
.canvas-body .mm-toolbar {
    position: absolute;
    display: flex;
    top: 0.75rem;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 6;
    flex-direction: row;
    align-items: center;
    gap: 0;
    max-width: calc(100% - 1.5rem);
    max-height: none;
    overflow: visible;
    padding: 0.28rem;
    border: 1px solid #e3e6ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 32px -14px rgba(16, 24, 40, 0.4), 0 2px 6px -2px rgba(16, 24, 40, 0.08);
    transform: translateX(-50%);
}
.wb-group { display: flex; align-items: center; gap: 2px; padding: 0 0.3rem; border-right: 1px solid #e8ebef; }
.wb-group:first-child { padding-left: 0.1rem; }
.wb-group:last-child { padding-right: 0.1rem; border-right: 0; }
.wb-group > button, .wb-actions > button, .wb-seg > button {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #4a525d;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.wb-group > button:hover:not(:disabled), .wb-group > button.danger:hover:not(:disabled), .wb-actions > button:hover:not(:disabled) { background: #f2f4f7; color: #11151b; }
.wb-group > button:disabled { opacity: 0.3; cursor: default; }
.wb-group > button.on, .wb-group > button.on:hover:not(:disabled) {
    background: linear-gradient(#d4ad57, #b38a37);
    color: #ffffff;
    box-shadow: 0 4px 12px -4px rgba(176, 138, 53, 0.85);
}

/* Style panel: shows what applies to the current tool or selection */
.wb-panel {
    position: absolute;
    top: 4.25rem;
    left: 0.75rem;
    z-index: 5;
    box-sizing: border-box;
    width: 218px;
    max-height: calc(100% - 7.5rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem 0.85rem 0.9rem;
    border: 1px solid #e3e6ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 32px -14px rgba(16, 24, 40, 0.4), 0 2px 6px -2px rgba(16, 24, 40, 0.08);
    scrollbar-width: thin;
    animation: wb-pop 0.14s ease-out;
}
@keyframes wb-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wb-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.42rem;
    color: #7b8490;
    font: 700 0.62rem/1 var(--subhead);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wb-label b { color: #4a525d; font-weight: 700; letter-spacing: 0.04em; }
.wb-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.wb-panel .swatch {
    position: relative;
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.1s;
}
.wb-panel .swatch:hover { transform: scale(1.12); }
.wb-panel .swatch.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px #ffffff, 0 0 0 4px #c9a24b !important; }
.wb-panel .swatch.none {
    background: linear-gradient(135deg, #ffffff 44%, #e2445c 44%, #e2445c 56%, #ffffff 56%) !important;
}
.wb-panel .swatch.custom {
    background: conic-gradient(#e2445c, #fdab3d, #ffe27a, #00c875, #579bfc, #a25ddc, #e2445c) !important;
    overflow: hidden;
}
.wb-panel .swatch.custom::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1.5px #ffffff;
}
.wb-panel .swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wb-seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: #f0f2f5; }
.wb-seg > button { flex: 1; width: auto; height: 30px; border-radius: 8px; font: 700 0.78rem var(--font); }
.wb-seg > button:hover { color: #11151b; }
.wb-seg > button.on { background: #ffffff; color: #0b111a; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.22); }
.wb-width { display: block; width: 20px; border-radius: 99px; background: currentColor; }
.wb-range { width: 100%; margin: 0; accent-color: #c9a24b; }
.wb-actions { display: flex; gap: 4px; padding-top: 0.7rem; border-top: 1px solid #eceff2; }
.wb-actions > button { flex: 1; width: auto; }
.wb-actions > button.danger:hover:not(:disabled) { background: #fdecef; color: #c2253e; }

/* The surface */
.wb-host { cursor: default; }
.wb-host[data-tool="hand"] .wb-svg, .wb-host[data-pan="ready"] .wb-svg { cursor: grab; }
.wb-host[data-pan="1"] .wb-svg { cursor: grabbing; }
.wb-host[data-tool="diamond"] .wb-svg { cursor: crosshair; }
.wb-host[data-tool="select"] .wb-item { cursor: move; }
.wb-host:focus-visible { box-shadow: none; }
.wb-handle { cursor: pointer; }
.wb-handle[data-handle="nw"], .wb-handle[data-handle="se"] { cursor: nwse-resize; }
.wb-handle[data-handle="ne"], .wb-handle[data-handle="sw"] { cursor: nesw-resize; }
.wb-handle[data-handle="p1"], .wb-handle[data-handle="p2"] { cursor: crosshair; }
.wb-marquee { pointer-events: none; }
.wb-selection { pointer-events: none; }
.wb-sel, .wb-preview { pointer-events: none; }
.wb-sel .wb-handle { pointer-events: all; }
.wb-item text { user-select: none; }

/* In-place editor for stickies and text */
.wb-editor {
    border: 2px solid #c9a24b;
    border-radius: 6px;
    font-family: var(--font);
    font-weight: 500;
    caret-color: #0b111a;
}
.wb-editor-sticky { line-height: 1.35; box-shadow: 0 10px 22px -8px rgba(16, 24, 40, 0.3); }
.wb-editor-text { padding: 0 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.85); line-height: 1.25; white-space: pre; overflow: hidden; }

/* Empty-state hint */
.wb-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    gap: 0.4rem;
    max-width: min(380px, calc(100% - 3rem));
    padding: 1.2rem 1.4rem;
    border: 1px dashed #d3d8df;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: #5b6470;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.wb-empty strong { color: #0b111a; font: 400 1.7rem/1 var(--serif); letter-spacing: 0.03em; }
.wb-empty kbd, .shortcut-grid kbd {
    display: inline-block;
    min-width: 1.35em;
    padding: 0.08em 0.4em;
    border: 1px solid #d3d8df;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #f7f8fa;
    color: #2b313a;
    font: 600 0.78em var(--font);
    text-align: center;
}

/* Zoom pill, bottom right */
.wb-zoom { z-index: 6; gap: 1px; border-radius: 12px; box-shadow: 0 12px 32px -14px rgba(16, 24, 40, 0.4), 0 2px 6px -2px rgba(16, 24, 40, 0.08); }
.wb-zoom button { cursor: pointer; }
.wb-zoom button.wb-zoom-value { width: auto; min-width: 3.4rem; padding: 0 0.3rem; font: 700 0.74rem var(--subhead); letter-spacing: 0.04em; }

/* Keyboard shortcut sheet (whiteboard and mind map) */
.shortcut-sheet { max-width: 560px; }
.shortcut-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.1rem; align-items: center; max-height: 62vh; overflow-y: auto; font-size: 0.9rem; }
.shortcut-grid .keys { display: inline-flex; gap: 0.25rem; }

@media (max-width: 760px) {
    .canvas-body .wb-toolbar, .canvas-body .mm-toolbar { top: 0.5rem; max-width: calc(100% - 1rem); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start; }
    .wb-toolbar::-webkit-scrollbar, .mm-toolbar::-webkit-scrollbar { display: none; }
    .wb-group { flex: none; }
    [data-tip]:hover::after { display: none; }
    .wb-panel {
        top: auto;
        right: 0.5rem;
        bottom: 3.7rem;
        left: 0.5rem;
        width: auto;
        max-height: 36%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.7rem 1rem;
        padding: 0.65rem 0.75rem;
    }
    .wb-actions { padding-top: 0; border-top: 0; }
    .wb-actions > button { flex: none; }
    .wb-zoom { right: 0.5rem; bottom: 0.5rem; }
}