/* ===========================================================
   PROton widget — botão flutuante + drawer de chat
   =========================================================== */

:root {
    --proton-brand: #6c2bd9;
    --proton-brand-light: #9333ea;
    --proton-bg: #161616;
    --proton-bg-soft: #1f1f1f;
    --proton-bg-deeper: #0a0a0a;
    --proton-text: #fafafa;
    --proton-text-dim: rgba(255, 255, 255, 0.65);
    --proton-border: rgba(255, 255, 255, 0.08);
    --proton-header-min-h: 6.25rem;
    --proton-drawer-width: min(460px, 94vw);
}

/* ============== FAB (Floating Action Button) ============== */

.proton-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 3.5rem;
    height: 3.5rem;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--proton-brand) 0%, var(--proton-brand-light) 100%);
    color: #fff;
    font-size: 1.4rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(108, 43, 217, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease,
        opacity 0.2s ease,
        bottom 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.proton-fab:hover {
    transform: scale(1.06);
    box-shadow:
        0 12px 32px rgba(108, 43, 217, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.proton-fab:active {
    transform: scale(0.96);
}

.proton-fab[hidden] {
    display: none !important;
}

/* radio.php: quando a barra global do player (.radio-global-player) está
   visível no rodapé (full-width, fixa em baixo), sobe o FAB suavemente para
   não ficar cortado/sobreposto. Vale em todas as larguras. */
body:has(.radio-global-player.is-visible) .proton-fab {
    bottom: 6.5rem;
}

/* Pulse sutil no FAB para chamar atenção na primeira carga.
   Pausa ao hover ou quando o widget já foi aberto pelo menos uma vez. */
.proton-fab::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 2px solid var(--proton-brand);
    opacity: 0;
    animation: proton-fab-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

.proton-fab:hover::before,
.proton-fab.is-touched::before {
    animation: none;
    opacity: 0;
}

@keyframes proton-fab-pulse {
    0%   { opacity: 0.55; transform: scale(1);    }
    70%  { opacity: 0;    transform: scale(1.35); }
    100% { opacity: 0;    transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    .proton-fab::before {
        animation: none;
    }
}

/* Tooltip do FAB no hover (só desktop). */
.proton-fab__tooltip {
    position: absolute;
    right: calc(100% + 0.55rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--proton-bg);
    color: var(--proton-text);
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.proton-fab:hover .proton-fab__tooltip {
    opacity: 1;
}

@media (max-width: 720px) {
    .proton-fab__tooltip { display: none; }
    .proton-fab { right: 1rem; bottom: 1rem; }

    /* Hero visível: FAB no topo (abaixo do header), não sobre os filtros de busca. */
    body.rp-in-hero-view .proton-fab {
        top: calc(env(safe-area-inset-top, 0px) + 68px);
        bottom: auto;
        right: 1rem;
    }

    /* Home: mini-player (.rp-music-player) fica docked em baixo — sobe o FAB
       para não cobrir favorito/play quando o player está visível. */
    body:has(.rp-music-player):not(.rp-in-hero-view) .proton-fab,
    body:has(.rp-music-player.playing) .proton-fab,
    body:has(.rp-music-player.loading) .proton-fab,
    body:has(.rp-music-player.has-error) .proton-fab,
    body:has(.rp-music-player.needs-user-play) .proton-fab {
        bottom: calc(12px + 6rem + 0.75rem);
    }

    body:has(.rp-music-player.has-coverart.playing) .proton-fab,
    body:has(.rp-music-player.has-coverart.loading) .proton-fab {
        bottom: calc(12px + 6rem + 0.75rem);
    }
}

/* ============== Drawer ============== */

.proton-drawer {
    position: fixed;
    inset: 0;
    /* Acima da barra global do player (.radio-global-player = 9998) para o
       chat aberto não ser coberto por ela. */
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.32s;
}

.proton-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.proton-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.proton-drawer.is-open .proton-drawer__backdrop {
    opacity: 1;
}

.proton-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--proton-drawer-width);
    background: linear-gradient(180deg, var(--proton-bg) 0%, var(--proton-bg-deeper) 100%);
    color: var(--proton-text);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.proton-drawer.is-open .proton-drawer__panel {
    transform: translateX(0);
}

@media (min-width: 1100px) {
    :root { --proton-drawer-width: clamp(480px, 40vw, 520px); }
}

/* ============== Header do drawer ============== */

.proton-drawer__header {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.9rem;
    border-bottom: none;
    background: #14082a;
    min-height: var(--proton-header-min-h);
}

/* Ondas Vanta.js — canvas WebGL atrás do conteúdo */
.proton-drawer__header-waves {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Fallback CSS se o Vanta WebGL falhar */
.proton-drawer__header-waves.proton-header-waves--css {
    background:
        radial-gradient(ellipse 130% 90% at 15% 130%, rgba(108, 43, 217, 0.55), transparent 58%),
        radial-gradient(ellipse 100% 75% at 88% 115%, rgba(79, 139, 255, 0.38), transparent 52%),
        linear-gradient(160deg, #14082a 0%, #1f0f45 42%, #0d0520 100%);
    overflow: hidden;
}

.proton-drawer__header-waves.proton-header-waves--css::before,
.proton-drawer__header-waves.proton-header-waves--css::after {
    content: '';
    position: absolute;
    left: -25%;
    right: -25%;
    height: 48%;
    border-radius: 45% 45% 0 0;
    opacity: 0.62;
    pointer-events: none;
}

.proton-drawer__header-waves.proton-header-waves--css::before {
    bottom: -5%;
    background: linear-gradient(180deg, rgba(147, 51, 234, 0.5), rgba(79, 139, 255, 0.12));
    animation: proton-css-wave-a 6s ease-in-out infinite;
}

.proton-drawer__header-waves.proton-header-waves--css::after {
    bottom: -15%;
    background: linear-gradient(180deg, rgba(79, 139, 255, 0.42), rgba(20, 8, 42, 0));
    animation: proton-css-wave-b 8s ease-in-out infinite;
}

@keyframes proton-css-wave-a {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(4%) scaleY(1.08); }
}

@keyframes proton-css-wave-b {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(-5%) scaleY(1.12); }
}

/* Transição suave entre header animado e corpo do chat (sem linha divisória) */
.proton-drawer__header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2rem;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(22, 22, 22, 0) 0%,
        rgba(22, 22, 22, 0.45) 50%,
        var(--proton-bg) 100%
    );
}

.proton-drawer__header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.proton-drawer__header-content .proton-drawer__title,
.proton-drawer__header-content .proton-drawer__subtitle {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.proton-drawer__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--proton-brand) 0%, var(--proton-brand-light) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(108, 43, 217, 0.35);
}

.proton-drawer__head-text {
    flex: 1;
    min-width: 0;
}

.proton-drawer__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--proton-text);
    line-height: 1.2;
}

.proton-drawer__subtitle {
    margin: 0.12rem 0 0;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--proton-text-dim);
    line-height: 1.2;
}

.proton-drawer__status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #22c55e;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.proton-drawer__status-dot--offline {
    background: #94a3b8;
}

.proton-drawer.is-chat-offline .proton-form__textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.proton-drawer.is-chat-offline .proton-form__send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.proton-drawer.is-chat-offline .proton-suggestion:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.proton-drawer__close {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--proton-text-dim);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.proton-drawer__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--proton-text);
}

/* ============== Corpo / lista de mensagens ============== */

.proton-drawer__body {
    flex: 1;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -0.65rem;
    padding: 1.35rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Fade-out das mensagens ao rolar para baixo do header */
.proton-drawer__body::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 2rem;
    margin: -1.35rem -1rem 0;
    width: calc(100% + 2rem);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    background: linear-gradient(
        to bottom,
        var(--proton-bg) 0%,
        rgba(22, 22, 22, 0.94) 38%,
        rgba(22, 22, 22, 0.55) 68%,
        rgba(22, 22, 22, 0) 100%
    );
}

.proton-drawer__body.is-scrolled::before {
    opacity: 1;
}

.proton-drawer__body::-webkit-scrollbar {
    width: 4px;
}

.proton-drawer__body::-webkit-scrollbar-track {
    background: transparent;
}

.proton-drawer__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.proton-drawer__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.proton-drawer__body::-webkit-scrollbar-corner {
    background: transparent;
}

.proton-msg {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    animation: proton-msg-in 0.24s ease;
}

.proton-msg--bot {
    background: var(--proton-bg-soft);
    border: 1px solid var(--proton-border);
    border-bottom-left-radius: 0.3rem;
    align-self: flex-start;
}

.proton-msg--streaming::after {
    content: '\25CA';
    display: inline-block;
    margin-left: 0.15rem;
    opacity: 0.55;
    animation: proton-stream-cursor 0.9s step-end infinite;
}

@keyframes proton-stream-cursor {
    50% { opacity: 0; }
}

.proton-msg--user {
    background: linear-gradient(135deg, var(--proton-brand) 0%, var(--proton-brand-light) 100%);
    border-bottom-right-radius: 0.3rem;
    align-self: flex-end;
    color: #fff;
    font-weight: 500;
}

.proton-msg--error {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    align-self: stretch;
    max-width: 100%;
}

.proton-msg--system {
    align-self: center;
    background: transparent;
    color: var(--proton-text-dim);
    font-size: 0.7rem;
    padding: 0.3rem 0;
}

@keyframes proton-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Toast de countdown antes de abrir um link em nova aba.
   Fica ancorado ao topo do painel do drawer (logo abaixo do header),
   sobrepondo as mensagens. Tem barra de progresso visual que enche em
   sync com o countdown. */
.proton-toast {
    position: absolute;
    top: calc(var(--proton-header-min-h) + env(safe-area-inset-top, 0px));
    left: 0.75rem;
    right: 0.75rem;
    z-index: 20;
    padding: 0.75rem 0.9rem 0;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--proton-brand) 0%, var(--proton-brand-light) 100%);
    color: #fff;
    box-shadow: 0 12px 32px rgba(108, 43, 217, 0.4);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.proton-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.proton-toast__text {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.55rem;
}

.proton-toast__actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    padding-bottom: 0.6rem;
}

.proton-toast__btn {
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    transition: background 0.15s ease, transform 0.12s ease;
}

.proton-toast__btn--cancel {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.proton-toast__btn--cancel:hover {
    background: rgba(255, 255, 255, 0.26);
}

.proton-toast__btn--primary {
    background: #fff;
    color: var(--proton-brand);
}
.proton-toast__btn--primary:hover {
    background: #f3e8ff;
}

.proton-toast__btn:active {
    transform: scale(0.96);
}

.proton-toast__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.proton-toast__bar-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    transform-origin: left center;
    animation: proton-toast-shrink linear forwards;
}

@keyframes proton-toast-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .proton-toast {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .proton-toast__bar-fill {
        animation: none;
        transform: scaleX(0.5);
    }
}

/* Link clicável quando o popup foi bloqueado (fallback de openExternalLink). */
.proton-msg__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: linear-gradient(135deg, var(--proton-brand) 0%, var(--proton-brand-light) 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 0.6rem;
    transition: transform 0.12s ease, filter 0.15s ease;
}

.proton-msg__link:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.proton-msg__link i {
    font-size: 0.72rem;
}

/* "Digitando…" / typing indicator. */
.proton-typing {
    align-self: flex-start;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.75rem 0.95rem;
    background: var(--proton-bg-soft);
    border: 1px solid var(--proton-border);
    border-radius: 1rem;
    border-bottom-left-radius: 0.3rem;
    max-width: min(100%, 18rem);
}

.proton-typing__row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.proton-typing__dot {
    width: 0.4rem;
    height: 0.4rem;
    background: var(--proton-text-dim);
    border-radius: 999px;
    animation: proton-typing 1.2s ease-in-out infinite;
}

.proton-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.proton-typing__dot:nth-child(3) { animation-delay: 0.3s; }

/* Com mensagem de apoio/status: esconde os 3 pontinhos (fallback só sem texto). */
.proton-typing--has-status .proton-typing__dot {
    display: none;
}

.proton-typing--has-status:not(.proton-typing--has-thinking) .proton-typing__row {
    display: none;
}

.proton-typing__status {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--proton-text-dim);
}

.proton-typing__status-text {
    display: inline-block;
    position: relative;
    color: rgba(255, 255, 255, 0.42);
}

.proton-typing__status-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(3px);
    animation: proton-status-char-in 0.34s ease forwards;
}

@keyframes proton-status-char-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Faixa de luz dentro dos glifos (camada duplicada + mask deslizante). */
.proton-typing__status-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.98);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        #000 50%,
        transparent 70%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        #000 50%,
        transparent 70%,
        transparent 100%
    );
    -webkit-mask-size: 36% 100%;
    mask-size: 36% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: proton-status-text-shine 2.5s linear infinite;
    pointer-events: none;
}

.proton-typing__status[hidden] {
    display: none !important;
}

.proton-typing__status i {
    opacity: 0.75;
    margin-right: 0.15rem;
    color: rgba(255, 255, 255, 0.42);
}

@keyframes proton-status-text-shine {
    0% {
        -webkit-mask-position: -38% 0;
        mask-position: -38% 0;
    }
    100% {
        -webkit-mask-position: 138% 0;
        mask-position: 138% 0;
    }
}

@keyframes proton-typing {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1;    transform: translateY(-3px); }
}

.proton-typing__thinking {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--proton-text-dim);
    opacity: 0.7;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: center;
    margin-left: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
    .proton-typing__status-text::after {
        animation: none;
        content: none;
    }

    .proton-typing__status-text {
        color: var(--proton-text-dim);
    }

    .proton-typing__status-char {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Sugestões iniciais (quando o chat está vazio). */
.proton-suggestions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 1rem;
}

.proton-suggestions__title {
    font-size: 0.7rem;
    color: var(--proton-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.proton-suggestion {
    padding: 0.65rem 0.85rem;
    background: rgba(108, 43, 217, 0.08);
    border: 1px solid rgba(108, 43, 217, 0.2);
    color: var(--proton-text);
    border-radius: 0.85rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.proton-suggestion:hover {
    background: rgba(108, 43, 217, 0.16);
    border-color: rgba(108, 43, 217, 0.4);
}

.proton-suggestion:active {
    transform: scale(0.985);
}

/* ============== Footer / input ============== */

.proton-drawer__footer {
    flex-shrink: 0;
    position: relative;
    padding: 1.15rem 1.4rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: #100c18;
}

.proton-drawer__footer::before {
    content: '';
    position: absolute;
    inset: -2.5rem 0 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(108, 43, 217, 0.22), rgba(79, 139, 255, 0.08) 48%, transparent 76%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 2.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.proton-drawer__footer:has(.proton-form.is-typing-active)::before {
    opacity: 1;
    transition-duration: 0.16s;
}

.proton-form {
    display: flex;
    position: relative;
    z-index: 1;
    gap: 0.75rem;
    align-items: flex-end;
}

.proton-form__textarea {
    flex: 1;
    min-height: 3.2rem;
    max-height: 7.2rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--proton-border);
    border-radius: 0.85rem;
    background-color: var(--proton-bg-deeper);
    color: var(--proton-text);
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    resize: none;
    /* Padrão: sem barra. O JS troca para 'auto' quando passa de 5 linhas.
       Combinado com scrollbar custom fina abaixo. */
    overflow-y: hidden;
    transition:
        background-color 2.8s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 2.8s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 2.8s cubic-bezier(0.4, 0, 0.2, 1);
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Scrollbar custom fina cinza (WebKit) — só visível quando overflow real. */
.proton-form__textarea::-webkit-scrollbar {
    width: 6px;
}
.proton-form__textarea::-webkit-scrollbar-track {
    background: transparent;
}
.proton-form__textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.proton-form__textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.proton-form__textarea:focus {
    outline: none;
    border-color: var(--proton-brand);
}

.proton-form.is-typing-active .proton-form__textarea:not(:placeholder-shown) {
    background-color: #261d32;
    border-color: rgba(147, 51, 234, 0.45);
    box-shadow: inset 0 -2px 0 rgba(147, 51, 234, 0.18);
    transition-duration: 0.18s;
}

.proton-form__textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.proton-form__send {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.proton-form__send-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.proton-form__send-icon--send {
    transform: scale(0.82) rotate(-12deg);
    opacity: 1;
}

.proton-form:has(.proton-form__textarea:not(:placeholder-shown)) .proton-form__send:not(.is-loading) {
    background: linear-gradient(135deg, var(--proton-brand) 0%, var(--proton-brand-light) 100%);
    color: #fff;
    box-shadow: 0 0.35rem 1.1rem rgba(108, 43, 217, 0.38);
    transform: scale(1.04);
}

.proton-form:has(.proton-form__textarea:not(:placeholder-shown)) .proton-form__send:not(.is-loading) .proton-form__send-icon--send {
    transform: scale(1) rotate(0deg) translateY(-1px);
}

.proton-form__send-icon--stop {
    transform: scale(0.4) rotate(-90deg);
    opacity: 0;
    font-size: 0.82em;
}

.proton-form__send.is-loading {
    background: linear-gradient(135deg, #7c2d12 0%, #dc2626 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(220, 38, 38, 0.35);
}

.proton-form__send.is-loading .proton-form__send-icon--send {
    transform: scale(0.35) rotate(45deg);
    opacity: 0;
}

.proton-form__send.is-loading .proton-form__send-icon--stop {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.proton-form:has(.proton-form__textarea:not(:placeholder-shown)) .proton-form__send:hover:not(:disabled),
.proton-form__send.is-loading:hover {
    transform: scale(1.06);
}

.proton-form__send:active:not(:disabled) {
    transform: scale(0.94);
}

.proton-form__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .proton-drawer__footer,
    .proton-form__textarea,
    .proton-form__send,
    .proton-form__send-icon {
        transition: none;
    }
}

body.proton-drawer-open {
    overflow: hidden;
}

/* Music-player flutuante (.rp-music-player) — desloca para a esquerda
   junto com a abertura do drawer, evitando que tape a conversa. Usa
   transform translateX (acelerado pela GPU) com a mesma curva de easing
   e duração do drawer, então os dois movimentos parecem coordenados.

   Em viewports muito estreitos (mobile), o drawer ocupa 92vw e o
   player simplesmente sai da tela para a esquerda — não competem.
   Em desktop largo o drawer pode chegar a 460px, então o offset é maior. */
.rp-music-player {
    transition:
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

body.proton-drawer-open .rp-music-player {
    transform: translateX(calc(-1 * (var(--proton-drawer-width) + 8px))) translateY(0);
}

body.proton-drawer-open.rp-in-hero-view .rp-music-player:not(.playing):not(.loading):not(.has-error):not(.needs-user-play) {
    transform: translateX(calc(-1 * (var(--proton-drawer-width) + 8px))) translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
    .rp-music-player {
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .proton-drawer__backdrop,
    .proton-drawer__panel {
        transition: none;
    }
    .proton-msg, .proton-typing__dot {
        animation: none;
    }
    .proton-drawer__header {
        background: linear-gradient(135deg, rgba(108, 43, 217, 0.22) 0%, rgba(20, 8, 42, 0.95) 100%);
    }
    .proton-drawer__header-waves {
        display: none;
    }
}