/* ==========================================================================
   UNICOZAP — camada de design
   Tailwind entra pelo CDN e resolve o utilitário. Aqui ficam apenas:
   tokens, primitivas de componente e o que utilitário não expressa bem.
   ========================================================================== */

:root {
    /* Declarado para que o navegador não aplique escurecimento automático:
       o tema é controlado pela classe .dark, não pela preferência do sistema. */
    color-scheme: light;

    /* Verde da marca — usado só em ação primária e indicador positivo */
    --uz-brand-50:  #ecfdf5;
    --uz-brand-100: #d1fae5;
    --uz-brand-200: #a7f3d0;
    --uz-brand-300: #6ee7b7;
    --uz-brand-400: #34d399;
    --uz-brand-500: #10b981;
    --uz-brand-600: #059669;
    --uz-brand-700: #047857;
    --uz-brand-800: #065f46;
    --uz-brand-900: #064e3b;

    /* Neutros */
    --uz-surface:        #ffffff;
    --uz-surface-muted:  #f7f8fa;
    --uz-surface-sunken: #f1f3f6;
    --uz-border:         #e5e8ee;
    --uz-border-strong:  #d5dae3;
    --uz-text:           #0f1419;
    --uz-text-muted:     #5b6472;
    --uz-text-subtle:    #8b95a5;

    --uz-danger:  #dc2626;
    --uz-warning: #d97706;
    --uz-info:    #2563eb;

    --uz-radius:    14px;
    --uz-radius-sm: 10px;
    --uz-radius-lg: 20px;

    /* Sombras suaves, nunca pesadas */
    --uz-shadow-xs: 0 1px 2px rgba(15, 20, 25, .04);
    --uz-shadow-sm: 0 1px 3px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);
    --uz-shadow-md: 0 4px 12px rgba(15, 20, 25, .07), 0 2px 4px rgba(15, 20, 25, .04);
    --uz-shadow-lg: 0 12px 32px rgba(15, 20, 25, .10), 0 4px 8px rgba(15, 20, 25, .04);

    --uz-sidebar-w: 264px;
}

.dark {
    color-scheme: dark;
    --uz-surface:        #12161c;
    --uz-surface-muted:  #0d1116;
    --uz-surface-sunken: #0a0d11;
    --uz-border:         #1f2630;
    --uz-border-strong:  #2b333f;
    --uz-text:           #e8ecf1;
    --uz-text-muted:     #98a2b3;
    --uz-text-subtle:    #6b7684;

    --uz-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --uz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --uz-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --uz-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--uz-surface-muted);
    color: var(--uz-text);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
}

/* Alpine: evita o flash de conteúdo não inicializado */
[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Superfícies
   -------------------------------------------------------------------------- */

.uz-card {
    background: var(--uz-surface);
    border: 1px solid var(--uz-border);
    border-radius: var(--uz-radius);
    box-shadow: var(--uz-shadow-xs);
}

.uz-card-hover { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.uz-card-hover:hover {
    box-shadow: var(--uz-shadow-md);
    border-color: var(--uz-border-strong);
}

.uz-divide { border-color: var(--uz-border); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.uz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 .95rem;
    border-radius: var(--uz-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.uz-btn:active:not(:disabled) { transform: translateY(.5px); }
.uz-btn:disabled { opacity: .55; cursor: not-allowed; }
.uz-btn:focus-visible { outline: 2px solid var(--uz-brand-500); outline-offset: 2px; }

.uz-btn-primary {
    background: var(--uz-brand-600);
    color: #fff;
    box-shadow: var(--uz-shadow-xs);
}
.uz-btn-primary:hover:not(:disabled) { background: var(--uz-brand-700); }

.uz-btn-secondary {
    background: var(--uz-surface);
    color: var(--uz-text);
    border-color: var(--uz-border-strong);
    box-shadow: var(--uz-shadow-xs);
}
.uz-btn-secondary:hover:not(:disabled) { background: var(--uz-surface-sunken); }

.uz-btn-ghost { background: transparent; color: var(--uz-text-muted); }
.uz-btn-ghost:hover:not(:disabled) { background: var(--uz-surface-sunken); color: var(--uz-text); }

.uz-btn-danger { background: var(--uz-danger); color: #fff; }
.uz-btn-danger:hover:not(:disabled) { filter: brightness(.93); }

.uz-btn-sm { height: 2.125rem; padding: 0 .7rem; font-size: .8125rem; }
.uz-btn-icon { width: 2.5rem; padding: 0; }
.uz-btn-icon.uz-btn-sm { width: 2.125rem; }

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */

.uz-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--uz-text);
    margin-bottom: .375rem;
}

.uz-input,
.uz-select,
.uz-textarea {
    width: 100%;
    background: var(--uz-surface);
    color: var(--uz-text);
    border: 1px solid var(--uz-border-strong);
    border-radius: var(--uz-radius-sm);
    padding: .625rem .75rem;
    font-size: .875rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.uz-input::placeholder,
.uz-textarea::placeholder { color: var(--uz-text-subtle); }

.uz-input:focus,
.uz-select:focus,
.uz-textarea:focus {
    outline: none;
    border-color: var(--uz-brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uz-brand-500) 18%, transparent);
}

.uz-input-error { border-color: var(--uz-danger) !important; }
.uz-error { font-size: .75rem; color: var(--uz-danger); margin-top: .3rem; }
.uz-hint { font-size: .75rem; color: var(--uz-text-subtle); margin-top: .3rem; }

.uz-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2.25rem;
}

.uz-textarea { min-height: 7rem; resize: vertical; }

/* Interruptor usado em "IA ativa", "usuário disponível" etc. */
.uz-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--uz-border-strong);
    transition: background-color .18s ease;
    cursor: pointer;
    flex: none;
}
.uz-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 1.25rem; height: 1.25rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--uz-shadow-sm);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.uz-switch[aria-checked="true"] { background: var(--uz-brand-600); }
.uz-switch[aria-checked="true"]::after { transform: translateX(1.25rem); }

/* --------------------------------------------------------------------------
   Selos e indicadores
   -------------------------------------------------------------------------- */

.uz-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.uz-badge-success { background: var(--uz-brand-50);  color: var(--uz-brand-700); }
.uz-badge-danger  { background: #fef2f2; color: #b91c1c; }
.uz-badge-warning { background: #fffbeb; color: #b45309; }
.uz-badge-info    { background: #eff6ff; color: #1d4ed8; }
.uz-badge-muted   { background: var(--uz-surface-sunken); color: var(--uz-text-muted); }

.dark .uz-badge-success { background: rgba(16,185,129,.14); color: var(--uz-brand-300); }
.dark .uz-badge-danger  { background: rgba(220,38,38,.15);  color: #fca5a5; }
.dark .uz-badge-warning { background: rgba(217,119,6,.15);  color: #fcd34d; }
.dark .uz-badge-info    { background: rgba(37,99,235,.15);  color: #93c5fd; }

/* Contador de mensagens não lidas.
   Vermelho e pulsante de propósito: é o único indicador do painel que precisa
   interromper o que o atendente está fazendo. O verde da marca fica reservado
   para ações e sinais positivos, e um cliente esperando não é nenhum dos dois. */
.uz-count {
    display: grid;
    place-items: center;
    height: 1.15rem;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--uz-danger);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    animation: uz-count-in .32s cubic-bezier(.2, 1.3, .4, 1);
}

.uz-count-live { box-shadow: 0 0 0 0 var(--uz-danger); animation: uz-count-in .32s cubic-bezier(.2, 1.3, .4, 1), uz-halo 1.8s .32s infinite; }

@keyframes uz-count-in {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

@keyframes uz-halo {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--uz-danger) 60%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .uz-count, .uz-count-live { animation: none; }
}

/* Sino com mensagem esperando: o ícone acompanha a cor do contador. */
.uz-sino-ativo { color: var(--uz-danger); }
.uz-sino-ativo:hover { color: var(--uz-danger); }

.uz-dot { width: .5rem; height: .5rem; border-radius: 999px; flex: none; }
.uz-dot-live { box-shadow: 0 0 0 0 currentColor; animation: uz-pulse 2s infinite; }

@keyframes uz-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */

.uz-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: var(--uz-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--uz-text-muted);
    transition: background-color .14s ease, color .14s ease;
}
.uz-nav-link:hover { background: var(--uz-surface-sunken); color: var(--uz-text); }

.uz-nav-link[aria-current="page"] {
    background: var(--uz-brand-50);
    color: var(--uz-brand-700);
    font-weight: 600;
}
.dark .uz-nav-link[aria-current="page"] {
    background: rgba(16,185,129,.12);
    color: var(--uz-brand-300);
}

.uz-nav-section {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--uz-text-subtle);
    padding: 0 .7rem;
    margin: 1.25rem 0 .4rem;
}

/* --------------------------------------------------------------------------
   Skeleton — todo carregamento tem forma antes de ter conteúdo
   -------------------------------------------------------------------------- */

.uz-skeleton {
    background: linear-gradient(
        90deg,
        var(--uz-surface-sunken) 25%,
        color-mix(in srgb, var(--uz-surface-sunken) 60%, var(--uz-surface)) 37%,
        var(--uz-surface-sunken) 63%
    );
    background-size: 400% 100%;
    animation: uz-shimmer 1.3s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes uz-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --------------------------------------------------------------------------
   Conversa (estilo WhatsApp Web)
   -------------------------------------------------------------------------- */

.uz-thread {
    background-color: var(--uz-surface-muted);
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--uz-text) 5%, transparent) 1px, transparent 0);
    background-size: 22px 22px;
}

.uz-bubble {
    max-width: min(72ch, 78%);
    padding: .55rem .75rem .4rem;
    border-radius: 14px;
    font-size: .875rem;
    line-height: 1.5;
    box-shadow: var(--uz-shadow-xs);
    word-break: break-word;
}

.uz-bubble-in {
    background: var(--uz-surface);
    border: 1px solid var(--uz-border);
    border-top-left-radius: 4px;
}

.uz-bubble-out {
    background: var(--uz-brand-600);
    color: #fff;
    border-top-right-radius: 4px;
    margin-left: auto;
}

.uz-bubble-ai {
    background: var(--uz-surface);
    border: 1px solid var(--uz-brand-200);
    border-top-right-radius: 4px;
    margin-left: auto;
}
.dark .uz-bubble-ai { border-color: rgba(16,185,129,.3); }

.uz-bubble-system {
    background: transparent;
    border: 1px dashed var(--uz-border-strong);
    color: var(--uz-text-muted);
    font-size: .75rem;
    margin: 0 auto;
    text-align: center;
}

.uz-bubble-time { font-size: .625rem; opacity: .7; margin-top: .15rem; text-align: right; }

/* Player de áudio nativo dentro do balão.
   O controle do navegador é opaco a CSS por dentro, então o que dá para fazer é
   ajustar largura e altura e clarear o dele no balão escuro do atendente. */
/* O atributo `hidden` do HTML precisa vencer as utilitárias de display:
   `.flex { display: flex }` tem mais especificidade que o `[hidden]` do
   navegador, e um elemento marcado como escondido aparecia mesmo assim. */
[hidden] { display: none !important; }

.uz-audio {
    display: block;
    width: 15rem;
    max-width: 100%;
    height: 2.25rem;
}

.uz-bubble-out .uz-audio { filter: invert(1) hue-rotate(180deg) brightness(1.6); }
.dark .uz-bubble-in .uz-audio { filter: invert(.92) hue-rotate(180deg); }

/* Anexo escolhido, ainda não enviado. */
.uz-anexo {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .6rem;
    border-radius: var(--uz-radius-sm);
    background: var(--uz-surface-sunken);
    font-size: .75rem;
    color: var(--uz-text-muted);
}

/* --------------------------------------------------------------------------
   Rolagem discreta
   -------------------------------------------------------------------------- */

.uz-scroll { scrollbar-width: thin; scrollbar-color: var(--uz-border-strong) transparent; }
.uz-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.uz-scroll::-webkit-scrollbar-track { background: transparent; }
.uz-scroll::-webkit-scrollbar-thumb {
    background: var(--uz-border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.uz-scroll::-webkit-scrollbar-thumb:hover { background: var(--uz-text-subtle); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Transições de tela
   -------------------------------------------------------------------------- */

.uz-fade-in { animation: uz-fade-in .22s cubic-bezier(.16, 1, .3, 1); }

@keyframes uz-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.uz-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: var(--uz-brand-500);
    z-index: 90;
    transition: width .2s ease, opacity .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Tabelas que viram cartões no celular
   -------------------------------------------------------------------------- */

.uz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.uz-table thead th {
    text-align: left;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--uz-text-subtle);
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--uz-border);
    background: var(--uz-surface-muted);
    white-space: nowrap;
}
.uz-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--uz-border); vertical-align: middle; }
.uz-table tbody tr:last-child td { border-bottom: 0; }
.uz-table tbody tr { transition: background-color .12s ease; }
.uz-table tbody tr:hover { background: var(--uz-surface-muted); }

@media (max-width: 767px) {
    .uz-table-responsive thead { display: none; }
    .uz-table-responsive tbody tr {
        display: block;
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--uz-border);
    }
    .uz-table-responsive tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .3rem 0;
        border: 0;
    }
    .uz-table-responsive tbody td::before {
        content: attr(data-label);
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--uz-text-subtle);
        flex: none;
    }
    .uz-table-responsive tbody td[data-label=""]::before { content: none; }
}