/* ============================================================
   Oletrak chat attachments — shared styles.

   Loaded by every messaging surface: the product message page
   (message.html), the conversations page (messages.html), the
   order-support full pages (user + admin), and the order-chat
   drawer hosts in the user panel (payments/orders/bookings).

   Covers:
     .ca-*          composer attachment UI (attach/mic buttons,
                    pending-file chip row, status line, record bar)
     .oc-att-*      attachments rendered inside order-chat bubbles
                    (drawer + order-support pages)
     .chat-att-*    attachments rendered inside product-message
                    bubbles (message.html / messages.html)
   ============================================================ */

/* ---------- composer wrapper + tools ---------- */
.ca-composer { position: relative; }

/* The hidden attribute must beat these display rules (author styles would
   otherwise override the UA's [hidden]{display:none} and leave the record
   bar / chip row permanently visible). */
.ca-row[hidden],
.ca-status[hidden],
.ca-record[hidden] { display: none; }

.ca-tools { display: flex; align-items: center; gap: 6px; }

.ca-attach,
.ca-mic {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-input, #ffffff);
  color: #475569;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.ca-attach:hover,
.ca-mic:hover { border-color: #0b3c5d; color: #0b3c5d; }
.ca-attach:active,
.ca-mic:active { transform: scale(0.94); }
.ca-attach:focus-visible,
.ca-mic:focus-visible { outline: 2px solid rgba(11, 60, 93, 0.4); outline-offset: 1px; }

.ca-mic.rec {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  animation: ca-pulse 1.2s ease-in-out infinite;
}
@keyframes ca-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ---------- pending-file chip row ---------- */
.ca-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 2px 2px;
}
.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 99px;
  background: var(--bg-input, #f1f5f9);
  font-size: 12px;
  color: #334155;
}
.ca-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.ca-chip-size { color: #64748b; flex-shrink: 0; }
.ca-chip-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: #64748b;
}
.ca-chip-x:hover { background: rgba(100, 116, 139, 0.15); color: #dc2626; }

/* ---------- transient status line ---------- */
.ca-status {
  display: block;
  margin: 4px 2px 0;
  font-size: 12px;
  color: #059669;
}
.ca-status.bad { color: #dc2626; }

/* ---------- audio-note record bar ---------- */
.ca-record {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 2px 0;
  font-size: 12px;
  color: #dc2626;
}
/* Live "elapsed / total" counter while recording (e.g. 0:07 / 1:30). */
.ca-record-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-left: 2px;
}
.ca-record-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  animation: ca-blink 1s step-start infinite;
}
@keyframes ca-blink { 50% { opacity: 0.25; } }
.ca-record-stop {
  margin-left: auto;
  border: 1px solid #dc2626;
  color: #dc2626;
  background: transparent;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ca-record-stop:hover { background: #dc2626; color: #ffffff; }

/* ---------- per-surface composer layout ---------- */
/* Order-chat composers (drawer .oc-input + full pages .os-input):
   tools row first, then text input, then send button; the chip row
   and status/record lines wrap onto their own full-width rows. */
.oc-input.ca-composer,
.os-input.ca-composer { flex-wrap: wrap; }
.oc-input .ca-tools,
.os-input .ca-tools { order: 0; }
.oc-input input,
.os-input input { order: 1; }
.oc-input .oc-send,
.os-input .oc-send { order: 2; }
.oc-input .ca-row,
.os-input .ca-row { order: 3; flex-basis: 100%; }
.oc-input .ca-status,
.os-input .ca-status { order: 4; flex-basis: 100%; }
.oc-input .ca-record,
.os-input .ca-record { order: 4; flex-basis: 100%; }

/* Product message composer (message.html) — tools above the textarea. */
/* Full-page composer (message.html): a single row [attach+mic] [input]
   [send]; pending-file chips / status / record bar drop onto their own
   full-width rows below (flex order arranges them whatever the DOM order). */
.message-input-area.ca-composer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.message-input-area .ca-tools { order: 1; margin-bottom: 0; }
.message-input-area .message-input { order: 2; }
.message-input-area .message-actions { order: 3; }
.message-input-area .msg-meta-row { order: 4; flex-basis: 100%; }
.message-input-area .ca-row { order: 5; flex-basis: 100%; }
.message-input-area .ca-record { order: 6; flex-basis: 100%; }
.message-input-area .ca-status { order: 7; flex-basis: 100%; }

/* Conversations composer (messages.html) — attach + mic sit inline to the
   LEFT of the text input, with the send button to the RIGHT, all on ONE line.
   The pending-file chip row, status line and record bar still wrap onto their
   own full-width rows below. */
.message-input-wrapper.ca-composer { flex-wrap: wrap; align-items: flex-end; }
.message-input-wrapper .ca-tools {
  order: 0;
  flex: 0 0 auto;
  gap: 4px;
  margin-bottom: 0;
}
.message-input-wrapper .ca-attach,
.message-input-wrapper .ca-mic { width: 38px; height: 38px; }
.message-input-wrapper textarea { order: 1; }
.message-input-wrapper .send-btn { order: 2; }
.message-input-wrapper .ca-row { order: 3; flex-basis: 100%; }
.message-input-wrapper .ca-status { flex-basis: 100%; }
.message-input-wrapper .ca-record { flex-basis: 100%; }

/* ---------- order-chat attachment bubbles ---------- */
.oc-att { display: block; margin-top: 8px; }
.oc-bubble > .oc-att:first-child { margin-top: 2px; }

.oc-att-image { overflow: hidden; border-radius: 10px; }
.oc-att-image img {
  display: block;
  width: 100%;
  max-width: 280px;
  max-height: 280px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.oc-att-image:hover img {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(2, 20, 36, 0.18);
}
.oc-att-video {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  background: #000;
  margin-top: 8px;
}
.oc-att-audio {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
  /* min-height only — a fixed height would clip Firefox's taller native
     control; this keeps the player from collapsing while staying compact */
  min-height: 44px;
}
.oc-att-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-input, #f8fafc);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.oc-att-doc:hover { border-color: #0b3c5d; background: rgba(11, 60, 93, 0.06); }
.oc-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  min-width: 0;
}
.oc-doc-size { color: #64748b; flex-shrink: 0; }
.oc-doc-dl { margin-left: auto; color: #0b3c5d; font-weight: 700; flex-shrink: 0; }

/* Sent (navy) bubble: keep media readable, lighten doc chips. */
.oc-msg.me .oc-att-doc { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
.oc-msg.me .oc-doc-name { color: #ffffff; }
.oc-msg.me .oc-doc-size { color: rgba(255, 255, 255, 0.7); }
.oc-msg.me .oc-doc-dl { color: #93c5fd; }

/* ---------- product-message attachment bubbles ---------- */
.chat-att { display: block; margin-top: 8px; }
.chat-att-image { overflow: hidden; border-radius: 10px; }
.chat-att-image img {
  display: block;
  width: 100%;
  max-width: 260px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  transition: transform 0.18s ease;
}
.chat-att-image:hover img { transform: scale(1.02); }
.chat-att-video {
  display: block;
  width: 100%;
  max-width: 300px;
  border-radius: 10px;
  background: #000;
  margin-top: 8px;
}
.chat-att-audio {
  display: block;
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
  min-height: 44px;
}
.chat-att-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  padding: 8px 11px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-input, #f8fafc);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-att-doc:hover { border-color: #0b3c5d; }
.chat-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  min-width: 0;
}
.chat-doc-size { color: #64748b; flex-shrink: 0; }
.chat-doc-dl { margin-left: auto; color: #0b3c5d; font-weight: 700; flex-shrink: 0; }

/* ---------- dark mode ---------- */
[data-theme="dark"] .ca-attach,
[data-theme="dark"] .ca-mic {
  background: #1f2937;
  border-color: #374151;
  color: #cbd5e1;
}
[data-theme="dark"] .ca-attach:hover,
[data-theme="dark"] .ca-mic:hover { border-color: #60a5fa; color: #93c5fd; }
[data-theme="dark"] .ca-chip { background: #1f2937; border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .ca-chip-size { color: #94a3b8; }
[data-theme="dark"] .ca-chip-x { color: #94a3b8; }
[data-theme="dark"] .ca-chip-x:hover { background: rgba(148, 163, 184, 0.15); color: #f87171; }
[data-theme="dark"] .oc-att-doc,
[data-theme="dark"] .chat-att-doc { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .oc-doc-size,
[data-theme="dark"] .chat-doc-size { color: #94a3b8; }
[data-theme="dark"] .oc-doc-dl,
[data-theme="dark"] .chat-doc-dl { color: #93c5fd; }

/* ============================================================
   WhatsApp-style voice notes (.vn-note) + right-click context
   menu (.ctx-menu) — shared across every chat surface.
   ============================================================ */

/* ---------- voice note ---------- */
.vn-note {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 264px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(11, 60, 93, 0.08);
  border: 1px solid rgba(11, 60, 93, 0.14);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* Neutralise the old native-audio sizing rules when the note carries their
   class (chat-att / oc-att) — the note's own layout must win. */
.vn-note.chat-att-audio,
.vn-note.oc-att-audio {
  display: flex;
  width: auto;
  max-width: 264px;
  min-height: 0;
}
.vn-play {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #0b3c5d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.vn-play:hover { background: #155e8a; transform: scale(1.06); }
.vn-play:active { transform: scale(0.94); }
.vn-play:focus-visible { outline: 2px solid rgba(11, 60, 93, 0.45); outline-offset: 1px; }
.vn-ic-pause { display: none; }
.vn-note.playing .vn-ic-play { display: none; }
.vn-note.playing .vn-ic-pause { display: block; }

.vn-track { flex: 1; min-width: 0; }
.vn-wave {
  position: relative;
  height: 30px;
  overflow: hidden;
  border-radius: 4px;
}
.vn-bars,
.vn-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 1px;
}
.vn-bars i,
.vn-fill i {
  flex: 1 1 0;
  min-width: 2px;
  height: var(--h, 50%);
  border-radius: 2px;
  background: #94a3b8;
}
.vn-fill {
  width: var(--vn-p, 0%);
  overflow: hidden;
  pointer-events: none;
}
.vn-fill i { background: #0b3c5d; }
.vn-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .vn-note { background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.18); }
[data-theme="dark"] .vn-play { background: #3b82f6; }
[data-theme="dark"] .vn-play:hover { background: #60a5fa; }
[data-theme="dark"] .vn-bars i { background: #475569; }
[data-theme="dark"] .vn-fill i { background: #60a5fa; }
[data-theme="dark"] .vn-time { color: #94a3b8; }

/* ---------- right-click context menu ---------- */
.ctx-menu {
  position: fixed;
  z-index: 99999;
  min-width: 180px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2, 20, 35, 0.18);
  animation: ctx-in 0.12s ease;
}
@keyframes ctx-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.ctx-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ctx-item:hover { background: #f1f5f9; }
.ctx-item.danger { color: #dc2626; }
.ctx-item.danger:hover { background: #fef2f2; }

[data-theme="dark"] .ctx-menu { background: #1e293b; border-color: #334155; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .ctx-item { color: #e2e8f0; }
[data-theme="dark"] .ctx-item:hover { background: #334155; }
[data-theme="dark"] .ctx-item.danger { color: #f87171; }
[data-theme="dark"] .ctx-item.danger:hover { background: rgba(248, 113, 113, 0.12); }