/* ==========================================================================
   Smartphone Demo by CraftBook V3 — Frontend Stylesheet
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */

.cbd3-app {
    --cbd3-accent:     #00aaff;
    --cbd3-accent-glow:#00aaff33;

    /* Layout */
    --cbd3-topbar-h:  52px;
    --cbd3-footer-h:  46px;
    --cbd3-sidebar-w: 196px;
    --cbd3-panel-w:   230px;
    --cbd3-app-h:     580px;

    /* Radii */
    --cbd3-r-sm: 6px;
    --cbd3-r-md: 10px;
    --cbd3-r-lg: 16px;

    /* Transitions */
    --cbd3-t-fast:   120ms ease;
    --cbd3-t-mid:    250ms ease;
    --cbd3-t-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */

.cbd3-theme-dark {
    --cbd3-bg:        #0d1117;
    --cbd3-bg-panel:  #161b22;
    --cbd3-bg-card:   #1c2128;
    --cbd3-bg-hover:  #242b35;
    --cbd3-border:    rgba(255,255,255,0.10);
    --cbd3-border-hv: rgba(255,255,255,0.22);
    --cbd3-text:      #e6edf3;
    --cbd3-text2:     #8b949e;
    --cbd3-text3:     #484f58;
    --cbd3-shadow:    0 4px 24px rgba(0,0,0,0.55);
    --cbd3-shadow-sm: 0 2px 8px  rgba(0,0,0,0.35);
}

/* ── Light theme ────────────────────────────────────────────────────────── */

.cbd3-theme-light {
    --cbd3-bg:        #f0f2f5;
    --cbd3-bg-panel:  #ffffff;
    --cbd3-bg-card:   #ffffff;
    --cbd3-bg-hover:  #f6f8fa;
    --cbd3-border:    rgba(0,0,0,0.09);
    --cbd3-border-hv: rgba(0,0,0,0.20);
    --cbd3-text:      #1c2128;
    --cbd3-text2:     #57606a;
    --cbd3-text3:     #afb8c1;
    --cbd3-shadow:    0 4px 24px rgba(0,0,0,0.10);
    --cbd3-shadow-sm: 0 2px 8px  rgba(0,0,0,0.06);
}

/* ── App shell ──────────────────────────────────────────────────────────── */

.cbd3-app {
    position:       relative;
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         auto;
    min-height:     520px;
    background:     var(--cbd3-bg);
    color:          var(--cbd3-text);
    font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    font-size:      14px;
    line-height:    1.5;
    border-radius:  var(--cbd3-r-lg);
    overflow:       hidden;
    box-shadow:     var(--cbd3-shadow);
    box-sizing:     border-box;
}

.cbd3-app *,
.cbd3-app *::before,
.cbd3-app *::after { box-sizing: inherit; }

/* ── Top bar ────────────────────────────────────────────────────────────── */

.cbd3-topbar {
    display:         flex;
    align-items:     center;
    gap:             10px;
    height:          var(--cbd3-topbar-h);
    min-height:      var(--cbd3-topbar-h);
    padding:         0 14px;
    background:      var(--cbd3-bg-panel);
    border-bottom:   1px solid var(--cbd3-border);
    flex-shrink:     0;
    z-index:         10;
}

/* ── Buttons (shared base) ──────────────────────────────────────────────── */

.cbd3-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 12px;
    background:      var(--cbd3-bg-card);
    border:          1px solid var(--cbd3-border);
    border-radius:   var(--cbd3-r-sm);
    color:           var(--cbd3-text);
    font-size:       13px;
    font-weight:     500;
    font-family:     inherit;
    cursor:          pointer;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background var(--cbd3-t-fast),
                     border-color var(--cbd3-t-fast),
                     color var(--cbd3-t-fast);
    -webkit-user-select: none;
    user-select:     none;
}

.cbd3-btn:hover {
    background:   var(--cbd3-bg-hover);
    border-color: var(--cbd3-border-hv);
}

.cbd3-btn:focus-visible {
    outline:        2px solid var(--cbd3-accent);
    outline-offset: 2px;
}

.cbd3-btn:active { transform: scale(0.97); }

.cbd3-btn--reset {
    margin-left: auto;
    color:       var(--cbd3-text2);
    flex-shrink: 0;
}

.cbd3-btn--primary {
    background: var(--cbd3-accent);
    border-color: transparent;
    color: #fff;
}
.cbd3-btn--primary:hover { opacity: 0.88; background: var(--cbd3-accent); }

.cbd3-btn--ghost {
    background:   transparent;
    border-color: var(--cbd3-border);
    color:        var(--cbd3-text2);
}
.cbd3-btn--ghost:hover { border-color: var(--cbd3-border-hv); color: var(--cbd3-text); }

.cbd3-btn--explode {
    position:    absolute;
    bottom:      12px;
    right:       12px;
    z-index:     5;
    font-size:   12px;
    padding:     5px 11px;
    background:  var(--cbd3-bg-panel);
}
.cbd3-btn--explode[aria-pressed="true"],
.cbd3-btn--explode:hover {
    color:        var(--cbd3-accent);
    border-color: var(--cbd3-accent);
    background:   var(--cbd3-accent-glow);
}

/* ── Step indicator ─────────────────────────────────────────────────────── */

.cbd3-step-indicator {
    flex:       1;
    display:    flex;
    align-items:center;
    justify-content: center;
    gap:        6px;
    font-size:  13px;
    color:      var(--cbd3-text2);
    text-align: center;
    overflow:   hidden;
    padding:    0 4px;
}

.cbd3-step-num  { font-weight: 600; color: var(--cbd3-text); }
.cbd3-step-sep  { opacity: 0.4; }
.cbd3-step-part { color: var(--cbd3-accent); animation: cbd3-pulse 1.8s ease-in-out infinite; }
.cbd3-step-count{ opacity: 0.65; }
.cbd3-step-done { color: var(--cbd3-accent); font-weight: 600; }

/* ── Main layout ────────────────────────────────────────────────────────── */

.cbd3-main {
    display:    flex;
    flex:       1;
    min-height: 0;
    overflow:   hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.cbd3-sidebar {
    display:        flex;
    flex-direction: column;
    width:          var(--cbd3-sidebar-w);
    min-width:      var(--cbd3-sidebar-w);
    background:     var(--cbd3-bg-panel);
    border-right:   1px solid var(--cbd3-border);
    overflow:       hidden;
    flex-shrink:    0;
}

.cbd3-sidebar-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 12px 8px;
    border-bottom:   1px solid var(--cbd3-border);
    flex-shrink:     0;
}

.cbd3-sidebar-title {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--cbd3-text2);
}

.cbd3-mode-badge {
    padding:       2px 7px;
    background:    var(--cbd3-accent-glow);
    border:        1px solid var(--cbd3-accent);
    border-radius: 20px;
    font-size:     10px;
    font-weight:   700;
    color:         var(--cbd3-accent);
}

.cbd3-part-list {
    flex:            1;
    overflow-y:      auto;
    padding:         8px;
    margin:          0;
    list-style:      none;
    scrollbar-width: thin;
    scrollbar-color: var(--cbd3-border) transparent;
}

.cbd3-sidebar-foot {
    padding:      8px 12px;
    border-top:   1px solid var(--cbd3-border);
    font-size:    12px;
    color:        var(--cbd3-text2);
    flex-shrink:  0;
    display:      flex;
    flex-direction: column;
    gap:          3px;
}

.cbd3-placed-count strong { color: var(--cbd3-text); }

.cbd3-next-hint {
    font-size: 11px;
    color:     var(--cbd3-text3);
}
.cbd3-next-hint strong { color: var(--cbd3-accent); }

/* ── Part cards ─────────────────────────────────────────────────────────── */

.cbd3-part-card {
    position:        relative;
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 9px;
    margin-bottom:   5px;
    background:      var(--cbd3-bg-card);
    border:          1px solid var(--cbd3-border);
    border-radius:   var(--cbd3-r-sm);
    cursor:          grab;
    -webkit-user-select: none;
    user-select:     none;
    transition:      transform      var(--cbd3-t-spring),
                     box-shadow     var(--cbd3-t-fast),
                     border-color   var(--cbd3-t-fast),
                     opacity        var(--cbd3-t-fast),
                     background     var(--cbd3-t-fast);
}

.cbd3-part-card:hover:not(.cbd3-part-card--placed) {
    transform:    translateY(-2px);
    box-shadow:   var(--cbd3-shadow-sm);
    border-color: var(--cbd3-border-hv);
    background:   var(--cbd3-bg-hover);
}

.cbd3-part-card:focus-visible {
    outline:        2px solid var(--cbd3-accent);
    outline-offset: 1px;
}

/* State variants */
.cbd3-part-card--placed {
    opacity:        0.40;
    cursor:         default;
    pointer-events: none;
}
.cbd3-part-card--dragging {
    opacity:  0.40;
    cursor:   grabbing;
    transform: scale(0.97);
}
.cbd3-part-card--next {
    border-color: var(--cbd3-accent);
    box-shadow:   0 0 0 2px var(--cbd3-accent-glow);
}
.cbd3-part-card--touch-sel,
.cbd3-part-card--selected {
    border-color: var(--cbd3-accent);
    background:   var(--cbd3-accent-glow);
}
.cbd3-part-card--shake {
    animation: cbd3-shake 0.65s ease both;
}

/* Card inner elements */
.cbd3-card-swatch {
    width:         10px;
    height:        10px;
    border-radius: 3px;
    flex-shrink:   0;
}

.cbd3-card-body {
    flex:          1;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    min-width:     0;
    gap:           4px;
}

.cbd3-card-name {
    font-size:     13px;
    font-weight:   500;
    color:         var(--cbd3-text);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cbd3-card-order {
    font-size:   10px;
    font-weight: 700;
    color:       var(--cbd3-text3);
    flex-shrink: 0;
}

.cbd3-card-status {
    flex-shrink: 0;
    font-size:   13px;
    font-weight: 700;
    width:       16px;
    text-align:  center;
}
.cbd3-card-status--placed { color: #3fb950; }
.cbd3-card-status--next   { color: var(--cbd3-accent); animation: cbd3-pulse 1.4s ease-in-out infinite; }
.cbd3-card-status--touch  { color: var(--cbd3-accent); }

/* Glow ring on next card */
.cbd3-card-glow {
    position:       absolute;
    inset:          -3px;
    border-radius:  calc(var(--cbd3-r-sm) + 3px);
    border:         1.5px solid var(--cbd3-accent);
    pointer-events: none;
    animation:      cbd3-glow-ring 1.6s ease-in-out infinite;
}

/* Rejection tooltip */
.cbd3-reject-tip {
    position:    absolute;
    top:         -36px;
    left:        50%;
    transform:   translateX(-50%);
    padding:     5px 10px;
    background:  #2d1010;
    border:      1px solid #f04444;
    border-radius: var(--cbd3-r-sm);
    color:       #ff9999;
    font-size:   11px;
    white-space: nowrap;
    z-index:     100;
    animation:   cbd3-fade-in var(--cbd3-t-fast) ease;
    pointer-events: none;
}
.cbd3-reject-tip::after {
    content:   '';
    position:  absolute;
    top:       100%;
    left:      50%;
    transform: translateX(-50%);
    border:    5px solid transparent;
    border-top-color: #f04444;
}

/* ── Scene ──────────────────────────────────────────────────────────────── */

.cbd3-scene {
    position:   relative;
    flex:       1 1 auto;
    min-width:  0;
    min-height: 360px;
    height:     0;          /* forces iOS Safari to respect flex-grow */
    background: var(--cbd3-bg);
    display:    flex;
    align-items:     center;
    justify-content: center;
    overflow:   hidden;
    touch-action: manipulation;  /* remove 300ms tap delay on iOS */
}

/* Touch hint banner */
.cbd3-touch-hint {
    position:    absolute;
    top:         10px;
    left:        50%;
    transform:   translateX(-50%);
    padding:     5px 14px;
    background:  var(--cbd3-accent-glow);
    border:      1px solid var(--cbd3-accent);
    border-radius: 20px;
    color:       var(--cbd3-accent);
    font-size:   12px;
    font-weight: 600;
    white-space: nowrap;
    z-index:     5;
    pointer-events: none;
    animation:   cbd3-fade-in var(--cbd3-t-mid);
}

/* ── SVG phone visual ───────────────────────────────────────────────────── */

.cbd3-phone-svg {
    width:      auto;
    height:     100%;
    max-height: 100%;
    max-width:  100%;
    display:    block;
    overflow:   visible;
}

/* ── Chassis colours (theme-aware) ─────────────────────────────────────── */

/* Chassis fills — set via CSS custom property on .cbd3-app
   so SVG fill:var() works without descendant selector matching */
.cbd3-theme-dark  { --cbd3-chassis-fill: #1a1f2e; }
.cbd3-theme-light { --cbd3-chassis-fill: #2a2f3e; }

/* Keep descendant selectors as fallback for non-CSS-var browsers */
.cbd3-theme-dark  .cbd3-chassis-body  { fill: #1a1f2e; }
.cbd3-theme-light .cbd3-chassis-body  { fill: #2a2f3e; }

.cbd3-chassis-bezel { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.cbd3-chassis-stroke{ stroke: rgba(255,255,255,0.18); stroke-width: 1.5; }
.cbd3-screen-bezel  { stroke: rgba(255,255,255,0.10); stroke-width: 0.5; }

.cbd3-theme-dark  .cbd3-screen-void { fill: #050810; }
.cbd3-theme-light .cbd3-screen-void { fill: #0a0d1a; }

.cbd3-notch  { fill: #0a0d1a; }
.cbd3-button { fill: #2a2f3e; }
.cbd3-grill-dot  { fill: rgba(255,255,255,0.15); }
.cbd3-port-outline{ fill: none; stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.cbd3-chin-line  { stroke: rgba(255,255,255,0.06); stroke-width: 0.5; }

/* ── Drop zones ─────────────────────────────────────────────────────────── */

.cbd3-drop-zone {
    fill:            transparent;
    stroke:          transparent;
    stroke-width:    0;
    cursor:          copy;
    pointer-events:  all;
    -webkit-transition: fill var(--cbd3-t-fast);
        transition:      fill var(--cbd3-t-fast);
}

.cbd3-drop-zone--active {
    fill:   var(--cbd3-accent-glow);
    stroke: var(--cbd3-accent);
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
}

/* ── Ghost targets (guided mode) ────────────────────────────────────────── */

.cbd3-ghost {
    fill:            none;
    stroke-width:    1.5;
    stroke-dasharray: 6 4;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--cbd3-t-mid);
}

.cbd3-ghost--visible {
    opacity:   1;
    animation: cbd3-ghost-pulse 1.8s ease-in-out infinite;
}

/* ── Component layers ───────────────────────────────────────────────────── */

.cbd3-layer {
    opacity:        0;
    pointer-events: none;
    /* No CSS transform on SVG <g> — Safari uses wrong transform-origin
       for SVG elements, causing groups to render at (0,0) of the viewport.
       Snap-in uses opacity fade only; explode uses SVG transform attribute
       applied directly by JS. */
    -webkit-transition: opacity 350ms var(--cbd3-t-spring);
            transition: opacity 350ms var(--cbd3-t-spring);
    will-change: opacity;
}

.cbd3-layer--placed {
    opacity:        1;
    pointer-events: all;
    cursor:         pointer;
}

.cbd3-layer--placed:hover { opacity: 0.90; }

.cbd3-layer--selected .cbd3-layer-fill {
    filter: brightness(1.25);
}

/* Layer fills — component colours */
.cbd3-layer-fill    { opacity: 0.92; }
.cbd3-layer-detail  { fill: rgba(255,255,255,0.08); }
.cbd3-layer-trace   { stroke: rgba(255,255,255,0.20); stroke-width: 1; fill: none; }
.cbd3-layer-chip    { fill: rgba(0,0,0,0.35); }
.cbd3-layer-chip-inner { fill: rgba(255,255,255,0.06); }
.cbd3-layer-cap     { fill: rgba(255,255,255,0.15); }
.cbd3-layer-terminal{ fill: rgba(255,255,255,0.25); }

/* Labels inside layers */
.cbd3-layer-label {
    font-family: inherit;
    font-size:   13px;
    font-weight: 600;
    fill:        rgba(255,255,255,0.80);
    pointer-events: none;
    letter-spacing: 0.02em;
}
.cbd3-label-small {
    font-size: 10px;
    fill:      rgba(255,255,255,0.65);
}

/* Screen layer detail */
.cbd3-screen-band-1 { fill: rgba(255,255,255,0.04); }
.cbd3-screen-band-2 { fill: rgba(0,0,0,0.15); }
.cbd3-screen-status { fill: rgba(255,255,255,0.12); rx: 3; }
.cbd3-screen-home   { fill: rgba(255,255,255,0.25); rx: 2.5; }

/* Camera layer detail */
.cbd3-camera-ring-outer { fill: #1a1a1a; stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.cbd3-camera-ring-inner { fill: #111111; stroke: rgba(255,255,255,0.15); stroke-width: 0.5; }
.cbd3-camera-lens       { fill: #0a0a1a; }
.cbd3-camera-glint      { fill: rgba(255,255,255,0.45); }
.cbd3-camera-flash      { fill: #ffe066; }

/* Front camera */
.cbd3-fcam-dot    { fill: #111111; stroke: rgba(255,255,255,0.20); stroke-width: 0.5; }
.cbd3-fcam-iris   { fill: #1a1a2e; }
.cbd3-fcam-sensor { fill: rgba(255,255,255,0.10); }

/* Speaker */
.cbd3-speaker-dot { fill: rgba(255,255,255,0.18); }

/* Charging port */
.cbd3-port-pad { fill: rgba(255,255,255,0.30); }

/* ── Exploded view ──────────────────────────────────────────────────────── */

/* Exploded view transforms are applied by JS directly as SVG transform
   attributes on each <g> element, bypassing Safari's unreliable CSS
   transform support on SVG elements. See toggleExplode() in app.js. */

/* ── Info panel ─────────────────────────────────────────────────────────── */

.cbd3-info-panel {
    width:          var(--cbd3-panel-w);
    min-width:      var(--cbd3-panel-w);
    background:     var(--cbd3-bg-panel);
    border-left:    1px solid var(--cbd3-border);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    flex-shrink:    0;
}

.cbd3-info-empty {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         24px 16px;
    text-align:      center;
    color:           var(--cbd3-text3);
    gap:             10px;
}
.cbd3-info-empty .cbd3-info-icon { font-size: 28px; opacity: 0.5; }
.cbd3-info-empty p               { font-size: 13px; margin: 0; }

.cbd3-info-content {
    flex:            1;
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cbd3-border) transparent;
    animation:       cbd3-slide-in var(--cbd3-t-mid) ease both;
}

.cbd3-info-header {
    padding:       12px 14px;
    border-bottom: 1px solid var(--cbd3-border);
    border-left:   3px solid var(--cbd3-accent);
    display:       flex;
    align-items:   center;
    gap:           9px;
}
.cbd3-info-swatch {
    width:         11px;
    height:        11px;
    border-radius: 3px;
    flex-shrink:   0;
}
.cbd3-info-name {
    margin:      0;
    font-size:   14px;
    font-weight: 600;
    color:       var(--cbd3-text);
    line-height: 1.3;
}

.cbd3-info-section { padding: 12px 14px 0; }
.cbd3-info-section h3 {
    margin:         0 0 5px;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--cbd3-text3);
}
.cbd3-info-section p {
    margin:      0;
    font-size:   12px;
    color:       var(--cbd3-text2);
    line-height: 1.65;
}

.cbd3-info-highlight {
    margin:      10px 10px 0;
    padding:     10px 12px;
    background:  var(--cbd3-bg-card);
    border:      1px solid var(--cbd3-border);
    border-left: 2px solid var(--cbd3-accent);
    border-radius: var(--cbd3-r-sm);
}
.cbd3-info-highlight p {
    font-size: 12px;
    color:     var(--cbd3-text);
    font-style: italic;
}

/* ── Footer / progress bar ──────────────────────────────────────────────── */

.cbd3-footer {
    height:      var(--cbd3-footer-h);
    min-height:  var(--cbd3-footer-h);
    flex-shrink: 0;
    border-top:  1px solid var(--cbd3-border);
    background:  var(--cbd3-bg-panel);
}

.cbd3-progress-wrap {
    display:     flex;
    align-items: center;
    gap:         12px;
    height:      100%;
    padding:     0 14px;
}

.cbd3-progress-track {
    flex:          1;
    height:        5px;
    background:    var(--cbd3-bg-card);
    border-radius: 3px;
    overflow:      hidden;
    border:        1px solid var(--cbd3-border);
}

.cbd3-progress-fill {
    height:           100%;
    border-radius:    3px;
    background-color: var(--cbd3-accent);
    transition:       width 500ms ease;
    min-width:        0;
}

.cbd3-progress-label {
    font-size:   12px;
    color:       var(--cbd3-text2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Brand footer title ─────────────────────────────────────────────────────── */

.cbd3-brand-footer {
    text-align:      center;
    font-size:       11px;
    font-weight:     500;
    color:           var(--cbd3-text2);
    letter-spacing:  0.04em;
    padding:         5px 14px 6px;
    background:      var(--cbd3-bg-panel);
    border-top:      1px solid var(--cbd3-border);
    opacity:         0.7;
    pointer-events:  none;
    -webkit-user-select: none;
    user-select:     none;
    flex-shrink:     0;
}

/* ── Completion overlay ─────────────────────────────────────────────────── */

.cbd3-overlay {
    position:         absolute;
    inset:            0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          50;
}

.cbd3-overlay-scrim {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.72);
    animation:  cbd3-fade-in var(--cbd3-t-mid) ease;
}

.cbd3-overlay-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             14px;
    padding:         36px 32px;
    background:      var(--cbd3-bg-panel);
    border:          1px solid var(--cbd3-border);
    border-radius:   var(--cbd3-r-lg);
    text-align:      center;
    max-width:       340px;
    width:           90%;
    z-index:         1;
    box-shadow:      var(--cbd3-shadow);
    animation:       cbd3-pop-in 400ms cubic-bezier(0.34,1.56,0.64,1) both;
}

.cbd3-overlay-check {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           60px;
    height:          60px;
    border-radius:   50%;
    border:          2px solid;
    font-size:       26px;
    font-weight:     700;
    animation:       cbd3-pop-in 400ms cubic-bezier(0.34,1.56,0.64,1) 80ms both;
}

.cbd3-overlay-title {
    margin:      0;
    font-size:   20px;
    font-weight: 700;
    color:       var(--cbd3-text);
}

.cbd3-overlay-msg {
    margin:      0;
    font-size:   14px;
    color:       var(--cbd3-text2);
    line-height: 1.6;
}

.cbd3-overlay-actions {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ── Animations ─────────────────────────────────────────────────────────── */

@keyframes cbd3-fade-in  { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes cbd3-slide-in { from { opacity: 0; transform: translateX(10px); }   to { opacity: 1; transform: translateX(0); } }
@keyframes cbd3-pop-in   { from { opacity: 0; transform: scale(0.72); }        to { opacity: 1; transform: scale(1); } }

@keyframes cbd3-shake {
    0%,100% { transform: translateX(0);    }
    18%     { transform: translateX(-7px); }
    36%     { transform: translateX( 7px); }
    54%     { transform: translateX(-5px); }
    72%     { transform: translateX( 5px); }
    88%     { transform: translateX(-2px); }
}

@keyframes cbd3-glow-ring {
    0%,100% { opacity: 1;    transform: scale(1);    }
    50%     { opacity: 0.30; transform: scale(1.04); }
}

@keyframes cbd3-ghost-pulse {
    0%,100% { opacity: 1;   }
    50%     { opacity: 0.30;}
}

@keyframes cbd3-pulse {
    0%,100% { opacity: 1;   }
    50%     { opacity: 0.45;}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cbd3-card-glow,
    .cbd3-ghost--visible,
    .cbd3-step-part,
    .cbd3-card-status--next { animation: none; }

    .cbd3-layer,
    .cbd3-progress-fill     { transition: none; }
}

/* ── Responsive — tablet (≤960px) ──────────────────────────────────────── */

@media (max-width: 960px) {
    .cbd3-app {
        --cbd3-panel-w: 0px;
    }
    .cbd3-info-panel { display: none; }
}

/* ── Responsive — mobile portrait and landscape (≤640px) ────────────────── */

@media (max-width: 640px) {
    .cbd3-app {
        --cbd3-sidebar-w: 100%;
        border-radius: 0;
    }

    /* Stack: scene on top, sidebar strip on bottom */
    .cbd3-main {
        flex-direction: column;
        min-height:     0;
        flex:           1 1 auto;
    }

    /* Scene takes all available height above the sidebar strip */
    .cbd3-scene {
        flex:           1 1 auto;
        min-height:     260px;
        height:         0;          /* iOS Safari flex fix */
        width:          100%;
    }

    /* Sidebar becomes a fixed-height horizontal scroll strip */
    .cbd3-sidebar {
        width:          100%;
        min-width:      100%;
        height:         96px;
        min-height:     96px;
        max-height:     96px;
        flex:           0 0 96px;   /* never grow or shrink */
        border-right:   none;
        border-top:     1px solid var(--cbd3-border);
        overflow:       hidden;
    }

    .cbd3-sidebar-hdr,
    .cbd3-sidebar-foot { display: none; }

    /* Horizontal scrolling card row */
    .cbd3-part-list {
        display:                  flex;
        flex-direction:           row;
        flex-wrap:                nowrap;
        overflow-x:               auto;
        overflow-y:               hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type:         x mandatory;
        padding:                  6px 8px;
        gap:                      6px;
        height:                   100%;
        align-items:              center;
    }

    /* Individual component card in strip */
    .cbd3-part-card {
        flex:           0 0 68px;
        width:          68px;
        min-width:      68px;
        flex-direction: column;
        gap:            3px;
        padding:        7px 6px;
        text-align:     center;
        margin-bottom:  0;
        scroll-snap-align: start;
    }

    .cbd3-card-body {
        flex-direction: column;
        align-items:    center;
        gap:            2px;
    }

    .cbd3-card-name {
        font-size:   9px;
        white-space: normal;
        overflow:    visible;
        text-overflow: unset;
        line-height: 1.3;
        word-break:  break-word;
        max-width:   64px;
    }

    .cbd3-card-order  { display: none; }
    .cbd3-card-status { font-size: 11px; }

    /* Topbar compact */
    .cbd3-topbar {
        padding:  0 8px;
        gap:      6px;
        height:   44px;
        min-height: 44px;
    }

    .cbd3-btn--mode  {
        padding:   4px 8px;
        font-size: 11px;
        flex-shrink: 0;
    }
    .cbd3-btn--reset {
        padding:   4px 8px;
        font-size: 11px;
        flex-shrink: 0;
    }

    /* Shorten topbar title on narrow screens */

    /* Hide step separator text on mobile */
    .cbd3-step-sep,
    .cbd3-step-num { display: none; }

    .cbd3-step-part { font-size: 11px; }

    /* Footer compact */
    .cbd3-footer {
        height:     38px;
        min-height: 38px;
    }

    .cbd3-progress-wrap { padding: 0 10px; gap: 8px; }
    .cbd3-progress-label { font-size: 11px; }

    .cbd3-overlay-card { padding: 20px 16px; }
}

/* ── Landscape phone (height ≤ 500px) ────────────────────────────────────── */

@media (max-height: 500px) and (max-width: 900px) {
    /* In landscape the sidebar strip must be narrower */
    .cbd3-app {
        --cbd3-sidebar-w: 100%;
    }

    /* Switch to side-by-side layout: sidebar left, scene right */
    .cbd3-main {
        flex-direction: row;
    }

    .cbd3-sidebar {
        width:          80px;
        min-width:      80px;
        max-width:      80px;
        height:         auto;
        min-height:     unset;
        max-height:     unset;
        flex:           0 0 80px;
        border-right:   1px solid var(--cbd3-border);
        border-top:     none;
        overflow:       hidden;
    }

    .cbd3-sidebar-hdr,
    .cbd3-sidebar-foot { display: none; }

    /* Vertical scrolling strip of cards in landscape */
    .cbd3-part-list {
        flex-direction:           column;
        flex-wrap:                nowrap;
        overflow-x:               hidden;
        overflow-y:               auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type:         y mandatory;
        padding:                  6px 4px;
        gap:                      4px;
        height:                   100%;
        align-items:              center;
    }

    .cbd3-part-card {
        flex:           0 0 64px;
        width:          64px;
        min-width:      unset;
        padding:        6px 4px;
        scroll-snap-align: start;
    }

    .cbd3-card-name { font-size: 8px; }

    .cbd3-scene {
        flex:       1 1 auto;
        min-height: 0;
        height:     0;
    }

    .cbd3-topbar {
        height:     40px;
        min-height: 40px;
    }

    .cbd3-step-indicator { font-size: 11px; }
}

/* ── Very small portrait (≤380px wide) ───────────────────────────────────── */

@media (max-width: 380px) {
    .cbd3-step-indicator  { display: none; }
    .cbd3-btn--reset span:not([aria-hidden]) { display: none; }

    .cbd3-topbar { gap: 4px; padding: 0 6px; }
    .cbd3-btn--mode { font-size: 10px; padding: 4px 6px; }
}