/**
 * /mobile/css/oink-audio-intro.css — AudioIntro styles.
 * Void black couture kink. Deep blacks, warm accents.
 */

.ai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 10px 8px;
  border-radius: 22px;
  background: oklch(6% 0.008 280 / 0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid oklch(100% 0 0 / 0.06);
  color: oklch(94% 0.01 280);
  font-family: inherit;
  contain: layout paint style;
  position: relative;
  transition: background 200ms, border-color 200ms;
}

.ai [hidden] { display: none !important; }

.ai--empty .ai-label { color: oklch(50% 0.02 280); }
.ai--uploading       { opacity: 0.7; pointer-events: none; }
.ai--shake           { animation: ai-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes ai-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60%      { transform: translate3d(3px, 0, 0); }
}

/* Row 1 — pill */
.ai-row--pill {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.ai-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
}
.ai-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 28%;
  clip-path: path('M20,2 C8,2 2,8 2,20 C2,32 8,38 20,38 C32,38 38,32 38,20 C38,8 32,2 20,2 Z');
  object-fit: cover;
  background: oklch(12% 0.02 280);
  display: block;
}
.ai-avatar-img--placeholder {
  background: linear-gradient(135deg, oklch(30% 0.08 280), oklch(12% 0.02 280));
}
.ai-avatar-ring {
  position: absolute;
  inset: -2px;
  border-radius: 32%;
  pointer-events: none;
  box-shadow:
    0 0 0 2px oklch(72% 0.22 var(--ai-ring-hue, 20) / 0.95),
    0 0 10px 1px oklch(72% 0.22 var(--ai-ring-hue, 20) / 0.45);
}

.ai-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, oklch(72% 0.22 20), oklch(68% 0.20 30));
  color: oklch(99% 0 0);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  position: relative;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 160ms;
}
.ai-btn:hover  { filter: brightness(1.08); }
.ai-btn:active { transform: scale(0.94); }
.ai-btn:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; }
.ai-btn:focus-visible { outline: 2px solid oklch(85% 0.18 90); outline-offset: 2px; }
.ai-btn-glyph svg { width: 20px; height: 20px; }
.ai-btn-glyph--pause { display: none; }
.ai--playing .ai-btn-glyph--play  { display: none; }
.ai--playing .ai-btn-glyph--pause { display: block; }

.ai-btn--record {
  background: linear-gradient(135deg, oklch(62% 0.26 330), oklch(56% 0.22 350));
  box-shadow: 0 0 16px oklch(60% 0.24 330 / 0.3);
}
.ai-btn--record input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.ai-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.ai-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(92% 0.01 280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-wave {
  width: 100%;
  max-width: 240px;
  height: 28px;
  display: block;
}

.ai-duration {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: oklch(68% 0.02 280);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  flex: none;
}

.ai-cap-mode {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.06);
  background: oklch(4% 0.005 0 / 0.6);
  color: oklch(72% 0.02 280);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: background 160ms, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-cap-mode:hover  { background: oklch(14% 0.02 280 / 0.8); }
.ai-cap-mode:active { transform: scale(0.92); }
.ai-cap-mode svg { width: 18px; height: 18px; }

.ai-audio-el {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────── */
/* Captions — 4 modes                                   */
/* ────────────────────────────────────────────────────── */

.ai-cap {
  position: relative;
  border-top: 1px solid oklch(100% 0 0 / 0.04);
  padding: 10px 6px 4px;
  min-height: 40px;
}

.ai-cap-flow,
.ai-cap-oneline,
.ai-cap-bigword,
.ai-cap-theater { display: none; }

.ai--cap-flow    .ai-cap-flow    { display: block; }
.ai--cap-oneline .ai-cap-oneline { display: block; }
.ai--cap-bigword .ai-cap-bigword { display: block; }
.ai--cap-theater .ai-cap-theater { display: block; }

.ai-cap-flow {
  font-size: 14px;
  line-height: 1.5;
  color: oklch(50% 0.01 280);
}
.ai-cap-flow-seg { transition: color 160ms; cursor: pointer; user-select: none; }
.ai-cap-flow-seg:hover { color: oklch(78% 0.01 280); }
.ai--scrubbing .ai-cap-flow-seg { cursor: col-resize; }
.ai-cap-flow-seg.is-past { color: oklch(64% 0.01 280); }
.ai-cap-flow-seg.is-now  {
  color: oklch(97% 0.01 280);
  font-weight: 700;
  text-shadow: 0 0 12px oklch(72% 0.22 var(--ai-ring-hue, 20) / 0.5);
}

.ai-cap-oneline {
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: oklch(92% 0.01 280);
  letter-spacing: 0.01em;
  min-height: 22px;
}

.ai-cap-bigword {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: oklch(98% 0.01 280);
  letter-spacing: -0.01em;
  text-shadow: 0 0 24px oklch(72% 0.22 var(--ai-ring-hue, 20) / 0.65);
  min-height: 32px;
}

.ai-cap-theater {
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-cap-theater-line { transition: opacity 200ms, color 200ms; cursor: pointer; }
.ai-cap-theater-line:hover { opacity: 0.8; }
.ai-cap-theater-line.is-past   { color: oklch(50% 0.01 280); opacity: 0.7; }
.ai-cap-theater-line.is-now    { color: oklch(98% 0.01 280); font-weight: 700; }
.ai-cap-theater-line.is-future { opacity: 0; height: 0; overflow: hidden; }

.ai--cap-none .ai-cap { display: none; }

/* ────────────────────────────────────────────────────── */
/* Owner Editor                                         */
/* ────────────────────────────────────────────────────── */

.ai-editor {
  border-top: 1px solid oklch(100% 0 0 / 0.04);
  padding: 10px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-trim { display: flex; flex-direction: column; gap: 4px; }
.ai-trim-track {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: oklch(4% 0.005 0);
  border: 1px solid oklch(100% 0 0 / 0.06);
}
.ai-trim-range {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(135deg, oklch(72% 0.22 20 / 0.3), oklch(68% 0.20 30 / 0.3));
  border-radius: 999px;
}
.ai-trim-handle {
  position: absolute;
  top: -4px;
  width: 22px;
  height: 30px;
  border: 0;
  background: oklch(96% 0.04 var(--ai-ring-hue, 20));
  border-radius: 999px;
  cursor: grab;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px oklch(0% 0 0 / 0.4);
}
.ai-trim-handle:active { cursor: grabbing; }
.ai-trim-readout {
  font-size: 11px;
  color: oklch(60% 0.01 280);
  font-family: ui-monospace, monospace;
  letter-spacing: 0.02em;
}

.ai-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
}
.ai-filter {
  flex: none;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid oklch(100% 0 0 / 0.06);
  background: oklch(6% 0.01 280 / 0.7);
  color: oklch(78% 0.01 280);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-filter[aria-pressed="true"] {
  background: linear-gradient(135deg, oklch(72% 0.22 20), oklch(68% 0.20 30));
  border-color: transparent;
  color: oklch(99% 0 0);
}
.ai-filter:active { transform: scale(0.95); }

.ai-editor-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ai-editor-btn {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid oklch(100% 0 0 / 0.06);
  background: transparent;
  color: oklch(78% 0.01 280);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, filter 160ms;
}
.ai-editor-btn--primary {
  background: linear-gradient(135deg, oklch(72% 0.22 20), oklch(68% 0.20 30));
  border-color: transparent;
  color: oklch(99% 0 0);
}
.ai-editor-btn--primary:hover { filter: brightness(1.06); }
.ai-editor-btn--ghost:hover   { background: oklch(12% 0.01 280 / 0.6); }

.ai-editor-status {
  font-size: 12px;
  color: oklch(60% 0.01 280);
  min-height: 16px;
}
.ai-editor-status[data-kind="success"] { color: oklch(72% 0.18 145); }
.ai-editor-status[data-kind="error"]   { color: oklch(70% 0.22 28); }

/* ────────────────────────────────────────────────────── */
/* Recording state (owner mode)                          */
/* ────────────────────────────────────────────────────── */

.ai-btn-glyph--stop { display: none; }
.ai--recording .ai-btn-glyph--mic  { display: none; }
.ai--recording .ai-btn-glyph--stop { display: block; }
.ai--recording .ai-btn--record {
  background: linear-gradient(135deg, oklch(68% 0.30 28), oklch(60% 0.26 18));
  animation: ai-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(65% 0.28 28 / 0.5); }
  50%      { box-shadow: 0 0 0 10px oklch(65% 0.28 28 / 0); }
}

.ai-rec-timer {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: oklch(72% 0.24 28);
  letter-spacing: 0.04em;
}

.ai-rec-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-top: 1px solid oklch(100% 0 0 / 0.04);
}

.ai-rec-act {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.06);
  background: oklch(4% 0.005 0 / 0.6);
  color: oklch(78% 0.01 280);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: background 160ms, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-rec-act:active { transform: scale(0.92); }
.ai-rec-act svg { width: 18px; height: 18px; }

.ai-rec-act--use {
  width: auto;
  border-radius: 999px;
  padding: 0 18px;
  margin-left: auto;
  background: linear-gradient(135deg, oklch(72% 0.22 20), oklch(68% 0.20 30));
  border-color: transparent;
  color: oklch(99% 0 0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.ai-rec-act--use:hover { filter: brightness(1.06); }

.ai-rec-dur {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: oklch(68% 0.02 280);
  letter-spacing: 0.04em;
  flex: none;
}

.ai-upload-fallback {
  display: block;
  text-align: center;
  padding: 2px 0 4px;
  font-size: 12px;
  color: oklch(50% 0.01 280);
  cursor: pointer;
  transition: color 160ms;
}
.ai-upload-fallback:hover { color: oklch(72% 0.01 280); }

/* ── Live recording overlays ── */
.ai-live-text {
  font-size: 12px;
  color: oklch(78% 0.04 200);
  font-style: italic;
  min-height: 16px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-vad-hint {
  font-size: 11px;
  color: oklch(68% 0.18 28);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Language picker ── */
.ai-lang-pick {
  appearance: none;
  -webkit-appearance: none;
  background: oklch(10% 0.01 280 / 0.8);
  border: 1px solid oklch(100% 0 0 / 0.08);
  border-radius: 6px;
  color: oklch(70% 0.01 280);
  font-size: 11px;
  font-family: inherit;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.ai--recording .ai-lang-pick  { display: none; }
.ai--preview-mode .ai-lang-pick { display: none; }

/* ── Preview toggle button ── */
.ai-preview-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.06);
  background: oklch(4% 0.005 0 / 0.6);
  color: oklch(65% 0.02 280);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: background 160ms, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-preview-toggle:hover  { background: oklch(14% 0.02 280 / 0.8); }
.ai-preview-toggle:active { transform: scale(0.92); }
.ai-preview-toggle svg { width: 15px; height: 15px; }
.ai-preview-toggle-edit { display: none; }
.ai--preview-mode .ai-preview-toggle-eye  { display: none; }
.ai--preview-mode .ai-preview-toggle-edit { display: block; }
.ai--preview-mode .ai-preview-toggle      { color: oklch(72% 0.22 var(--ai-ring-hue, 20)); }

/* ── Owner preview mode: hide edit controls ── */
.ai-btn--play-preview                  { display: none; }
.ai--preview-mode .ai-btn--play-preview { display: grid; }
.ai--preview-mode .ai-btn--record       { display: none !important; }
.ai--preview-mode .ai-editor            { display: none; }
.ai--preview-mode .ai-rec-preview       { display: none; }
.ai--preview-mode .ai-upload-fallback   { display: none; }
.ai--preview-mode [data-ai-vad-hint]    { display: none; }
.ai--preview-mode [data-ai-live-text]   { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ai, .ai-btn, .ai-cap-mode, .ai-filter, .ai-cap-flow-seg, .ai-cap-theater-line, .ai-rec-act { transition: none; }
  .ai--shake, .ai--recording .ai-btn--record { animation: none; }
}

@media (max-width: 380px) {
  .ai { padding: 6px 12px 8px 6px; }
  .ai-row--pill { gap: 10px; }
  .ai-avatar { width: 36px; height: 36px; }
  .ai-avatar-img { clip-path: path('M18,2 C7,2 2,7 2,18 C2,29 7,34 18,34 C29,34 34,29 34,18 C34,7 29,2 18,2 Z'); }
  .ai-btn { width: 40px; height: 40px; }
  .ai-wave { max-width: 180px; height: 24px; }
  .ai-cap-bigword { font-size: 22px; }
}

/* oink-4-declutter-20260619: hide cryptic voice-intro editor toggles per PiGBoss directive (only clear/usable controls stay).
   caption-mode = captions are not persisted server-side (does nothing on saved intros);
   preview-toggle = cryptic + redundant with the play button. Archive-not-destroy: original rules above
   retained; un-hide by deleting these two lines. */
.ai-cap-mode { display: none !important; }
.ai-preview-toggle { display: none !important; }