/* ============================================
   Kitchen Designer Pro — Stylesheet
   ============================================ */

:root {
    /* Color System */
    --bg-primary: #0f0f14;
    --bg-secondary: #16161e;
    --bg-tertiary: #1e1e2a;
    --bg-elevated: #252534;
    --bg-hover: #2a2a3d;
    --bg-active: #32324a;

    --text-primary: #e8e6f0;
    --text-secondary: #9896a8;
    --text-muted: #68667a;

    --accent: #6366f1;
    --accent-hover: #7c7ff7;
    --accent-glow: rgba(99, 102, 241, 0.25);
    --accent-subtle: rgba(99, 102, 241, 0.08);

    --danger: #ef4444;
    --danger-hover: #f87171;
    --success: #22c55e;
    --warning: #f59e0b;

    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);

    --panel-width: 280px;
    --toolbar-height: 52px;

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Loading Screen ---- */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-icon {
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
}

.loader-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loader-bar {
    width: 200px;
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin: 0 auto 12px;
    overflow: hidden;
}

.loader-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 10px;
    animation: loadFill 1.5s ease-out forwards;
}

@keyframes loadFill {
    0% { width: 0%; }
    60% { width: 80%; }
    100% { width: 100%; }
}

.loader-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---- Toolbar ---- */
#toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--toolbar-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-center {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo span {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.logo em {
    font-style: normal;
    font-weight: 400;
    color: var(--accent);
}

.tool-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.tool-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tool-btn.active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.tool-btn:active {
    transform: scale(0.92);
}

/* ---- App Layout ---- */
#app-layout {
    position: fixed;
    top: var(--toolbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

/* ---- Panels ---- */
#catalog-panel, #properties-panel {
    width: var(--panel-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    z-index: 50;
}

#properties-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

#catalog-panel.collapsed, #properties-panel.collapsed {
    width: 0;
    min-width: 0;
    border: none;
    overflow: hidden;
}

/* ----- Phone / small-screen layout -----
   Touch devices narrower than 900px (phones in landscape, or tablets held in
   the rotated portrait form factor after CSS rotation) need panels that float
   OVER the viewport instead of shrinking it. The toolbar is ruthlessly
   pruned to the six buttons a mobile user actually reaches for; everything
   else is still in the DOM (so JS refs don't break) but hidden via CSS. */
@media (max-width: 900px) and (pointer: coarse) {
    :root { --panel-width: 240px; }

    #toolbar {
        padding: 0 6px;
        justify-content: center;  /* with less content, centre what remains */
    }
    .toolbar-left, .toolbar-center, .toolbar-right { flex-shrink: 0; gap: 2px; }
    .toolbar-divider { display: none; }
    .tool-btn { width: 36px; height: 36px; }
    .logo, #btn-lang { display: none; }

    /* Hide everything that isn't essential on a phone. The full set stays
       available on tablets/desktop. Tweak this list to taste. */
    #btn-help,
    #btn-save,
    #btn-save-as,
    #btn-delete,
    #btn-duplicate,
    #btn-snap,
    #btn-grid-toggle,
    #btn-cm-toggle,
    #btn-measure,
    #btn-smart-snap,
    #btn-create-marble,
    #btn-door-list,
    #btn-history,
    #btn-walk,
    #btn-screenshot,
    #btn-reset { display: none; }

    /* What STAYS:
       - #btn-open-server   : load a design from the PC
       - #btn-undo / #btn-redo : mistakes happen
       - #btn-dims-live     : on-screen measurements
       - #btn-sketch        : pencil / sketch mode
       - #btn-view-lock     : spectator lock — camera only
       - #btn-fullscreen    : hide the browser chrome
       The Catalog and Properties drawers handle everything else. */

    /* Camera zoom control pad — bottom-right of viewport. Two big tap
       targets for when pinch-zoom is awkward (e.g. one-handed phone use). */
    #camera-zoom-pad {
        display: grid;
        position: absolute;
        right: 8px;
        bottom: 16px;   /* hug the bottom so short viewports don't push the pad up into the top-right floaters */
        z-index: 45;
    }
    #cam-orbit-strip { display: block; }

    #catalog-panel, #properties-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
    #catalog-panel { left: 0; }
    #properties-panel { right: 0; }

    /* Chunkier tap targets for small interactive controls. */
    .cat-tab { padding: 8px 10px; font-size: 12px; }
    .swatch { width: 28px; height: 28px; }
    .cam-btn { width: 36px; height: 36px; }
    .action-btn { min-height: 34px; }
}

/* Floating reopen tabs — hugs the viewport edge when a panel is collapsed.
   Hidden by default; shown only when the sibling panel has .collapsed. */
.panel-reopen {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 64px;
    background: rgba(26, 26, 36, 0.92);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(6px);
}
.panel-reopen:hover { background: rgba(40, 40, 55, 0.98); }
.panel-reopen-left {
    left: 0;
    border-left: none;
    border-radius: 0 8px 8px 0;
}
.panel-reopen-right {
    right: 0;
    border-right: none;
    border-radius: 8px 0 0 8px;
}
/* Use :has() so the tab auto-appears the moment the panel collapses,
   no extra JS bookkeeping required. */
#app-layout:has(#catalog-panel.collapsed) #btn-reopen-catalog,
#app-layout:has(#properties-panel.collapsed) #btn-reopen-props {
    display: flex;
}

.panel-header {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.panel-header h2 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.panel-toggle {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.panel-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ---- Search ---- */
.panel-search {
    padding: 8px 12px;
    position: relative;
    flex-shrink: 0;
}

.panel-search input {
    width: 100%;
    height: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 12px 0 34px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition);
}

.panel-search input::placeholder { color: var(--text-muted); }

.panel-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.panel-search svg {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* ---- Catalog Tabs ---- */
.catalog-tabs {
    display: flex;
    padding: 6px 12px;
    gap: 4px;
    flex-shrink: 0;
}

.cat-tab {
    flex: 1;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.cat-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.cat-tab.active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ---- Catalog Grid ---- */
.catalog-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
}

.catalog-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    text-align: center;
    cursor: grab;
    transition: all var(--transition);
    user-select: none;
}

.catalog-item:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.catalog-item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.catalog-item .item-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.catalog-item .item-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.catalog-item .item-size {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.catalog-item .item-price {
    font-size: 0.65rem;
    color: var(--success);
    font-weight: 500;
    margin-top: 2px;
}

/* ---- Viewport ---- */
#viewport-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#viewport {
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
}

/* Camera Presets */
#camera-presets {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    background: rgba(22, 22, 30, 0.85);
    backdrop-filter: blur(12px);
    padding: 5px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.cam-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.cam-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cam-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Info Bar */
#info-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    background: rgba(22, 22, 30, 0.85);
    backdrop-filter: blur(12px);
    padding: 8px 20px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

#info-bar span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---- Properties Panel ---- */
.prop-section {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

.section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 14px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.section-title:first-child {
    margin-top: 0;
}

.prop-row {
    margin-bottom: 10px;
}

/* ---- Collapsible property groups ---- */
.prop-group {
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.prop-group > summary {
    list-style: none;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--transition);
}
.prop-group > summary::-webkit-details-marker { display: none; }
.prop-group > summary::after {
    content: '+';
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.prop-group[open] > summary::after {
    content: '−';
}
.prop-group > summary:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text);
}
.prop-group > .prop-group-body {
    padding: 10px;
    border-top: 1px solid var(--border);
}

/* Tight rows inside groups don't need extra bottom margin */
.prop-group .prop-row {
    margin-bottom: 8px;
}
.prop-group .prop-row:last-child {
    margin-bottom: 0;
}

.prop-row label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
}

.prop-row input[type="number"],
.prop-row select {
    width: 100%;
    height: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition);
}

.prop-row input[type="number"]:focus,
.prop-row select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.prop-row select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2368667a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* History panel entry hover */
.history-entry:hover {
    background: rgba(99, 102, 241, 0.12);
    border-left-color: #6366f1 !important;
}

/* Dropdown option list — force readable colors so the native picker isn't gray-on-gray */
select option {
    background: #ffffff;
    color: #111111;
}
select option:checked,
select option:hover {
    background: #e5ecff;
    color: #111111;
}

/* Range Slider */
.prop-row input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 10px;
    outline: none;
    margin-top: 4px;
}

.prop-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-glow);
    transition: transform 0.15s ease;
}

.prop-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Color Swatches */
.color-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-sm);
}

.swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Coarse-pointer devices (phones, tablets) in portrait: rotate the whole app
   90° CCW so the UI stays landscape regardless of how the user holds the
   device. Desktops with a tall window aren't affected because they have fine
   pointers. JS sets body.rotated-landscape when rotation is active so the
   pointer-event coordinate remap (see getRotatedMouse() in app.js) can
   compensate for the transform. */
@media (orientation: portrait) and (pointer: coarse) {
    html, body {
        width: 100vh;
        height: 100vw;
        overflow: hidden;
    }
    body {
        position: fixed;
        top: 0;
        left: 0;
        transform-origin: 0 0;
        transform: rotate(-90deg) translate(-100vh, 0);
    }
}

/* Mobile orbit thumbstick — hidden on desktop (no need; mouse drag orbits fine),
   surfaced on coarse-pointer devices where one-finger-swipe doesn't feel
   precise. Styled to look like a horizontal slider with a big handle. */
#cam-orbit-strip {
    position: absolute;
    left: 50%;
    bottom: 14px;
    /* Slight leftward nudge so the slider doesn't sit under the camera pad
       shadow on wider phones. */
    transform: translateX(calc(-50% - 40px));
    width: min(70%, 420px);
    padding: 8px 14px;
    background: rgba(26, 26, 36, 0.82);
    border: 1px solid var(--border);
    border-radius: 24px;
    z-index: 45;
    display: none;
    backdrop-filter: blur(6px);
}
#cam-orbit-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #334155;
    border-radius: 4px;
    outline: none;
}
#cam-orbit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #1a1a24;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#cam-orbit-slider::-moz-range-thumb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #1a1a24;
    cursor: grab;
}
#cam-orbit-slider:active { cursor: grabbing; }

/* Camera pad layout — 3-col grid producing a D-pad (↑↓←→) with a +/− dolly
   tucked beneath. Hidden by default; surfaced on touch devices and in
   camera-mode. */
#camera-zoom-pad {
    display: none;
    grid-template-columns: 44px 44px 44px;
    gap: 4px;
}
#camera-zoom-pad .pad-cell {
    width: 44px;
    height: 44px;
    background: rgba(26, 26, 36, 0.92);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#camera-zoom-pad .pad-cell:active { background: rgba(40, 40, 55, 0.98); }
/* Empty grid cells only hold layout space — no paint, no blur, no pointer.
   Anything rendered behind them (the orbit slider, the 3D scene) shows
   through cleanly. Without killing backdrop-filter here, these cells leave
   a subtle blurred rectangle over whatever sits below, which reads like a
   "censor bar" across the slider. */
#camera-zoom-pad .pad-empty {
    background: transparent;
    border: none;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
#camera-zoom-pad .pad-zoom  { font-size: 22px; }

/* "Enter camera mode" + auxiliary floating tools (pencil sketch). Same shape,
   stacked vertically in the top-right corner. */
#btn-camera-mode-float,
#btn-sketch-float,
#btn-photo-float {
    position: absolute;
    right: 8px;
    width: 40px;
    height: 40px;
    background: rgba(26, 26, 36, 0.92);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    z-index: 46;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(6px);
}
#btn-camera-mode-float { top: 8px; }
#btn-sketch-float      { top: 56px; }
#btn-photo-float       { top: 104px; }
@media (pointer: coarse) {
    #btn-camera-mode-float,
    #btn-sketch-float,
    #btn-photo-float { display: flex; }
}
#btn-camera-mode-float:active,
#btn-camera-mode-float.active,
#btn-sketch-float:active,
#btn-sketch-float.active,
#btn-photo-float:active { background: #f59e0b; color: #1a1a24; border-color: #f59e0b; }

/* HD cell inside the camera pad — inherits the base .pad-cell styling; this
   rule just handles its "active" orange highlight. */
#btn-hires-float.active { background: #f59e0b; color: #1a1a24; border-color: #f59e0b; }

/* ----- Camera mode -----
   Toggled by body.camera-mode. Every overlay except the camera pad and the
   exit button is hidden, giving a clean spectator view of the scene. Pairs
   well with viewLocked (we auto-enable it together). */
body.camera-mode #toolbar,
body.camera-mode .panel-reopen,
body.camera-mode #info-bar,
body.camera-mode #camera-presets,
body.camera-mode #smart-snap-panel,
body.camera-mode #dims-overlay,
body.camera-mode #sketch-panel,
body.camera-mode #history-panel,
body.camera-mode #walk-hint,
body.camera-mode #marble-dims-bar,
body.camera-mode #catalog-panel,
body.camera-mode #properties-panel { display: none !important; }

body.camera-mode #app-layout {
    top: 0; /* toolbar is gone */
}
body.camera-mode #camera-zoom-pad     { display: grid !important; }
body.camera-mode #cam-orbit-strip     { display: block !important; }
body.camera-mode #btn-camera-mode-float,
body.camera-mode #btn-sketch-float,
body.camera-mode #btn-photo-float     { display: flex !important; }
body.camera-mode #btn-camera-mode-float {
    background: #f59e0b;
    color: #1a1a24;
    border-color: #f59e0b;
}

.snap-chip:hover { background: #334155 !important; }
.snap-chip.active {
    background: #f59e0b !important;
    color: #1a1a24 !important;
    border-color: #f59e0b !important;
    font-weight: 600;
}

/* Action Buttons */
.actions-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.action-btn {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ---- Help Button ---- */
#btn-help {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 200;
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
}

#btn-help:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: scale(1.1);
}

/* ---- Modal ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.modal-content h2 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.shortcut kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: inherit;
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: center;
    white-space: nowrap;
}

.shortcut span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.modal-close {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    border: none;
    background: var(--accent);
    color: white;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.modal-close:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow);
}

/* ---- Selection Highlight ---- */
.selected-highlight {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* ---- Ghost Drag Preview ---- */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 500;
    opacity: 0.8;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: translate(-50%, -50%);
}

/* ---- Toast Messages ---- */
.toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 0.8rem;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }