/* ============================================================================
   Outbox (outbox.js): состояния отправки, строка над полем ввода, прогресс
   загрузки вложений. Цвета — только переменные темы (тёмная и светлая).
   ========================================================================== */

/* --- значок состояния: часы / облако / «!» (в пузыре и в списке чатов) --- */
.ob-tick{display:inline-grid;place-items:center;flex:none;padding:0;border:0;background:none;
  color:var(--muted);line-height:0}
.ob-tick svg{display:block}
.b-meta .ob-tick{color:rgba(255,247,240,.72)}
.b-meta .ob-tick.is-sending svg{animation:obTickPulse 1.6s ease-in-out infinite}
@keyframes obTickPulse{50%{opacity:.45}}
/* «Не отправлено»: красный кружок с «!» — на оранжевом пузыре красный значок
   без подложки не читался бы */
.b-meta .ob-tick.is-failed{color:#fff;background:var(--danger);border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85);cursor:pointer}
.b-meta .ob-tick.is-failed svg{width:12px;height:12px}
.bubble.meta-over>.b-meta .ob-tick{color:rgba(255,255,255,.92)}
.ci-sub .ob-tick.is-failed,.sr-item .ob-tick.is-failed{color:var(--danger)}
.chat-item.is-active .ob-tick{color:rgba(255,247,240,.8)}
.chat-item.is-active .ob-tick.is-failed{color:#fff}

/* --- локальная строка ленты --- */
.ob-row .bubble{transition:opacity .2s}
.ob-row.is-failed .bubble{box-shadow:0 0 0 1.5px var(--danger),0 3px 14px var(--accent-glow)}
.ob-bang{align-self:center;flex:none;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;color:#fff;background:var(--danger);margin-right:2px;
  box-shadow:var(--shadow-soft);transition:transform .08s,filter .15s}
.ob-bang:hover{filter:brightness(1.1)}
.ob-bang:active{transform:scale(.92)}
.ob-bang svg{width:16px;height:16px}

/* --- кольцо прогресса с кнопкой ✕ / ↻ --- */
.ob-prog{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:2}
.ob-prog.is-small{width:40px;height:40px;margin:-20px 0 0 -20px}
.ob-ring{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);pointer-events:none}
.ob-ring-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3.5}
.ob-ring-fg{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;
  transition:stroke-dashoffset .25s linear}
.ob-prog.is-indet .ob-ring{animation:obSpin 1s linear infinite}
@keyframes obSpin{to{transform:rotate(360deg)}}
.ob-prog.is-failed{background:var(--danger)}
.ob-prog.is-failed .ob-ring{display:none}
.ob-prog-btn{position:relative;width:100%;height:100%;border-radius:50%;color:#fff;
  font-size:16px;font-weight:700;display:grid;place-items:center;line-height:1}
.ob-prog.is-small .ob-prog-btn{font-size:14px}
.ob-prog-btn:disabled{cursor:default}
.ob-prog-btn:not(:disabled):hover{background:rgba(255,255,255,.12)}
.ob-prog-btn svg{width:22px;height:22px}

/* фото/видео до загрузки на сервер — локальное превью */
.ob-media{position:relative;min-height:120px}
.ob-media img,.ob-media video{display:block}
.ob-pill{position:absolute;left:8px;top:8px;z-index:2;padding:2px 8px;border-radius:999px;
  background:rgba(0,0,0,.5);color:#fff;font:500 10.5px/1.5 var(--font-mono);max-width:calc(100% - 16px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* документ/аудио: кольцо поверх значка файла */
.ob-doc{cursor:default}
.ob-doc-ico{position:relative;width:44px;height:44px;flex:none}
.ob-doc-ico>:first-child:not(.ob-prog){visibility:hidden}   /* значок файла под кольцом не просвечивает */
.ob-doc-ico .ob-prog{left:0;top:0;width:44px;height:44px;margin:0;border-radius:12px;background:rgba(0,0,0,.28)}
.ob-doc-ico .ob-prog.is-failed{background:var(--danger)}
.ob-doc .b-doc-size{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* альбом, который ещё грузится: плитки с собственным кольцом */
.ob-grid{display:grid;gap:2px;margin:-3px -5px 2px;border-radius:11px;overflow:hidden;
  width:min(340px,68vw);background:rgba(0,0,0,.2)}
.ob-tile{position:relative;aspect-ratio:1;overflow:hidden;min-width:0}
.ob-tile-media{display:block;width:100%;height:100%;object-fit:cover}
.ob-tile.is-failed::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--danger);pointer-events:none}

/* --- строка над полем ввода: загрузка / не отправлено / ждёт сети --- */
.ob-notice{max-width:860px;margin:0 auto 6px;display:flex;flex-direction:column;gap:4px}
.ob-line{position:relative;display:flex;align-items:center;gap:8px;min-height:32px;
  padding:4px 6px 4px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--border);
  font-size:12.5px;color:var(--text-2);overflow:hidden;animation:slideDown .2s}
.ob-line.is-failed{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.ob-ico{flex:none;display:grid;place-items:center;width:16px;height:16px}
.ob-ico svg{width:15px;height:15px}
.ob-spin{border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);
  width:14px;height:14px;animation:obSpin .9s linear infinite}
.ob-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-act{flex:none;padding:5px 10px;border-radius:8px;color:var(--accent);font-weight:700;font-size:12.5px}
.ob-act:hover{background:var(--accent-soft)}
.ob-x{flex:none;width:26px;height:26px;border-radius:50%;color:var(--muted);font-size:12px}
.ob-x:hover{background:var(--hover);color:var(--text)}
.ob-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-soft)}
.ob-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s linear}

/* --- кнопка reply-клавиатуры, чьё сообщение ещё летит (Android pending) --- */
.reply-kb .kb-btn.is-pending{position:relative;color:transparent;opacity:1;cursor:progress}
.reply-kb .kb-btn.is-pending::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);
  animation:obSpin .8s linear infinite}

/* --- голосовое: последние 10 с до предела длительности --- */
.rec-timer.is-ending{color:var(--danger);font-weight:700}

@media (max-width:600px){
  .ob-notice{gap:3px;margin-bottom:5px}
  .ob-line{font-size:12px;min-height:28px;padding:2px 4px 2px 10px}
  .ob-act{padding:4px 8px}
}