/* =============================================================================
   Halky Notes™ — Indicador Global de Gravação (mini player)
   -----------------------------------------------------------------------------
   Pílula flutuante (canto inferior direito) exibida em QUALQUER módulo do /app
   quando existe uma gravação em andamento não finalizada. Puramente visual +
   somente-leitura (lógica em assets/app/js/notes-mini-player.js). Glass premium
   assinatura do player (cyan→teal→purple→green), GPU-only (transform/opacity).
   Carregado GLOBALMENTE (head.php) — some sozinho na própria tela do Notes.
   ========================================================================== */
.notes-mini {
    --nm-c1: #22d3ee;   /* cyan  */
    --nm-c2: #06b6d4;   /* teal  */
    --nm-c3: #8b5cf6;   /* purple*/
    --nm-c4: #14f195;   /* green */
    --nm-glass: color-mix(in srgb, #0b1017 74%, transparent);
    --nm-stroke: color-mix(in srgb, #ffffff 9%, transparent);

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2147482000;
    width: min(380px, calc(100vw - 32px));
    /* estado inicial (entrada) */
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(.94);
    filter: blur(14px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
    pointer-events: none;           /* wrapper não intercepta cliques */
}
.notes-mini.is-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
.notes-mini.is-out { opacity: 0; transform: translate3d(0, 30px, 0) scale(.96); filter: blur(6px); }

.notes-mini__card {
    pointer-events: auto;           /* só o card é clicável */
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 24px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text-primary, #eef2f7);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nm-c3) 16%, transparent), transparent 60%),
        radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--nm-c1) 14%, transparent), transparent 60%),
        var(--nm-glass);
    border: 1px solid var(--nm-stroke);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .40), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease;
    will-change: transform;
    overflow: hidden;
}
.notes-mini__card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--nm-c1) 55%, transparent), transparent 40%, color-mix(in srgb, var(--nm-c3) 50%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .5; pointer-events: none;
    transition: opacity .22s ease;
}
.notes-mini__card:hover { transform: translate3d(0, -4px, 0) scale(1.01); box-shadow: 0 40px 110px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--nm-c1) 22%, transparent); border-color: color-mix(in srgb, var(--nm-c1) 45%, transparent); }
.notes-mini__card:hover::before { opacity: .9; }
.notes-mini__card:focus-visible { outline: 2px solid var(--nm-c1); outline-offset: 3px; }

/* -------------------------------------------------------------------- LED --- */
.notes-mini__led {
    grid-row: 1; width: 12px; height: 12px; border-radius: 50%; align-self: center;
    background: radial-gradient(circle at 35% 35%, #d6fff0, var(--nm-c4));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-c4) 60%, transparent), 0 0 12px color-mix(in srgb, var(--nm-c4) 80%, transparent);
    animation: notes-mini-led 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------- waveform -- */
.notes-mini__wave {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; align-items: center; gap: 2px; height: 26px; margin-top: 12px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.notes-mini__wave span {
    flex: 1 1 auto; min-width: 0; height: 100%;
    border-radius: 999px; transform-origin: center;
    background: linear-gradient(180deg, var(--nm-c1), var(--nm-c2) 45%, var(--nm-c3));
    transform: scaleY(.28);
    animation: notes-mini-wave 1.15s ease-in-out infinite;
    animation-delay: calc(var(--i) * -80ms);
}

/* ------------------------------------------------------------------ textos -- */
.notes-mini__body { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notes-mini__title { font-size: .96rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-mini__sub { font-size: .76rem; color: var(--text-secondary, color-mix(in srgb, var(--text-primary) 60%, transparent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------- meta --- */
.notes-mini__meta { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.notes-mini__time { font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff; }
.notes-mini__go {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: color-mix(in srgb, var(--nm-c1) 82%, #fff);
    transition: transform .2s ease;
}
.notes-mini__go svg { width: 13px; height: 13px; }
.notes-mini__card:hover .notes-mini__go { transform: translate3d(3px, 0, 0); }

.notes-mini .notes__tm { font-size: .6em; vertical-align: super; opacity: .75; }

/* --------------------------------------------------------------- responsivo */
@media (max-width: 480px) {
    .notes-mini { right: 16px; left: 16px; bottom: 16px; width: auto; }
    .notes-mini__card { padding: 14px 16px; border-radius: 22px; }
    .notes-mini__title { font-size: .9rem; }
}

/* -------------------------------------------------------------- keyframes -- */
@keyframes notes-mini-led {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-c4) 55%, transparent), 0 0 12px color-mix(in srgb, var(--nm-c4) 80%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nm-c4) 0%, transparent), 0 0 18px color-mix(in srgb, var(--nm-c4) 90%, transparent); }
}
@keyframes notes-mini-wave {
    0%, 100% { transform: scaleY(.22); opacity: .7; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* =============================================================================
   Gravação contínua entre módulos — iframe de overlay + HUD ao vivo
   -----------------------------------------------------------------------------
   Durante uma gravação ativa, ao trocar de módulo o Notes NÃO recarrega: o outro
   módulo abre num iframe "bare" (?embed=1) sobre a área de conteúdo (a sidebar
   segue visível). O gravador real continua no documento de topo; o HUD ao vivo
   (variação .notes-mini--live) mostra o tempo e permite pausar/encerrar/voltar.
   Lógica em assets/app/js/recording-nav.js.
   ========================================================================== */
.notes-overlay-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    border-radius: 18px;
    background: transparent;
    z-index: 3;
}
body.is-notes-overlay .content {
    position: relative;
    min-height: 78vh;
    overflow: hidden;
    /* Solta o cap de largura (--content-max: 1180px) SÓ enquanto o overlay está
       aberto. O documento-host é a página Notes, cujo `.content` é capado em
       1180px e centralizado; o iframe (`inset:0`) herda essa largura, então
       módulos que "soltam" o cap (Chat/Simulados/FlashCards, `.content{max-width:none}`)
       ficavam presos a 1180px numa tela larga — mais estreitos que o normal, com
       um vazio à direita. Soltando o cap aqui, o iframe passa a ocupar a coluna
       inteira (1fr) e o módulo renderiza EXATAMENTE como fora da gravação.
       Reverte ao fechar o overlay (classe removida). NÃO altera a página Notes
       (notesRoot fica display:none durante o overlay). */
    max-width: none;
}

/* -----------------------------------------------------------------------------
   FIX — layout do módulo DENTRO do iframe (?embed=1).
   O `.app-shell` base é `grid-template-columns: var(--sidebar-w) 1fr`; no layout
   embed (embed.php) o `.main` é o ÚNICO filho (sem sidebar), então caía na
   PRIMEIRA coluna = largura da sidebar (~300px), espremendo o módulo inteiro
   (ex.: composer do Chat com `flex:1;min-width:0` colapsa a ~0). Como o embed
   não tem sidebar, a coluna dela não deve existir: uma única coluna 1fr faz o
   conteúdo preencher a largura do iframe. (Só valia no desktop >1024px; abaixo
   disso o grid já vira 1fr.) A gravação NÃO pode alterar o layout dos módulos.
   -------------------------------------------------------------------------- */
.app-shell--embed { grid-template-columns: 1fr; }

/* =============================================================================
   HUD ao vivo — "Orelha" discreta (aba lateral premium)
   -----------------------------------------------------------------------------
   Substitui o card largo por uma aba mínima presa na borda direita. Recolhida
   (~76px) mostra só led + mic + tempo + waveform mínimo; no hover/focus expande
   (~360px) revelando status, título, waveform completo e ações. position:fixed
   ⇒ NUNCA empurra/cobre o layout dos módulos. GPU-safe: anima width + opacity +
   transform (nada de display/visibility). Estados mudam SÓ a cor (--ear-accent
   via [data-status]), nunca o layout. Lógica em recording-nav.js.
   ========================================================================== */
.notes-ear {
    --ear-accent: #14f195;                 /* rec (verde) — trocado por data-status */
    --ear-glass: color-mix(in srgb, #0b1017 78%, transparent);
    --ear-stroke: color-mix(in srgb, #ffffff 10%, transparent);
    --ear-w: 76px;                          /* largura recolhida */
    --ear-h: 208px;                         /* altura fixa (recolhido = expandido) */

    position: fixed;
    right: 0;
    bottom: 96px;
    z-index: 2147482000;
    width: var(--ear-w);
    height: var(--ear-h);
    max-width: calc(100vw - 12px);
    color: var(--text-primary, #eef2f7);
    /* Entrada VERTICAL (translateY): um slide horizontal `right:0 + translateX`
       para fora da borda direita estenderia o scrollWidth do documento — e como
       a barra do viewport é oculta (base.css), isso reflui o layout sem barra à
       vista. Vertical não ultrapassa a borda ⇒ zero overflow, zero reflow. */
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        width .26s cubic-bezier(.22, .8, .2, 1),
        transform .42s cubic-bezier(.2, .7, .2, 1),
        opacity .4s ease;
    will-change: width, transform, opacity;
}
.notes-ear.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
.notes-ear.is-out { opacity: 0; transform: translate3d(0, 16px, 0); }
.notes-ear:hover,
.notes-ear:focus-within { width: min(360px, calc(100vw - 12px)); }
.notes-ear:focus-visible { outline: none; }

/* Vidro (fundo/borda/blur/glow) — pinta a orelha inteira, cantos só à esquerda. */
.notes-ear__glass {
    position: absolute; inset: 0;
    border-radius: 22px 0 0 22px;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ear-accent) 18%, transparent), transparent 62%),
        radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, #8b5cf6 12%, transparent), transparent 60%),
        var(--ear-glass);
    border: 1px solid var(--ear-stroke);
    border-right: 0;
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow:
        -18px 24px 70px rgba(0, 0, 0, .42),
        0 0 22px color-mix(in srgb, var(--ear-accent) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    transition: box-shadow .3s ease;
    pointer-events: none;
}
.notes-ear:hover .notes-ear__glass,
.notes-ear:focus-within .notes-ear__glass {
    box-shadow:
        -26px 30px 90px rgba(0, 0, 0, .5),
        0 0 30px color-mix(in srgb, var(--ear-accent) 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

/* -------------------------------------------------------- estado recolhido -- */
.notes-ear__rail {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 13px; padding: 16px 0;
    opacity: 1;
    transition: opacity .16s ease;
    pointer-events: none;
}
.notes-ear:hover .notes-ear__rail,
.notes-ear:focus-within .notes-ear__rail { opacity: 0; }

.notes-ear__led {
    width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, var(--ear-accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--ear-accent) 85%, transparent);
    animation: notes-ear-led 1.7s ease-in-out infinite;
}
.notes-ear__mic { display: inline-flex; color: color-mix(in srgb, var(--ear-accent) 88%, #fff); }
.notes-ear__mic svg { width: 22px; height: 22px; }
.notes-ear__time--rail { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff; }
.notes-ear__wave--mini { width: 46px; height: 20px; }

/* -------------------------------------------------------- estado expandido -- */
.notes-ear__panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; gap: 9px;
    padding: 15px 17px;
    opacity: 0;
    transform: translate3d(10px, 0, 0);
    transition: opacity .2s ease .06s, transform .28s cubic-bezier(.2, .8, .2, 1) .06s;
    pointer-events: none;
    overflow: hidden;
}
.notes-ear:hover .notes-ear__panel,
.notes-ear:focus-within .notes-ear__panel { opacity: 1; transform: none; pointer-events: auto; }

.notes-ear__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notes-ear__status { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--ear-accent) 82%, #fff); white-space: nowrap; }
.notes-ear__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ear-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--ear-accent) 80%, transparent); animation: notes-ear-led 1.7s ease-in-out infinite; }
.notes-ear__time--big { font-size: 1.42rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff; }

.notes-ear__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.notes-ear__title { font-size: .96rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-ear__sub { font-size: .78rem; color: var(--text-secondary, color-mix(in srgb, var(--text-primary) 60%, transparent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-ear .notes__tm { font-size: .62em; vertical-align: super; opacity: .7; }

.notes-ear__wave--full { flex: 0 0 auto; height: 30px; margin: 2px 0 1px; }

.notes-ear__ctrls { display: flex; align-items: center; gap: 7px; margin-top: auto; }
.notes-ear__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1 1 auto; min-width: 0;
    height: 38px; padding: 0 10px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap;
    color: var(--text-primary, #eef2f7);
    background: color-mix(in srgb, #ffffff 8%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
    -webkit-appearance: none; appearance: none;
    transition: transform .16s cubic-bezier(.2, .7, .2, 1), background-color .16s ease, border-color .16s ease;
}
.notes-ear__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.notes-ear__btn:hover { transform: translate3d(0, -1px, 0); background: color-mix(in srgb, var(--ear-accent) 22%, transparent); border-color: color-mix(in srgb, var(--ear-accent) 45%, transparent); }
.notes-ear__btn:focus-visible { outline: 2px solid var(--ear-accent); outline-offset: 2px; }
.notes-ear__btn--stop { color: #fff; background: color-mix(in srgb, #f43f5e 30%, transparent); border-color: color-mix(in srgb, #f43f5e 52%, transparent); }
.notes-ear__btn--stop:hover { background: color-mix(in srgb, #f43f5e 46%, transparent); border-color: color-mix(in srgb, #f43f5e 70%, transparent); }
.notes-ear__btn--ghost { flex: 0 0 auto; padding: 0 12px; }

/* ---------------------------------------------------------- waveform (share) */
.notes-ear__wave {
    display: flex; align-items: center; gap: 2px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.notes-ear__wave span {
    flex: 1 1 auto; min-width: 0; height: 100%;
    border-radius: 999px; transform-origin: center;
    background: linear-gradient(180deg, var(--ear-accent), color-mix(in srgb, var(--ear-accent) 40%, #8b5cf6));
    transform: scaleY(.26);
    animation: notes-ear-wave 1.15s ease-in-out infinite;
    animation-delay: calc(var(--i) * -70ms);
}

/* ------------------------------------------------------------ estados (cor) - */
.notes-ear[data-status="rec"]     { --ear-accent: #14f195; }
.notes-ear[data-status="sync"]    { --ear-accent: #22d3ee; }
.notes-ear[data-status="offline"] { --ear-accent: #fb7185; }
.notes-ear[data-status="paused"]  { --ear-accent: #f59e0b; }
/* Pausado: acalma led/dot/onda (comunica o estado sem mudar layout). */
.notes-ear[data-paused="1"] .notes-ear__led,
.notes-ear[data-paused="1"] .notes-ear__dot { animation-duration: 3.4s; }
.notes-ear[data-paused="1"] .notes-ear__wave span { animation-play-state: paused; opacity: .5; }

/* --------------------------------------------------------------- responsivo */
@media (max-width: 640px) {
    .notes-ear { bottom: 78px; --ear-h: 196px; }
    .notes-ear:hover, .notes-ear:focus-within { width: min(340px, calc(100vw - 12px)); }
}

/* -------------------------------------------------------------- keyframes -- */
@keyframes notes-ear-led {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ear-accent) 55%, transparent), 0 0 12px color-mix(in srgb, var(--ear-accent) 82%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ear-accent) 0%, transparent), 0 0 18px color-mix(in srgb, var(--ear-accent) 92%, transparent); }
}
@keyframes notes-ear-wave {
    0%, 100% { transform: scaleY(.22); opacity: .68; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .notes-mini { transition: opacity .2s ease; transform: none; filter: none; }
    .notes-mini.is-in, .notes-mini.is-out { transform: none; filter: none; }
    .notes-mini__led { animation: none; }
    .notes-mini__wave span { animation: none; transform: scaleY(.5); }

    .notes-ear { transition: opacity .2s ease, width .2s ease; transform: none; }
    .notes-ear.is-in, .notes-ear.is-out { transform: none; }
    .notes-ear__panel { transition: opacity .18s ease; transform: none; }
    .notes-ear__led, .notes-ear__dot { animation: none; }
    .notes-ear__wave span { animation: none; transform: scaleY(.5); }
    .notes-ear__btn:hover { transform: none; }
}