/* Dictaphone (dictaphone_online) — ретро-диктофон 70-х.
   Корпус/клавиши/ручка — арт из макетов (assets/img), программное — только табло (LCD),
   живой слайдер и состояния. Все координаты — % от арт-кадра; пиксели арта масштабируются
   через --dcp-s (JS: ширина сцены / ширина арта). Цвета табло — пипетка из макета (токены ниже).
   Namespace длинный (.dcp) — урок voice_recorder про конфликт коротких классов с Bootstrap. */

.dcp {
    /* --- design tokens (пипетка из desk.png) --- */
    --dcp-lcd-top:    #b6a980;
    --dcp-lcd-mid:    #b4a579;
    --dcp-lcd-bot:    #c0ab79;
    --dcp-lcd-edge:   #b29e75;
    --dcp-ink:        #231b0c;  /* цифры таймера */
    --dcp-ink-status: #382e19;  /* строка статуса */
    --dcp-ink-wave:   #3d311d;  /* волна */
    --dcp-ink-ruler:  #50462c;  /* шкала времени */
    --dcp-red:        #bd4811;  /* игла */
    --dcp-red-dot:    #a8390f;  /* точка REC */
    --dcp-plate-hi:   #6e5333;  /* металл шильдика, верх */
    --dcp-plate-lo:   #694f30;  /* металл шильдика, низ */
    --dcp-plate-ink:  #3a2b1a;  /* гравировка шильдика */
    --dcp-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

    /* --- геометрия арта: ДЕСК (1448x1086) --- */
    --dcp-ar: 1448 / 1086;
    --dcp-case:      url('img/case_d.jpg');
    --dcp-lcd-l:18.6464%; --dcp-lcd-t:25.0460%; --dcp-lcd-w:62.0166%; --dcp-lcd-h:27.4401%;
    --dcp-sl-l:17.6105%;  --dcp-sl-t:56.1694%;  --dcp-sl-w:64.5718%;  --dcp-sl-h:4.0516%;
    --dcp-rec-l:42.1271%; --dcp-rec-t:59.8527%; --dcp-rec-w:15.8840%; --dcp-rec-h:18.4162%;
    --dcp-play-l:16.9199%;  --dcp-play-t:62.7993%;  --dcp-play-w:10.7044%;  --dcp-play-h:12.3389%;
    --dcp-pause-l:28.8674%; --dcp-pause-t:62.7993%; --dcp-pause-w:10.7044%; --dcp-pause-h:12.3389%;
    --dcp-stop-l:58.5635%;  --dcp-stop-t:62.7993%;  --dcp-stop-w:11.4641%;  --dcp-stop-h:12.3389%;
    --dcp-del-l:71.8232%;   --dcp-del-t:62.7993%;   --dcp-del-w:11.4641%;   --dcp-del-h:12.3389%;
    --dcp-plate-l:41.2983%; --dcp-plate-t:84.5304%; --dcp-plate-w:16.7127%; --dcp-plate-h:7.3665%;
    --dcp-led-l:70.0276%;   --dcp-led-t:17.6796%;   --dcp-led-w:3.5912%;    --dcp-led-h:4.7882%;
    --dcp-handle-w: 5.4545%;          /* 51/935 от дорожки */
    --dcp-handle-img: url('img/handle_d.png');
    --dcp-track-img:  url('img/track_d.png');
    --dcp-red-img:    url('img/red_d.png');
    --dcp-cap-red:    url('img/cap_red_d.png');
    --dcp-cap-gray:   url('img/cap_gray_d.png');
    --dcp-cap-r-off: 0px;             /* правый кап вплотную к краю дорожки */
    --dcp-led-img:     url('img/led_off_d.png');
    --dcp-led-lit-img: url('img/led_lit_d.png');
    --dcp-plate-img:  url('img/plate_d.png');
    --dcp-press-record: url('img/press_record_d.png');
    --dcp-press-play:   url('img/press_play_d.png');
    --dcp-press-pause:  url('img/press_pause_d.png');
    --dcp-press-stop:   url('img/press_stop_d.png');
    --dcp-press-delete: url('img/press_delete_d.png');
    /* пиксели арта внутри табло/слайдера (умножаются на --dcp-s) */
    --dcp-plate-inset-x: 13;     /* поле от рамки шильдика до металла */
    --dcp-plate-inset-y: 10;
    --dcp-timer-h: 62;           /* высота цифр таймера */
    --dcp-s: 0.6;                /* масштаб: JS обновляет = ширина сцены / ширина арта */
}

.dcp__scene {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    aspect-ratio: var(--dcp-ar);
    background: var(--dcp-case) center / 100% 100% no-repeat;
    border-radius: calc(var(--dcp-s) * 10px);
    user-select: none;
    -webkit-user-select: none;
    /* вертикальный скролл страницы с прибора — можно, горизонтальные жесты браузеру не отдаём */
    touch-action: pan-y pinch-zoom;
}

/* ============ ТАБЛО (LCD) ============ */
.dcp__lcd {
    position: absolute;
    left: var(--dcp-lcd-l); top: var(--dcp-lcd-t);
    width: var(--dcp-lcd-w); height: var(--dcp-lcd-h);
    border-radius: calc(var(--dcp-s) * 18px);
    background:
        radial-gradient(120% 160% at 50% -30%, rgba(255,255,240,.14), transparent 55%),
        linear-gradient(180deg, var(--dcp-lcd-top) 0%, var(--dcp-lcd-mid) 45%, var(--dcp-lcd-bot) 100%);
    box-shadow:
        inset 0 calc(var(--dcp-s) * 6px)  calc(var(--dcp-s) * 18px) rgba(60,45,20,.35),
        inset 0 calc(var(--dcp-s) * -3px) calc(var(--dcp-s) * 10px) rgba(255,246,214,.25),
        inset calc(var(--dcp-s) * 4px) 0 calc(var(--dcp-s) * 12px) rgba(60,45,20,.18),
        inset calc(var(--dcp-s) * -4px) 0 calc(var(--dcp-s) * 12px) rgba(60,45,20,.18);
    display: flex;
    flex-direction: column;
    padding: calc(var(--dcp-s) * 10px) calc(var(--dcp-s) * 18px) calc(var(--dcp-s) * 8px);
    overflow: hidden;
}

.dcp__lcd-row1 {
    display: flex;
    align-items: center;
    height: calc(var(--dcp-s) * 78px);
    flex: none;
}
.dcp__lcd-rec {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--dcp-s) * 9px);
    font: 700 calc(var(--dcp-s) * 26px) / 1 var(--dcp-mono);
    letter-spacing: calc(var(--dcp-s) * 2px);
    color: var(--dcp-red-dot);
    min-width: calc(var(--dcp-s) * 105px);
}
.dcp__lcd-rec[hidden] { display: inline-flex; visibility: hidden; } /* место зарезервировано — без прыжков */
.dcp__lcd-rec-dot {
    width: calc(var(--dcp-s) * 18px);
    height: calc(var(--dcp-s) * 18px);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #d86a3c, var(--dcp-red-dot) 65%);
    box-shadow: 0 0 calc(var(--dcp-s) * 8px) rgba(189,72,17,.55);
}
.dcp--blink .dcp__lcd-rec-dot { animation: dcp-blink var(--dcp-blink, 800ms) steps(1) infinite; }
@keyframes dcp-blink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .dcp--blink .dcp__lcd-rec-dot { animation: none; } }

.dcp__lcd-timer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.dcp__lcd-timer svg { height: calc(var(--dcp-s) * var(--dcp-timer-h) * 1px); width: auto; display: block; }
.dcp__lcd-timer .seg      { fill: var(--dcp-ink); }
.dcp__lcd-timer .seg-off  { fill: var(--dcp-ink); opacity: .09; }

.dcp__lcd-right {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--dcp-s) * 22px);
    min-width: calc(var(--dcp-s) * 105px);
    justify-content: flex-end;
}
.dcp__lcd-hq {
    font: 700 calc(var(--dcp-s) * 24px) / 1 var(--dcp-mono);
    color: var(--dcp-ink);
    border: calc(var(--dcp-s) * 3px) solid var(--dcp-ink);
    border-radius: calc(var(--dcp-s) * 6px);
    padding: calc(var(--dcp-s) * 3px) calc(var(--dcp-s) * 7px);
    opacity: .88;
}
/* Батарейка: корпус + носик + деления (остаток лимита записи) */
.dcp__lcd-batt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--dcp-s) * 3px);
    width: calc(var(--dcp-s) * 62px);
    height: calc(var(--dcp-s) * 32px);
    border: calc(var(--dcp-s) * 3px) solid var(--dcp-ink);
    border-radius: calc(var(--dcp-s) * 5px);
    padding: calc(var(--dcp-s) * 3px);
    opacity: .88;
}
.dcp__lcd-batt::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--dcp-s) * 5px);
    height: calc(var(--dcp-s) * 14px);
    background: var(--dcp-ink);
    border-radius: 0 calc(var(--dcp-s) * 3px) calc(var(--dcp-s) * 3px) 0;
}
.dcp__lcd-batt i { flex: 1; height: 100%; background: var(--dcp-ink); border-radius: calc(var(--dcp-s) * 2px); }
.dcp__lcd-batt i.off { opacity: .14; }

.dcp__lcd-status {
    flex: none;
    text-align: center;
    font: 500 calc(var(--dcp-s) * 26px) / 1.15 var(--dcp-mono);
    letter-spacing: calc(var(--dcp-s) * 3px);
    color: var(--dcp-ink-status);
    min-height: calc(var(--dcp-s) * 32px);
}

.dcp__lcd-wave {
    position: relative;
    flex: 1;
    margin-top: calc(var(--dcp-s) * 6px);
    border-top: 1px solid rgba(61,49,29,.45);
    border-bottom: 1px solid rgba(61,49,29,.45);
    min-height: 0;
}
.dcp__lcd-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dcp__lcd-ruler {
    flex: none;
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--dcp-s) * 6px);
    font: 500 calc(var(--dcp-s) * 20px) / 1 var(--dcp-mono);
    letter-spacing: calc(var(--dcp-s) * 1px);
    color: var(--dcp-ink-ruler);
}

/* ============ Лампочка RECORDING ============ */
/* Горящая лампа со свечением ВЫПЕЧЕНА из корпуса (case_*.jpg — чистая текстура).
   Элемент-лампа: погашенная линза (нарисованный спрайт) <-> горящая (кроп из арта) при записи. */
.dcp__led {
    position: absolute;
    left: var(--dcp-led-l); top: var(--dcp-led-t);
    width: var(--dcp-led-w); height: var(--dcp-led-h);
    background: var(--dcp-led-img) center / 100% 100% no-repeat;
    pointer-events: none;
}
.dcp--recled .dcp__led { background-image: var(--dcp-led-lit-img); }

/* ============ Слайдер воспроизведения ============ */
.dcp__slider {
    position: absolute;
    left: var(--dcp-sl-l); top: var(--dcp-sl-t);
    width: var(--dcp-sl-w); height: var(--dcp-sl-h);
    background: var(--dcp-track-img) left center / auto 100% repeat-x;
    cursor: pointer;
    touch-action: none; /* драг ручки не отдаётся браузеру как прокрутка — тап не «выпадает» */
}
/* Расширенная тач-зона: дорожка тонкая, палец должен попадать с запасом сверху/снизу */
.dcp__slider::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--dcp-s) * -18px);
    bottom: calc(var(--dcp-s) * -18px);
}
.dcp__slider:focus-visible { outline: none; }
.dcp__slider-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--dcp-red-img) left center / auto 100% repeat-x;
    pointer-events: none;
}
.dcp__slider-cap {
    position: absolute;
    top: 0; bottom: 0;
    width: calc(var(--dcp-s) * 20px);
    background: var(--dcp-cap-gray) center / 100% 100% no-repeat;
    pointer-events: none;
}
.dcp__slider-cap--l { left: calc(var(--dcp-s) * -2px); transform: scaleX(-1); }
.dcp__slider-cap--l.is-red { background-image: var(--dcp-cap-red); transform: none; left: calc(var(--dcp-s) * -2px); }
.dcp__slider-cap--r { right: var(--dcp-cap-r-off); }
.dcp__slider-cap--r.is-red { background-image: var(--dcp-cap-red); transform: scaleX(-1); }
.dcp__slider-handle {
    position: absolute;
    top: 0;
    left: 0;                       /* JS: left = позиция в %, translateX(-50%) центрирует */
    transform: translateX(-50%);
    width: calc(var(--dcp-handle-w) * 1);
    height: 100%;
    background: var(--dcp-handle-img) center / 100% 100% no-repeat;
    filter: drop-shadow(0 calc(var(--dcp-s) * 2px) calc(var(--dcp-s) * 3px) rgba(40,25,10,.4));
    pointer-events: none;
}
/* Красная точка-метка центра дорожки — часть арта корпуса, отдельных спрайтов нет */

/* ============ Клавиши ============ */
.dcp__key {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;      /* отжатое состояние — арт корпуса под кнопкой */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dcp__key:focus, .dcp__key:focus-visible { outline: none; box-shadow: none; }
.dcp__key.is-down { background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }

.dcp__key--record { left: var(--dcp-rec-l); top: var(--dcp-rec-t); width: var(--dcp-rec-w); height: var(--dcp-rec-h); }
.dcp__key--play   { left: var(--dcp-play-l); top: var(--dcp-play-t); width: var(--dcp-play-w); height: var(--dcp-play-h); }
.dcp__key--pause  { left: var(--dcp-pause-l); top: var(--dcp-pause-t); width: var(--dcp-pause-w); height: var(--dcp-pause-h); }
.dcp__key--stop   { left: var(--dcp-stop-l); top: var(--dcp-stop-t); width: var(--dcp-stop-w); height: var(--dcp-stop-h); }
.dcp__key--delete { left: var(--dcp-del-l); top: var(--dcp-del-t); width: var(--dcp-del-w); height: var(--dcp-del-h); }

.dcp__key--record.is-down { background-image: var(--dcp-press-record); }
.dcp__key--play.is-down   { background-image: var(--dcp-press-play); }
.dcp__key--pause.is-down  { background-image: var(--dcp-press-pause); }
.dcp__key--stop.is-down   { background-image: var(--dcp-press-stop); }
.dcp__key--delete.is-down { background-image: var(--dcp-press-delete); }

/* ============ Шильдик-кнопка Save ============ */
.dcp__plate {
    position: absolute;
    left: var(--dcp-plate-l); top: var(--dcp-plate-t);
    width: var(--dcp-plate-w); height: var(--dcp-plate-h);
    padding: 0;
    border: 0;
    background: var(--dcp-plate-img) center / 100% 100% no-repeat;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dcp__plate:focus, .dcp__plate:focus-visible { outline: none; box-shadow: none; }
.dcp__plate.is-down { transform: translateY(calc(var(--dcp-s) * 2px)); filter: brightness(.93); }
.dcp__plate-face {
    position: absolute;
    left: calc(var(--dcp-s) * var(--dcp-plate-inset-x) * 1px);
    right: calc(var(--dcp-s) * var(--dcp-plate-inset-x) * 1px);
    top: calc(var(--dcp-s) * var(--dcp-plate-inset-y) * 1px);
    bottom: calc(var(--dcp-s) * var(--dcp-plate-inset-y) * 1px);
    border-radius: calc(var(--dcp-s) * 4px);
    background: linear-gradient(180deg, var(--dcp-plate-hi), var(--dcp-plate-lo));
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28), inset 0 -1px 1px rgba(255,225,170,.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--dcp-s) * 4px);
    overflow: hidden;
}
.dcp__plate-l1 {
    font: 700 calc(var(--dcp-s) * 21px) / 1 'Arial Narrow', Arial, sans-serif;
    letter-spacing: calc(var(--dcp-s) * 1px);
    color: var(--dcp-plate-ink);
    text-shadow: 0 1px 0 rgba(255,232,190,.3);
    white-space: nowrap;
    transform: scaleX(.8);  /* конденс — как узкая гравировка в арте, и гарантированно влезает */
}
.dcp__plate-l2 {
    font: italic 700 calc(var(--dcp-s) * 22px) / 1 Georgia, 'Times New Roman', serif;
    color: var(--dcp-plate-ink);
    text-shadow: 0 1px 0 rgba(255,232,190,.3);
    white-space: nowrap;
}

/* Есть запись (stopped/play/playpause) — шильдик «загорается» кнопкой сохранения:
   тёплая подсветка + крупное SAVE MP3 на всю плашку (просьба владельца: понятно и заметно) */
.dcp:is([data-state='stopped'], [data-state='play'], [data-state='playpause']) .dcp__plate-face {
    background: linear-gradient(180deg, #8d6b40, #785633);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.3),
        inset 0 -1px 1px rgba(255,225,170,.22),
        0 0 calc(var(--dcp-s) * 16px) rgba(255,170,70,.45);
    animation: dcp-plate-glow 1.5s ease-in-out infinite alternate;
}
.dcp:is([data-state='stopped'], [data-state='play'], [data-state='playpause']) .dcp__plate-l1 {
    display: none;
}
.dcp:is([data-state='stopped'], [data-state='play'], [data-state='playpause']) .dcp__plate-l2 {
    font: 800 calc(var(--dcp-s) * 32px) / 1 'Arial Narrow', Arial, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: calc(var(--dcp-s) * 2px);
    color: #ffe9c2;
    text-shadow:
        0 1px 2px rgba(0,0,0,.6),
        0 0 calc(var(--dcp-s) * 10px) rgba(255,190,90,.55);
}
@keyframes dcp-plate-glow {
    from { box-shadow: inset 0 1px 2px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,225,170,.22),
                       0 0 calc(var(--dcp-s) * 8px)  rgba(255,170,70,.3); }
    to   { box-shadow: inset 0 1px 2px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,225,170,.22),
                       0 0 calc(var(--dcp-s) * 20px) rgba(255,175,75,.65); }
}
@media (prefers-reduced-motion: reduce) {
    .dcp:is([data-state='stopped'], [data-state='play'], [data-state='playpause']) .dcp__plate-face {
        animation: none;
    }
}

/* ============ Служебная строка под прибором ============ */
.dcp-extra {
    max-width: 980px;
    margin: .8rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem 1.2rem;
    min-height: 2.1rem;
}
.dcp-extra__mic { display: inline-flex; align-items: center; gap: .5rem; margin: 0; max-width: 100%; }
.dcp-extra__mic-cap { font-size: .9rem; color: var(--tls-muted, #5a5a5a); white-space: nowrap; }
.dcp-extra__mic-sel { width: auto; max-width: 16rem; min-width: 0; flex: 0 1 auto; } /* ужимается — строка не шире экрана */
.dcp-extra__wav { border: 1px solid var(--tls-border, #d9d9d9); }
.dcp-extra__encoding { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--tls-muted, #5a5a5a); }
.dcp-extra__encoding[hidden] { display: none; }
.dcp-extra__spinner {
    width: 1rem; height: 1rem;
    border: 2px solid var(--tls-border, #d9d9d9);
    border-top-color: var(--tls-muted, #5a5a5a);
    border-radius: 50%;
    animation: dcp-spin .8s linear infinite;
}
@keyframes dcp-spin { to { transform: rotate(360deg); } }
.dcp-extra__error { margin: 0; color: #a33; width: 100%; text-align: center; }
.dcp-extra__error:empty { display: none; }

/* Блок «How it works» переехал в общий блок движка (templates/partials/tool_explain.php). */

/* ============ МОБАЙЛ: арт-сет 941x1672 ============ */
@media (max-width: 640px) {
    .dcp {
        --dcp-ar: 941 / 1672;
        --dcp-case: url('img/case_m.jpg');
        --dcp-lcd-l:18.2784%; --dcp-lcd-t:18.6603%; --dcp-lcd-w:63.3369%; --dcp-lcd-h:25.7177%;
        --dcp-sl-l:16.4718%;  --dcp-sl-t:47.1292%;  --dcp-sl-w:66.9501%;  --dcp-sl-h:3.2297%;
        --dcp-rec-l:39.5324%; --dcp-rec-t:51.3158%; --dcp-rec-w:22.1042%; --dcp-rec-h:13.0383%;
        --dcp-play-l:24.6546%;  --dcp-play-t:65.9091%;  --dcp-play-w:21.2540%;  --dcp-play-h:9.4498%;
        --dcp-pause-l:54.4102%; --dcp-pause-t:65.9091%; --dcp-pause-w:21.2540%; --dcp-pause-h:9.4498%;
        --dcp-stop-l:24.6546%;  --dcp-stop-t:75.3589%;  --dcp-stop-w:21.2540%;  --dcp-stop-h:9.4498%;
        --dcp-del-l:54.4102%;   --dcp-del-t:75.3589%;   --dcp-del-w:21.2540%;   --dcp-del-h:9.4498%;
        --dcp-plate-l:37.8321%; --dcp-plate-t:86.1244%; --dcp-plate-w:24.4421%; --dcp-plate-h:6.2201%;
        --dcp-led-l:69.6068%;   --dcp-led-t:14.2344%;   --dcp-led-w:5.5260%;    --dcp-led-h:3.1100%;
        --dcp-handle-w: 8.5714%;   /* 54/630 */
        --dcp-handle-img: url('img/handle_m.png');
        --dcp-track-img:  url('img/track_m.png');
        --dcp-red-img:    url('img/red_m.png');
        --dcp-cap-red:    url('img/cap_red_m.png');
        --dcp-cap-gray:   url('img/cap_gray_m.png');
        --dcp-cap-r-off:  calc(var(--dcp-s) * 2px);
        --dcp-led-img:     url('img/led_off_m.png');
        --dcp-led-lit-img: url('img/led_lit_m.png');
        --dcp-plate-img:  url('img/plate_m.png');
        --dcp-press-record: url('img/press_record_m.png');
        --dcp-press-play:   url('img/press_play_m.png');
        --dcp-press-pause:  url('img/press_pause_m.png');
        --dcp-press-stop:   url('img/press_stop_m.png');
        --dcp-press-delete: url('img/press_delete_m.png');
        --dcp-plate-inset-x: 12;
        --dcp-plate-inset-y: 11;
        --dcp-timer-h: 70;
    }
    /* Пропорции табло мобайла чуть другие — крупнее строки */
    .dcp__lcd { padding: calc(var(--dcp-s) * 34px) calc(var(--dcp-s) * 22px) calc(var(--dcp-s) * 20px); }
    .dcp__lcd-row1 { height: calc(var(--dcp-s) * 90px); }
    .dcp__lcd-rec { min-width: calc(var(--dcp-s) * 92px); font-size: calc(var(--dcp-s) * 26px); }
    .dcp__lcd-right { min-width: calc(var(--dcp-s) * 92px); gap: calc(var(--dcp-s) * 14px); }
    .dcp__lcd-status { font-size: calc(var(--dcp-s) * 27px); }
    .dcp__lcd-ruler { font-size: calc(var(--dcp-s) * 22px); }
}