/* ───────── Диктовка з телефона (Іван 18.10: «хочу, чтобы была возможность надиктовать сообщение в клиентском
   приложении, когда оно открывается с телефона»). Кнопку мікрофона додає dictation.js — у поле вводу чату й у поле
   панелі «Команда», і на телефоні, і на компʼютері (чат — з 19.10, «Команда» — з 22.10); сховати — ?mic=0.
   Поле v2 (data-cx): кнопка стоїть у клітинці тексту праворуч унизу, текст відсунуто відступом — сітку поля не чіпаємо.
   «Як було»: звичайна кнопка в ряду. Кольори — лише змінні теми. ───────── */
.dict-mic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
    padding: 0; border: 0; border-radius: 17px; background: transparent; color: var(--cx-ic, var(--text-muted));
    font-size: 16px; cursor: pointer; transition: color .12s, background .12s; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; }
.dict-mic:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.dict-mic:disabled { opacity: .4; cursor: default; }
.dict-mic[hidden] { display: none; }
.composer-row > .dict-mic, .ap-composer > .dict-mic { align-self: flex-end; margin-bottom: 3px; }
:root[data-cx] .composer-row > .dict-mic, :root[data-cx] .ap-composer > .dict-mic {
    grid-area: text; justify-self: end; align-self: end; position: relative; z-index: 2; margin: 0 1px 5px 0; }
:root[data-cx] .composer-row.dict-has > .composer-input,
:root[data-cx] .ap-composer.dict-has > .ap-input { padding-right: 38px; }
/* вузьке поле телефона (375 px, ✓✓ видно): підказка «Напишіть повідомлення…» не влазить і ламалась на два рядки,
   другий обрізаний — тримаємо в один рядок, обрізаний перед мікрофоном */
.composer-row.dict-has > .composer-input::placeholder,
.ap-composer.dict-has > .ap-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* запис і розпізнавання: смуга поверх усього ряду поля (кнопки поля під нею не натиснути) */
.composer-row.dict-busy, .ap-composer.dict-busy { position: relative; }
.dict-strip { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; gap: 4px; min-height: 44px;
    padding: 0 4px; border-radius: 22px; background: var(--cx-field, var(--bg-hover));
    border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); color: var(--text); }
.dict-strip.busy { border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.ap-composer > .dict-strip { left: 12px; right: 12px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 44px; }
:root[data-cx] .ap-composer > .dict-strip { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.dict-strip button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
    padding: 0; border: 0; border-radius: 18px; background: transparent; color: var(--text-muted); font-size: 15px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dict-strip button:hover { color: var(--text); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.dict-strip .dict-x:hover { color: var(--danger); }
.dict-strip .dict-ok { width: 36px; background: var(--cx-ok, #5dcaa5); color: #0e1621; font-size: 16px; }
.dict-strip .dict-ok:hover { background: color-mix(in srgb, var(--cx-ok, #5dcaa5) 85%, #fff); color: #0e1621; }
.dict-dot { flex: none; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: var(--danger);
    animation: dict-pulse 1.2s ease-in-out infinite; }
.dict-time { flex: none; min-width: 34px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.dict-time.warn { color: var(--danger); font-weight: 600; }
.dict-bars { flex: 1 1 auto; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 2px;
    overflow: hidden; }
.dict-bars > span { flex: none; width: 3px; height: 3px; border-radius: 2px;
    background: color-mix(in srgb, var(--text) 62%, transparent); transition: height .07s linear; }
.dict-lang { flex: none; height: 28px; min-width: 38px; padding: 0 8px; border-radius: 14px !important; font-size: 12.5px !important;
    font-weight: 600; letter-spacing: .02em; color: var(--accent-strong) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.dict-wait { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; padding-left: 8px; font-size: 14px;
    color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dict-wait i { color: var(--accent-strong); }
@keyframes dict-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .dict-dot { animation: none; } .dict-bars > span { transition: none; } }

/* запис, який не розпізнано: лежить на телефоні, поки не розпізнається або його не викинуть — «Повторити» */
.dict-pend { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 6px 6px 12px; border-radius: 12px;
    background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
    font-size: 13px; color: var(--text); }
.dict-pend[hidden] { display: none; }
.dict-pend > i { flex: none; color: var(--danger); }
.dict-pend-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.dict-pend-text small { display: block; color: var(--text-muted); font-size: 12px; }
.dict-pend button { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--cx-line, var(--border));
    background: var(--bg-hover); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.dict-pend button.dict-retry { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-strong); }
.dict-pend button.dict-drop { width: 32px; padding: 0; background: transparent; border-color: transparent; color: var(--text-muted); }
.dict-pend button:disabled { opacity: .5; cursor: default; }
.ap-panel-pend { margin: 0 12px 6px; }

/* коротке повідомлення (немає мікрофона, ліміт, текст ліг у чернетку іншої розмови) — з 22.10 тост спільного стека
   застосунку; ця плашка біля поля — лише запасна, коли app.js без стека (.solo) */
.dict-note.solo { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 9500;
    max-width: min(92vw, 440px); transform: translate(-50%, 8px); opacity: 0; padding: 10px 14px; border-radius: 12px;
    background: var(--bg-sidebar); border: 1px solid var(--cx-line, var(--border)); box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
    color: var(--text); font-size: 13.5px; line-height: 1.4; transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.dict-note.solo.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dict-note.solo.bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.dict-note.solo button { margin-left: 10px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--cx-line, var(--border));
    background: var(--bg-hover); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }