/* jitsi-call.css — Oráculo Design System · v1.2 */

/* ================================================================
   Wrap principal
================================================================ */
.jc-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 16px;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary, #F2EDE7);
}

.ca-service-tab-body .jc-wrap {
    padding-top: 0;
}

/* ================================================================
   Header
================================================================ */
.jc-header {
    text-align: center;
    margin-bottom: 36px;
}

.jc-title {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-text-primary, #F2EDE7);
    margin: 0 0 8px;
}

.jc-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #A09889);
    margin: 0;
    letter-spacing: 0.02em;
}

/* ================================================================
   Empty state
================================================================ */
.jc-empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--color-surface, #171513);
    border: 1px solid var(--color-border, #2A2622);
    border-radius: var(--radius-lg, 12px);
}

.jc-empty__icon  { font-size: 1.75rem; color: var(--color-cta, #C9A96E); margin-bottom: 16px; }
.jc-empty__text  { color: var(--color-text-primary, #F2EDE7); font-size: 1rem; margin: 0 0 6px; }
.jc-empty__hint  { color: var(--color-text-muted, #5C5549); font-size: 0.8125rem; margin: 0; }

/* ================================================================
   Seleção de compras
================================================================ */
.jc-select-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #A09889);
    margin: 0 0 14px;
}

.jc-cards { display: flex; flex-direction: column; gap: 10px; }

/* ================================================================
   Card de compra
================================================================ */
.jc-card--purchase {
    background: var(--color-surface, #171513);
    border: 1px solid var(--color-border, #2A2622);
    border-radius: var(--radius-base, 8px);
    padding: 18px 20px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.jc-card--purchase:hover {
    border-color: var(--color-cta, #C9A96E);
    box-shadow: 0 0 20px rgba(201,169,110,.15);
}
.jc-card--started { border-color: var(--color-success, #7BAE7F); }
.jc-card__top {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 4px;
}
.jc-card__name   { font-size: .9375rem; font-weight: 500; color: var(--color-text-primary, #F2EDE7); }
.jc-card__badge  {
    background: rgba(201,169,110,.10); color: var(--color-cta, #C9A96E);
    border: 1px solid rgba(201,169,110,.28); border-radius: 9999px;
    font-size: .75rem; font-weight: 500; padding: 2px 10px;
}
.jc-card__date   { font-size: .8125rem; color: var(--color-text-muted, #5C5549); margin-bottom: 14px; }
.jc-card__status--active {
    display: inline-block; font-size: .75rem;
    color: var(--color-success, #7BAE7F);
    background: rgba(123,174,127,.10); border: 1px solid rgba(123,174,127,.28);
    border-radius: 9999px; padding: 2px 10px; margin-bottom: 12px;
}

/* ================================================================
   Painel da chamada — estado padrão (sem Jitsi aberto)
================================================================ */
.jc-call-panel {
    background: var(--color-surface, #171513);
    border: 1px solid var(--color-border, #2A2622);
    border-radius: var(--radius-lg, 12px);
    padding: 24px;
}

.jc-session-info {
    display: flex; align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border, #2A2622);
    margin-bottom: 22px;
}
.jc-session-name {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.25rem; font-weight: 500;
    color: var(--color-text-primary, #F2EDE7);
}
.jc-session-mins {
    font-size: .8125rem; color: var(--color-text-secondary, #A09889);
    background: var(--color-surface-elevated, #1D1B18);
    border: 1px solid var(--color-border-strong, #3D3830);
    border-radius: 9999px; padding: 3px 12px;
}

/* ================================================================
   Timer — compacto (visível acima do Jitsi quando chamada ativa)
================================================================ */
.jc-timer-wrap {
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #2A2622);
    margin-bottom: 18px;
}

/* Quando Jitsi está aberto: timer fica numa barra topo compacta */
.jc-call-panel--jitsi-open .jc-timer-wrap {
    display: flex !important;
    align-items: center;
    gap: 14px;
    justify-content: center;
    padding: 10px 16px;
    margin-bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--color-border, #2A2622);
    order: 10; /* move para depois do Jitsi no flex */
}

.jc-timer__label {
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #5C5549);
    margin-bottom: 8px;
}

.jc-call-panel--jitsi-open .jc-timer__label {
    margin-bottom: 0;
    font-size: .625rem;
}

.jc-timer {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 3.25rem; font-weight: 300;
    color: var(--color-cta, #C9A96E);
    letter-spacing: .06em; line-height: 1;
    margin-bottom: 14px;
    transition: color .4s ease;
}

.jc-call-panel--jitsi-open .jc-timer {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.jc-timer--warning {
    color: var(--color-warning, #D4A24C);
    animation: jc-pulse 1.5s ease infinite;
}

@keyframes jc-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

.jc-timer__bar-wrap {
    height: 3px; background: var(--color-border, #2A2622);
    border-radius: 9999px; overflow: hidden;
    max-width: 300px; margin: 0 auto;
}

.jc-call-panel--jitsi-open .jc-timer__bar-wrap {
    width: 120px; max-width: 120px; margin: 0;
}

.jc-timer__bar {
    height: 100%; background: var(--color-cta, #C9A96E);
    border-radius: 9999px;
    transition: width 1s linear, background .4s ease;
}
.jc-timer__bar--low { background: var(--color-danger, #C45B5B); }

/* ================================================================
   Aguardando
================================================================ */
.jc-waiting {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border, #2A2622);
    margin-bottom: 22px;
    color: var(--color-text-secondary, #A09889);
    font-size: .875rem;
}
.jc-waiting__pulse {
    width: 8px; height: 8px;
    background: var(--color-cta, #C9A96E);
    border-radius: 50%; flex-shrink: 0;
    animation: jc-pulse 1.5s ease infinite;
}

/* ================================================================
   Botões de chamada
================================================================ */
.jc-call-buttons {
    display: flex; gap: 10px;
    flex-wrap: wrap; margin-bottom: 18px;
}

/* ================================================================
   Confirmar / Encerrar
================================================================ */
.jc-confirm-wrap { text-align: center; }
.jc-confirm-hint {
    font-size: .8125rem; color: var(--color-text-muted, #5C5549);
    margin: 8px 0 0; line-height: 1.5;
}
.jc-end-wrap { text-align: center; }

/* ================================================================
   Controles atendente
================================================================ */
.jc-attendant-controls {
    display: flex; flex-direction: column; gap: 14px;
}

/* ================================================================
   Jitsi — MODO TELA CHEIA
   Quando o usuário clica em Voz/Vídeo, o panel ganha a classe
   .jc-call-panel--jitsi-open e o iframe expande para preencher
   o viewport menos a barra de timer no rodapé.
================================================================ */

/* Panel vira flex-column para empilhar: header | jitsi | timer */
.jc-call-panel--jitsi-open {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Ocupa toda a altura disponível na viewport */
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: 0;
    border: none;
    background: #000;
    overflow: hidden;
}

/* Barra de topo com nome + minutos — compacta no modo tela cheia */
.jc-call-panel--jitsi-open .jc-session-info {
    padding: 10px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(11,10,9,.85);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

/* Esconde o que não é necessário no modo tela cheia */
.jc-call-panel--jitsi-open .jc-waiting,
.jc-call-panel--jitsi-open .jc-call-buttons,
.jc-call-panel--jitsi-open .jc-confirm-wrap,
.jc-call-panel--jitsi-open .jc-attendant-controls > .jc-confirm-wrap {
    display: none !important;
}

/* Botão encerrar fica visível mas compacto na barra inferior */
.jc-call-panel--jitsi-open .jc-end-wrap,
.jc-call-panel--jitsi-open .jc-attendant-controls > .jc-end-wrap {
    display: flex !important;
    justify-content: flex-end;
    padding: 0 16px;
    margin: 0;
}

/* Barra de rodapé: timer + botão encerrar */
.jc-call-panel--jitsi-open .jc-attendant-controls {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(11,10,9,.85);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    gap: 0;
}

/* Container do Jitsi cresce para preencher todo o espaço entre topo e rodapé */
.jc-jitsi-wrap {
    flex: 1;
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    min-height: 0; /* necessário para flex funcionar corretamente */
}

#jc-jitsi-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #000;
}

/* O iframe gerado pelo Jitsi também precisa ser 100% */
#jc-jitsi-container iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Wrap Jitsi no modo open é flex-item que cresce */
.jc-call-panel--jitsi-open .jc-jitsi-wrap {
    display: flex !important;
    flex-direction: column;
}

/* ================================================================
   Encerrado
================================================================ */
.jc-expired { text-align: center; padding: 44px 24px; }
.jc-expired__icon { font-size: 1.75rem; color: var(--color-text-muted, #5C5549); margin-bottom: 14px; }
.jc-expired h3 {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.375rem; font-weight: 400;
    color: var(--color-text-primary, #F2EDE7); margin: 0 0 8px;
}
.jc-expired p {
    font-size: .875rem; color: var(--color-text-secondary, #A09889);
    margin: 0; line-height: 1.6;
}

/* ================================================================
   Botões
================================================================ */
.jc-btn {
    display: inline-flex; align-items: center;
    justify-content: center; gap: 7px;
    padding: 10px 20px;
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-size: .875rem; font-weight: 500;
    letter-spacing: .02em; cursor: pointer;
    transition: all .25s ease;
    border: none; line-height: 1; text-decoration: none;
}
.jc-btn:disabled { opacity: .45; cursor: not-allowed; }

.jc-btn--select {
    background: transparent; color: var(--color-cta, #C9A96E);
    border: 1px solid rgba(201,169,110,.35);
    width: 100%; padding: 9px;
}
.jc-btn--select:hover { background: rgba(201,169,110,.07); border-color: var(--color-cta, #C9A96E); }

.jc-btn--voice {
    background: var(--color-surface-elevated, #1D1B18);
    color: var(--color-text-primary, #F2EDE7);
    border: 1px solid var(--color-border-strong, #3D3830);
    flex: 1; min-width: 140px;
}
.jc-btn--voice:hover { background: var(--color-border-strong, #3D3830); border-color: var(--color-cta, #C9A96E); color: var(--color-cta, #C9A96E); }

.jc-btn--video {
    background: var(--color-cta, #C9A96E);
    color: var(--color-text-inverse, #0B0A09);
    flex: 1; min-width: 140px;
}
.jc-btn--video:hover { background: var(--color-cta-hover, #B8944F); box-shadow: 0 4px 24px rgba(201,169,110,.25); }

.jc-btn--confirm {
    background: var(--color-cta, #C9A96E);
    color: var(--color-text-inverse, #0B0A09);
    padding: 13px 32px; font-size: .9375rem;
    font-weight: 600; letter-spacing: .04em;
}
.jc-btn--confirm:hover:not(:disabled) { background: var(--color-cta-hover, #B8944F); box-shadow: 0 4px 24px rgba(201,169,110,.25); }

.jc-btn--danger {
    background: transparent; color: var(--color-danger, #C45B5B);
    border: 1px solid rgba(196,91,91,.38); padding: 9px 22px;
}
.jc-btn--danger:hover { background: rgba(196,91,91,.07); border-color: var(--color-danger, #C45B5B); }

.jc-btn--outline {
    background: transparent; color: var(--color-cta, #C9A96E);
    border: 1px solid rgba(201,169,110,.38);
    margin-top: 14px; padding: 9px 22px;
}
.jc-btn--outline:hover { background: rgba(201,169,110,.07); border-color: var(--color-cta, #C9A96E); }

.jc-btn__icon { font-size: .9375rem; line-height: 1; }

/* ================================================================
   Responsivo
================================================================ */
@media (max-width: 768px) {
    .jc-title  { font-size: 1.625rem; }
    .jc-timer  { font-size: 2.75rem; }
}

@media (max-width: 480px) {
    .jc-title        { font-size: 1.375rem; }
    .jc-timer        { font-size: 2.25rem; }
    .jc-call-buttons { flex-direction: column; }
    .jc-btn--voice,
    .jc-btn--video   { min-width: unset; }
    .jc-call-panel   { padding: 16px 12px; }

    /* No mobile, tela cheia com barra inferior um pouco maior para toque */
    .jc-call-panel--jitsi-open .jc-session-info { padding: 8px 12px; }
    .jc-call-panel--jitsi-open .jc-attendant-controls { padding: 10px 12px; }
    .jc-call-panel--jitsi-open .jc-timer { font-size: 1.25rem; }
}