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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Topbar brand title ─────────────────────────────────────────────────────── */

.cbd2-topbar-title {
    font-size:      13px;
    font-weight:    500;
    color:          rgba(255,255,255,0.92);
    white-space:    nowrap;
    flex-shrink:    0;
    letter-spacing: 0.01em;
    padding:        0 4px;
    pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cbd2-scene {
    position:   relative;
    flex:       1;
    min-width:  0;
    min-height: 0;
    background: var(--cbd2-bg);
    display:    flex;
    align-items:     center;
    justify-content: center;
    overflow:   hidden;
}

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

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

.cbd2-phone-svg {
    width:      auto;
    height:     100%;
    max-height: calc(var(--cbd2-app-h) - var(--cbd2-topbar-h) - var(--cbd2-footer-h) - 16px);
    max-width:  100%;
    display:    block;
    overflow:   visible;
}

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

.cbd2-theme-dark  .cbd2-chassis-body  { fill: #1a1f2e; }
.cbd2-theme-light .cbd2-chassis-body  { fill: #2a2f3e; }

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

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

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

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

.cbd2-drop-zone {
    fill:            transparent;
    stroke:          transparent;
    stroke-width:    0;
    cursor:          copy;
    transition:      fill var(--cbd2-t-fast);
}

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

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

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

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

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

.cbd2-layer {
    opacity:        0;
    pointer-events: none;
    transition:     opacity 350ms var(--cbd2-t-spring),
                    transform 350ms var(--cbd2-t-spring);
    transform-origin: center center;
    transform:      translateY(-8px) scale(0.96);
}

.cbd2-layer--placed {
    opacity:        1;
    pointer-events: all;
    cursor:         pointer;
    transform:      translateY(0) scale(1);
}

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

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

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

/* Labels inside layers */
.cbd2-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;
}
.cbd2-label-small {
    font-size: 10px;
    fill:      rgba(255,255,255,0.65);
}

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

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

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

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

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

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

/* When the phone SVG has --exploded class, each layer translates to its
   explode position. Using nth-of-type on <g> inside the SVG isn't reliable,
   so we target by id suffix. The JS toggles cbd2-phone-svg--exploded on the
   <svg> element; child layers check whether the parent has that class. */

.cbd2-phone-svg--exploded [id$="-layer-display"]        { transform: translateY(-110px) scale(1); }
.cbd2-phone-svg--exploded [id$="-layer-battery"]        { transform: translateY( 60px) scale(1); }
.cbd2-phone-svg--exploded [id$="-layer-motherboard"]    { transform: translateY(-70px) translateX(-80px) scale(1); }
.cbd2-phone-svg--exploded [id$="-layer-rear-camera"]    { transform: translateX( 80px) scale(1); }
.cbd2-phone-svg--exploded [id$="-layer-front-camera"]   { transform: translateY(-130px) scale(1); }
.cbd2-phone-svg--exploded [id$="-layer-speaker"]        { transform: translateY( 90px) scale(1); }
.cbd2-phone-svg--exploded [id$="-layer-charging-port"]  { transform: translateY( 120px) scale(1); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cbd2-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:       cbd2-pop-in 400ms cubic-bezier(0.34,1.56,0.64,1) 80ms both;
}

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

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

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

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

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

@keyframes cbd2-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 cbd2-glow-ring {
    0%,100% { opacity: 1;    transform: scale(1);    }
    50%     { opacity: 0.30; transform: scale(1.04); }
}

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

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

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

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

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

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

@media (max-width: 960px) {
    .cbd2-app {
        --cbd2-panel-w:   0px;
        height: auto;
        min-height: 520px;
    }
    .cbd2-info-panel { display: none; }
}

/* ── Responsive — mobile (≤640px) ──────────────────────────────────────── */

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

    .cbd2-main {
        flex-direction: column-reverse;
    }

    /* Sidebar becomes horizontal strip at bottom */
    .cbd2-sidebar {
        width:          100%;
        min-width:      100%;
        max-height:     108px;
        border-right:   none;
        border-top:     1px solid var(--cbd2-border);
        flex-shrink:    0;
    }

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

    .cbd2-part-list {
        display:    flex;
        flex-wrap:  nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding:    6px 8px;
        gap:        6px;
    }

    .cbd2-part-card {
        flex-shrink: 0;
        flex-direction: column;
        gap:         4px;
        padding:     8px 10px;
        width:       72px;
        text-align:  center;
        margin-bottom: 0;
    }

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

    .cbd2-card-name {
        font-size:   10px;
        white-space: normal;
        overflow:    visible;
        text-overflow: unset;
    }

    .cbd2-card-order { display: none; }

    .cbd2-scene {
        min-height: 340px;
    }

    .cbd2-topbar {
        padding:  0 10px;
        gap:      7px;
    }

    .cbd2-btn--mode  { padding: 5px 9px; font-size: 12px; }
    .cbd2-btn--reset { padding: 5px 9px; font-size: 12px; }

    /* Hide step sep and number on very small screens */
    .cbd2-step-sep,
    .cbd2-step-num { display: none; }

    .cbd2-overlay-card { padding: 24px 18px; }
}

/* ── Responsive — very small mobile (≤380px) ────────────────────────────── */

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