/* ===================================================================
   /vibration-test - phone, timeline and pattern builder.

   .is-buzzing on the phone and .is-active on a timeline block are set by
   vibration-test.js from the same pattern array that is passed to
   navigator.vibrate(), so the shake on screen follows the exact
   on/off timing the device was asked to play. Scoped under .vbt.
   =================================================================== */

.vbt {
    --vbt-accent: #3d8bff;
    --vbt-cyan: #22d3ee;
    --vbt-on: #a78bfa;
    --vbt-on-2: #7c3aed;
    --vbt-ink: #10162b;
    --vbt-muted: #5b6275;
    --vbt-line: #e4e7ef;

    margin: 18px auto 24px;
    padding: 0;
    max-width: 1040px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--vbt-line);
    box-shadow: 0 30px 60px -32px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    color: var(--vbt-ink);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.vbt *, .vbt *::before, .vbt *::after { box-sizing: border-box; }
.vbt button, .vbt input { font: inherit; }
.vbt svg { display: block; }
.vbt :where(p, ol) { margin: 0; }
.vbt code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }

.vbt-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */

.vbt-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #151b33, #10162b);
    color: #cdd5ee;
}
.vbt-detected { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; min-width: 0; }
.vbt-detected svg { flex: none; width: 18px; height: 18px; color: var(--vbt-cyan); }
.vbt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgb(255 255 255 / 10%); color: #fff; white-space: nowrap; }
.vbt-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.vbt-chip.is-yes::before { background: #34f5a6; box-shadow: 0 0 8px #34f5a6; }
.vbt-chip.is-no::before { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }

/* ---------- stage ---------- */

.vbt-stage {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
    padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 44px);
    background:
        radial-gradient(45% 70% at 18% 60%, rgb(167 139 250 / 22%), transparent 70%),
        linear-gradient(180deg, #10162b 0%, #1a2142 100%);
    color: #e8ecfb;
}

.vbt-phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 34px; }
.vbt-phone { position: relative; width: clamp(130px, 16vw, 168px); aspect-ratio: 150 / 290; }
.vbt-phone-art { width: 100%; height: 100%; filter: drop-shadow(0 26px 24px rgb(0 0 0 / 50%)); }
.vbt-shadow { width: 70%; height: 14px; margin-top: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 45%), transparent); transition: transform .08s ease; }

.vbt-preview-note {
    max-width: 210px; margin-top: 8px; padding: 6px 12px; border-radius: 12px;
    background: rgb(251 191 36 / 14%); border: 1px solid rgb(251 191 36 / 35%);
    color: #fde68a; font-size: .76rem; font-weight: 600; text-align: center; line-height: 1.35;
}
.vbt-preview-note[hidden] { display: none; }

.vbt-screen {
    position: absolute; left: 9%; right: 9%; top: 12%; bottom: 5%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    text-align: center; pointer-events: none;
}
.vbt-screen-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(167 139 250 / 16%); color: #c4b5fd; transition: background-color .08s ease, box-shadow .08s ease; }
.vbt-screen-icon svg { width: 28px; height: 28px; }
.vbt-screen-name { font-size: .88rem; font-weight: 700; color: #fff; }
.vbt-screen-time { font: 600 .78rem ui-monospace, SFMono-Regular, Consolas, monospace; color: #aeb8d6; }
.vbt-motor { margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgb(255 255 255 / 8%); color: #8f9abb; }

/* the shake - only while the pattern is in a vibrate block */
.vbt-phone.is-buzzing { animation: vbt-shake .07s linear infinite; }
.vbt-phone.is-buzzing .vbt-screen-icon { background: rgb(167 139 250 / 45%); box-shadow: 0 0 22px rgb(167 139 250 / 80%); color: #fff; }
.vbt-phone.is-buzzing .vbt-motor { background: var(--vbt-on); color: #1e1147; }
.vbt-phone.is-buzzing + .vbt-shadow { transform: scaleX(1.08); }
@keyframes vbt-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, 1px) rotate(-1.4deg); }
    50% { transform: translate(2px, -1px) rotate(1deg); }
    75% { transform: translate(3px, 1px) rotate(1.4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.vbt-buzz { position: absolute; top: 30%; height: 40%; width: 26px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .06s ease; }
.vbt-buzz--l { left: -32px; align-items: flex-end; }
.vbt-buzz--r { right: -32px; align-items: flex-start; }
.vbt-buzz i { display: block; height: 3px; border-radius: 3px; background: var(--vbt-on); box-shadow: 0 0 8px var(--vbt-on); }
.vbt-buzz i:nth-child(1) { width: 14px; }
.vbt-buzz i:nth-child(2) { width: 24px; }
.vbt-buzz i:nth-child(3) { width: 14px; }
.vbt-phone.is-buzzing .vbt-buzz { opacity: 1; }

.vbt-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* presets */
.vbt-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vbt-preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    min-height: 64px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
    border: 1px solid rgb(255 255 255 / 12%); background: rgb(255 255 255 / 6%); color: #e8ecfb; font-weight: 600; font-size: .9rem;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.vbt-preset:hover { background: rgb(255 255 255 / 11%); }
.vbt-preset:active { transform: scale(.97); }
.vbt-preset:focus-visible { outline: 3px solid var(--vbt-cyan); outline-offset: 2px; }
.vbt-preset[aria-pressed="true"] { border-color: var(--vbt-on); background: rgb(167 139 250 / 18%); box-shadow: 0 0 0 1px var(--vbt-on) inset; }
.vbt-spark { display: flex; align-items: center; gap: 1px; width: 100%; height: 12px; }
.vbt-spark i { display: block; height: 100%; border-radius: 2px; min-width: 2px; }
.vbt-spark i.on { background: var(--vbt-on); }
.vbt-spark i.off { background: transparent; }

/* timeline */
.vbt-timeline-wrap { display: flex; flex-direction: column; gap: 8px; }
.vbt-timeline-head { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; font-weight: 600; color: #aeb8d6; }
.vbt-timeline-head #vbtTotal { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.vbt-timeline {
    position: relative; display: flex; gap: 0; height: 54px; padding: 6px; border-radius: 14px;
    background: rgb(0 0 0 / 28%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
    overflow: hidden;
}
.vbt-timeline-inner { position: absolute; inset: 6px; display: flex; }
.vbt-seg { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 6px; border-right: 2px solid transparent; background-clip: padding-box !important; }
.vbt-seg--on { background: linear-gradient(180deg, #c4b5fd, var(--vbt-on-2)); box-shadow: 0 0 0 1px rgb(255 255 255 / 12%) inset; }
.vbt-seg--off { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 7%) 0 5px, transparent 5px 10px); }
.vbt-seg--on.is-active { background: linear-gradient(180deg, #fff, #c4b5fd); box-shadow: 0 0 16px rgb(167 139 250 / 90%); }
.vbt-seg--off.is-active { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 18%) 0 5px, transparent 5px 10px); }
.vbt-timeline-empty { margin: auto; font-size: .82rem; color: #8f9abb; }
.vbt-playhead { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; opacity: 0; pointer-events: none; }
.vbt.is-playing .vbt-playhead { opacity: 1; }
.vbt-legend { display: flex; gap: 14px; font-size: .74rem; color: #8f9abb; }
.vbt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vbt-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.vbt-key-on { background: var(--vbt-on); }
.vbt-key-off { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 30%) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }

/* transport */
.vbt-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vbt-play {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 26px 0 20px; border: 0; border-radius: 999px; cursor: pointer;
    background: radial-gradient(circle at 30% 20%, #c4b5fd, #8b5cf6 55%, #6d28d9); color: #fff; font-weight: 700; font-size: 1rem;
    box-shadow: 0 14px 30px -12px rgb(139 92 246 / 80%), inset 0 -3px 8px rgb(0 0 0 / 20%);
    transition: transform .12s ease;
}
.vbt-play:hover { transform: translateY(-1px); }
.vbt-play:active { transform: scale(.96); }
.vbt-play:focus-visible { outline: 3px solid var(--vbt-cyan); outline-offset: 3px; }
.vbt-play svg { width: 20px; height: 20px; }
.vbt .vbt-icon-stop { display: none; }
.vbt.is-playing .vbt-icon-play { display: none; }
.vbt.is-playing .vbt-icon-stop { display: block; }
.vbt.is-playing .vbt-play { background: radial-gradient(circle at 30% 20%, #fda4af, #f43f5e 55%, #be123c); box-shadow: 0 14px 30px -12px rgb(244 63 94 / 80%); }

.vbt-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgb(255 255 255 / 16%); background: rgb(255 255 255 / 6%); color: #cdd5ee; font-weight: 600; font-size: .85rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vbt-toggle small { font-weight: 500; opacity: .75; }
.vbt-toggle svg { width: 18px; height: 18px; flex: none; }
.vbt-toggle:hover { background: rgb(255 255 255 / 12%); }
.vbt-toggle:focus-visible { outline: 3px solid var(--vbt-cyan); outline-offset: 2px; }
.vbt-toggle[aria-pressed="true"] { background: #fff; color: var(--vbt-ink); border-color: #fff; }

/* ---------- builder ---------- */

.vbt-builder { padding: 22px clamp(16px, 3vw, 32px) 4px; }
.vbt-builder-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.vbt-builder-head strong { display: block; font-size: 1.05rem; }
.vbt-builder-head span { display: block; font-size: .84rem; color: var(--vbt-muted); }
.vbt-builder-add { display: flex; flex-wrap: wrap; gap: 8px; }

.vbt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 0 14px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--vbt-line); background: #fff; color: var(--vbt-ink); font-weight: 600; font-size: .88rem;
    box-shadow: 0 4px 10px -8px rgb(16 22 43 / 45%);
    transition: background-color .15s ease, transform .1s ease;
}
.vbt-btn:hover { background: #f4f7ff; }
.vbt-btn:active { transform: translateY(1px); }
.vbt-btn:focus-visible { outline: 3px solid var(--vbt-accent); outline-offset: 2px; }
.vbt-btn svg { width: 16px; height: 16px; }
.vbt-btn--on { border-color: #ddd6fe; background: #f5f3ff; color: #5b21b6; }
.vbt-btn--on:hover { background: #ede9fe; }

.vbt-blocks { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; list-style: none; border-radius: 16px; background: #f6f8fc; border: 1px solid var(--vbt-line); min-height: 76px; }
.vbt-blocks-empty { align-self: center; margin: auto; font-size: .88rem; color: var(--vbt-muted); }
.vbt-block {
    position: relative; display: flex; align-items: center; gap: 4px;
    padding: 6px 6px 6px 2px; border-radius: 12px;
    background: #fff; border: 1px solid var(--vbt-line); box-shadow: 0 3px 0 #e3e7f1;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    animation: vbt-block-in .18s ease;
}
@keyframes vbt-block-in { from { transform: scale(.85); opacity: 0; } }
.vbt-block--on { background: linear-gradient(180deg, #faf5ff, #f3e8ff); border-color: #d8b4fe; box-shadow: 0 3px 0 #e9d5ff; }
.vbt-block.is-active { box-shadow: 0 0 0 2px var(--vbt-on), 0 0 16px rgb(167 139 250 / 55%); }
.vbt-block.is-dragging { opacity: .55; transform: scale(1.04); z-index: 2; }
.vbt-block.is-drop-before::before { content: ""; position: absolute; left: -6px; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--vbt-accent); }

.vbt-grip {
    display: grid; place-items: center; width: 26px; min-height: 40px; border: 0; border-radius: 8px; cursor: grab;
    background: transparent; color: #9aa1b2; touch-action: none;
}
.vbt-grip:active { cursor: grabbing; }
.vbt-grip svg { width: 14px; height: 14px; }
.vbt-grip:focus-visible { outline: 3px solid var(--vbt-accent); outline-offset: 1px; }
.vbt-kind { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vbt-muted); width: 52px; }
.vbt-block--on .vbt-kind { color: #6d28d9; }
.vbt-ms { display: flex; align-items: center; gap: 2px; }
.vbt-ms input {
    width: 64px; min-height: 36px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--vbt-line); background: #fff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; font-weight: 600; text-align: right; color: var(--vbt-ink);
    -moz-appearance: textfield;
}
.vbt-ms input::-webkit-outer-spin-button, .vbt-ms input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vbt-ms input:focus-visible { outline: 3px solid var(--vbt-accent); outline-offset: 1px; }
.vbt-ms span { font-size: .75rem; color: var(--vbt-muted); margin-right: 2px; }
.vbt-step, .vbt-remove {
    display: grid; place-items: center; width: 30px; height: 36px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--vbt-muted); font-weight: 700;
}
.vbt-step:hover, .vbt-remove:hover { background: rgb(16 22 43 / 6%); color: var(--vbt-ink); }
.vbt-remove:hover { color: #be123c; }
.vbt-step:focus-visible, .vbt-remove:focus-visible { outline: 3px solid var(--vbt-accent); outline-offset: 1px; }
.vbt-step svg, .vbt-remove svg { width: 14px; height: 14px; }

.vbt-sent { margin-top: 10px; font-size: .8rem; color: var(--vbt-muted); overflow-wrap: anywhere; }
.vbt-sent code { color: #334155; }
#vbtArray { background: #eef1f7; padding: 1px 6px; border-radius: 6px; }

/* ---------- panel ---------- */

.vbt-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px clamp(16px, 3vw, 32px) 0; }
.vbt-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.vbt-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: #f6f8fc; border: 1px solid var(--vbt-line); min-width: 130px; }
.vbt-stat-label { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vbt-muted); }
.vbt-stat strong { font-size: .98rem; }
.vbt-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 14px; background: #f5f3ff; border: 1px solid #ddd6fe; }
.vbt-ask[hidden] { display: none; }
.vbt-ask strong { margin-right: 4px; color: #4c1d95; }

.vbt-status {
    margin: 16px clamp(16px, 3vw, 32px) 0; padding: 12px 16px;
    border-radius: 14px; background: #f4f7ff; border: 1px solid #dce6fb;
    font-weight: 600; color: #1d3a7a;
}
.vbt-status.is-warn { background: #fff8eb; border-color: #fde2b0; color: #8a4b08; }
.vbt-status.is-ok { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.vbt-status.is-bad { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.vbt-note { margin: 10px clamp(16px, 3vw, 32px) 22px; font-size: .88rem; color: var(--vbt-muted); }

/* ---------- responsive ---------- */

@media (max-width: 767.98px) {
    .vbt-stage { grid-template-columns: 1fr; justify-items: stretch; }
    .vbt-phone-wrap { justify-self: center; }
}
@media (max-width: 575.98px) {
    .vbt { border-radius: 22px; margin-inline: -4px; }
    .vbt-topbar { padding: 12px 14px; }
    .vbt-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vbt-stage { padding-top: 20px; gap: 18px; }
    .vbt-phone { width: 112px; }
    .vbt-block { flex: 1 1 100%; justify-content: space-between; }
    .vbt-play { flex: 1 1 100%; justify-content: center; }
    .vbt-toggle { flex: 1 1 auto; justify-content: center; }
    .vbt-builder-add { width: 100%; }
    .vbt-builder-add .vbt-btn { flex: 1; }
    .vbt-stats { width: 100%; }
    .vbt-stat { flex: 1 1 40%; min-width: 0; }
}
@media (pointer: coarse) {
    .vbt-step, .vbt-remove { width: 44px; height: 44px; }
    .vbt-grip { width: 36px; min-height: 44px; }
    .vbt-ms input { min-height: 44px; }
    .vbt-btn { min-height: 44px; }
}

/* Reduced motion: no shake, but the buzzing state stays visible as a glow. */
@media (prefers-reduced-motion: reduce) {
    .vbt *, .vbt *::before, .vbt *::after { animation: none !important; transition: none !important; }
    .vbt-phone.is-buzzing .vbt-phone-art { filter: drop-shadow(0 0 18px rgb(167 139 250 / 90%)); }
}