/* ============================================
   TalentInhA - Contalents AI Assistant
   Premium Dark UI — Purple Aurora Theme
   ============================================ */

:root {
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;

    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --gradient-primary: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%);
    --gradient-accent: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%);
    --gradient-dark: linear-gradient(160deg, #0c0a1a 0%, #0f0825 40%, #0a0614 100%);

    --glass-bg: rgba(15, 10, 40, 0.55);
    --glass-bg-light: rgba(25, 18, 60, 0.45);
    --glass-border: rgba(168, 85, 247, 0.12);
    --glass-border-hover: rgba(168, 85, 247, 0.25);
    --glass-blur: 20px;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.08);
    --color-success-border: rgba(16, 185, 129, 0.2);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.08);
    --color-warning-border: rgba(245, 158, 11, 0.2);
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.08);
    --color-error-border: rgba(248, 113, 113, 0.2);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.08);
    --color-info-border: rgba(59, 130, 246, 0.2);

    /* Spacing Scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;

    --shadow-glow: 0 0 60px -10px rgba(147, 51, 234, 0.35);
    --shadow-glow-sm: 0 0 30px -8px rgba(147, 51, 234, 0.25);
    --shadow-glow-btn: 0 4px 30px -4px rgba(147, 51, 234, 0.5);

    --header-height: 54px;
    --footer-height: 90px;
    --sidebar-width: 245px;
    --sidebar-collapsed-width: 60px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--purple-500);
    outline-offset: 2px;
}

button:focus-visible, a:focus-visible {
    outline: 2px solid var(--purple-500);
    outline-offset: 2px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gradient-dark);
    color: var(--slate-200);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.5); }

/* ============================================
   AMBIENT BACKGROUND
   ============================================ */

.ambient-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.7;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.7), rgba(124, 58, 237, 0.3) 50%, transparent 70%);
    top: -20%; left: -15%;
    animation-duration: 25s;
}

.orb-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.6), rgba(168, 85, 247, 0.2) 50%, transparent 70%);
    bottom: -15%; right: -10%;
    animation-duration: 20s;
    animation-delay: -5s;
}

.orb-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(192, 132, 252, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent 70%);
    top: 35%; left: 45%;
    animation-duration: 30s;
    animation-delay: -10s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(30px, 40px) scale(1.05); }
}

/* Noise texture overlay */
.ambient-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.4;
}

/* Glass Effect */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

/* Screen Container */
.screen {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.screen.hidden { display: none; }

/* ============================================
   LOGIN SCREEN
   ============================================ */

.login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    width: 100%;
    max-width: 440px;
    padding: 3rem 2.5rem;
    border-radius: 28px;
    box-shadow: var(--shadow-glow), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: cardReveal 0.8s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

/* Shimmer border on login card */
.login-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), transparent 40%, transparent 60%, rgba(124, 58, 237, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo */
.logo-container { text-align: center; margin-bottom: 2.5rem; }

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.logo-icon { display: flex; gap: 6px; margin-bottom: 6px; }

.dot {
    width: 10px; height: 10px;
    background: var(--purple-500);
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.dot:nth-child(2) { animation-delay: 0.15s; }
.dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.logo-con { color: var(--slate-200); }
.logo-talents { color: var(--purple-400); }

.app-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e9d5ff, #a855f7, #7c3aed);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    margin-top: 0.5rem;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.app-subtitle {
    color: var(--slate-500);
    font-size: 0.95rem;
    margin-top: 0.25rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Form Styles */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--slate-400);
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.9rem 1.1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    outline: none;
    transition: all 0.3s var(--ease-out-expo);
}

.form-group input::placeholder { color: var(--slate-600); }

.form-group input:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15), 0 0 20px -5px rgba(147, 51, 234, 0.2);
    background: rgba(10, 6, 20, 0.8);
}

/* Buttons */
.btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    margin-top: 1.5rem;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-btn);
}

.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.login-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    color: var(--slate-600);
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.login-footer strong { color: var(--purple-400); }

/* ============================================
   CHAT SCREEN
   ============================================ */

.chat-header {
    display: none;
}

/* Gradient line under header */
.chat-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3) 30%, rgba(124, 58, 237, 0.3) 70%, transparent);
}

.header-left { display: flex; align-items: center; gap: 0.5rem; }

.logo-small { display: none; align-items: center; gap: 0.75rem; }

@media (max-width: 768px) {
    .logo-small { display: flex; }
}

.header-logo { height: 32px; width: auto; object-fit: contain; }

.logo-text-small {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--purple-300), var(--purple-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-right { display: flex; align-items: center; gap: 0.75rem; }

.user-info { display: flex; align-items: center; gap: 0.75rem; }

#user-email {
    font-size: 0.85rem;
    color: var(--slate-400);
    font-weight: 500;
}

.user-avatar {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 50%;
    color: var(--purple-400);
    transition: all 0.3s;
}

.user-avatar:hover {
    background: rgba(147, 51, 234, 0.25);
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.2);
}

.btn-icon {
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
    color: var(--slate-500);
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.btn-icon:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    transform: scale(1.05);
}

#restart-btn { display: none; }

/* Chat Container */
.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--header-height) + 1.5rem) 1.5rem calc(var(--footer-height) + 1.5rem);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.messages {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Message Styles */
.message {
    display: flex;
    gap: 0.85rem;
    animation: msgSlideIn 0.4s var(--ease-out-expo);
}

@keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.message.user { flex-direction: row-reverse; }

.message-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.avatar-icon {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.3);
}

.message.user .avatar-icon {
    background: linear-gradient(135deg, var(--slate-700), var(--slate-800));
    box-shadow: none;
}

.message-content {
    max-width: 75%;
    padding: 1rem 1.3rem;
    border-radius: 18px;
    border-top-left-radius: 4px;
    position: relative;
    transition: box-shadow 0.3s;
}

.message-content:hover {
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
}

.message.user .message-content {
    background: var(--gradient-primary);
    border-top-left-radius: 18px;
    border-top-right-radius: 4px;
    color: white;
    box-shadow: 0 4px 25px -2px rgba(147, 51, 234, 0.45), 0 0 40px -8px rgba(168, 85, 247, 0.25);
}

.message-content p { margin-bottom: 0.6rem; }
.message-content p:last-child { margin-bottom: 0; }

.message-content ul {
    margin: 0.75rem 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.message-content li {
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    background: rgba(147, 51, 234, 0.06);
    border: 1px solid rgba(147, 51, 234, 0.08);
    transition: all 0.2s;
    font-size: 0.95rem;
}

.message-content li:hover {
    background: rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.15);
}

.message-content strong { color: var(--purple-300); }
.message.user .message-content strong { color: white; }

.message-content a {
    color: var(--purple-300);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(192, 132, 252, 0.3);
    transition: all 0.2s;
}

.message-content a:hover {
    color: var(--purple-400);
    border-bottom-color: var(--purple-400);
}

/* Welcome Big Greeting */
.welcome-greeting .message-content {
    text-align: center;
    padding: 2.5rem 3rem;
}

.welcome-greeting .big-greeting {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f0abfc, #a855f7, #7c3aed);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .welcome-greeting .big-greeting { font-size: 1.6rem; }
    .welcome-greeting .message-content { padding: 2rem; }
}

/* Avatar Image/Video */
.avatar-image {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}

video.avatar-image {
    pointer-events: none;
    border: 1.5px solid rgba(168, 85, 247, 0.35);
    animation: avatarGlow 2.5s ease-in-out infinite alternate;
}

img.avatar-image {
    border: 1px solid rgba(148, 163, 184, 0.1);
    opacity: 0.85;
}

@keyframes avatarGlow {
    from { box-shadow: 0 4px 20px -4px rgba(147, 51, 234, 0.15), 0 0 8px rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.2); }
    to { box-shadow: 0 8px 40px -4px rgba(147, 51, 234, 0.5), 0 0 20px rgba(168, 85, 247, 0.3); border-color: rgba(168, 85, 247, 0.5); }
}

.header-logo { height: 32px; width: auto; object-fit: contain; }

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 0.5rem 0.25rem;
    align-items: center;
}

.typing-dot {
    width: 8px; height: 8px;
    background: var(--purple-400);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

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

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-10px) scale(1.1); }
}

/* Chat Footer */
.chat-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 0.85rem 1.5rem;
    background: rgba(10, 6, 20, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

/* Gradient line above footer */
.chat-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2) 30%, rgba(124, 58, 237, 0.2) 70%, transparent);
}

#chat-form { max-width: 900px; margin: 0 auto; }

.input-container {
    display: flex;
    gap: 0.65rem;
    align-items: flex-end;
}

#message-input {
    flex: 1;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 22px;
    outline: none;
    transition: all 0.3s var(--ease-out-expo);
    resize: none;
    overflow-y: auto;
    max-height: 150px;
    line-height: 1.5;
}

#message-input::placeholder { color: var(--slate-600); }

#message-input:focus {
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1), 0 0 25px -8px rgba(147, 51, 234, 0.2);
    background: rgba(10, 6, 20, 0.8);
}

.btn-send {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.btn-send::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-send:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-glow-btn);
}

.btn-send:hover::before { opacity: 1; }

.btn-send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.footer-info {
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--slate-500);
    letter-spacing: 0.3px;
}

/* ============================================
   ERROR TOAST
   ============================================ */

.error-toast {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: rgba(220, 38, 38, 0.85);
    backdrop-filter: blur(12px);
    color: white;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    animation: toastIn 0.4s var(--ease-out-expo);
    z-index: 200;
    box-shadow: 0 8px 30px -8px rgba(220, 38, 38, 0.4);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================
   UNIFIED TOAST SYSTEM
   ============================================ */

.toast {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    backdrop-filter: blur(12px);
    color: white;
    border-radius: 14px;
    font-size: var(--text-sm);
    font-weight: 500;
    animation: toastIn 0.4s var(--ease-out-expo);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 90vw;
}

.toast[role="alert"] {
    /* Ensures screen readers announce it */
}

.toast--error {
    background: rgba(220, 38, 38, 0.85);
    box-shadow: 0 8px 30px -8px rgba(220, 38, 38, 0.4);
}

.toast--success {
    background: rgba(16, 185, 129, 0.85);
    box-shadow: 0 8px 30px -8px rgba(16, 185, 129, 0.4);
}

.toast--warning {
    background: rgba(245, 158, 11, 0.85);
    box-shadow: 0 8px 30px -8px rgba(245, 158, 11, 0.4);
}

.toast--info {
    background: rgba(59, 130, 246, 0.85);
    box-shadow: 0 8px 30px -8px rgba(59, 130, 246, 0.4);
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.loading { position: relative; pointer-events: none; }

.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: var(--purple-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   DYNAMIC FORMS
   ============================================ */

.dynamic-form {
    margin-top: 1rem;
    padding: 1.5rem;
    border-radius: 20px;
    max-width: 500px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
}

.form-header { margin-bottom: 1.5rem; }

.form-header h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--purple-300);
    margin-bottom: 0.4rem;
}

.form-header p { font-size: 0.85rem; color: var(--slate-500); }

.form-body { display: flex; flex-direction: column; gap: 1rem; }

.form-group textarea {
    width: 100%;
    padding: 0.9rem 1.1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    outline: none;
    transition: all 0.3s var(--ease-out-expo);
    resize: vertical;
}

.form-group textarea:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}

.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-suffix input { flex: 1; padding-right: 4rem; }

.input-suffix, .input-prefix {
    position: absolute;
    right: 1rem;
    font-size: 0.85rem;
    color: var(--slate-500);
    pointer-events: none;
}

.input-prefix { left: 1rem; right: auto; }
.input-with-suffix input:has(~ .input-prefix) { padding-left: 3rem; }

.required { color: #f87171; margin-left: 0.25rem; }

.field-error {
    display: block;
    font-size: 0.75rem;
    color: #f87171;
    margin-top: 0.25rem;
    min-height: 1rem;
}

.form-group input.loading {
    background-image: linear-gradient(90deg, rgba(147, 51, 234, 0.05) 0%, rgba(147, 51, 234, 0.15) 50%, rgba(147, 51, 234, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

.form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }

.btn-secondary {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.btn-secondary:hover {
    background: rgba(10, 6, 20, 0.7);
    border-color: rgba(148, 163, 184, 0.15);
    color: var(--slate-300);
}

.form-actions .btn-primary { flex: 1; margin-top: 0; border-radius: 14px; }

.btn-save-cadastro {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}
.btn-save-cadastro:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93bbfd;
}
.btn-save-cadastro:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.message .dynamic-form { background: rgba(15, 10, 40, 0.5); }

/* ============================================
   HISTORY SIDEBAR
   ============================================ */

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out-expo);
}

.sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.history-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    background: rgba(10, 6, 20, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--glass-border);
    z-index: 160;
    transform: translateX(-100%);
    transition: transform 0.35s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-sidebar.open { transform: translateX(0); }

/* Gradient line on right edge */
.history-sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.3) 30%, rgba(124, 58, 237, 0.3) 70%, transparent);
}

.sidebar-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--slate-200);
}

.sidebar-close {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    color: var(--slate-500);
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-close:hover {
    color: var(--slate-300);
    border-color: rgba(148, 163, 184, 0.15);
}

.sidebar-new-chat {
    margin: 0.75rem 1.25rem;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-primary);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    flex-shrink: 0;
}

.sidebar-new-chat:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-sm);
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}

.history-item {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.25rem;
    border: 1px solid transparent;
}

.history-item:hover {
    background: rgba(147, 51, 234, 0.08);
    border-color: rgba(147, 51, 234, 0.1);
}

.history-item.active {
    background: rgba(147, 51, 234, 0.12);
    border-color: rgba(147, 51, 234, 0.2);
}

.history-item-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--slate-200);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.history-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.history-item-date {
    font-size: 0.72rem;
    color: var(--slate-500);
}

.history-item-delete {
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--slate-600);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    opacity: 0;
}

.history-item:hover .history-item-delete { opacity: 1; }

.history-item-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.history-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--slate-600);
    font-size: 0.85rem;
}

/* History toggle button in header */
.btn-icon.btn-history:hover {
    background: rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.2);
    color: var(--purple-400);
}

@media (max-width: 480px) {
    .history-sidebar { width: 85vw; }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .login-card { padding: 2rem 1.5rem; border-radius: 24px; }
    .app-title { font-size: 2.2rem; }
    #user-email { display: none; }
    .message-content { max-width: 88%; }
    .chat-container { padding-left: 0.75rem; padding-right: 0.75rem; }

    .avatar-image { width: 32px; height: 32px; border-radius: 8px; }
    .header-logo { height: 28px; }

    .orb-1 { width: 300px; height: 300px; }
    .orb-2 { width: 250px; height: 250px; }
    .orb-3 { width: 200px; height: 200px; }

    .dynamic-form { max-width: 100%; }
    .form-actions { flex-direction: column; }
}

@media (max-width: 480px) {
    .avatar-image { width: 28px; height: 28px; border-radius: 8px; }
    .message { gap: 0.6rem; }
    .message-content { padding: 0.85rem 1rem; font-size: 0.92rem; }
    .chat-header { padding: 0 1rem; }
}

/* ============================================
   Daily Quote
   ============================================ */

/* ============================================
   Capability Tags (Welcome)
   ============================================ */

.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0;
}

.capability-tag {
    background: rgba(147, 51, 234, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.18);
    color: var(--slate-300);
    padding: 0.45rem 0.85rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.capability-tag:hover {
    background: rgba(147, 51, 234, 0.22);
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(147, 51, 234, 0.15);
}

.capability-tag:active {
    transform: translateY(0);
}

/* ============================================
   MAIN SIDEBAR
   ============================================ */

.main-sidebar {
    position: fixed;
    top: 54px;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: rgba(10, 6, 20, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--glass-border);
    z-index: 90;
    display: flex;
    flex-direction: column;
    transition: width 0.3s var(--ease-out-expo);
    overflow: hidden;
}

.main-sidebar.hidden { display: none; }

.main-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Gradient line on right edge */
.main-sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.3) 30%, rgba(124, 58, 237, 0.3) 70%, transparent);
}

/* Top Logo Bar - barra unica do topo */
.top-logo-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 1rem;
    background: rgba(10, 6, 20, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    z-index: 1100;
}

.top-logo-bar.hidden {
    display: none;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 60px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 60px;
    justify-content: flex-end;
}

.top-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top-user-email {
    font-size: 0.75rem;
    color: var(--slate-400);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand {
    display: none;
}

.sidebar-logo {
    display: none;
}

.sidebar-brand-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--purple-300), var(--purple-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
}

.main-sidebar.collapsed .sidebar-brand-text {
    opacity: 0;
    width: 0;
}

.main-sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 1.1rem 0;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
}

.sidebar-nav-separator {
    padding: 0.6rem 0.85rem 0.3rem;
    margin-top: 0.3rem;
}

.sidebar-nav-separator span {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-500);
}

.sidebar-nav-separator::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(148, 163, 184, 0.08);
    margin-bottom: 0.5rem;
}

.main-sidebar.collapsed .sidebar-nav-separator {
    padding: 0.4rem 0;
}

.main-sidebar.collapsed .sidebar-nav-separator span {
    display: none;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--slate-400);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}

.sidebar-nav-item svg {
    flex-shrink: 0;
}

.sidebar-nav-item:hover {
    color: var(--slate-200);
    background: rgba(147, 51, 234, 0.08);
    border-color: rgba(147, 51, 234, 0.1);
}

.sidebar-nav-item.active {
    color: white;
    background: rgba(147, 51, 234, 0.18);
    border-color: rgba(147, 51, 234, 0.3);
    font-weight: 600;
}

.sidebar-nav-label {
    opacity: 1;
    transition: opacity 0.2s;
}

.main-sidebar.collapsed .sidebar-nav-label {
    opacity: 0;
    width: 0;
}

.main-sidebar.collapsed .sidebar-nav-item {
    justify-content: center;
    padding: 0.7rem;
}

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.main-sidebar.collapsed .sidebar-footer {
    justify-content: center;
}

.sidebar-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    color: var(--slate-500);
    cursor: pointer;
    transition: all 0.25s;
}

.sidebar-toggle:hover {
    background: rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.2);
    color: var(--purple-400);
}

.sidebar-toggle svg {
    transition: transform 0.3s var(--ease-out-expo);
}

.main-sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

/* Mobile sidebar overlay */
.main-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out-expo);
}

.main-sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.main-sidebar-overlay.hidden { display: none; }

/* Mobile menu button — hidden on desktop */
.btn-mobile-menu { display: none; }

/* Layout shifts for sidebar on desktop */
@media (min-width: 769px) {
    .btn-mobile-menu { display: none !important; }
    .main-sidebar-overlay { display: none !important; }

    .main-sidebar ~ #chat-screen .chat-header {
        left: var(--sidebar-width);
        transition: left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .chat-header {
        left: var(--sidebar-collapsed-width);
    }

    .main-sidebar ~ #chat-screen .chat-container {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .chat-container {
        margin-left: var(--sidebar-collapsed-width);
    }

    .main-sidebar ~ #chat-screen .chat-footer {
        left: var(--sidebar-width);
        transition: left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .chat-footer {
        left: var(--sidebar-collapsed-width);
    }

    .main-sidebar ~ #chat-screen .formalizacoes-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .formalizacoes-screen {
        margin-left: var(--sidebar-collapsed-width);
    }

    .main-sidebar ~ #chat-screen .historico-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .historico-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* Mobile: sidebar = drawer overlay */
@media (max-width: 768px) {
    .main-sidebar {
        transform: translateX(-100%);
        z-index: 170;
        width: 260px;
    }
    .main-sidebar.mobile-open {
        transform: translateX(0);
    }
    .main-sidebar.hidden {
        display: flex;
    }
    .btn-mobile-menu {
        display: flex;
    }
    .sidebar-toggle { display: none; }
    .sidebar-footer { display: none; }
}

/* ============================================
   FORMALIZACOES SCREEN
   ============================================ */

.formalizacoes-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 0.5rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 0;
}

.formalizacoes-screen.hidden { display: none; }

/* Vacancy Search Section */
.fz-vacancy-section {
    padding: 0.75rem 1.5rem 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex-shrink: 0;
}

.fz-vacancy-search-inner {
    padding: 1rem 1.25rem;
    border-radius: 16px;
}

.fz-vacancy-search-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--purple-300);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.fz-vacancy-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.fz-vacancy-search-row input {
    flex: 1;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.fz-vacancy-search-row input:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.fz-vacancy-search-row input::placeholder {
    color: var(--slate-600);
}

.fz-vacancy-search-btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-accent);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    white-space: nowrap;
}

.fz-vacancy-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-sm);
}

.fz-vacancy-search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Vacancy Results */
.fz-vacancy-results {
    margin-top: 0.6rem;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fz-vacancy-card {
    padding: 0.7rem 0.9rem;
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
    position: relative;
}

.fz-vacancy-card:hover {
    background: rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.25);
    transform: translateX(4px);
}

.fz-vacancy-card.selected {
    background: rgba(147, 51, 234, 0.15);
    border-color: var(--purple-500);
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.15);
}

.fz-vacancy-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--slate-100);
    margin-bottom: 0.3rem;
}

.fz-vacancy-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fz-vacancy-tag {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--slate-400);
    background: rgba(148, 163, 184, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}

.fz-vacancy-card-loading {
    font-size: 0.78rem;
    color: var(--purple-300);
    margin-top: 0.4rem;
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.fz-vacancy-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: var(--slate-400);
    font-size: 0.85rem;
}

.fz-vacancy-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: var(--purple-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.fz-vacancy-empty {
    padding: 0.75rem;
    color: var(--slate-500);
    font-size: 0.85rem;
    text-align: center;
}

.fz-vacancy-error {
    color: #f87171;
}

.fz-vacancy-success {
    padding: 0.75rem;
    color: #10b981;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

@media (max-width: 640px) {
    .fz-vacancy-section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .fz-vacancy-search-row {
        flex-direction: column;
    }

    .fz-vacancy-results {
        max-height: 220px;
    }
}

/* Contact Autocomplete */
.fz-contact-field {
    position: relative;
}

.fz-contact-hint {
    font-size: 0.7rem;
    color: var(--purple-400);
    font-weight: 400;
    margin-left: 0.5rem;
    opacity: 0.7;
}

.fz-contact-wrapper {
    position: relative;
}

.fz-contact-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(15, 10, 40, 0.95);
    border: 1px solid var(--glass-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-height: 200px;
    overflow-y: auto;
    backdrop-filter: blur(20px);
}

.fz-contact-dropdown.visible {
    display: block;
}

.fz-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.fz-contact-item:last-child {
    border-bottom: none;
}

.fz-contact-item:hover {
    background: rgba(147, 51, 234, 0.1);
}

.fz-contact-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--slate-200);
}

.fz-contact-email {
    font-size: 0.75rem;
    color: var(--slate-500);
    margin-left: auto;
}

.fz-contact-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    color: var(--purple-400);
}

.fz-contact-empty {
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    color: var(--slate-500);
    text-align: center;
}

/* AI Parser Section */
.fz-ai-section {
    padding: 0.75rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex-shrink: 0;
}

.fz-ai-inner {
    padding: 1rem 1.25rem;
    border-radius: 16px;
}

.fz-ai-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--purple-300);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

/* AI Collapsible */
.fz-ai-header {
    user-select: none;
}

.fz-ai-chevron {
    margin-left: auto;
    transition: transform 0.3s var(--ease-out-expo);
}

.fz-ai-inner.collapsed .fz-ai-chevron {
    transform: rotate(-90deg);
}

.fz-ai-body {
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.35s var(--ease-out-expo), opacity 0.25s ease, margin-top 0.35s ease;
    margin-top: 0.6rem;
}

.fz-ai-inner.collapsed .fz-ai-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.fz-ai-inner textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.fz-ai-inner textarea:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.fz-ai-inner textarea::placeholder {
    color: var(--slate-600);
}

.fz-ai-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
}

.fz-ai-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-accent);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    white-space: nowrap;
}

.fz-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-sm);
}

.fz-ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.fz-ai-feedback {
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.3s;
}

.fz-ai-feedback.loading { color: var(--slate-400); }
.fz-ai-feedback.success { color: #10b981; }
.fz-ai-feedback.error { color: #f87171; }

/* Type Selector */
.fz-type-selector {
    padding: 0.6rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex-shrink: 0;
}

.fz-type-btn {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.fz-type-btn:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.08);
}

.fz-type-btn.active {
    color: white;
    background: rgba(147, 51, 234, 0.2);
    border-color: var(--purple-500);
    font-weight: 700;
}

/* Subject Bar */
.fz-subject-bar {
    padding: 0.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.fz-subject-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fz-email-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-left: 0;
}

.fz-meta-tag {
    font-size: 0.75rem;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.06);
}

.fz-meta-tag strong {
    color: var(--slate-300);
    margin-right: 0.25rem;
}

.fz-subject-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate-400);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.fz-subject-text {
    flex: 1;
    font-size: 0.82rem;
    color: var(--slate-200);
    background: rgba(10, 6, 20, 0.5);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.06);
    min-width: 200px;
    font-family: 'SF Mono', 'Cascadia Code', monospace;
}

.fz-subject-input {
    flex: 1;
    font-size: 0.82rem;
    color: var(--slate-200);
    background: rgba(10, 6, 20, 0.5);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    min-width: 200px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.fz-subject-input:focus {
    border-color: var(--purple-500, #9333EA);
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.15);
}

.fz-copy-subject-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.fz-copy-subject-btn:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
}

.fz-copy-subject-btn.copied {
    color: #10b981;
    border-color: #10b981;
}

/* Main Layout: Form + Preview */
.fz-main {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.fz-form {
    flex: 0 0 400px;
    max-width: 400px;
    padding: 1rem 1.25rem;
    border-right: 1px solid rgba(148, 163, 184, 0.06);
}

.fz-preview {
    flex: 1;
    padding: 1rem 1.25rem;
}

/* Form Header */
.fz-form-header {
    margin-bottom: 1rem;
}

.fz-form-header h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--purple-300);
    margin: 0 0 0.2rem;
}

.fz-form-header p {
    font-size: 0.78rem;
    color: var(--slate-500);
    margin: 0;
}

/* Form Fields */
.fz-field {
    margin-bottom: 0.85rem;
}

.fz-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate-400);
    margin-bottom: 0.3rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fz-required {
    color: #f87171;
    margin-left: 0.15rem;
}

.fz-field input,
.fz-field textarea,
.fz-field select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.fz-field textarea {
    resize: vertical;
    line-height: 1.5;
}

.fz-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.fz-field input:focus,
.fz-field textarea:focus,
.fz-field select:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.fz-field input::placeholder,
.fz-field textarea::placeholder {
    color: var(--slate-600);
}

.fz-help {
    font-size: 0.7rem;
    color: var(--slate-600);
    margin: 0 0 0.2rem;
    font-style: italic;
}

.fz-row {
    display: flex;
    gap: 0.6rem;
}

.fz-col-1 { flex: 1; }
.fz-col-2 { flex: 2; }

.fz-divider {
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    margin: 0.85rem 0;
}

/* Preview Section */
.fz-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fz-preview-header h3 {
    margin: 0;
    font-size: 0.78rem;
    color: var(--slate-500);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.fz-copy-email-btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    color: white;
    background: var(--purple-700);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(107, 33, 168, 0.3);
    white-space: nowrap;
}

.fz-copy-email-btn:hover {
    background: var(--purple-600);
    transform: translateY(-1px);
}

.fz-copy-email-btn.copied {
    background: #10b981;
}

.fz-preview-body {
    background: white;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #E0E0E0;
    max-width: 640px;
}

/* Preview Actions (buttons row) */
.fz-preview-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Send Email Button */
.fz-send-email-btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    color: white;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
}

.fz-send-email-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.fz-send-email-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Schedule Bar */
.fz-schedule-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.fz-schedule-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400E;
    white-space: nowrap;
}
.fz-schedule-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #D97706;
    cursor: pointer;
}
.fz-schedule-fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fz-schedule-fields input[type="datetime-local"] {
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    background: white;
    color: #333;
    outline: none;
}
.fz-schedule-fields input[type="datetime-local"]:focus {
    border-color: #D97706;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
}
.fz-schedule-hint {
    font-size: 0.75rem;
    color: #B45309;
    opacity: 0.8;
}

/* Confirm Modal */
.fz-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out-expo);
}

.fz-confirm-overlay.visible {
    opacity: 1;
}

.fz-confirm-dialog {
    background: rgba(15, 10, 40, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-glow), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s var(--ease-out-expo);
}

.fz-confirm-overlay.visible .fz-confirm-dialog {
    transform: scale(1);
}

.fz-confirm-dialog h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--purple-300);
    margin: 0 0 1.25rem;
}

.fz-confirm-details {
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.fz-confirm-details p {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: var(--slate-300);
    word-break: break-word;
}

.fz-confirm-details p:last-child {
    margin-bottom: 0;
}

.fz-confirm-details strong {
    color: var(--slate-100);
    margin-right: 0.25rem;
}

.fz-confirm-actions {
    display: flex;
    gap: 0.75rem;
}

.fz-confirm-cancel {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.fz-confirm-cancel:hover {
    background: rgba(10, 6, 20, 0.7);
    border-color: rgba(148, 163, 184, 0.15);
    color: var(--slate-300);
}

.fz-confirm-send {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.fz-confirm-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* Send Feedback Toast */
.fz-send-feedback {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 0.85rem 1.75rem;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 1100;
    opacity: 0;
    transition: all 0.4s var(--ease-out-expo);
    pointer-events: none;
    white-space: nowrap;
}

.fz-send-feedback.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.fz-send-feedback-success {
    background: rgba(16, 185, 129, 0.9);
    backdrop-filter: blur(12px);
    color: white;
    box-shadow: 0 8px 30px -8px rgba(16, 185, 129, 0.4);
}

.fz-send-feedback-error {
    background: rgba(220, 38, 38, 0.9);
    backdrop-filter: blur(12px);
    color: white;
    box-shadow: 0 8px 30px -8px rgba(220, 38, 38, 0.4);
}

/* Responsive */
@media (max-width: 900px) {
    .fz-main {
        flex-direction: column;
    }

    .fz-form {
        flex: none;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    }

    .fz-preview {
        flex: none;
    }
}

@media (max-width: 640px) {
    .fz-ai-section,
    .fz-type-selector,
    .fz-subject-bar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .fz-form,
    .fz-preview {
        padding: 0.75rem;
    }

    .fz-preview-body {
        padding: 1rem;
    }

    .fz-subject-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .fz-subject-text { min-width: 0; }
}

/* ============================================
   ONBOARDING GUIDE
   ============================================ */

.fz-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    pointer-events: auto;
}

.fz-onboarding-overlay.visible {
    opacity: 1;
}

.fz-onboarding-spotlight {
    position: fixed;
    z-index: 1001;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 30px rgba(147, 51, 234, 0.4);
    border: 2px solid var(--purple-500);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
}

.fz-onboarding-spotlight.visible {
    opacity: 1;
}

.fz-onboarding-tooltip {
    position: fixed;
    z-index: 1002;
    width: 320px;
    background: rgba(15, 10, 40, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-glow), 0 20px 40px -8px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.fz-onboarding-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.fz-onboarding-step-num {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--purple-400);
    background: rgba(147, 51, 234, 0.15);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-bottom: 0.6rem;
    letter-spacing: 0.05em;
}

.fz-onboarding-tooltip h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate-100);
    margin: 0 0 0.4rem;
}

.fz-onboarding-tooltip p {
    font-size: 0.88rem;
    color: var(--slate-400);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.fz-onboarding-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.fz-onboarding-skip {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-500);
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.fz-onboarding-skip:hover {
    color: var(--slate-300);
    border-color: rgba(148, 163, 184, 0.2);
}

.fz-onboarding-next {
    padding: 0.5rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.fz-onboarding-next:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-sm);
}

@media (max-width: 640px) {
    .fz-onboarding-tooltip {
        width: calc(100vw - 2rem);
        left: 1rem !important;
    }
}

/* ============================================
   HISTORICO SCREEN
   ============================================ */

.historico-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.historico-screen.hidden { display: none; }

.historico-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
}

.historico-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.historico-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--slate-100);
    margin: 0;
}

.historico-header h2 span {
    color: var(--purple-400);
}

.historico-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.historico-filter-input {
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    min-width: 160px;
}

.historico-filter-input:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.historico-filter-input::placeholder {
    color: var(--slate-600);
}

.historico-filter-select {
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.3s;
}

.historico-filter-select:focus {
    border-color: var(--purple-600);
}

.historico-refresh-btn {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-accent);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    white-space: nowrap;
}

.historico-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-sm);
}

.historico-refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Table */
.historico-table-wrapper {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.historico-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.historico-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.historico-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(10, 6, 20, 0.7);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    white-space: nowrap;
}

.historico-table td {
    padding: 0.75rem 1rem;
    color: var(--slate-200);
    border-bottom: 1px solid rgba(148, 163, 184, 0.04);
    vertical-align: middle;
}

.historico-table tbody tr {
    transition: background 0.15s;
}

.historico-table tbody tr:hover {
    background: rgba(147, 51, 234, 0.06);
}

.historico-table tbody tr:last-child td {
    border-bottom: none;
}

.historico-tipo-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
}

.historico-tipo-badge.abertura {
    background: rgba(147, 51, 234, 0.15);
    color: var(--purple-300);
    border: 1px solid rgba(147, 51, 234, 0.25);
}

.historico-tipo-badge.reposicao {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.historico-tipo-badge.contratacao {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.historico-status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
}

.historico-status-badge.sent {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.historico-status-badge.error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.historico-dest-list {
    font-size: 0.78rem;
    color: var(--slate-400);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historico-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--slate-500);
}

.historico-empty svg {
    display: block;
    margin: 0 auto 1rem;
    color: var(--slate-600);
}

.historico-empty p {
    margin: 0;
    font-size: 0.95rem;
}

.historico-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.5rem 0;
}

.historico-pagination button {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.historico-pagination button:hover:not(:disabled) {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.08);
}

.historico-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.historico-pagination span {
    font-size: 0.82rem;
    color: var(--slate-500);
}

.historico-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .historico-container {
        padding: 0 0.75rem;
    }
    .historico-filters {
        width: 100%;
    }
    .historico-filter-input {
        flex: 1;
        min-width: 120px;
    }
    .historico-table {
        font-size: 0.8rem;
    }
    .historico-table th,
    .historico-table td {
        padding: 0.6rem 0.65rem;
    }
}

/* ============================================
   TIMELINE SCREEN (Emails por Cliente)
   ============================================ */

.timeline-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.timeline-screen.hidden { display: none; }

.tl-container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
}

.tl-view {
    width: 100%;
}

.tl-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tl-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--slate-100);
    margin: 0;
}

/* Search */
.tl-search-bar {
    position: relative;
    margin-bottom: 1rem;
}

.tl-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-500);
    pointer-events: none;
}

.tl-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.tl-search-input:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.tl-search-input::placeholder {
    color: var(--slate-600);
}

/* Client List */
.tl-client-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tl-client-card {
    padding: 1rem 1.25rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.tl-client-card:hover {
    background: rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.25);
    transform: translateX(4px);
    box-shadow: var(--shadow-glow-sm);
}

.tl-client-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.tl-client-domain {
    font-size: 1rem;
    font-weight: 600;
    color: var(--purple-300);
}

.tl-client-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate-400);
    background: rgba(148, 163, 184, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
}

.tl-client-contacts {
    font-size: 0.82rem;
    color: var(--slate-400);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-client-date {
    font-size: 0.72rem;
    color: var(--slate-600);
}

/* Back Button */
.tl-back-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.tl-back-btn:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.08);
}

/* Filters */
.tl-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tl-filter-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tl-filter-btn:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.08);
}

.tl-filter-btn.active {
    color: white;
    background: rgba(147, 51, 234, 0.2);
    border-color: var(--purple-500);
    font-weight: 700;
}

/* Email List */
.tl-email-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tl-email-item {
    padding: 0.85rem 1.1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
}

.tl-email-item:hover {
    background: rgba(15, 10, 40, 0.7);
    border-color: rgba(148, 163, 184, 0.15);
}

.tl-email-item.expanded {
    border-color: rgba(147, 51, 234, 0.3);
    box-shadow: var(--shadow-glow-sm);
}

.tl-email-item.sent {
    border-left: 3px solid rgba(147, 51, 234, 0.5);
}

.tl-email-item.received {
    border-left: 3px solid rgba(59, 130, 246, 0.5);
}

.tl-email-item.formalizacao {
    border-left-color: var(--purple-500);
    background: rgba(147, 51, 234, 0.06);
}

.tl-email-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    gap: 0.5rem;
}

.tl-email-dir {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tl-dir-icon.sent { color: var(--purple-400); }
.tl-dir-icon.received { color: #60a5fa; }

.tl-email-date {
    font-size: 0.75rem;
    color: var(--slate-500);
}

.tl-email-subject {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--slate-100);
    margin-bottom: 0.2rem;
    line-height: 1.4;
}

.tl-email-meta {
    font-size: 0.78rem;
    color: var(--slate-400);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-email-snippet {
    font-size: 0.8rem;
    color: var(--slate-500);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Formalizacao Badge */
.tl-badge-fz {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.tl-badge-fz.tipo-abertura {
    background: rgba(147, 51, 234, 0.18);
    color: var(--purple-300);
    border: 1px solid rgba(147, 51, 234, 0.3);
}

.tl-badge-fz.tipo-reposicao {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.tl-badge-fz.tipo-contratacao {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Email Detail */
.tl-email-detail {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    animation: msgSlideIn 0.3s var(--ease-out-expo);
}

.tl-detail-fz-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

.tl-detail-fz-badge.tipo-abertura {
    background: rgba(147, 51, 234, 0.15);
    color: var(--purple-300);
    border: 1px solid rgba(147, 51, 234, 0.25);
}

.tl-detail-fz-badge.tipo-reposicao {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.tl-detail-fz-badge.tipo-contratacao {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.tl-detail-headers {
    font-size: 0.82rem;
    color: var(--slate-400);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.tl-detail-headers strong {
    color: var(--slate-300);
    margin-right: 0.25rem;
}

.tl-detail-body {
    margin-bottom: 0.5rem;
}

.tl-email-iframe {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    background: white;
}

.tl-email-text {
    font-size: 0.85rem;
    color: var(--slate-200);
    background: rgba(10, 6, 20, 0.5);
    padding: 1rem;
    border-radius: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    max-height: 500px;
    overflow-y: auto;
}

.tl-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tl-collapse-btn:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
}

/* Load More */
.tl-load-more {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--purple-400);
    background: rgba(147, 51, 234, 0.06);
    border: 1px dashed rgba(147, 51, 234, 0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.tl-load-more:hover {
    background: rgba(147, 51, 234, 0.12);
    border-color: rgba(147, 51, 234, 0.4);
}

/* Shared utilities */
.tl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

.tl-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: var(--purple-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.tl-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--slate-500);
    font-size: 0.9rem;
}

/* Desktop layout shift for timeline screen */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .timeline-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .timeline-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .tl-container {
        padding: 0 0.75rem;
    }
    .tl-client-card {
        padding: 0.85rem 1rem;
    }
    .tl-email-item {
        padding: 0.75rem 0.85rem;
    }
    .tl-email-iframe {
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .tl-filters {
        gap: 0.3rem;
    }
    .tl-filter-btn {
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
    }
}

/* Timeline: Registered vs Unregistered sections */
.tl-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.tl-section-header:first-child {
    margin-top: 0;
}

.tl-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tl-section-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(147, 51, 234, 0.15);
    color: var(--purple-300);
    border: 1px solid rgba(147, 51, 234, 0.25);
}

.tl-client-card .tl-registered-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.tl-mailbox-tags {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
}
.tl-mailbox-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.25);
    letter-spacing: 0.02em;
}
.tl-mailbox-tag.tl-mailbox-rafaella {
    background: rgba(236, 72, 153, 0.18);
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, 0.3);
}
.tl-mailbox-tag.tl-mailbox-both {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, 0.3);
}

.tl-client-card .tl-registered-name {
    font-size: 0.78rem;
    color: var(--slate-300);
    font-weight: 500;
    margin-top: 0.2rem;
}

.tl-client-name-highlight {
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.3;
}
.tl-client-domain-sub {
    font-size: 0.78rem;
    color: var(--purple-400, #a78bfa);
    font-weight: 500;
    margin-top: 0.15rem;
    opacity: 0.85;
}
.tl-card-registered {
    border-left: 3px solid rgba(147, 51, 234, 0.5);
}

.tl-collapse-section {
    cursor: pointer;
    user-select: none;
}

.tl-collapse-section .tl-chevron {
    transition: transform 0.3s var(--ease-out-expo);
    color: var(--slate-500);
}

.tl-collapse-section.collapsed .tl-chevron {
    transform: rotate(-90deg);
}

.tl-collapsible-list {
    overflow: hidden;
    max-height: 5000px;
    transition: max-height 0.4s var(--ease-out-expo), opacity 0.3s ease;
    opacity: 1;
}

.tl-collapsible-list.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Ignore domain button */
.tl-ignore-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 2;
}
.tl-client-card {
    position: relative;
}
.tl-client-card:hover .tl-ignore-btn {
    opacity: 1;
}
.tl-ignore-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fecaca;
}

.tl-register-btn {
    position: absolute;
    top: 0.5rem;
    right: 4rem;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 2;
}
.tl-client-card:hover .tl-register-btn {
    opacity: 1;
}
.tl-register-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    color: #bbf7d0;
}

/* Batch ignore bar */
.tl-batch-bar {
    padding: 0.4rem 0;
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: flex-end;
}
.tl-batch-ignore-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.tl-batch-ignore-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

/* Email view domain subtitle */
.tl-email-domain-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--slate-400);
    font-weight: 400;
    margin-top: -0.2rem;
    margin-bottom: 0.5rem;
}

/* Timeline filter button highlight */
.tl-filter-timeline {
    background: rgba(147, 51, 234, 0.06);
    border-color: rgba(147, 51, 234, 0.2);
    color: var(--purple-400);
}
.tl-filter-timeline:hover {
    background: rgba(147, 51, 234, 0.12);
}
.tl-filter-timeline.active {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.25), rgba(99, 102, 241, 0.2));
    border-color: var(--purple-500);
}

/* Timeline vertical view */
.tl-timeline {
    position: relative;
    padding: 0.5rem 0;
}

.tl-timeline-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.tl-timeline-item:hover {
    opacity: 0.85;
}
.tl-timeline-item:hover .tl-timeline-content {
    border-color: rgba(147, 51, 234, 0.35);
    background: rgba(15, 10, 40, 0.7);
}

.tl-timeline-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
    position: relative;
}
.tl-timeline-line::after {
    content: '';
    position: absolute;
    top: 36px;
    bottom: -4px;
    width: 2px;
    background: rgba(147, 51, 234, 0.2);
}
.tl-timeline-item.last .tl-timeline-line::after {
    display: none;
}

.tl-timeline-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(15, 10, 40, 0.9);
    border: 2px solid rgba(147, 51, 234, 0.35);
    z-index: 1;
    flex-shrink: 0;
}

.tl-timeline-content {
    flex: 1;
    padding: 0.7rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s;
    min-width: 0;
}

.tl-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.tl-timeline-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.tl-timeline-badge.tl-evt-candidato {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.tl-timeline-badge.tl-evt-abertura {
    background: rgba(147, 51, 234, 0.18);
    color: var(--purple-300);
    border: 1px solid rgba(147, 51, 234, 0.3);
}
.tl-timeline-badge.tl-evt-boas_vindas {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.tl-timeline-badge.tl-evt-contratacao {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.tl-timeline-badge.tl-evt-solicitacao_reposicao {
    background: rgba(236, 72, 153, 0.18);
    color: #f9a8d4;
    border: 1px solid rgba(236, 72, 153, 0.3);
}
.tl-timeline-badge.tl-evt-reposicao {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.tl-thread-count {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(100, 116, 139, 0.2);
    color: var(--slate-400);
    white-space: nowrap;
}

/* Dot colors per event type */
.tl-evt-candidato .tl-timeline-dot { border-color: rgba(245, 158, 11, 0.5); }
.tl-evt-abertura .tl-timeline-dot { border-color: rgba(147, 51, 234, 0.5); }
.tl-evt-boas_vindas .tl-timeline-dot { border-color: rgba(59, 130, 246, 0.5); }
.tl-evt-contratacao .tl-timeline-dot { border-color: rgba(16, 185, 129, 0.5); }
.tl-evt-solicitacao_reposicao .tl-timeline-dot { border-color: rgba(236, 72, 153, 0.5); }
.tl-evt-reposicao .tl-timeline-dot { border-color: rgba(99, 102, 241, 0.5); }

.tl-timeline-date {
    font-size: 0.72rem;
    color: var(--slate-500);
    white-space: nowrap;
}

.tl-timeline-subject {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--slate-100);
    line-height: 1.4;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-timeline-meta {
    font-size: 0.72rem;
    color: var(--slate-500);
}

.tl-timeline-summary {
    text-align: center;
    font-size: 0.72rem;
    color: var(--slate-600);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

/* Multi-select checkbox */
.tl-select-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.tl-client-card:hover .tl-select-checkbox,
.tl-select-checkbox:has(input:checked) {
    opacity: 1;
}
.tl-domain-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #f87171;
}
.tl-client-card:has(.tl-domain-check:checked) {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
}

/* Ignored domains panel */
.tl-ignored-section {
    margin-top: 0.5rem;
}
.tl-ignored-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    color: var(--slate-500);
    border-radius: 6px;
    transition: background 0.2s;
}
.tl-ignored-header:hover {
    background: rgba(255, 255, 255, 0.03);
}
.tl-ignored-header .tl-chevron {
    transition: transform 0.3s var(--ease-out-expo);
    color: var(--slate-600);
    width: 14px;
    height: 14px;
}
.tl-ignored-header.collapsed .tl-chevron {
    transform: rotate(-90deg);
}
.tl-ignored-list {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.4s var(--ease-out-expo), opacity 0.3s ease;
    opacity: 1;
    padding: 0.2rem 0.4rem;
}
.tl-ignored-list.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
}
.tl-ignored-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    color: var(--slate-400);
    border-radius: 4px;
    transition: background 0.15s;
}
.tl-ignored-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.tl-ignored-item .tl-restore-btn {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.tl-ignored-item .tl-restore-btn:hover {
    background: rgba(34, 197, 94, 0.25);
}

.tl-email-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tl-email-filter {
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tl-email-filter:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.08);
}

.tl-email-filter.active {
    color: white;
    background: rgba(147, 51, 234, 0.2);
    border-color: var(--purple-500);
    font-weight: 700;
}

/* ============================================
   CLIENTES SCREEN (Client Registry)
   ============================================ */

.clientes-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.clientes-screen.hidden { display: none; }

.cl-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
}

.cl-view { width: 100%; }

/* Header */
.cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cl-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--slate-100);
    margin: 0;
}

/* Buttons */
.cl-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--gradient-primary);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    white-space: nowrap;
}

.cl-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-btn);
}

.cl-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cl-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
}

.cl-btn-secondary:hover {
    color: var(--slate-200);
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(10, 6, 20, 0.7);
}

.cl-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
}

.cl-btn-danger:hover {
    color: white;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Back Button */
.cl-back-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-400);
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.cl-back-btn:hover {
    color: var(--slate-200);
    border-color: rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.08);
}

/* Search */
.cl-search-bar {
    position: relative;
    margin-bottom: 1rem;
}

.cl-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-500);
    pointer-events: none;
}

.cl-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.cl-search-input:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.cl-search-input::placeholder {
    color: var(--slate-600);
}

/* Table */
.cl-table-wrapper {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.cl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.cl-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.cl-table thead tr {
    background: rgba(10, 6, 20, 0.7);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.cl-table th {
    padding: 0.65rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}

.cl-th-sortable {
    cursor: pointer;
    transition: color 0.2s;
}

.cl-th-sortable:hover {
    color: var(--slate-300);
}

.cl-th-sortable span { vertical-align: middle; }

.cl-sort-icon {
    vertical-align: middle;
    margin-left: 0.3rem;
    transition: transform 0.2s;
}

.cl-sort-active {
    color: var(--purple-400);
}

.cl-th-center { text-align: center; }

.cl-table-row {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border-bottom: 1px solid rgba(148, 163, 184, 0.04);
}

.cl-table-row:hover {
    background: rgba(147, 51, 234, 0.06);
}

.cl-row-alt {
    background: rgba(255, 255, 255, 0.015);
}

.cl-row-alt:hover {
    background: rgba(147, 51, 234, 0.06);
}

.cl-table td {
    padding: 0.6rem 0.85rem;
    color: var(--slate-300);
    vertical-align: middle;
}

.cl-td-code {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--purple-300);
    white-space: nowrap;
}

.cl-td-name {
    max-width: 280px;
}

.cl-name-text {
    display: block;
    font-weight: 600;
    color: var(--slate-200);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-name-fantasy {
    display: block;
    font-size: 0.72rem;
    color: var(--slate-500);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-td-cnpj {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    color: var(--slate-400);
    white-space: nowrap;
}

.cl-td-center { text-align: center; }

.cl-td-date {
    font-size: 0.8rem;
    color: var(--slate-400);
    white-space: nowrap;
}

.cl-td-sponsor {
    font-size: 0.8rem;
    color: var(--slate-400);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-muted { color: var(--slate-600); }

.cl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
}

.cl-badge-active {
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
}

.cl-badge-zero {
    color: var(--slate-600);
    background: rgba(100, 116, 139, 0.08);
}

.cl-table-count {
    font-size: 0.78rem;
    color: var(--slate-500);
    font-weight: 500;
}

.cl-status-ativo {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.cl-status-inativo {
    color: var(--slate-500);
    background: rgba(100, 116, 139, 0.12);
}

@media (max-width: 768px) {
    .cl-hide-mobile { display: none; }
}

@media (max-width: 1024px) {
    .cl-hide-tablet { display: none; }
}

/* Detail Header - Compact */
.cl-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    flex-wrap: wrap;
}

.cl-detail-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.cl-detail-header-info {
    flex: 1;
    min-width: 0;
}

.cl-detail-header-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
}

.cl-detail-header-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--slate-100);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-detail-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cl-header-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cl-header-cnpj {
    font-size: 0.72rem;
    color: var(--slate-500);
    font-family: 'SF Mono', 'Cascadia Code', monospace;
}

.cl-header-titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.cl-header-codigo {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    color: var(--purple-300);
    background: rgba(147, 51, 234, 0.15);
    border-radius: 6px;
    white-space: nowrap;
}

.cl-btn-sm {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
}

.cl-btn-editing {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.cl-btn-editing:hover {
    background: rgba(100, 116, 139, 0.3);
}

/* Collapsible Sections */
.cl-section-collapsible { transition: all 0.2s; }

.cl-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cl-section-toggle:hover { color: var(--slate-200); }

.cl-chevron {
    transition: transform 0.2s;
}

.cl-collapsed .cl-chevron {
    transform: rotate(-90deg);
}

.cl-collapsed .cl-section-body {
    display: none;
}

/* Inline Edit Form */
.cl-form-inline {
    max-width: 100%;
}

.cl-inline-actions {
    position: sticky;
    bottom: 0;
    background: rgba(10, 6, 20, 0.9);
    backdrop-filter: blur(8px);
    padding: 0.85rem 1rem;
    margin: 0 -1.25rem -1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0 0 14px 14px;
    z-index: 5;
}

.cl-readonly-tag {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.35rem;
}

.cl-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Form */
.cl-form {
    max-width: 700px;
}

.cl-form-section {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}

.cl-form-section h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--purple-300);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cl-form-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.cl-form-row:last-child { margin-bottom: 0; }

.cl-form-group {
    flex: 1;
}

.cl-col-2 { flex: 2; }
.cl-col-3 { flex: 3; }
.cl-col-4 { flex: 4; }
.cl-col-6 { flex: 6; }
.cl-col-7 { flex: 7; }
.cl-col-8 { flex: 8; }

.cl-form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate-400);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cl-required { color: #f87171; margin-left: 0.15rem; }

.cl-form-group input,
.cl-form-group select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.cl-form-group input:focus,
.cl-form-group select:focus {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.cl-form-group input::placeholder {
    color: var(--slate-600);
}

.cl-form-group input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dynamic items (identifiers, resp vagas) */
.cl-add-btn {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--purple-400);
    background: rgba(147, 51, 234, 0.1);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cl-add-btn:hover {
    background: rgba(147, 51, 234, 0.2);
    border-color: rgba(147, 51, 234, 0.4);
}

.cl-dynamic-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    animation: msgSlideIn 0.3s var(--ease-out-expo);
}

.cl-dynamic-item select {
    width: 110px;
    flex-shrink: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

.cl-dynamic-item .cl-ident-value {
    flex: 1;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    outline: none;
}

.cl-remove-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--slate-500);
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.cl-remove-btn:hover {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}

/* Resp Vagas multi-field */
.cl-resp-item {
    align-items: flex-start;
}

.cl-resp-fields {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4rem;
}

.cl-resp-fields input {
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--slate-100);
    background: rgba(10, 6, 20, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.cl-resp-fields input::placeholder {
    color: var(--slate-600);
}

/* Form Actions */
.cl-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

/* Detail View */
.cl-detail-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cl-detail-section {
    padding: 1rem 1.25rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}

.cl-detail-section h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--purple-300);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cl-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
}

.cl-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cl-detail-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cl-detail-value {
    font-size: 0.88rem;
    color: var(--slate-200);
}

.cl-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cl-detail-tag {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 8px;
}

.cl-detail-tag.cl-tag-domain {
    background: rgba(147, 51, 234, 0.12);
    color: var(--purple-300);
    border: 1px solid rgba(147, 51, 234, 0.2);
}

.cl-detail-tag.cl-tag-email {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.cl-detail-resp-card {
    padding: 0.6rem 0.85rem;
    background: rgba(10, 6, 20, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--slate-300);
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.cl-detail-resp-card strong {
    color: var(--purple-300);
}

.cl-detail-empty {
    color: var(--slate-500);
    font-size: 0.85rem;
    margin: 0;
}

/* Detail Actions */
.cl-detail-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* Loading / Empty */
.cl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

.cl-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: var(--purple-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.cl-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--slate-500);
    font-size: 0.9rem;
}

/* Desktop layout shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .clientes-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .clientes-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .cl-container { padding: 0 0.75rem; }
    .cl-form-row { flex-direction: column; gap: 0.5rem; }
    .cl-detail-grid { grid-template-columns: 1fr; }
    .cl-resp-fields { grid-template-columns: 1fr; }
    .cl-detail-header { flex-direction: column; align-items: flex-start; }
    .cl-detail-header-actions { width: 100%; }
    .cl-detail-header-actions .cl-btn-sm { flex: 1; justify-content: center; }
    .cl-detail-header-name { font-size: 0.95rem; }
    .cl-table th, .cl-table td { padding: 0.5rem 0.6rem; }
    .cl-td-name { max-width: 180px; }
}

@media (max-width: 480px) {
    .cl-form-actions { flex-direction: column; }
    .cl-detail-actions { flex-direction: column; }
}

/* ============================================
   Inline Emails in Client Detail
   ============================================ */

.cl-emails-section h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cl-emails-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cl-email-refresh-btn {
    background: none;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: #7c3aed;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.cl-email-refresh-btn:hover {
    background: rgba(124, 58, 237, 0.1);
}

.cl-email-refresh-btn.spinning svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cl-email-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.cl-email-filter {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, 0.2);
    background: transparent;
    color: #9ca3af;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cl-email-filter:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #c084fc;
}

.cl-email-filter.active {
    background: rgba(124, 58, 237, 0.2);
    color: #c084fc;
    border-color: #7c3aed;
}

.cl-email-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
}

.cl-email-list::-webkit-scrollbar {
    width: 4px;
}

.cl-email-list::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 2px;
}

.cl-email-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.cl-email-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cl-email-item.sent {
    border-left-color: #3b82f6;
}

.cl-email-item.received {
    border-left-color: #10b981;
}

.cl-email-item.expanded {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.2);
}

.cl-email-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.cl-email-dir {
    flex-shrink: 0;
}

.cl-email-dir.sent {
    color: #3b82f6;
}

.cl-email-dir.received {
    color: #10b981;
}

.cl-email-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.cl-email-subject {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-email-item.expanded .cl-email-subject {
    white-space: normal;
}

.cl-email-meta {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.cl-email-snippet {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-email-detail {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.cl-email-detail-headers {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 10px;
    line-height: 1.6;
}

.cl-email-detail-headers strong {
    color: #c084fc;
}

.cl-email-detail-body {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    overflow: hidden;
}

.cl-email-iframe {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    border: none;
    border-radius: 6px;
    background: #fff;
}

.cl-email-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8rem;
    color: #d1d5db;
    padding: 12px;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

/* ============================================
   Cadastro Links Screen
   ============================================ */

.cadastro-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.cadastro-screen.hidden { display: none; }

.cadastro-page {
    max-width: 700px;
    margin: 0 auto;
}

.cadastro-header {
    margin-bottom: 1.5rem;
}
.cadastro-header h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 0.25rem;
}
.cadastro-header p {
    font-size: 0.85rem;
    color: var(--slate-400);
}

.cadastro-generator {
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.cadastro-form-row {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cadastro-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--purple-300);
    margin-bottom: 0.3rem;
}

.cadastro-field input {
    width: 100%;
    background: rgba(15, 13, 30, 0.7);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--slate-100);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cadastro-field input::placeholder {
    color: var(--slate-500);
}
.cadastro-field input:focus {
    border-color: rgba(147, 51, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}
.cadastro-field input.error {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}
.cad-cnpj-hint {
    font-size: 0.72rem;
    margin-top: 4px;
    min-height: 16px;
    color: var(--slate-500);
}
.cad-cnpj-hint.loading { color: var(--color-warning); }
.cad-cnpj-hint.success { color: var(--color-success); }
.cad-cnpj-hint.error { color: var(--color-error);
}

.cadastro-gerar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #9333ea, #6366f1);
    color: white;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.cadastro-gerar-btn:hover { opacity: 0.9; }
.cadastro-gerar-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cadastro-result {
    background: rgba(30, 27, 50, 0.6);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.cadastro-result.hidden { display: none; }

.cadastro-result-label {
    font-size: 0.82rem;
    color: #4ade80;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.cadastro-result-url-row {
    display: flex;
    gap: 0.5rem;
}

.cadastro-result-url {
    flex: 1;
    background: rgba(15, 13, 30, 0.7);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    font-family: var(--font-body);
    color: var(--slate-100);
    outline: none;
}

.cadastro-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 8px;
    background: transparent;
    color: var(--purple-300);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.cadastro-copy-btn:hover {
    background: rgba(147, 51, 234, 0.1);
}

.cadastro-list-section {
    margin-top: 1rem;
}

.cadastro-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.cadastro-list-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--white);
}

.cadastro-refresh-btn {
    width: 32px; height: 32px;
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 8px;
    background: transparent;
    color: var(--purple-300);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.cadastro-refresh-btn:hover {
    background: rgba(147, 51, 234, 0.1);
}

.cadastro-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cadastro-link-card {
    background: rgba(30, 27, 50, 0.5);
    border: 1px solid rgba(147, 51, 234, 0.12);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    transition: border-color 0.2s;
}
.cadastro-link-card:hover {
    border-color: rgba(147, 51, 234, 0.3);
}
.cadastro-link-card.used {
    opacity: 0.6;
}

.cad-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.cad-card-empresa {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-100);
}

.cad-card-badges {
    display: flex;
    gap: 0.35rem;
}

.cad-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cad-badge-active {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}
.cad-badge-used {
    background: rgba(148, 163, 184, 0.15);
    color: var(--slate-400);
}
.cad-badge-expired {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.cad-card-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--slate-500);
    margin-bottom: 0.35rem;
}

.cad-card-obs {
    font-size: 0.78rem;
    color: var(--slate-400);
    margin-bottom: 0.35rem;
    font-style: italic;
}

.cad-card-url-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cad-card-url {
    flex: 1;
    font-size: 0.72rem;
    color: var(--purple-300);
    word-break: break-all;
    background: rgba(15, 13, 30, 0.5);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

.cad-card-copy {
    width: 28px; height: 28px;
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 6px;
    background: transparent;
    color: var(--purple-300);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.cad-card-copy:hover {
    background: rgba(147, 51, 234, 0.1);
}

.cadastro-loading, .cadastro-empty {
    text-align: center;
    padding: 2rem;
    color: var(--slate-400);
    font-size: 0.88rem;
}
.cadastro-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .cadastro-screen { padding: calc(var(--header-height) + 0.5rem) 0.75rem 1rem; }
    .cadastro-form-row { grid-template-columns: 1fr; }
    .cadastro-result-url-row { flex-direction: column; }
    .cadastro-copy-btn { width: 100%; justify-content: center; }
}

/* Desktop layout shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .cadastro-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .cadastro-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* ============================================
   SOLICITACAO DE VAGA SCREEN
   ============================================ */

.solic-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.solic-screen.hidden { display: none; }

.solic-page {
    max-width: 700px;
    margin: 0 auto;
}

.solic-header {
    margin-bottom: 1.5rem;
}
.solic-header h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 0.25rem;
}
.solic-header p {
    font-size: 0.85rem;
    color: var(--slate-400);
}

.solic-generator {
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.solic-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.solic-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--purple-300);
    margin-bottom: 0.3rem;
}

.solic-field input,
.solic-select {
    width: 100%;
    background: rgba(15, 13, 30, 0.7);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--slate-100);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.solic-field input::placeholder {
    color: var(--slate-500);
}
.solic-field input:focus,
.solic-select:focus {
    border-color: rgba(147, 51, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}
.solic-select.error {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.solic-select-wrapper {
    position: relative;
}

.solic-select option {
    background: #1a1535;
    color: var(--slate-100);
}

.solic-gerar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #9333ea, #6366f1);
    color: white;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.solic-gerar-btn:hover { opacity: 0.9; }
.solic-gerar-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.solic-result {
    background: rgba(30, 27, 50, 0.6);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.solic-result.hidden { display: none; }

.solic-result-label {
    font-size: 0.82rem;
    color: #4ade80;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.solic-result-url-row {
    display: flex;
    gap: 0.5rem;
}

.solic-result-url {
    flex: 1;
    background: rgba(15, 13, 30, 0.7);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    font-family: var(--font-body);
    color: var(--slate-100);
    outline: none;
}

.solic-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 8px;
    background: transparent;
    color: var(--purple-300);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.solic-copy-btn:hover {
    background: rgba(147, 51, 234, 0.1);
}

.solic-list-section {
    margin-top: 1rem;
}

.solic-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.solic-list-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--white);
}

.solic-refresh-btn {
    width: 32px; height: 32px;
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 8px;
    background: transparent;
    color: var(--purple-300);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.solic-refresh-btn:hover {
    background: rgba(147, 51, 234, 0.1);
}

.solic-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.solic-link-card {
    background: rgba(30, 27, 50, 0.5);
    border: 1px solid rgba(147, 51, 234, 0.12);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    transition: border-color 0.2s;
}
.solic-link-card:hover {
    border-color: rgba(147, 51, 234, 0.3);
}
.solic-link-card.used {
    opacity: 0.6;
}

.solic-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.solic-card-empresa {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-100);
}

.solic-card-badges {
    display: flex;
    gap: 0.35rem;
}

.solic-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.solic-badge-active {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}
.solic-badge-used {
    background: rgba(148, 163, 184, 0.15);
    color: var(--slate-400);
}
.solic-badge-inactive {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.solic-card-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--slate-500);
    margin-bottom: 0.35rem;
}

.solic-card-obs {
    font-size: 0.78rem;
    color: var(--slate-400);
    margin-bottom: 0.35rem;
    font-style: italic;
}

.solic-card-url-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.solic-card-url {
    flex: 1;
    font-size: 0.72rem;
    color: var(--purple-300);
    word-break: break-all;
    background: rgba(15, 13, 30, 0.5);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

.solic-card-copy {
    width: 28px; height: 28px;
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 6px;
    background: transparent;
    color: var(--purple-300);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.solic-card-copy:hover {
    background: rgba(147, 51, 234, 0.1);
}

.solic-loading, .solic-empty {
    text-align: center;
    padding: 2rem;
    color: var(--slate-400);
    font-size: 0.88rem;
}
.solic-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .solic-screen { padding: calc(var(--header-height) + 0.5rem) 0.75rem 1rem; }
    .solic-result-url-row { flex-direction: column; }
    .solic-copy-btn { width: 100%; justify-content: center; }
}

/* Desktop layout shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .solic-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .solic-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* ============================================
   HOME SCREEN (Dashboard)
   ============================================ */

.home-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 2rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 2rem;
    flex: 1;
    overflow-y: auto;
}

.home-screen.hidden { display: none; }

.home-container {
    max-width: 800px;
    margin: 0 auto;
}

.home-greeting {
    margin-bottom: 2rem;
    animation: cardReveal 0.6s var(--ease-out-expo);
}

.home-greeting h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--slate-100);
    margin-bottom: 0.25rem;
}

.home-nick {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-date {
    font-size: 0.95rem;
    color: var(--slate-400);
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.home-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    width: 100%;
    animation: cardReveal 0.5s var(--ease-out-expo) both;
}

.home-card:nth-child(1) { animation-delay: 0.05s; }
.home-card:nth-child(2) { animation-delay: 0.1s; }
.home-card:nth-child(3) { animation-delay: 0.15s; }
.home-card:nth-child(4) { animation-delay: 0.2s; }
.home-card:nth-child(5) { animation-delay: 0.25s; }
.home-card:nth-child(6) { animation-delay: 0.3s; }

.home-card:hover {
    border-color: var(--glass-border-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-sm);
}

.home-card:active {
    transform: translateY(0);
}

.home-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.home-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.home-card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--slate-100);
}

.home-card-desc {
    font-size: 0.8rem;
    color: var(--slate-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .home-screen { padding: calc(var(--header-height) + 1rem) 1rem 1.5rem; }
    .home-cards { grid-template-columns: 1fr; }
    .home-greeting h1 { font-size: 1.4rem; }
}

/* Desktop layout shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .home-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .home-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* ============================================
   HOME - CADASTROS PENDENTES
   ============================================ */

.hp-section {
    margin-bottom: 2rem;
    animation: cardReveal 0.5s var(--ease-out-expo);
}

.hp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hp-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--purple-400);
}

.hp-header-left h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--slate-200);
}

.hp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: var(--gradient-primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hp-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-card {
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    overflow: hidden;
    animation: cardReveal 0.5s var(--ease-out-expo) both;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.hp-card:hover {
    border-color: var(--glass-border-hover);
}

.hp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    gap: 1rem;
}

.hp-card-info {
    flex: 1;
    min-width: 0;
}

.hp-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--slate-100);
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hp-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    background: rgba(168, 85, 247, 0.15);
    color: var(--purple-300);
    letter-spacing: 0.02em;
}

.hp-chip-muted {
    background: rgba(100, 116, 139, 0.15);
    color: var(--slate-400);
}

.hp-btn-expand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.1);
    color: var(--purple-300);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
    white-space: nowrap;
    flex-shrink: 0;
}

.hp-btn-expand:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.hp-btn-expand svg {
    transition: transform 0.25s var(--ease-out-expo);
}

.hp-btn-expand.hp-expanded svg {
    transform: rotate(180deg);
}

.hp-btn-expand.hp-expanded {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--purple-500);
}

/* Form wrapper */
.hp-form-wrapper {
    border-top: 1px solid var(--glass-border);
    animation: hpFormSlide 0.3s var(--ease-out-expo);
}

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

.hp-form {
    padding: 1.25rem;
}

.hp-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.hp-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.hp-field input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 10, 40, 0.6);
    color: var(--slate-100);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.hp-field input:focus {
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.hp-field input::-webkit-inner-spin-button {
    opacity: 0.5;
}

.hp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.hp-btn-cancel {
    padding: 0.55rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--slate-400);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.hp-btn-cancel:hover {
    border-color: var(--slate-600);
    color: var(--slate-300);
}

.hp-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.hp-btn-save:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93bbfd;
}
.hp-btn-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.hp-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.5rem;
    border-radius: 10px;
    border: none;
    background: var(--gradient-primary);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    box-shadow: var(--shadow-glow-btn);
}

.hp-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 35px -4px rgba(147, 51, 234, 0.6);
}

.hp-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Success & removal animations */
.hp-card-success {
    border-color: #22c55e !important;
    box-shadow: 0 0 30px -8px rgba(34, 197, 94, 0.3);
}

.hp-card-success .hp-card-name::after {
    content: ' — Contrato enviado!';
    color: #4ade80;
    font-weight: 500;
    font-size: 0.85rem;
}

.hp-card-success .hp-form-wrapper {
    display: none !important;
}

.hp-card-removing {
    animation: hpCardRemove 0.4s var(--ease-out-expo) forwards;
}

@keyframes hpCardRemove {
    to {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
        max-height: 0;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
    }
}

/* Loading states */
.hp-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--slate-400);
}

.hp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(168, 85, 247, 0.2);
    border-top-color: var(--purple-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.hp-spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .hp-form-grid {
        grid-template-columns: 1fr;
    }
    .hp-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .hp-btn-expand {
        width: 100%;
        justify-content: center;
    }
    .hp-form-actions {
        flex-direction: column;
    }
    .hp-btn-submit, .hp-btn-cancel, .hp-btn-save {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 641px) and (max-width: 800px) {
    .hp-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Client Detail Tabs
   ============================================ */

.cl-detail-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

.cl-detail-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cl-detail-tab:hover {
    color: #c084fc;
    background: rgba(124, 58, 237, 0.05);
}

.cl-detail-tab.active {
    color: #c084fc;
    border-bottom-color: #7c3aed;
}

.cl-tab-content {
    padding: 0 16px 16px;
}

/* Emails toolbar (filters + refresh on same row) */
.cl-emails-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cl-emails-toolbar .cl-email-filters {
    margin-bottom: 0;
}

/* ============================================
   Timeline in Client Detail
   ============================================ */

.cl-timeline {
    position: relative;
    padding-left: 32px;
}

.cl-timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.cl-timeline-item.last {
    padding-bottom: 0;
}

.cl-timeline-line {
    position: absolute;
    left: -32px;
    top: 0;
    bottom: 0;
    width: 32px;
    display: flex;
    justify-content: center;
}

.cl-timeline-line::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(124, 58, 237, 0.2);
}

.cl-timeline-item.last .cl-timeline-line::before {
    display: none;
}

.cl-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 10, 40, 0.8);
    border: 2px solid rgba(124, 58, 237, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
    flex-shrink: 0;
}

.cl-timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.cl-timeline-content:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cl-timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cl-timeline-badge {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

/* Event type colors */
.cl-timeline-badge.cl-evt-candidato,
.cl-evt-candidato .cl-timeline-dot { border-color: #3b82f6; }
.cl-timeline-badge.cl-evt-candidato { background: rgba(59, 130, 246, 0.3); color: #93c5fd; }

.cl-timeline-badge.cl-evt-abertura,
.cl-evt-abertura .cl-timeline-dot { border-color: #f59e0b; }
.cl-timeline-badge.cl-evt-abertura { background: rgba(245, 158, 11, 0.3); color: #fcd34d; }

.cl-timeline-badge.cl-evt-boas_vindas,
.cl-evt-boas_vindas .cl-timeline-dot { border-color: #10b981; }
.cl-timeline-badge.cl-evt-boas_vindas { background: rgba(16, 185, 129, 0.3); color: #6ee7b7; }

.cl-timeline-badge.cl-evt-contratacao,
.cl-evt-contratacao .cl-timeline-dot { border-color: #10b981; }
.cl-timeline-badge.cl-evt-contratacao { background: rgba(16, 185, 129, 0.3); color: #6ee7b7; }

.cl-timeline-badge.cl-evt-solicitacao_reposicao,
.cl-evt-solicitacao_reposicao .cl-timeline-dot { border-color: #f97316; }
.cl-timeline-badge.cl-evt-solicitacao_reposicao { background: rgba(249, 115, 22, 0.3); color: #fdba74; }

.cl-timeline-badge.cl-evt-reposicao,
.cl-evt-reposicao .cl-timeline-dot { border-color: #8b5cf6; }
.cl-timeline-badge.cl-evt-reposicao { background: rgba(139, 92, 246, 0.3); color: #c4b5fd; }

.cl-timeline-date {
    font-size: 0.8rem;
    color: #6b7280;
    margin-left: auto;
}

.cl-timeline-subject {
    font-size: 0.88rem;
    color: #e2e8f0;
    margin-bottom: 4px;
    line-height: 1.4;
}

.cl-timeline-meta {
    font-size: 0.78rem;
    color: #6b7280;
}

.cl-thread-count {
    font-size: 0.72rem;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 8px;
    border-radius: 10px;
}

.cl-timeline-summary {
    text-align: center;
    padding: 16px;
    color: #6b7280;
    font-size: 0.85rem;
}

/* ============================================
   Portal do Cliente (Admin) — .pc-*
   ============================================ */

.pc-screen {
    padding: calc(var(--header-height) + 1rem) var(--space-8) var(--space-6);
    max-width: 1100px;
    margin: 0 auto;
    overflow-y: auto;
    flex: 1;
}

.pc-screen.hidden { display: none; }

/* Desktop layout shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .pc-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .pc-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

.pc-container { display: flex; flex-direction: column; gap: var(--space-5); }

.pc-header { display: flex; justify-content: space-between; align-items: flex-start; }
.pc-title { font-size: var(--text-2xl); font-weight: 700; color: var(--slate-50); margin: 0; }
.pc-subtitle { font-size: var(--text-sm); color: var(--slate-400); margin: 4px 0 0; }

.pc-search-section { padding: var(--space-4); border-radius: 12px; }
.pc-search-row { display: flex; gap: var(--space-3); }
.pc-search-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--slate-100);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color 0.2s;
}
.pc-search-input:focus { border-color: var(--purple-500); }
.pc-search-input::placeholder { color: var(--slate-500); }

.pc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: none;
    font-size: var(--text-sm); font-weight: 500;
    cursor: pointer; transition: all 0.15s;
    white-space: nowrap;
}
.pc-btn-primary { background: var(--gradient-primary); color: white; }
.pc-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.pc-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.pc-btn-ghost { background: transparent; color: var(--slate-300); }
.pc-btn-ghost:hover { color: white; background: rgba(255,255,255,0.06); }
.pc-btn-danger { background: rgba(239,68,68,0.15); color: #f87171; }
.pc-btn-danger:hover { background: rgba(239,68,68,0.25); }
.pc-btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.pc-btn-xs { padding: 4px 10px; font-size: 0.75rem; }

.pc-loading { display: flex; justify-content: center; padding: var(--space-8); }
.pc-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(168,85,247,0.2);
    border-top-color: var(--purple-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pc-empty { color: var(--slate-400); text-align: center; padding: var(--space-6); font-size: var(--text-sm); }

.pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.pc-card {
    padding: var(--space-4);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.pc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(147,51,234,0.15); }
.pc-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pc-card-name { font-weight: 600; color: var(--slate-100); font-size: var(--text-base); }
.pc-card-body { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.pc-card-cnpj { color: var(--slate-400); font-size: 0.82rem; font-family: monospace; }
.pc-card-razao { color: var(--slate-500); font-size: 0.78rem; }
.pc-card-footer { display: flex; gap: var(--space-3); color: var(--slate-400); font-size: 0.78rem; }

.pc-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.pc-badge-active { background: rgba(34,197,94,0.15); color: #4ade80; }
.pc-badge-pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
.pc-badge-none { background: rgba(255,255,255,0.06); color: var(--slate-400); }

.pc-btn-accent {
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.3);
}
.pc-btn-accent:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.45), rgba(139,92,246,0.45));
    color: white;
    transform: translateY(-1px);
}
.pc-detail-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--glass-border);
}
.pc-detail-info {
    flex: 1;
}
.pc-detail-header .pc-btn-ghost {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: var(--slate-200);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--glass-border);
    transition: all 0.2s;
}
.pc-detail-header .pc-btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}
.pc-detail-info h3 { margin: 0; color: var(--slate-50); font-size: var(--text-xl); }
.pc-detail-cnpj { color: var(--slate-400); font-size: 0.85rem; font-family: monospace; }
.pc-detail-razao { color: var(--slate-500); font-size: 0.82rem; }

.pc-slots-bar { padding: var(--space-4); border-radius: 12px; }
.pc-slots-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: var(--text-sm); color: var(--slate-300); }
.pc-slots-total { font-weight: 600; color: var(--slate-200); }
.pc-slots-track { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.pc-slots-fill { height: 100%; background: var(--gradient-primary); border-radius: 3px; transition: width 0.3s; }

.pc-section { margin-top: var(--space-4); }
.pc-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.pc-section-header h4 { margin: 0; color: var(--slate-200); font-size: var(--text-base); }

.pc-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--glass-border); }
.pc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pc-table th {
    padding: 10px 14px; text-align: left; font-weight: 600;
    color: var(--slate-300); background: rgba(255,255,255,0.04);
    border-bottom: 1px solid var(--glass-border); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pc-table td {
    padding: 10px 14px; color: var(--slate-200);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pc-table tr:last-child td { border-bottom: none; }
.pc-table tr:hover td { background: rgba(255,255,255,0.03); }
.pc-row-inactive td { opacity: 0.5; }

.pc-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pc-modal {
    width: 440px; max-width: 95vw;
    border-radius: 16px; padding: 0;
    overflow: hidden;
}
.pc-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--glass-border);
}
.pc-modal-header h3 { margin: 0; color: var(--slate-50); font-size: var(--text-lg); }
.pc-modal-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.pc-modal-info { color: var(--slate-300); font-size: var(--text-sm); margin: 0; }
.pc-modal-footer {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--glass-border);
}

.pc-form-group { display: flex; flex-direction: column; gap: 4px; }
.pc-form-group label { color: var(--slate-300); font-size: 0.82rem; font-weight: 500; }
.pc-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 10px 12px;
    color: var(--slate-100); font-size: var(--text-sm);
    outline: none; transition: border-color 0.2s;
}
.pc-input:focus { border-color: var(--purple-500); }
.pc-input::placeholder { color: var(--slate-500); }

.pc-error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 8px; padding: 8px 12px;
    color: #f87171; font-size: 0.82rem;
}
.pc-error.hidden { display: none; }

.pc-search-section.hidden { display: none; }
.pc-results.hidden { display: none; }
.pc-detail.hidden { display: none; }

@media (max-width: 768px) {
    .pc-screen { padding: var(--space-4); }
    .pc-grid { grid-template-columns: 1fr; }
    .pc-search-row { flex-direction: column; }
    .pc-table { font-size: 0.78rem; }
    .pc-table th, .pc-table td { padding: 8px 10px; }
}

/* ============================================
   Pendencias Screen
   ============================================ */
.pend-screen.hidden { display: none; }
.pend-screen {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    flex: 1;
    overflow-y: auto;
}

.pend-wrapper {
    padding: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.pend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pend-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pend-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin: 0;
}

.pend-count-label {
    font-size: 0.8rem;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
}

.pend-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: white;
    color: var(--text-secondary, #6b7280);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.pend-refresh-btn:hover {
    background: var(--bg-secondary, #f9fafb);
    border-color: #d1d5db;
}

.pend-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pend-loading, .pend-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.pend-empty svg {
    margin: 0 auto 0.75rem;
    display: block;
}

.pend-empty p {
    margin: 0.25rem 0;
    font-size: 1rem;
}

.pend-empty-sub {
    font-size: 0.85rem !important;
    color: #b0b8c4;
}

/* Card */
.pend-card {
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s;
    border-left: 4px solid #6366f1;
}

.pend-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pend-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pend-card-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pend-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pend-prio-urgente { background: #fef2f2; color: #dc2626; }
.pend-prio-alta { background: #fff7ed; color: #ea580c; }
.pend-prio-media { background: #fefce8; color: #ca8a04; }
.pend-prio-baixa { background: #f0fdf4; color: #16a34a; }
.pend-tipo-badge { background: #eff6ff; color: #2563eb; }

.pend-card-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

.pend-card-body {
    margin-bottom: 0.5rem;
}

.pend-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 0.4rem;
}

.pend-card-cliente {
    font-size: 0.88rem;
    color: #4b5563;
    margin: 0 0 0.3rem;
    font-weight: 500;
}

.pend-card-desc {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.pend-card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pend-card-prazo, .pend-card-contrato {
    font-size: 0.78rem;
    color: #9ca3af;
}

.pend-prazo-vencido {
    color: #dc2626 !important;
    font-weight: 600;
}

/* Action area */
.pend-action {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
.pend-info-auto {
    font-size: 0.82rem;
    color: var(--text-muted, #9ca3af);
    padding: 8px 12px;
    background: rgba(59,130,246,0.08);
    border-radius: 6px;
    margin-bottom: 6px;
}
.pend-info-date {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

.pend-cad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.pend-cad-field label {
    display: block;
    font-size: 0.72rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
    font-weight: 500;
}

.pend-cad-field input,
.pend-cad-field select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-primary, #1f2937);
    background: white;
    box-sizing: border-box;
}

.pend-cad-field input:focus,
.pend-cad-field select:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.15);
}

.pend-cad-wide {
    grid-column: span 2;
}

.pend-action-label {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.pend-action-row {
    display: flex;
    gap: 0.5rem;
}

.pend-input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-primary, #1f2937);
    transition: border-color 0.15s;
}

.pend-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.pend-input::placeholder {
    color: #b0b8c4;
}

.pend-btn-resolver {
    padding: 0.6rem 1.2rem;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pend-btn-resolver:hover {
    background: #4f46e5;
}

.pend-btn-resolver:disabled {
    background: #a5b4fc;
    cursor: not-allowed;
}

/* Sidebar badge */
.pend-sidebar-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.sidebar-nav-item {
    position: relative;
}

@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .pend-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .pend-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

@media (max-width: 768px) {
    .pend-wrapper { padding: 1rem; }
    .pend-action-row { flex-direction: column; }
    .pend-btn-resolver { width: 100%; }
}

/* ============================================
   Envio Candidatos - File Upload
   ============================================ */

.fz-file-dropzone {
    border: 2px dashed rgba(124, 58, 237, 0.4);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(124, 58, 237, 0.04);
    color: var(--text-secondary, #aaa);
}

.fz-file-dropzone:hover,
.fz-file-dropzone.dragover {
    border-color: var(--purple-300, #a78bfa);
    background: rgba(124, 58, 237, 0.10);
    color: var(--purple-300, #a78bfa);
}

.fz-file-dropzone svg {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.6;
}

.fz-file-dropzone p {
    margin: 0 0 4px;
    font-size: 0.9rem;
}

.fz-file-dropzone .fz-file-hint {
    font-size: 0.75rem;
    opacity: 0.6;
}

.fz-file-list {
    margin-top: 8px;
}

.fz-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 4px;
}

.fz-file-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fz-file-name {
    flex: 1;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #e0e0e0);
}

.fz-file-size {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}

.fz-file-remove {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.fz-file-remove:hover {
    opacity: 1;
}

.fz-file-total {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    padding: 4px 12px;
    text-align: right;
}

.fz-file-warning {
    font-size: 0.8rem;
    color: #f59e0b;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 6px;
    margin-top: 6px;
}

/* ============================================
   Timeline - DB Event Badges (Envio Candidatos)
   ============================================ */

.cl-timeline-qtd {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0;
}

.cl-qtd-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.25);
}

.cl-qtd-ok {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.cl-timeline-sla {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0;
}
.cl-timeline-sla span {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.cl-evt-candidato_db .cl-timeline-badge {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.25);
}
.cl-evt-cliente_criado .cl-timeline-badge {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.25);
}
.cl-evt-contrato_criado .cl-timeline-badge,
.cl-evt-contrato_enviado .cl-timeline-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.cl-evt-contrato_assinado .cl-timeline-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.cl-evt-boas_vindas .cl-timeline-badge {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.25);
}
.cl-evt-vaga_vinculada .cl-timeline-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ============================================
   Historico - Envio Candidatos Badge + Qtd
   ============================================ */

.historico-tipo-badge.tipo-envio_candidatos {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.25);
}

.historico-qtd-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 4px;
    background: rgba(124, 58, 237, 0.12);
    color: #a78bfa;
    margin-left: 4px;
    vertical-align: middle;
}

/* ============================================
   SLA - Candidatos info
   ============================================ */

.pz-sla-candidatos {
    font-size: 0.78rem;
    padding: 4px 0 0;
    font-weight: 500;
}

/* ============================================
   Vagas Tab - Cards & Modal
   ============================================ */

.cl-vagas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.cl-vaga-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--slate-500);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cl-vaga-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.08);
}

.cl-vaga-card.cl-vaga-status-blue { border-left-color: #3b82f6; }
.cl-vaga-card.cl-vaga-status-yellow { border-left-color: #f59e0b; }
.cl-vaga-card.cl-vaga-status-green { border-left-color: #10b981; }
.cl-vaga-card.cl-vaga-status-purple { border-left-color: #a855f7; }
.cl-vaga-card.cl-vaga-status-orange { border-left-color: #f97316; }
.cl-vaga-card.cl-vaga-status-gray { border-left-color: var(--slate-600); opacity: 0.7; }

.cl-vaga-card.cl-vaga-card-selected {
    border-color: #00d4aa;
    box-shadow: 0 0 0 1px rgba(0, 212, 170, 0.3), 0 4px 20px rgba(0, 212, 170, 0.1);
}

/* Checkbox para selecao multipla de vagas */
.cl-vaga-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 8px;
    user-select: none;
}
.cl-vaga-check-label input.cl-vaga-check {
    display: none;
}
.cl-vaga-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--slate-500);
    border-radius: 4px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.cl-vaga-checkmark::after {
    content: '';
    display: none;
    width: 5px;
    height: 10px;
    border: solid #1a1a2e;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}
.cl-vaga-check:checked + .cl-vaga-checkmark {
    background: #00d4aa;
    border-color: #00d4aa;
}
.cl-vaga-check:checked + .cl-vaga-checkmark::after {
    display: block;
}
.cl-vaga-check-label:hover .cl-vaga-checkmark {
    border-color: #00d4aa;
}

.cl-vaga-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.cl-vaga-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-100);
}

.cl-vaga-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.cl-vaga-badge.cl-vaga-status-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.cl-vaga-badge.cl-vaga-status-yellow {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.cl-vaga-badge.cl-vaga-status-green {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.cl-vaga-badge.cl-vaga-status-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.cl-vaga-badge.cl-vaga-status-orange {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}
.cl-vaga-badge.cl-vaga-status-gray {
    background: rgba(100, 116, 139, 0.15);
    color: var(--slate-400);
    border: 1px solid rgba(100, 116, 139, 0.25);
}

.cl-vaga-status-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 3px 24px 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.cl-vaga-status-select:hover { opacity: 0.85; }
.cl-vaga-status-select:disabled { opacity: 0.5; cursor: wait; }
.cl-vaga-status-select.cl-vaga-status-blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.cl-vaga-status-select.cl-vaga-status-yellow {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.cl-vaga-status-select.cl-vaga-status-green {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.cl-vaga-status-select.cl-vaga-status-purple {
    background-color: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.cl-vaga-status-select.cl-vaga-status-orange {
    background-color: rgba(249, 115, 22, 0.15);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}
.cl-vaga-status-select.cl-vaga-status-gray {
    background-color: rgba(100, 116, 139, 0.15);
    color: var(--slate-400);
    border: 1px solid rgba(100, 116, 139, 0.25);
}
.cl-vaga-status-select option {
    background: #1a1530;
    color: #e2e8f0;
}

.cl-vaga-code {
    font-size: 0.75rem;
    color: var(--slate-400);
    margin-bottom: 8px;
}

.cl-vaga-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 10px 0;
}

.cl-vaga-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-vaga-field-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-500);
    font-weight: 500;
}

.cl-vaga-field span:last-child {
    font-size: 0.85rem;
    color: var(--slate-200);
    font-weight: 500;
}

.cl-vaga-sla {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.75rem;
    color: var(--slate-400);
    padding: 8px 0 4px;
    border-top: 1px solid var(--glass-border);
    margin-top: 8px;
}

.cl-vaga-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.cl-btn-cobranca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--purple-300);
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.cl-btn-cobranca:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.35);
}

.cl-btn-cobranca:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   Financial Card (Cobranca Info Redesign)
   ============================================ */

.cl-fin-card {
    margin-top: 10px;
    padding: 14px 16px;
    background: rgba(10, 6, 20, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: border-color 0.2s ease;
}

.cl-fin-card:hover {
    border-color: var(--glass-border-hover);
}

.cl-fin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.cl-fin-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate-200);
}

.cl-fin-card-title svg {
    color: var(--purple-400);
    flex-shrink: 0;
}

/* Status badges */
.cl-fin-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.cl-fin-badge--sm {
    padding: 2px 8px;
    font-size: 0.65rem;
}

.cl-fin-badge--success {
    color: var(--color-success);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.cl-fin-badge--warning {
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.cl-fin-badge--error {
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
}

.cl-fin-badge--info {
    color: var(--color-info);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
}

.cl-fin-badge--muted {
    color: var(--slate-500);
    background: rgba(100, 116, 139, 0.06);
    border: 1px solid rgba(100, 116, 139, 0.12);
}

/* Data grid */
.cl-fin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.cl-fin-card-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-fin-card-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cl-fin-card-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate-200);
}

.cl-fin-card-value--highlight {
    color: var(--slate-50);
    font-size: 0.9rem;
}

.cl-fin-card-value--success {
    color: var(--color-success);
}

/* NFS-e section */
.cl-fin-nfse {
    padding-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.cl-fin-nfse-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-fin-nfse-row svg {
    color: var(--slate-500);
    flex-shrink: 0;
}

.cl-fin-nfse-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-400);
}

/* Actions row */
.cl-fin-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.cl-fin-action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--purple-400);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cl-fin-action-link:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
}

.cl-fin-action-link svg {
    flex-shrink: 0;
}

.cl-fin-card-actions .cl-btn-secondary {
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 8px;
    gap: 5px;
}

.cl-fin-btn--danger {
    color: var(--color-error) !important;
    border-color: var(--color-error-border) !important;
}

.cl-fin-btn--danger:hover {
    background: var(--color-error-bg) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

/* Legacy compat: hide old classes if somehow rendered */
.cl-cobranca-info { display: none; }
.cl-cobranca-link { display: none; }

/* ============================================
   Search Dropdown
   ============================================ */

.cl-search-bar--with-dropdown {
    position: relative;
}

.cl-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 380px;
    overflow-y: auto;
    background: rgba(12, 10, 26, 0.97);
    border: 1px solid var(--glass-border-hover);
    border-radius: 14px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.06);
    z-index: 500;
    padding: 6px;
    animation: cl-dd-fadeIn 0.15s ease;
}

@keyframes cl-dd-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cl-search-dropdown::-webkit-scrollbar {
    width: 4px;
}

.cl-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.cl-search-dropdown::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.15);
    border-radius: 2px;
}

.cl-dd-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cl-dd-section-title svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.cl-dd-section-count {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--slate-600);
    background: rgba(148, 163, 184, 0.06);
    padding: 1px 6px;
    border-radius: 8px;
}

.cl-dd-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.cl-dd-item:hover,
.cl-dd-item--active {
    background: rgba(168, 85, 247, 0.08);
}

.cl-dd-item--active {
    outline: 1px solid rgba(168, 85, 247, 0.2);
}

.cl-dd-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-dd-item-code {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--purple-400);
    font-family: 'SF Mono', 'Fira Code', monospace;
    flex-shrink: 0;
}

.cl-dd-item-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--slate-200);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-dd-item-sub {
    font-size: 0.72rem;
    color: var(--slate-500);
    padding-left: 0;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.cl-dd-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cl-dd-badge--active {
    color: var(--color-success);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.cl-dd-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    font-size: 0.8rem;
    color: var(--slate-500);
}

.cl-dd-empty svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.cl-dd-more {
    padding: 8px 12px;
    font-size: 0.72rem;
    color: var(--slate-600);
    text-align: center;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    margin-top: 2px;
}

/* Modal Overlay */

.cl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.cl-modal {
    background: linear-gradient(160deg, #1a1035 0%, #0f0825 100%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    width: 90%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.cl-modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate-100);
    margin: 0;
}

.cl-modal-close {
    background: none;
    border: none;
    color: var(--slate-400);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.cl-modal-close:hover {
    color: var(--slate-200);
}

.cl-modal-body {
    padding: 16px 20px 20px;
}

.cl-modal-info {
    font-size: 0.85rem;
    color: var(--slate-300);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.cl-modal-code {
    color: var(--purple-400);
    font-size: 0.78rem;
}

.cl-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cl-modal-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cl-modal-field label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-400);
    font-weight: 500;
}

.cl-modal-field input,
.cl-modal-field textarea {
    background: rgba(15, 10, 40, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    color: var(--slate-100);
    font-family: inherit;
    transition: border-color 0.2s;
}

.cl-modal-field input:focus,
.cl-modal-field textarea:focus {
    outline: none;
    border-color: var(--purple-500);
}

.cl-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* Modal Alert & Review */

.cl-modal-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fbbf24;
}

.cl-modal-desc {
    font-size: 0.85rem;
    color: var(--slate-300);
    margin: 0 0 14px;
    line-height: 1.5;
}

.cl-modal-desc strong {
    color: var(--slate-100);
}

.cl-modal-review {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(15, 10, 40, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cl-modal-review-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
}

.cl-modal-review-row span:first-child {
    color: var(--slate-500);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.cl-modal-review-row span:last-child {
    color: var(--slate-200);
}

@media (max-width: 600px) {
    .cl-vaga-grid {
        grid-template-columns: 1fr;
    }
    .cl-modal {
        width: 95%;
        max-width: none;
    }
}

/* ============================================
   PRAZOS VAGAS SCREEN
   ============================================ */
.pv-screen {
    overflow-y: auto;
    flex: 1;
    padding-top: calc(var(--header-height) + 1rem);
}
.pv-screen.hidden { display: none; }

/* Desktop sidebar shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .pv-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .pv-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

.pv-wrapper {
    padding: 0 1.5rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.pv-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.pv-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pv-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.pv-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 400;
}

.pv-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.pv-refresh-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

/* Stats Cards */
.pv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pv-stat-card {
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
}

.pv-stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.pv-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.pv-stat-vencidas {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}
.pv-stat-vencidas .pv-stat-number { color: #f87171; }
.pv-stat-vencidas .pv-stat-label { color: #fca5a5; }

.pv-stat-hoje {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}
.pv-stat-hoje .pv-stat-number { color: #fbbf24; }
.pv-stat-hoje .pv-stat-label { color: #fcd34d; }

.pv-stat-criticas {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
}
.pv-stat-criticas .pv-stat-number { color: #fb923c; }
.pv-stat-criticas .pv-stat-label { color: #fdba74; }

.pv-stat-semprazo {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.2);
}
.pv-stat-semprazo .pv-stat-number { color: #94a3b8; }
.pv-stat-semprazo .pv-stat-label { color: #cbd5e1; }

/* Filters */
.pv-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pv-filter-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.pv-filter-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

.pv-filter-active {
    background: rgba(147, 51, 234, 0.2);
    border-color: rgba(147, 51, 234, 0.4);
    color: #c4b5fd;
}

.pv-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.35rem;
}

.pv-filter-active .pv-filter-count {
    background: rgba(147, 51, 234, 0.3);
}

/* Card List */
.pv-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pv-loading {
    text-align: center;
    padding: 3rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pv-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.pv-empty p { margin: 0; font-size: 0.9rem; }

/* Vaga Card */
.pv-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: all 0.2s;
    border-left: 4px solid #64748b;
    animation: pvSlideIn 0.35s ease forwards;
    opacity: 0;
}

.pv-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

@keyframes pvSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Urgencia border colors */
.pv-urg-vencida  { border-left-color: #ef4444; }
.pv-urg-hoje     { border-left-color: #f59e0b; }
.pv-urg-critica  { border-left-color: #f97316; }
.pv-urg-alta     { border-left-color: #3b82f6; }
.pv-urg-normal   { border-left-color: #10b981; }
.pv-urg-sem      { border-left-color: #64748b; }

.pv-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.pv-card-info {
    flex: 1;
    min-width: 0;
}

.pv-card-cargo {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.pv-card-cliente {
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pv-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pv-btn-excluir {
    background: none;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 0.3rem;
    cursor: pointer;
    color: var(--slate-500);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.pv-card:hover .pv-btn-excluir {
    opacity: 1;
}

.pv-btn-excluir:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
}

.pv-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Urgencia Badges */
.pv-badge-urgencia {
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pv-urg-vencida-badge  { background: rgba(239,68,68,0.15); color: #f87171; }
.pv-urg-hoje-badge     { background: rgba(245,158,11,0.15); color: #fbbf24; }
.pv-urg-critica-badge  { background: rgba(249,115,22,0.15); color: #fb923c; }
.pv-urg-alta-badge     { background: rgba(59,130,246,0.15); color: #60a5fa; }
.pv-urg-normal-badge   { background: rgba(16,185,129,0.15); color: #34d399; }

.pv-badge-reposicao {
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.pv-urg-sem-badge      { background: rgba(100,116,139,0.12); color: #94a3b8; }

.pv-badge-status {
    padding: 0.15rem 0.55rem;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 500;
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
    white-space: nowrap;
}
.pv-select-status {
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 500;
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    outline: none;
}
.pv-select-status:hover { border-color: rgba(99,102,241,0.5); }
.pv-select-status:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
.pv-select-status option { background: #1e293b; color: #e2e8f0; }
.pv-sync-label { display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; font-size: 0.6rem; color: #64748b; margin-left: 0.3rem; }
.pv-sync-check { width: 12px; height: 12px; cursor: pointer; accent-color: #6366f1; }
.pv-sync-text { white-space: nowrap; }

/* Progress Bar */
.pv-progress {
    margin-bottom: 0.6rem;
}

.pv-progress-track {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.pv-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.pv-bar-normal  { background: linear-gradient(90deg, #10b981, #34d399); }
.pv-bar-alta    { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.pv-bar-critica { background: linear-gradient(90deg, #f97316, #fb923c); }
.pv-bar-vencida { background: linear-gradient(90deg, #ef4444, #f87171); }

.pv-progress-label {
    font-size: 0.68rem;
    color: #64748b;
}

/* Card Candidatos */
.pv-card-candidatos {
    padding: 0.6rem 0;
    border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.pv-cand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.pv-cand-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--slate-400);
}

.pv-cand-item svg {
    opacity: 0.7;
}

.pv-cand-num {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--slate-200);
}

.pv-cand-label {
    font-size: 0.75rem;
    color: var(--slate-400);
}

.pv-cand-total .pv-cand-num {
    color: var(--purple-300);
}

.pv-cand-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pv-dot-entrevista {
    background: #60a5fa;
}

.pv-dot-enviado {
    background: #34d399;
}

.pv-dot-finalista {
    background: #fbbf24;
}

.pv-cand-entrevista .pv-cand-num { color: #93bbfd; }
.pv-cand-enviado .pv-cand-num { color: #6ee7b7; }
.pv-cand-finalista .pv-cand-num { color: #fcd34d; }

/* Envios Efetivos */
.pv-card-envios {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.pv-envios-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pv-envios-info {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pv-envios-num {
    font-weight: 700;
    font-size: 0.95rem;
}

.pv-envios-label {
    font-size: 0.78rem;
    color: var(--slate-400);
}

.pv-envios-meta {
    font-size: 0.72rem;
    color: var(--slate-500);
}

.pv-envios-ajuste {
    font-size: 0.7rem;
    color: #f87171;
    opacity: 0.8;
}

.pv-btn-ajuste {
    background: none;
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    color: var(--slate-400);
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 0;
}

.pv-card:hover .pv-btn-ajuste {
    opacity: 1;
}

.pv-btn-ajuste:hover {
    color: #818cf8;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
}

/* Modal Ajuste */
.pv-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}

.pv-modal-overlay.pv-modal-visible {
    opacity: 1;
}

.pv-modal {
    background: var(--card-bg, #1e1e2e);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    width: 90%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.pv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pv-modal-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-200);
}

.pv-modal-close {
    background: none;
    border: none;
    color: var(--slate-400);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

.pv-modal-close:hover {
    color: var(--slate-200);
}

.pv-modal-body {
    padding: 1rem 1.2rem;
}

.pv-modal-info {
    font-size: 0.82rem;
    color: var(--slate-400);
    margin: 0 0 1rem;
}

.pv-modal-info strong {
    color: var(--slate-200);
}

.pv-modal-field {
    margin-bottom: 0.8rem;
}

.pv-modal-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--slate-400);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.pv-modal-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--slate-200);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.pv-modal-input:focus {
    border-color: rgba(99, 102, 241, 0.5);
}

.pv-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.pv-modal-btn-cancel {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.45rem 1rem;
    color: var(--slate-400);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pv-modal-btn-cancel:hover {
    color: var(--slate-200);
    border-color: rgba(255,255,255,0.2);
}

.pv-modal-btn-hist {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    padding: 0.45rem 1rem;
    color: #818cf8;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pv-modal-btn-hist:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.pv-modal-btn-save {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.45rem 1rem;
    color: #f87171;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pv-modal-btn-save:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.pv-modal-btn-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Historico de Envios */
.pv-hist-list {
    max-height: 300px;
    overflow-y: auto;
}

.pv-hist-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.pv-hist-item:last-child {
    border-bottom: none;
}

.pv-hist-qtd {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 32px;
    text-align: center;
}

.pv-hist-envio .pv-hist-qtd {
    color: #34d399;
}

.pv-hist-ajuste .pv-hist-qtd {
    color: #f87171;
}

.pv-hist-tipo {
    color: var(--slate-400);
    font-size: 0.75rem;
}

.pv-hist-motivo {
    color: var(--slate-300);
    font-size: 0.75rem;
    font-style: italic;
    flex: 1;
}

.pv-hist-data {
    color: var(--slate-500);
    font-size: 0.7rem;
    margin-left: auto;
}

/* Card Bottom Meta */
.pv-card-bottom {
    display: flex;
    align-items: center;
}

.pv-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.pv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #64748b;
}

.pv-meta-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* Urgencia text colors */
.pv-urg-vencida-text  { color: #f87171; font-weight: 600; }
.pv-urg-hoje-text     { color: #fbbf24; font-weight: 600; }
.pv-urg-critica-text  { color: #fb923c; font-weight: 600; }
.pv-urg-alta-text     { color: #60a5fa; }
.pv-urg-normal-text   { color: #34d399; }
.pv-urg-sem-text      { color: #94a3b8; }

/* Mobile responsivo */
@media (max-width: 640px) {
    .pv-wrapper { padding: 1rem; }
    .pv-stats { grid-template-columns: repeat(2, 1fr); }
    .pv-card-top { flex-direction: column; gap: 0.5rem; }
    .pv-card-badges { flex-direction: row; align-items: center; }
    .pv-card-meta { gap: 0.5rem; }
    .pv-title { font-size: 1.25rem; }
}

/* ========== GESTAO USUARIOS + AUDITORIA ========== */

.gu-screen-wrap, .audit-screen-wrap {
    overflow-y: auto;
    padding: calc(var(--header-height) + 1rem) var(--space-8) var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
    flex: 1;
}
.gu-screen-wrap.hidden, .audit-screen-wrap.hidden { display: none; }
.modal-overlay.hidden { display: none; }

/* Desktop sidebar shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .gu-screen-wrap,
    .main-sidebar ~ #chat-screen .audit-screen-wrap {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .gu-screen-wrap,
    .main-sidebar.collapsed ~ #chat-screen .audit-screen-wrap {
        margin-left: var(--sidebar-collapsed-width);
    }
}

.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.screen-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.data-table thead th {
    text-align: left;
    padding: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-primary);
    vertical-align: middle;
}
.data-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
.td-small { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.td-actions { white-space: nowrap; }
.td-actions .btn-sm { margin-right: 4px; margin-bottom: 2px; }

/* User cell */
.user-cell { display: flex; flex-direction: column; }
.user-nick { font-size: 0.8rem; color: var(--text-secondary); }

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-admin { background: rgba(147,51,234,0.2); color: #c084fc; }
.badge-normal { background: rgba(59,130,246,0.2); color: #93c5fd; }
.status-ativo { background: rgba(34,197,94,0.2); color: #86efac; }
.status-inativo { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* Buttons */
.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}
.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--purple-500); color: var(--purple-400); }
.btn-danger { background: rgba(239,68,68,0.2); color: #fca5a5; }
.btn-danger:hover { background: rgba(239,68,68,0.3); }
.btn-success { background: rgba(34,197,94,0.2); color: #86efac; }
.btn-success:hover { background: rgba(34,197,94,0.3); }
.btn-warning { background: rgba(234,179,8,0.2); color: #fde68a; }
.btn-warning:hover { background: rgba(234,179,8,0.3); }
.btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.modal-card {
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 1.5rem;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.modal-close {
    font-size: 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}
.modal-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.modal-body .form-group {
    margin-bottom: 1rem;
}
.modal-body .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.modal-body .form-group input,
.modal-body .form-group select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 0.9rem;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Perms grid */
.perms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}
.perm-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}
.perm-checkbox input { accent-color: var(--purple-500); }

/* Temp senha */
.temp-senha-display {
    display: block;
    padding: 12px 16px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fde68a;
    margin-top: 8px;
    user-select: all;
}

/* Audit */
.audit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.filter-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.filter-group select,
.filter-group input[type="date"] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.audit-tipo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.tipo-success { background: rgba(34,197,94,0.2); color: #86efac; }
.tipo-danger { background: rgba(239,68,68,0.2); color: #fca5a5; }
.tipo-warning { background: rgba(234,179,8,0.2); color: #fde68a; }
.tipo-info { background: rgba(59,130,246,0.2); color: #93c5fd; }
.tipo-muted { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.tipo-default { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.audit-table tbody tr { cursor: pointer; }
.audit-payload-full {
    display: none;
    margin-top: 8px;
}
.audit-row.expanded .audit-payload-full {
    display: block;
}
.audit-payload-full pre {
    background: rgba(0,0,0,0.3);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.audit-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.audit-total { font-weight: 500; }

/* Loading / empty / error states */
.loading-spinner {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.error-msg {
    text-align: center;
    padding: 2rem;
    color: #fca5a5;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .gu-screen-wrap, .audit-screen-wrap { padding: 1rem; }
    .data-table { font-size: 0.8rem; }
    .data-table thead th, .data-table tbody td { padding: 0.5rem; }
    .audit-filters { flex-direction: column; }
    .modal-body .form-row { grid-template-columns: 1fr; }
    .perms-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== TOAST SYSTEM ===== */
.toast-container {
    position: fixed; top: 1.5rem; right: 1.5rem;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
}
.toast {
    background: rgba(15, 10, 40, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 0.875rem; min-width: 260px; max-width: 420px;
    opacity: 0; transform: translateX(1.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    color: var(--slate-200);
}
.toast--visible { opacity: 1; transform: translateX(0); }
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error);   }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info    { border-left: 3px solid var(--color-info);    }
.toast-icon { font-size: 0.9rem; flex-shrink: 0; }
.toast-msg  { line-height: 1.4; }

/* ===== PAGE TRANSITION ===== */
@keyframes screenFade {
    from { opacity: 0.5; transform: translateY(4px); }
    to   { opacity: 1;   transform: translateY(0);   }
}
.screen-transition {
    animation: screenFade 0.2s ease forwards;
}

/* ===== SKELETON SCREENS ===== */
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite;
    border-radius: 6px;
}
.skeleton-row {
    display: flex; gap: 1rem; align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.skeleton-cell { height: 13px; border-radius: 4px; flex-shrink: 0; }
.skeleton-table { display: flex; flex-direction: column; }

/* ===== MICRO-INTERAÇÕES BOTÕES ===== */
.btn-primary, .btn-secondary, .btn-outline,
.btn-danger, .btn-success, .btn-warning, .btn-sm {
    transition: transform var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease),
                opacity var(--transition-fast, 0.15s ease);
}
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.btn-danger:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-warning:hover:not(:disabled) {
    transform: translateY(-1px);
}
.btn-primary:active, .btn-secondary:active,
.btn-danger:active, .btn-success:active { transform: translateY(0); }

/* ===== BACKEND LOGS ===== */
.bl-screen { display: flex; flex-direction: column; gap: 1rem; }
.bl-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.bl-trace-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.4);
    color: #fbbf24; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.8rem;
}
.bl-trace-badge button {
    background: none; border: none; color: #fbbf24; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0;
}
.bl-trace-badge.hidden { display: none; }
.bl-filters {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 1rem;
}
.bl-summary {
    display: flex; gap: 1rem; flex-wrap: wrap;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    padding: 0.75rem 1rem; font-size: 0.85rem;
}
.bl-summary.hidden { display: none; }
.bl-sum-item { color: var(--text-secondary, #94a3b8); }
.bl-sum-err strong { color: #f87171; }
.bl-sum-ok strong { color: #4ade80; }
.bl-table-wrap { overflow-x: auto; }
.bl-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.bl-table th {
    text-align: left; padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary, #94a3b8); font-weight: 500;
    white-space: nowrap;
}
.bl-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.bl-row:hover { background: rgba(255,255,255,0.03); }
.bl-row-error { background: rgba(248,113,113,0.04); }
.bl-row-error:hover { background: rgba(248,113,113,0.07); }
.bl-badge {
    display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.bl-badge-error { background: rgba(248,113,113,0.2); color: #f87171; }
.bl-badge-ok { background: rgba(74,222,128,0.15); color: #4ade80; }
.bl-badge-req { background: rgba(139,92,246,0.15); color: #a78bfa; }
.bl-badge-ext { background: rgba(251,191,36,0.15); color: #fbbf24; }
.bl-endpoint { font-size: 0.78rem; color: #a78bfa; background: rgba(139,92,246,0.1); padding: 0.1rem 0.35rem; border-radius: 4px; }
.bl-service { font-size: 0.78rem; color: #fbbf24; background: rgba(251,191,36,0.1); padding: 0.1rem 0.35rem; border-radius: 4px; }
.bl-action { font-size: 0.8rem; color: var(--text-secondary, #94a3b8); }
.bl-method { font-size: 0.75rem; color: var(--text-secondary, #94a3b8); font-family: monospace; }
.bl-duration { font-size: 0.8rem; color: var(--text-secondary, #94a3b8); white-space: nowrap; }
.bl-slow { color: #fb923c; }
.bl-error-msg { font-size: 0.78rem; color: #f87171; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-td-ts { white-space: nowrap; font-size: 0.78rem; color: var(--text-secondary, #94a3b8); }
.bl-td-error { max-width: 200px; }
.bl-btn-trace {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary, #94a3b8); padding: 0.2rem 0.5rem; border-radius: 5px;
    font-size: 0.72rem; cursor: pointer; white-space: nowrap;
}
.bl-btn-trace:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ============================================
   LOGIN ERROR
   ============================================ */
.login-error {
    color: #ef4444;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(239,68,68,0.1);
}
.login-error.hidden { display: none; }

.remember-device-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--slate-400);
    margin-bottom: 4px;
    user-select: none;
}
.remember-device-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--purple-500);
    cursor: pointer;
}

/* ============================================
   TABELAS RESPONSIVAS (MOBILE CARD LAYOUT)
   ============================================ */
@media (max-width: 768px) {
    .data-table thead,
    .audit-table thead,
    .bl-table thead { display: none; }

    .data-table tr,
    .audit-table tr,
    .bl-table tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--glass-border, #333);
        border-radius: 8px;
        padding: 12px;
        background: var(--glass-bg-light, rgba(25, 18, 60, 0.45));
    }

    .data-table td,
    .audit-table td,
    .bl-table td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border: none;
        font-size: 0.85rem;
    }

    .data-table td::before,
    .audit-table td::before,
    .bl-table td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 8px;
        color: var(--slate-400, #94a3b8);
        flex-shrink: 0;
    }

    .data-table td:empty::before,
    .audit-table td:empty::before,
    .bl-table td:empty::before { content: none; }

    .data-table td[data-label=""]::before,
    .audit-table td[data-label=""]::before,
    .bl-table td[data-label=""]::before { content: none; }

    .td-actions {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end !important;
    }
}

/* ============================================
   CONFIRM MODAL
   ============================================ */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.confirm-modal-overlay.confirm-modal-visible {
    opacity: 1;
}
.confirm-modal-card {
    max-width: 400px;
    width: 90%;
    padding: 2rem 1.75rem;
    border-radius: 20px;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-glow, 0 0 60px -10px rgba(147, 51, 234, 0.35));
}
.confirm-modal-visible .confirm-modal-card {
    transform: scale(1);
}
.confirm-modal-icon {
    margin-bottom: 1rem;
}
.confirm-modal-msg {
    color: var(--slate-200, #e2e8f0);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    white-space: pre-line;
}
.confirm-modal-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.confirm-modal-btn {
    padding: 0.65rem 1.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.confirm-modal-cancel {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: var(--slate-400, #94a3b8);
}
.confirm-modal-cancel:hover {
    background: rgba(148, 163, 184, 0.18);
    color: var(--slate-200, #e2e8f0);
}
.confirm-modal-confirm {
    background: var(--gradient-primary, linear-gradient(135deg, #a855f7, #7c3aed));
    color: white;
}
.confirm-modal-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px -4px rgba(147, 51, 234, 0.5);
}

/* ============================================
   Criar Vaga Screen
   ============================================ */

.cv-screen {
    padding: calc(var(--header-height) + 1rem) 1.5rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    overflow-y: auto;
    flex: 1;
}
.cv-screen.hidden { display: none; }

/* Desktop sidebar shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .cv-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .cv-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

.cv-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cv-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 0.25rem;
}

.cv-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

.cv-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cv-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
}

.cv-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple-400, #c084fc);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cv-form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cv-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cv-col-full { flex: 1 1 100%; }
.cv-col-8 { flex: 1 1 60%; min-width: 200px; }
.cv-col-6 { flex: 1 1 48%; min-width: 200px; }
.cv-col-4 { flex: 1 1 30%; min-width: 150px; }

.cv-form-group label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #94a3b8);
}

.cv-form-group input,
.cv-form-group select,
.cv-form-group textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-primary, #f1f5f9);
    font-family: inherit;
    transition: border-color 0.2s;
}

.cv-form-group input:focus,
.cv-form-group select:focus,
.cv-form-group textarea:focus {
    outline: none;
    border-color: var(--purple-500, #a855f7);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}

.cv-form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.cv-form-group select {
    cursor: pointer;
    appearance: auto;
}

.cv-input-with-btn {
    display: flex;
    gap: 0.5rem;
}

.cv-input-with-btn input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-primary, #f1f5f9);
    font-family: inherit;
}

.cv-input-with-btn input:focus {
    outline: none;
    border-color: var(--purple-500, #a855f7);
}

.cv-btn-search {
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    color: var(--purple-300, #d8b4fe);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.cv-btn-search:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.25);
}

.cv-btn-search:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cv-recrutei-result {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-top: 1.2rem;
}

.cv-recrutei-found {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cv-recrutei-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cv-recrutei-city {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.8rem;
}

.cv-result-error {
    color: #f87171;
    font-size: 0.8rem;
}

.cv-cliente-fixed {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 8px;
}

.cv-cliente-fixed-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
}

.cv-cliente-fixed-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    flex: 1;
}

.cv-btn-change {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s;
}

.cv-btn-change:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #f1f5f9);
}

.cv-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.cv-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--gradient-primary, linear-gradient(135deg, #a855f7, #7c3aed));
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.cv-btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px -4px rgba(147, 51, 234, 0.5);
}

.cv-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cv-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 10px;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.cv-btn-secondary:hover {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-primary, #f1f5f9);
}

.cv-spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.cv-result {
    margin-top: 1rem;
}

.cv-success {
    text-align: center;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 12px;
}

.cv-success svg {
    color: #4ade80;
    margin-bottom: 0.75rem;
}

.cv-success h3 {
    font-size: 1.2rem;
    color: #4ade80;
    margin: 0 0 0.5rem;
}

.cv-success p {
    color: var(--text-secondary, #94a3b8);
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.cv-success strong {
    color: var(--text-primary, #f1f5f9);
}

.cv-success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Vagas header with create button */
.cl-vagas-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .cv-screen {
        padding: 1rem;
    }
    .cv-form-row {
        flex-direction: column;
    }
    .cv-col-4, .cv-col-6, .cv-col-8, .cv-col-full {
        flex: 1 1 100%;
        min-width: 0;
    }
    .cv-success-actions {
        flex-direction: column;
    }
}

/* ============================================
   Sync Vagas Card (Home)
   ============================================ */

.hp-sync-card {
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(147, 51, 234, 0.15);
    transition: border-color 0.3s;
}
.hp-sync-card.hp-sync-running {
    border-color: rgba(59, 130, 246, 0.4);
}
.hp-sync-card.hp-sync-error {
    border-color: rgba(239, 68, 68, 0.4);
}
.hp-sync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.hp-sync-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--purple-400, #a78bfa);
}
.hp-sync-info > div {
    display: flex;
    flex-direction: column;
}
.hp-sync-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #f1f0f5);
}
.hp-sync-date {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    margin-top: 1px;
}
.hp-sync-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(147, 51, 234, 0.3);
    background: rgba(147, 51, 234, 0.1);
    color: var(--purple-300, #c4b5fd);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.hp-sync-btn:hover:not(:disabled) {
    background: rgba(147, 51, 234, 0.25);
    border-color: rgba(147, 51, 234, 0.5);
}
.hp-sync-btn-disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.hp-sync-progress {
    margin-top: 12px;
}
.hp-sync-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.hp-sync-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.hp-sync-bar-indeterminate {
    width: 30% !important;
    animation: syncBarSlide 1.5s ease-in-out infinite;
}
@keyframes syncBarSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
.hp-sync-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary, #9ca3af);
    margin-top: 6px;
    text-align: center;
}
.hp-sync-stats {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.hp-sync-stats span {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 10px;
    border-radius: 6px;
}
.hp-sync-warnings {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #fbbf24;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.15);
}
.hp-sync-warn-label {
    font-weight: 600;
}
.hp-sync-errors {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #f87171;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}
.hp-sync-err-item {
    padding: 2px 0;
}
@media (max-width: 480px) {
    .hp-sync-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .hp-sync-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Financeiro Screen
   ============================================ */
.fin-screen {
    overflow-y: auto;
    padding: calc(var(--header-height) + 1rem) var(--space-8) var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;
}
.fin-screen.hidden { display: none; }

@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .fin-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .fin-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

.fin-wrapper {
    padding: 0;
    animation: fadeIn 0.3s ease;
}
.fin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.fin-header-left { display: flex; align-items: baseline; gap: 1rem; }
.fin-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slate-100);
}
.fin-subtitle {
    font-size: var(--text-sm);
    color: var(--slate-400);
}
.fin-refresh-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: var(--purple-300); font-size: var(--text-sm);
    cursor: pointer; transition: all 0.2s;
}
.fin-header-actions {
    display: flex; gap: 8px; align-items: center;
}
.fin-refresh-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.35);
}
.fin-sync-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--color-success); font-size: var(--text-sm);
    cursor: pointer; transition: all 0.2s;
}
.fin-sync-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.35);
}
.fin-sync-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stats Cards */
.fin-stats {
    margin-bottom: 1.5rem;
}
.fin-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0 2px;
}
.fin-stats-periodo {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--purple-300);
}
.fin-stats-total {
    font-size: var(--text-xs);
    color: var(--slate-500);
}
.fin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.fin-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    animation: cardSlideIn 0.3s ease both;
}
.fin-stat-icon {
    opacity: 0.5;
    margin-top: 2px;
    flex-shrink: 0;
}
.fin-stat-data { flex: 1; min-width: 0; }
.fin-stat-number {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
}
.fin-stat-label {
    font-size: var(--text-xs);
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.fin-stat-detail {
    font-size: 11px;
    color: var(--slate-500);
    line-height: 1.3;
}
.fin-stat-emitido .fin-stat-number { color: var(--color-info); }
.fin-stat-recebido .fin-stat-number { color: var(--color-success); }
.fin-stat-pendente .fin-stat-number { color: var(--color-warning); }
.fin-stat-vencido .fin-stat-number { color: var(--color-error); }
.fin-stat-alerta .fin-stat-number { color: #fb923c; }
.fin-stat-emitido { border-left: 3px solid var(--color-info); }
.fin-stat-recebido { border-left: 3px solid var(--color-success); }
.fin-stat-pendente { border-left: 3px solid var(--color-warning); }
.fin-stat-vencido { border-left: 3px solid var(--color-error); }
.fin-stat-alerta { border-left: 3px solid #fb923c; }

/* Period selector */
.fin-periodo-selector {
    display: flex;
    gap: 2px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 3px;
}
.fin-periodo-btn {
    padding: 5px 12px;
    font-size: var(--text-xs);
    border: none;
    background: transparent;
    color: var(--slate-400);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    font-weight: 500;
}
.fin-periodo-btn:hover { color: var(--slate-200); background: rgba(255,255,255,0.04); }
.fin-periodo-active {
    background: var(--purple-600) !important;
    color: white !important;
}

/* Tabs */
.fin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0;
}
.fin-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    border: none; background: none;
    color: var(--slate-400);
    font-size: var(--text-sm);
    cursor: pointer; transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.fin-tab:hover { color: var(--slate-200); }
.fin-tab-active {
    color: var(--purple-300);
    border-bottom-color: var(--purple-500);
}
.fin-tab svg { opacity: 0.7; }
.fin-tab-active svg { opacity: 1; }

/* Filters */
.fin-filters {
    padding: 1rem 1.25rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    backdrop-filter: blur(var(--glass-blur));
}
.fin-filter-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.fin-filter-group {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 130px;
}
.fin-filter-group label {
    font-size: var(--text-xs);
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fin-select, .fin-input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 10, 40, 0.6);
    color: var(--slate-200);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color 0.2s;
}
.fin-select:focus, .fin-input:focus {
    border-color: var(--purple-500);
}
.fin-input[type="date"] { min-width: 140px; }
.fin-filter-clear {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.2);
    background: rgba(248, 113, 113, 0.08);
    color: var(--color-error);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
}
.fin-filter-clear:hover {
    background: rgba(248, 113, 113, 0.15);
}

/* Table */
.fin-table-wrap { min-height: 200px; }
.fin-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}
.fin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.fin-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--slate-300);
    background: rgba(15, 10, 40, 0.7);
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fin-table tbody td {
    padding: 12px 16px;
    color: var(--slate-200);
    border-bottom: 1px solid rgba(168, 85, 247, 0.06);
    vertical-align: middle;
}
.fin-table tbody tr { transition: background 0.15s; }
.fin-table tbody tr:hover { background: rgba(168, 85, 247, 0.04); }
.fin-row-vencido { background: rgba(248, 113, 113, 0.04) !important; }
.fin-row-pendente {}

.fin-vaga-code {
    display: inline-block;
    font-weight: 600;
    color: var(--purple-300);
    font-size: var(--text-xs);
    margin-right: 4px;
}
.fin-val {
    font-weight: 600;
    white-space: nowrap;
}
.fin-cnpj {
    color: var(--slate-500);
    font-size: var(--text-xs);
}

/* Badges */
.fin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.fin-badge-entrada {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.fin-badge-fechamento {
    background: rgba(168, 85, 247, 0.12);
    color: var(--purple-300);
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.fin-badge-reposicao {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
    margin-left: 4px;
    vertical-align: middle;
}

/* Status */
.fin-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 600;
}
.fin-status-pago {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}
.fin-status-pendente {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}
.fin-status-vencido {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
}
.fin-nfse-ok { color: var(--color-success); font-size: var(--text-xs); }
.fin-nfse-no { color: var(--slate-600); }

/* Dias badge */
.fin-dias {
    display: inline-block;
    padding: 2px 8px; border-radius: 6px;
    font-weight: 700; font-size: var(--text-xs);
}
.fin-dias-ok { background: var(--color-warning-bg); color: var(--color-warning); }
.fin-dias-alerta { background: rgba(249, 115, 22, 0.12); color: #fb923c; }
.fin-dias-critico { background: var(--color-error-bg); color: var(--color-error); }

.fin-link-boleto {
    color: var(--purple-300);
    text-decoration: none;
    font-size: var(--text-xs);
    transition: color 0.2s;
}
.fin-link-boleto:hover { color: var(--purple-400); text-decoration: underline; }

/* Pagination */
.fin-pagination {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 0;
    gap: 1rem;
}
.fin-page-info { font-size: var(--text-xs); color: var(--slate-400); }
.fin-page-btns { display: flex; gap: 8px; }
.fin-page-btn {
    padding: 6px 14px; border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg); color: var(--slate-300);
    font-size: var(--text-sm); cursor: pointer;
    transition: all 0.2s;
}
.fin-page-btn:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.2);
}

/* Pendencias cards */
.fin-pend-filters {
    display: flex; gap: 8px; margin-bottom: 1rem;
}
.fin-pend-filter {
    padding: 8px 16px; border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: none; color: var(--slate-400);
    font-size: var(--text-sm); cursor: pointer;
    transition: all 0.2s;
}
.fin-pend-filter:hover { color: var(--slate-200); }
.fin-pend-filter-active {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: var(--purple-300);
}

.fin-cards-list {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.fin-pend-card {
    padding: 1.25rem;
    border-radius: 12px;
    animation: cardSlideIn 0.3s ease both;
}
.fin-pend-card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 0.75rem;
}
.fin-pend-cargo {
    font-weight: 600; color: var(--slate-100);
    font-size: var(--text-base);
}
.fin-pend-cliente {
    font-size: var(--text-sm); color: var(--slate-400);
    margin-top: 2px;
}
.fin-pend-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.fin-pend-meta-item {
    font-size: var(--text-xs); color: var(--slate-500);
    display: flex; align-items: center; gap: 4px;
}
.fin-pend-valor {
    font-weight: 600; color: var(--color-warning) !important;
}
.fin-pend-card-actions {
    margin-top: 0.75rem;
    display: flex; justify-content: flex-end;
}
.fin-btn-dispensar {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.2);
    background: rgba(248, 113, 113, 0.08);
    color: var(--color-error);
    font-size: var(--text-xs); cursor: pointer;
    transition: all 0.2s;
}
.fin-btn-dispensar:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.35);
}

/* Motivo column */
.fin-motivo {
    max-width: 300px;
    font-size: var(--text-xs);
    color: var(--slate-400);
}

/* Empty state */
.fin-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1rem;
    padding: 3rem; text-align: center;
    color: var(--slate-500);
}
.fin-empty p { font-size: var(--text-sm); }
.fin-empty-success { color: var(--color-success); }
.fin-empty-success p { color: var(--slate-400); }

.fin-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; padding: 3rem;
    color: var(--slate-400); font-size: var(--text-sm);
}

/* Modal */
.fin-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0; transition: opacity 0.2s ease;
}
.fin-modal-visible { opacity: 1; }
.fin-modal {
    background: #1a1035;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    width: 90%; max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95); transition: transform 0.2s ease;
}
.fin-modal-visible .fin-modal { transform: scale(1); }
.fin-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
}
.fin-modal-header h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem; color: var(--slate-100);
}
.fin-modal-close {
    background: none; border: none;
    color: var(--slate-400); font-size: 1.5rem;
    cursor: pointer; padding: 4px 8px;
    transition: color 0.2s;
}
.fin-modal-close:hover { color: var(--slate-100); }
.fin-modal-body { padding: 1.25rem 1.5rem; }
.fin-modal-info {
    font-size: var(--text-sm); color: var(--slate-300);
    margin-bottom: 0.75rem;
}
.fin-modal-field { margin-top: 1rem; }
.fin-modal-field label {
    display: block; font-size: var(--text-sm);
    color: var(--slate-300); margin-bottom: 6px;
}
.fin-required { color: var(--color-error); }
.fin-modal-textarea {
    width: 100%; padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 10, 40, 0.6);
    color: var(--slate-200);
    font-size: var(--text-sm);
    font-family: 'Inter', sans-serif;
    resize: vertical;
    outline: none; transition: border-color 0.2s;
}
.fin-modal-textarea:focus { border-color: var(--purple-500); }
.fin-modal-hint {
    font-size: var(--text-xs); color: var(--slate-500);
    margin-top: 4px; display: block;
}
.fin-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--glass-border);
}
.fin-modal-btn-cancel {
    padding: 8px 16px; border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: none; color: var(--slate-400);
    font-size: var(--text-sm); cursor: pointer;
    transition: all 0.2s;
}
.fin-modal-btn-cancel:hover { color: var(--slate-200); }
.fin-modal-btn-confirm {
    padding: 8px 20px; border-radius: 8px;
    border: none;
    background: rgba(248, 113, 113, 0.15);
    color: var(--color-error);
    font-size: var(--text-sm); font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.fin-modal-btn-confirm:hover { background: rgba(248, 113, 113, 0.25); }
.fin-modal-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal input (text/number/date) */
.fin-modal-input {
    width: 100%; padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 10, 40, 0.6);
    color: var(--slate-200);
    font-size: var(--text-sm);
    font-family: 'Inter', sans-serif;
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.fin-modal-input:focus { border-color: var(--purple-500); }

/* Checkbox pendencias */
.fin-pend-check-label {
    display: flex; align-items: center;
    cursor: pointer; margin-right: 12px;
    flex-shrink: 0;
}
.fin-pend-check {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.fin-pend-checkmark {
    width: 22px; height: 22px;
    border: 2px solid var(--glass-border);
    border-radius: 6px;
    background: rgba(15, 10, 40, 0.4);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}
.fin-pend-checkmark::after {
    content: '';
    width: 6px; height: 11px;
    border: solid #00d4aa; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
    position: absolute; top: 2px; left: 6px;
}
.fin-pend-check:checked + .fin-pend-checkmark {
    border-color: #00d4aa;
    background: rgba(0, 212, 170, 0.12);
}
.fin-pend-check:checked + .fin-pend-checkmark::after {
    transform: rotate(45deg) scale(1);
}
.fin-pend-check:disabled + .fin-pend-checkmark {
    opacity: 0.3; cursor: not-allowed;
}
.fin-pend-check-label:has(.fin-pend-check:disabled) {
    cursor: not-allowed;
}

/* Card selectable states */
.fin-pend-card-selectable {
    transition: all 0.25s ease;
}
.fin-pend-card-selectable .fin-pend-card-top {
    display: flex; align-items: flex-start;
}
.fin-pend-card-selected {
    border-color: rgba(0, 212, 170, 0.4) !important;
    background: rgba(0, 212, 170, 0.04) !important;
    box-shadow: 0 0 0 1px rgba(0, 212, 170, 0.15);
}
.fin-pend-card-disabled {
    opacity: 0.35;
}

/* Valor nao informado */
.fin-pend-valor-na {
    color: var(--slate-600) !important;
    font-style: italic;
}

/* Cobranca bottom bar */
.fin-cobranca-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1a1a2e;
    border-top: 2px solid #00d4aa;
    padding: 12px 20px;
    z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.fin-cobranca-bar-visible {
    transform: translateY(0);
}
.fin-cobranca-resumo {
    color: var(--slate-200);
    font-size: var(--text-sm);
    font-weight: 500;
}
.fin-cobranca-btn {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: #00d4aa;
    color: #0a0a1e;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.fin-cobranca-btn:hover {
    background: #00eabc;
    box-shadow: 0 0 16px rgba(0, 212, 170, 0.3);
}

/* Modal cobranca extra */
.fin-modal-cobranca {
    max-width: 560px;
}
.fin-cob-cliente {
    margin-bottom: 1rem;
}
.fin-cob-cliente label {
    display: block; font-size: var(--text-xs);
    color: var(--slate-500); margin-bottom: 4px;
}
.fin-cob-cliente-nome {
    font-size: var(--text-base);
    color: var(--slate-100); font-weight: 600;
}
.fin-cob-vagas {
    margin-bottom: 1rem;
}
.fin-cob-vagas label {
    display: block; font-size: var(--text-xs);
    color: var(--slate-500); margin-bottom: 8px;
}
.fin-cob-vagas-list {
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px;
    background: rgba(15, 10, 40, 0.4);
}
.fin-cob-vaga-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px;
    font-size: var(--text-sm);
    color: var(--slate-300);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fin-cob-vaga-item:last-child { border-bottom: none; }
.fin-cob-vaga-check { color: #00d4aa; font-size: 16px; }
.fin-cob-vaga-cod {
    font-weight: 600; color: var(--slate-400);
    font-size: var(--text-xs); min-width: 40px;
}
.fin-cob-vaga-cargo { flex: 1; }
.fin-cob-vaga-val {
    font-size: var(--text-xs); color: var(--color-warning);
    font-weight: 500; white-space: nowrap;
}
.fin-cob-total-previsto {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 0.75rem;
    border-radius: 8px;
    background: rgba(0, 212, 170, 0.06);
    border: 1px solid rgba(0, 212, 170, 0.15);
    font-size: var(--text-sm); color: var(--slate-300);
}
.fin-cob-total-previsto strong {
    color: #00d4aa;
}
.fin-cob-nfse-options {
    display: flex; flex-direction: column; gap: 8px;
}
.fin-cob-radio {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--text-sm); color: var(--slate-300);
    cursor: pointer;
}
.fin-cob-radio input[type="radio"] {
    accent-color: #00d4aa;
}
.fin-cob-confirm-btn {
    background: rgba(0, 212, 170, 0.15) !important;
    color: #00d4aa !important;
}
.fin-cob-confirm-btn:hover {
    background: rgba(0, 212, 170, 0.25) !important;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .fin-screen { padding: 1rem; }
    .fin-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .fin-header-actions { flex-wrap: wrap; gap: 6px; }
    .fin-periodo-selector { order: -1; width: 100%; }
    .fin-filter-row { flex-direction: column; }
    .fin-filter-group { width: 100%; }
    .fin-tabs { overflow-x: auto; }
    .fin-tab span { display: none; }
    .fin-pend-card-top { flex-direction: column; gap: 8px; }
    .fin-pend-card-selectable .fin-pend-card-top { flex-direction: row; flex-wrap: wrap; }
    .fin-cobranca-bar { flex-direction: column; gap: 8px; text-align: center; }
    .fin-cob-vaga-item { flex-wrap: wrap; }
    .fin-modal-cobranca { max-width: 95%; }
}

/* ============================================
   Emails Screen — Redesigned 2026-03-15
   ============================================ */

.em-screen {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
}
.em-screen.hidden { display: none; }

@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .em-screen {
        left: var(--sidebar-width);
        transition: left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .em-screen {
        left: var(--sidebar-collapsed-width);
    }
}

/* ── Layout ── */

.em-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ── Toolbar ── */

.em-toolbar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
}

.em-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 0;
    gap: 12px;
}

.em-tabs {
    display: flex;
    gap: 4px;
}

.em-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--slate-400);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.em-tab:hover {
    color: var(--slate-200);
    background: rgba(168, 85, 247, 0.05);
}

.em-tab.active {
    color: var(--purple-300);
    border-bottom-color: var(--purple-500);
    background: rgba(168, 85, 247, 0.08);
}

.em-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.em-tab-name {
    white-space: nowrap;
}

.em-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.em-btn-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--slate-400);
    cursor: pointer;
    transition: all 0.2s ease;
}

.em-btn-refresh:hover {
    color: var(--purple-300);
    border-color: var(--purple-600);
    background: rgba(168, 85, 247, 0.1);
}

.em-btn-refresh.em-spinning svg {
    animation: em-spin 0.8s linear infinite;
}

.em-count {
    color: var(--slate-500);
    font-size: 11px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Filters row ── */

.em-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 10px;
    flex-wrap: wrap;
}

.em-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.em-filter-label {
    font-size: 11px;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.em-pill-group {
    display: flex;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
}

.em-pill {
    padding: 5px 10px;
    background: transparent;
    border: none;
    color: var(--slate-400);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    position: relative;
}

.em-pill:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--glass-border);
}

.em-pill:hover {
    color: var(--slate-200);
    background: rgba(168, 85, 247, 0.06);
}

.em-pill.active {
    color: var(--purple-300);
    background: rgba(168, 85, 247, 0.15);
}

.em-pill.active::after {
    display: none;
}

.em-search-wrap {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 5px 10px;
    transition: border-color 0.2s ease;
}

.em-search-wrap:focus-within {
    border-color: var(--purple-600);
}

.em-search-wrap svg {
    color: var(--slate-500);
    flex-shrink: 0;
}

.em-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--slate-200);
    font-size: 12px;
    font-family: inherit;
    min-width: 0;
}

.em-search-input::placeholder {
    color: var(--slate-600);
}

/* ── List Container ── */

.em-list-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.em-list-container::-webkit-scrollbar {
    width: 6px;
}
.em-list-container::-webkit-scrollbar-track {
    background: transparent;
}
.em-list-container::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 3px;
}
.em-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

.em-list {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

/* ── Date Groups ── */

.em-date-group {
    margin-bottom: 4px;
}

.em-date-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--slate-500);
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.em-date-count {
    background: rgba(100, 116, 139, 0.15);
    color: var(--slate-500);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

/* ── Email Card ── */

.em-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.em-card:hover {
    background: rgba(168, 85, 247, 0.04);
    border-left-color: rgba(168, 85, 247, 0.3);
}

.em-card:active {
    background: rgba(168, 85, 247, 0.08);
}

.em-card + .em-card {
    border-top: 1px solid rgba(51, 65, 85, 0.12);
}

.em-card-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    margin-top: 2px;
}

.em-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.em-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.em-card-sender {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-200);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.em-dir-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.em-dir-badge.em-dir-in {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

.em-dir-badge.em-dir-out {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.em-card-date {
    font-size: 11px;
    color: var(--slate-500);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.em-card-subject {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.em-card-snippet {
    font-size: 12px;
    color: var(--slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* ── Skeleton Loading ── */

.em-skeleton-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
}

.em-skeleton-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(110deg, rgba(51, 65, 85, 0.3) 30%, rgba(71, 85, 105, 0.4) 50%, rgba(51, 65, 85, 0.3) 70%);
    background-size: 200% 100%;
    animation: em-shimmer 1.5s ease-in-out infinite;
}

.em-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 2px;
}

.em-skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(110deg, rgba(51, 65, 85, 0.3) 30%, rgba(71, 85, 105, 0.4) 50%, rgba(51, 65, 85, 0.3) 70%);
    background-size: 200% 100%;
    animation: em-shimmer 1.5s ease-in-out infinite;
}

.em-sk-w60 { width: 60%; }
.em-sk-w90 { width: 90%; }
.em-sk-w40 { width: 40%; }

.em-skeleton-row:nth-child(2) .em-skeleton-line { animation-delay: 0.1s; }
.em-skeleton-row:nth-child(2) .em-skeleton-avatar { animation-delay: 0.1s; }
.em-skeleton-row:nth-child(3) .em-skeleton-line { animation-delay: 0.2s; }
.em-skeleton-row:nth-child(3) .em-skeleton-avatar { animation-delay: 0.2s; }
.em-skeleton-row:nth-child(4) .em-skeleton-line { animation-delay: 0.3s; }
.em-skeleton-row:nth-child(4) .em-skeleton-avatar { animation-delay: 0.3s; }
.em-skeleton-row:nth-child(5) .em-skeleton-line { animation-delay: 0.4s; }
.em-skeleton-row:nth-child(5) .em-skeleton-avatar { animation-delay: 0.4s; }

@keyframes em-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty State ── */

.em-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 12px;
    color: var(--slate-500);
}

.em-empty-state svg {
    opacity: 0.4;
    margin-bottom: 4px;
}

.em-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-300);
    margin: 0;
}

.em-empty-desc {
    font-size: 13px;
    color: var(--slate-500);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

/* ── Load More ── */

.em-load-more {
    padding: 16px;
    text-align: center;
}

.em-btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: var(--purple-300);
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
}

.em-btn-load-more:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: var(--purple-500);
    transform: translateY(-1px);
}

/* ── Spinner ── */

.em-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--purple-500);
    border-radius: 50%;
    animation: em-spin 0.7s linear infinite;
}

@keyframes em-spin { to { transform: rotate(360deg); } }

/* ── Email Detail ── */

.em-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: em-slide-in 0.25s ease-out;
}

@keyframes em-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

.em-detail.hidden {
    display: none;
}

.em-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-shrink: 0;
}

.em-btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--slate-300);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
}

.em-btn-back:hover {
    border-color: var(--purple-600);
    color: var(--purple-300);
    background: rgba(168, 85, 247, 0.06);
}

.em-detail-date {
    font-size: 12px;
    color: var(--slate-500);
}

.em-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.em-detail-body::-webkit-scrollbar { width: 6px; }
.em-detail-body::-webkit-scrollbar-track { background: transparent; }
.em-detail-body::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); border-radius: 3px; }

.em-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--slate-500);
    font-size: 13px;
}

.em-detail-subject-row {
    margin-bottom: 20px;
}

.em-detail-subject {
    font-size: 20px;
    font-weight: 700;
    color: var(--slate-100);
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.01em;
}

.em-detail-sender-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.em-detail-sender-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.em-detail-sender-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.em-detail-sender-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-200);
}

.em-detail-sender-addr {
    font-size: 12px;
    color: var(--slate-500);
}

.em-detail-recipients {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    line-height: 1.6;
    min-width: 0;
}

.em-detail-to-label {
    color: var(--slate-500);
    font-weight: 500;
}

.em-detail-to-value {
    color: var(--slate-400);
    word-break: break-word;
}

/* ── Detail Attachments ── */

.em-detail-attachments {
    margin-bottom: 16px;
}

.em-detail-att-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--slate-500);
    font-weight: 500;
    margin-bottom: 8px;
}

.em-detail-att-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.em-att-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--purple-300);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.em-att-chip:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: var(--purple-500);
    transform: translateY(-1px);
}

.em-att-chip svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.em-att-size {
    color: var(--slate-500);
    font-size: 11px;
}

/* ── Detail Content / Iframe ── */

.em-detail-content {
    margin-top: 16px;
}

.em-iframe {
    width: 100%;
    min-height: 200px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.4);
}

/* ── Mobile ── */

@media (max-width: 768px) {
    .em-toolbar-top {
        padding: 8px 12px 0;
    }

    .em-toolbar-filters {
        padding: 8px 12px 8px;
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .em-toolbar-filters::-webkit-scrollbar {
        display: none;
    }

    .em-filter-group {
        flex-shrink: 0;
    }

    .em-search-wrap {
        min-width: 140px;
        max-width: none;
        flex-shrink: 0;
    }

    .em-pill {
        padding: 4px 8px;
        font-size: 11px;
    }

    .em-card {
        padding: 10px 12px;
    }

    .em-card-sender {
        max-width: 140px;
    }

    .em-date-label {
        padding: 8px 12px 4px;
    }

    .em-detail-body {
        padding: 16px 12px;
    }

    .em-detail-sender-row {
        flex-direction: column;
    }

    .em-detail-recipients {
        margin-left: 0;
        text-align: left;
    }

    .em-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ============================
   Contratos Screen
   ============================ */
.ct-screen {
    padding: calc(var(--header-height) + 1rem) var(--space-8) var(--space-6) var(--space-8);
    overflow-y: auto;
    flex: 1;
}
.ct-screen.hidden { display: none; }

/* Desktop sidebar shift */
@media (min-width: 769px) {
    .main-sidebar ~ #chat-screen .ct-screen {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s var(--ease-out-expo);
    }
    .main-sidebar.collapsed ~ #chat-screen .ct-screen {
        margin-left: var(--sidebar-collapsed-width);
    }
}

.ct-wrapper { padding: 0; max-width: 900px; margin: 0 auto; }
.ct-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.ct-header-left { display: flex; align-items: center; gap: var(--space-3); }
.ct-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.ct-count-label { font-size: 0.85rem; color: var(--text-muted); }
.ct-refresh-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    color: var(--text-secondary); padding: 8px 14px; border-radius: 8px;
    cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
}
.ct-refresh-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Resumo Cards */
.ct-resumo { margin-bottom: var(--space-4); }
.ct-resumo-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-2);
}
.ct-resumo-card {
    background: var(--bg-secondary); border-radius: 8px; padding: 12px 14px;
    border: 1px solid var(--border-primary);
}
.ct-resumo-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.ct-resumo-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* Filters */
.ct-filters { margin-bottom: var(--space-3); }
.ct-filters select {
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    color: var(--text-primary); padding: 8px 12px; border-radius: 8px;
    font-size: 0.85rem; width: 100%; max-width: 280px;
}

/* List */
.ct-list { display: flex; flex-direction: column; gap: var(--space-3); }
.ct-loading, .ct-empty {
    text-align: center; padding: var(--space-6); color: var(--text-muted); font-size: 0.9rem;
}

/* Card */
.ct-card {
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: 12px; overflow: hidden; transition: border-color 0.15s;
}
.ct-card:hover { border-color: var(--accent-primary); }
.ct-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--border-primary);
}
.ct-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ct-cliente-nome { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-codigo { font-size: 0.75rem; color: var(--text-muted); }
.ct-status-badge {
    font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 20px;
    white-space: nowrap; flex-shrink: 0; margin-left: 12px;
}
.ct-card-body { padding: 14px 16px; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ct-card-info { flex: 1; min-width: 200px; }
.ct-info-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.83rem; }
.ct-info-label { color: var(--text-muted); }
.ct-info-value { color: var(--text-primary); font-weight: 500; }

/* Timeline */
.ct-card-timeline { flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; }
.ct-timeline-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.ct-timeline-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ct-timeline-done .ct-timeline-dot { background: #10b981; }
.ct-timeline-pending .ct-timeline-dot { background: #6b7280; }
.ct-timeline-label { color: var(--text-muted); }
.ct-timeline-done .ct-timeline-value { color: #10b981; }
.ct-timeline-pending .ct-timeline-value { color: var(--text-muted); font-style: italic; }

/* Footer */
.ct-card-footer {
    display: flex; gap: var(--space-2); padding: 10px 16px;
    border-top: 1px solid var(--border-primary);
}
.ct-btn {
    padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 500;
    border: none; cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.ct-btn-doc { background: #064e3b; color: #34d399; }
.ct-btn-doc:hover { background: #065f46; }
.ct-btn-signers { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-primary); }
.ct-btn-signers:hover { background: var(--bg-hover); }

/* Modal */
.ct-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.ct-modal {
    background: var(--slate-900, #0f172a); border: 1px solid var(--glass-border, rgba(168,85,247,0.12));
    border-radius: 12px; max-width: 420px; width: 90%; max-height: 80vh; overflow-y: auto;
}
.ct-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--glass-border, rgba(168,85,247,0.12));
}
.ct-modal-header h3 { margin: 0; font-size: 1rem; color: var(--slate-100, #f1f5f9); }
.ct-modal-close {
    background: none; border: none; color: var(--slate-400, #94a3b8); font-size: 1.5rem;
    cursor: pointer; padding: 0 4px;
}

@media (max-width: 600px) {
    .ct-resumo-grid { grid-template-columns: repeat(3, 1fr); }
    .ct-card-body { flex-direction: column; }
    .ct-card-timeline { flex: none; }
    .ct-card-header { flex-wrap: wrap; gap: 8px; }
}