/* dze-media-tools.css — shared styles for dictation / recorder / photo tooling (2026-08-26) */
  /* Recorded video / voice message → text (2026-08-26) */
.sms-rec{background:var(--panel2,var(--panel-2,#141414));border:1px solid var(--line);color:var(--gold);border-radius:20px;
  padding:5px 12px;font-size:11px;font-family:var(--sans,inherit);cursor:pointer;transition:.15s}
.sms-rec:hover{border-color:var(--gold);background:rgba(212,160,23,.08)}
.sms-rec-row{display:flex;gap:6px;margin:0 0 8px}
.sms-quick-actions{display:flex;gap:6px;align-items:center}
.sms-mic{width:32px;height:32px;border-radius:50%;background:var(--panel,#0e0e0e);border:1px solid var(--gold);color:var(--gold);
  font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.15s}
.sms-mic:hover{background:rgba(212,160,23,.15)}
.sms-mic.listening,.sms-rec.listening{background:#c0392b;border-color:#c0392b;color:#fff;animation:rmblink 1.1s infinite}
.sms-clip{font-size:13px}
.sms-att[hidden]{display:none}
.sms-dict-status{margin:6px 0 0;font-size:12px;color:#ff8a80;font-family:var(--mono,ui-monospace,monospace);letter-spacing:.02em}
.sms-dict-status.ok{color:#8fe0ab}
#dze-errtoast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2000;background:#3a0f0f;color:#ffb4b4;border:1px solid #8b3a3a;
  border-radius:10px;padding:10px 14px;font-size:12px;font-family:var(--sans,inherit);max-width:90vw;display:none}
.sms-att{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 10px;border:1px solid rgba(212,160,23,.4);
  background:rgba(212,160,23,.08);border-radius:8px;font-size:12px;color:var(--gold)}
.sms-att .sms-att-x{margin-left:auto;background:transparent;border:0;color:var(--muted,var(--muted-2,#8a8a8a));cursor:pointer;font-size:14px}
.sms-att .sms-att-x:hover{color:var(--txt,var(--text,#eee))}
.sms-img{display:block;max-width:220px;max-height:260px;border-radius:8px;margin-top:6px;cursor:zoom-in}
.sms-bubble video,.sms-bubble audio{display:block;max-width:260px;width:100%;margin-top:6px;border-radius:8px;background:#000}
.sms-bubble .sms-media-lbl{display:block;font-size:11px;color:var(--muted,var(--muted-2,#8a8a8a));margin-top:4px}
#rec-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1100;display:none;align-items:center;justify-content:center}
#rec-modal.on{display:flex}
#rec-modal .rm-box{background:var(--panel,#0e0e0e);border:1px solid var(--gold);border-radius:14px;padding:20px;width:min(520px,94vw)}
#rec-modal .rm-title{font-family:var(--serif,Georgia,serif);font-size:20px;color:var(--gold);margin-bottom:6px}
#rec-modal .rm-sub{font-size:12px;color:var(--muted,var(--muted-2,#8a8a8a));margin-bottom:12px}
#rec-modal .rm-modes{display:flex;gap:6px;margin-bottom:10px}
#rec-modal .rm-modes button{background:var(--panel2,var(--panel-2,#141414));border:1px solid var(--line);color:var(--muted,var(--muted-2,#8a8a8a));border-radius:20px;padding:5px 12px;font-size:11px;cursor:pointer;font-family:var(--sans,inherit)}
#rec-modal .rm-modes button.on{color:var(--gold);border-color:var(--gold);background:rgba(212,160,23,.12)}
#rec-modal .rm-stage{background:#000;border-radius:10px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative}
#rec-modal .rm-stage video,#rec-modal .rm-stage audio{width:100%;height:100%;object-fit:cover}
#rec-modal .rm-stage .rm-audio-vis{color:var(--gold);font-family:var(--serif,Georgia,serif);font-size:44px;letter-spacing:.1em}
#rec-modal .rm-timer{position:absolute;top:10px;left:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:3px 8px;border-radius:12px;font-family:var(--mono,ui-monospace,monospace)}
#rec-modal .rm-timer.live::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#e33;margin-right:6px;animation:rmblink 1s infinite}
@keyframes rmblink{50%{opacity:.2}}
#rec-modal .rm-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
#rec-modal .rm-actions .grow{flex:1}
#rec-modal .rm-err{font-size:12px;color:#ff8585;margin-top:8px}
#rec-modal .rm-hint{font-size:11px;color:var(--muted,var(--muted-2,#8a8a8a));margin-top:8px}

/* ── Messages tab composer (index.html) — same classes as the inquiry cards ── */
#v-conversations .sms-quick{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2,#141414)}
#v-conversations .sms-quick-text{width:100%;box-sizing:border-box;background:var(--panel-2,#141414);border:1px solid var(--line);border-radius:6px;color:var(--text,#eee);font-family:var(--sans,inherit);font-size:13px;padding:8px 10px;resize:vertical}
#v-conversations .sms-quick-text:focus{outline:none;border-color:var(--gold)}
#v-conversations .sms-quick-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:10px;flex-wrap:wrap}
#v-conversations .sms-quick-count{font-size:11px;color:var(--muted-2,#8a8a8a)}
#v-conversations .sms-warn{margin-top:8px;font-size:11px;color:#ff8a80;background:rgba(139,58,58,.12);border:1px solid rgba(139,58,58,.4);padding:8px 10px;border-radius:7px}
#v-conversations .conv-bubble img.sms-img,#v-conversations .conv-bubble video,#v-conversations .conv-bubble audio{display:block;max-width:240px;width:100%;border-radius:8px;margin-top:6px;background:#000}
#v-conversations .conv-bubble .sms-media-lbl{display:block;font-size:11px;opacity:.75;margin-top:4px}

/* Mobile (kept LAST so it beats the base rules above on every page) */
@media (max-width:768px){
  .sms-mic{width:38px;height:38px;font-size:17px}
  .sms-quick-text,.sms-text,.sms-compose textarea{font-size:16px}
  .sms-bubble video,.sms-bubble audio,.sms-img{max-width:100%}
}