/**
 * assets/css/variables.css
 * Design System v2 - High Performance & Premium Aesthetics
 * Sincronizado com os ciclos de performance de 2026.
 *
 * Tema escuro — tipografia estilo Apple: SF Pro (sistema) → Inter (web/Android).
 * Hierarquia: títulos #F5F5F7 (semibold); corpo/auxílio #A1A1A6; desativado #636366.
 */

/* Inter self-host opcional: /assets/css/inter.css | remoto em várias páginas */

:root {
    /* ── Palette: High-End Light ── */
    --bg-body: #f9f9fb /* var(--surface-2) */;
    --bg-primary: #ffffff /* var(--surface) */;
    --bg-secondary: #f9f9fb /* var(--surface-2) */;
    --bg-tertiary: #f0f0f5 /* var(--surface-3) */;
    --bg-hover: rgba(15, 23, 42, 0.05);
    --bg-active: rgba(129, 52, 175, 0.08); /* changed to purple hint */
    --bg-chat: #f9f9fb;
    --bg-input: #ffffff;
    --bg-msg-client: #ffffff;
    --bg-msg-me: #e6f1ed; /* Verde pastel suave */
    --bg-msg-auto: linear-gradient(135deg, rgba(221,42,123,.03), rgba(230,241,237,.8));
    --bg-toast: rgba(15, 23, 42, 0.9);
    --bg-progress: #E2E8F0;
    --bg-progress-bar: linear-gradient(135deg, #dd2a7b, #8134af);
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.75);
    
    /* Claude custom colors */
    --ig-grad: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
    --ig-pink: #dd2a7b;
    --ig-purple: #8134af;
    --ig-blue: #515bd4;
    --ig-orange: #f58529;
    --sent-bg: #f0ebff;
    --sent-border: #d4c6ff;
    
    /* ── Borders & Outlines ── */
    --border-primary: #e8e8f0;
    --border-secondary: #e8e8f0;
    --border-tertiary: rgba(15, 23, 42, 0.04);
    --border-active: #8134af;
    
    /* ── Typography High Fidelity ── */
    --text-primary: #111118;
    --text-secondary: #555566;
    --text-tertiary: #9999aa;
    --text-link: #8134af;
    --text-white: #ffffff;
    --text-on-msg-me: #111118;
    --text-time-me: #9999aa;
    
    /* ── Accents & States ── */
    --accent: #8134af;
    --accent-hover: #dd2a7b;
    --accent-light: rgba(129,52,175,.1);
    --green: #3d9f72;
    --green-hover: #358f66;
    --green-light: rgba(61, 159, 114, 0.1);
    --green-border: rgba(61, 159, 114, 0.32);
    --red: #b85c54;
    --red-hover: #a04540;
    --red-light: rgba(184, 92, 84, 0.1);
    --red-border: rgba(184, 92, 84, 0.36);
    --orange: #c97a32;
    --purple: #8134af;
    
    /* ── Soft Shadows & Depth ── */
    --shadow-card: 0 1px 4px rgba(0,0,0,.06);
    --shadow-card-hover: 0 4px 20px rgba(0,0,0,.10);
    --shadow-modal: 0 12px 48px rgba(0,0,0,.14);
    --shadow-popup: 0 4px 20px rgba(0,0,0,.10);
    --shadow-toast: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    
    /* ── Shapes ── */
    --radius-card: 14px;
    --radius-pill: 9999px;
    --radius-modal: 24px;
    --radius-msg: 18px;
    --radius-btn: 12px;
    
    /* ── Typography & Transition ── */
    /* SF Pro em Apple via -apple-system / BlinkMacSystemFont; Inter como fallback web */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
    --font-weight-title: 600;
    --font-weight-body: 400;
    --line-height-body: 1.5;
    --letter-spacing-title: -0.01em;
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout — contentor padrão (ref. DevFix / Bitwarden ~1400px) */
    --container-max: 1400px;
    --container-pad-x: 32px;
}

/* === Contentor global === */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    box-sizing: border-box;
}

.container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    box-sizing: border-box;
}

.dm-content-max {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    :root {
        --container-pad-x: 20px;
    }
}

:root,
[data-theme="dark"] {
    /* ── E81.uk/hub Dark Mode (Neutro) ── */
    --bg-body:      #202020;
    --bg-primary:   #252528;
    --bg-secondary: #2a2a2d;
    --bg-tertiary:  #303033;
    --bg-hover:     rgba(255,255,255,0.04);
    --bg-active:    rgba(201,160,80,0.08); /* hover de ícones âmbar */
    --bg-chat:      #202020;
    --bg-input:     #252528;
    --bg-msg-client:#262629;
    --bg-msg-me:    #1b3a32; /* Verde sofisticado e suave para dark mode */
    --bg-msg-auto:  linear-gradient(135deg, rgba(201,160,80,.08), rgba(27,58,50,.3));
    --bg-toast:     rgba(37,37,40,0.96);
    --bg-progress:  #2a2a2d;
    --bg-progress-bar: linear-gradient(90deg, #c9a050, #d4ac62);
    --bg-card:      #252528;
    --bg-glass:     rgba(37,37,40,0.88);

    /* ── Bordas ── */
    --border-primary:   rgba(255,255,255,0.08);
    --border-secondary: rgba(255,255,255,0.055);
    --border-tertiary:  rgba(255,255,255,0.03);
    --border-active:    #c9a050;

    /* ── Texto ── */
    --text-primary:   #F5F5F7;
    --text-secondary: #A1A1A6;
    --text-tertiary:  #636366;
    --text-link:      #c9a050;
    /* Timestamps / meta em bolhas: mesmo tom de baixa prioridade */
    --text-time-me:   #636366;

    /* ── Âmbar (mantendo os ícones dourados conforme solicitado) ── */
    --accent:        #c9a050;
    --accent-hover:  #d4ac62;
    --accent-light:  rgba(201,160,80,0.12);
    --accent-border: rgba(201,160,80,0.24);

    /* ── Semânticas — tons desaturados (premium / zona de perigo) ── */
    --green:           #779e8f;
    --green-hover:     #87ae9f;
    --green-light:     rgba(119, 158, 143, 0.12);
    --green-border:    rgba(119, 158, 143, 0.42);
    /* Vermelho de interface: coral empoeirado — evita #ef4444 “alarme” em botões premium */
    --red:             #c99386;
    --red-hover:       #d4a89d;
    --red-light:       rgba(201, 147, 134, 0.12);
    --red-border:      rgba(201, 147, 134, 0.42);
    --orange:          #c4a057;
    --purple:          #9a90b8;

    /* ── Bolhas de mensagem ── */
    --sent-bg:       #2a2a2d;
    --sent-border:   rgba(201,160,80,0.14);

    /* ── Sombras ── */
    --shadow-card:       0 1px 4px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.28);
    --shadow-card-hover: 0 6px 28px rgba(0,0,0,.5);
    --shadow-modal:      0 24px 56px rgba(0,0,0,.65);
    --shadow-popup:      0 4px 20px rgba(0,0,0,.45);
    --shadow-toast:      0 8px 24px rgba(0,0,0,.5);
}

/* Reset Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: var(--font);
    background: var(--bg-body);
    color: var(--text-primary);
    font-weight: var(--font-weight-body);
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background .3s, color .3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: var(--line-height-body);
    letter-spacing: normal;
}

/* Blocos de texto corrido: ritmo 150% */
p, ul, ol, dl, blockquote, figcaption {
    line-height: var(--line-height-body);
}

/* Títulos: off-white, semibold, tracking premium */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-title);
    letter-spacing: var(--letter-spacing-title);
    color: var(--text-primary);
}

/* Descrições / apoio reutilizáveis */
.text-support {
    color: var(--text-secondary);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

.text-muted,
.text-tertiary {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

:disabled,
[disabled],
.is-disabled {
    color: var(--text-tertiary);
}

a {
    color: var(--text-link);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.hidden {
    display: none !important
}

/* Scrollbar global */
::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 100px
}

::-webkit-scrollbar-corner {
    background: transparent
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 100px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Animações globais */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.93)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: scale(.92) translateY(30px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes conflictFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes phToast {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px)
    }

    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0)
    }

    70% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px)
    }
}