/* =============================================================================
 * SONOYA - nb-live.css
 * -----------------------------------------------------------------------------
 * Composants streaming en direct (D-025) :
 *   - nb-live-card       : card d'un stream (utilisee sur home, lives page, profil vendeur)
 *   - nb-live-player     : player HLS avec controls custom + chat live sidebar
 *   - nb-live-chat       : chat live SSE
 *   - nb-live-showcase   : produits epingles pendant le live avec offres flash
 *   - nb-live-scheduled  : programme des lives a venir
 *   - nb-live-replay     : card replay (video enregistree)
 * ============================================================================= */

@layer components {

  /* ===============================================
   * nb-live-card - Card d'un stream (grille home, /lives)
   * =============================================== */
  .nb-live-card {
    position: relative;
    display: block;
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--nb-color-text);
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                box-shadow var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-live-card:hover {
    border-color: var(--nb-color-border-hover);
    color: var(--nb-color-text);
    box-shadow: var(--nb-shadow-sm);
  }

  .nb-live-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--nb-color-surface-sunk);
    overflow: hidden;
  }
  .nb-live-card__media > img,
  .nb-live-card__media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--nb-dur-slow) var(--nb-ease-out-quart);
  }
  .nb-live-card:hover .nb-live-card__media > img { transform: scale(1.05); }
  .nb-live-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, oklch(0% 0 0 / 0.55) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .nb-live-card__badge {
    position: absolute;
    top: var(--nb-space-2);
    left: var(--nb-space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: var(--nb-color-live);
    color: white;
    font-family: var(--nb-font-body);
    font-size: 0.65rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-xs);
    z-index: 2;
    box-shadow: 0 0 14px var(--nb-color-live-glow);
  }
  .nb-live-card__badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: nb-live-pulse 1.4s var(--nb-ease-out-expo) infinite;
    flex-shrink: 0;
  }

  .nb-live-card__viewers {
    position: absolute;
    bottom: var(--nb-space-2);
    right: var(--nb-space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: oklch(0% 0 0 / 0.75);
    color: white;
    font-size: 0.7rem;
    font-weight: var(--nb-fw-semibold);
    font-variant-numeric: tabular-nums;
    border-radius: var(--nb-radius-xs);
    z-index: 2;
    backdrop-filter: blur(4px);
  }
  .nb-live-card__viewers > svg { flex-shrink: 0; opacity: 0.9; }

  .nb-live-card__flash-offer {
    position: absolute;
    top: var(--nb-space-2);
    right: var(--nb-space-2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--nb-color-warning);
    color: var(--nb-color-text-strong);
    font-size: 0.6rem;
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    border-radius: var(--nb-radius-xs);
    z-index: 2;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
  }
  .nb-live-card__flash-offer::before {
    content: "⚡";
    font-size: 0.9em;
  }

  .nb-live-card__body {
    padding: var(--nb-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .nb-live-card__seller {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-size: 0.72rem;
    color: var(--nb-color-text-faint);
  }
  .nb-live-card__seller-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nb-color-accent);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: var(--nb-fw-bold);
    flex-shrink: 0;
  }
  .nb-live-card__seller-name {
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text);
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-live-card__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-md);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-text-strong);
    line-height: var(--nb-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  .nb-live-card__products {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--nb-color-accent);
    font-weight: var(--nb-fw-semibold);
  }
  .nb-live-card__products::before {
    content: "🛒";
    font-size: 0.9em;
  }
  .nb-live-card__cta {
    margin-top: var(--nb-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-1);
    padding: var(--nb-space-2) var(--nb-space-4);
    background: var(--nb-color-live);
    color: white;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    border-radius: var(--nb-radius-md);
    text-decoration: none;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-live-card__cta:hover { background: color-mix(in oklch, var(--nb-color-live) 88%, black); color: white; }


  /* ===============================================
   * nb-live-card--scheduled - Programme
   * =============================================== */
  .nb-live-card--scheduled { border-color: var(--nb-color-info); }
  .nb-live-card--scheduled .nb-live-card__badge {
    background: var(--nb-color-info);
    box-shadow: 0 0 12px color-mix(in oklch, var(--nb-color-info) 40%, transparent);
  }
  .nb-live-card--scheduled .nb-live-card__badge::before { animation: none; opacity: 0.9; }
  .nb-live-card__starts-in {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    background: var(--nb-color-info-soft);
    color: var(--nb-color-info-hover);
    font-size: 0.68rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-xs);
    font-variant-numeric: tabular-nums;
  }
  .nb-live-card__notified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--nb-color-text-faint);
    font-size: 0.7rem;
  }
  .nb-live-card__notified > svg { color: var(--nb-color-warning); }


  /* ===============================================
   * nb-live-card--replay - Video enregistree
   * =============================================== */
  .nb-live-card--replay { border-color: var(--nb-color-border); }
  .nb-live-card--replay .nb-live-card__badge {
    background: var(--nb-color-text);
    color: var(--nb-color-text-inverse);
    box-shadow: none;
  }
  .nb-live-card--replay .nb-live-card__badge::before {
    background: var(--nb-color-warning);
    animation: none;
  }
  .nb-live-card__duration {
    position: absolute;
    bottom: var(--nb-space-2);
    left: var(--nb-space-2);
    padding: 3px 7px;
    background: oklch(0% 0 0 / 0.75);
    color: white;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    border-radius: var(--nb-radius-xs);
    z-index: 2;
  }
  .nb-live-card__replay-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--nb-color-text-faint);
    font-variant-numeric: tabular-nums;
  }


  /* ===============================================
   * nb-live-player - Player HLS + chat sidebar (/live/[id])
   * =============================================== */
  .nb-live-player {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 0;
    background: var(--nb-color-neutral-950, oklch(10% 0 0));
    border-radius: var(--nb-radius-xl);
    overflow: hidden;
    min-height: 640px;
    box-shadow: var(--nb-shadow-xl);
    color: white;
  }
  .nb-live-player__video {
    position: relative;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .nb-live-player__video > video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .nb-live-player__overlay {
    position: absolute;
    top: var(--nb-space-4);
    left: var(--nb-space-4);
    right: var(--nb-space-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nb-space-3);
    pointer-events: none;
    z-index: 2;
  }
  .nb-live-player__overlay > * { pointer-events: auto; }
  .nb-live-player__badges {
    display: inline-flex;
    gap: var(--nb-space-2);
  }
  .nb-live-player__title {
    position: absolute;
    bottom: var(--nb-space-6);
    left: var(--nb-space-6);
    right: var(--nb-space-6);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-bold);
    color: white;
    text-shadow: 0 2px 8px oklch(0% 0 0 / 0.6);
    z-index: 2;
  }

  /* Custom video controls */
  .nb-live-player__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--nb-space-4);
    background: linear-gradient(180deg, transparent, oklch(0% 0 0 / 0.75));
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    opacity: 0;
    transition: opacity var(--nb-dur-normal) var(--nb-ease-standard);
    z-index: 3;
  }
  .nb-live-player:hover .nb-live-player__controls,
  .nb-live-player__controls:focus-within { opacity: 1; }
  .nb-live-player__ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: oklch(100% 0 0 / 0.15);
    color: white;
    border: 0;
    border-radius: var(--nb-radius-md);
    cursor: pointer;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
    backdrop-filter: blur(6px);
  }
  .nb-live-player__ctrl-btn:hover { background: oklch(100% 0 0 / 0.25); }
  .nb-live-player__quality {
    padding: 4px 10px;
    background: oklch(100% 0 0 / 0.15);
    color: white;
    font-size: 0.7rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
  }
  .nb-live-player__quality[data-quality="720p"] { background: color-mix(in oklch, var(--nb-color-success) 60%, oklch(100% 0 0 / 0.15)); }
  .nb-live-player__quality[data-quality="480p"] { background: color-mix(in oklch, var(--nb-color-warning) 60%, oklch(100% 0 0 / 0.15)); }
  .nb-live-player__quality[data-quality="240p"] { background: color-mix(in oklch, var(--nb-color-danger) 60%, oklch(100% 0 0 / 0.15)); }


  /* ===============================================
   * nb-live-chat - Chat live temps reel (sidebar du player)
   * =============================================== */
  .nb-live-chat {
    display: flex;
    flex-direction: column;
    background: oklch(15% 0.010 60);
    border-left: 1px solid oklch(25% 0.014 60);
  }
  .nb-live-chat__header {
    padding: var(--nb-space-4);
    border-bottom: 1px solid oklch(25% 0.014 60);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nb-live-chat__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: white;
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
  }
  .nb-live-chat__viewers-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--nb-color-live);
    color: white;
    font-size: 0.7rem;
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-xs);
    font-variant-numeric: tabular-nums;
  }
  .nb-live-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--nb-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    scrollbar-width: thin;
    scrollbar-color: oklch(35% 0.014 60) transparent;
  }
  .nb-live-chat__message {
    display: flex;
    align-items: baseline;
    gap: var(--nb-space-2);
    padding: 4px var(--nb-space-2);
    border-radius: var(--nb-radius-sm);
    font-size: 0.78rem;
    line-height: var(--nb-lh-snug);
    animation: nb-chat-msg-in var(--nb-dur-normal) var(--nb-ease-out-quart);
  }
  @keyframes nb-chat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nb-live-chat__author {
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-accent);
    flex-shrink: 0;
  }
  .nb-live-chat__author--seller { color: var(--nb-color-live); }
  .nb-live-chat__author--staff  { color: var(--nb-color-warning); }
  .nb-live-chat__text {
    color: oklch(88% 0.010 60);
    word-break: break-word;
  }
  .nb-live-chat__form {
    padding: var(--nb-space-3);
    border-top: 1px solid oklch(25% 0.014 60);
    display: flex;
    gap: var(--nb-space-2);
  }
  .nb-live-chat__input {
    flex: 1;
    padding: var(--nb-space-2) var(--nb-space-3);
    background: oklch(22% 0.014 60);
    color: white;
    border: 1px solid oklch(32% 0.015 60);
    border-radius: var(--nb-radius-md);
    font-size: 0.82rem;
  }
  .nb-live-chat__input::placeholder { color: oklch(55% 0.010 60); }
  .nb-live-chat__input:focus {
    outline: none;
    border-color: var(--nb-color-accent);
    background: oklch(26% 0.014 60);
  }
  .nb-live-chat__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background: var(--nb-color-accent);
    color: white;
    border: 0;
    border-radius: var(--nb-radius-md);
    cursor: pointer;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-live-chat__send:hover { background: var(--nb-color-accent-hover); }


  /* ===============================================
   * nb-live-showcase - Produits epingles pendant le live
   * =============================================== */
  .nb-live-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
    background: var(--nb-color-surface);
    border-radius: var(--nb-radius-lg);
    border: 1px solid var(--nb-color-live);
    box-shadow: 0 0 20px var(--nb-color-live-glow);
  }
  .nb-live-showcase__title {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-live);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
  }
  .nb-live-showcase__list {
    display: grid;
    gap: var(--nb-space-2);
  }


  /* ===============================================
   * Responsive : player + chat
   * =============================================== */
  @media (max-width: 1024px) {
    .nb-live-player {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      min-height: auto;
    }
    .nb-live-chat {
      border-left: none;
      border-top: 1px solid oklch(25% 0.014 60);
      max-height: 400px;
    }
  }
}