@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Deep Space Palette - Restored Dark Roots */
    --bg-color: #111825; /* #02040a */
    --bg-surface: #111825;
    --primary-color: #06b6d4; /* Cyan */
    --secondary-color: #d946ef; /* Magenta */
    --accent-color: #8b5cf6; /* Violet */

    --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #d946ef 100%);
    --surface-gradient: linear-gradient(180deg, rgba(3, 7, 18, 0.7) 0%, rgba(3, 7, 18, 0.9) 100%);

    /* Glassmorphism - Darker and more depth */
    --glass-bg: rgba(3, 7, 18, 0.7);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-highlight: rgba(255, 255, 255, 0.03);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
    --backdrop-blur: blur(12px);

    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;

    /* Alias for backward compatibility */
    --text-color: var(--text-primary);

    /* Animations */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Component Colors */
    --card-bg: rgba(3, 7, 18, 0.7);
    --input-bg: rgba(255, 255, 255, 0.03);
    --shadow-neumorphic: 0 8px 32px 0 rgba(0, 0, 0, 0.6);

    /* Chat Specific */
    --chat-bg: rgba(15, 23, 42, 0.6);
    --msg-agent-bg: rgba(59, 130, 246, 0.1);
    --msg-agent-border: rgba(59, 130, 246, 0.2);
    --msg-agent-text: #f8fafc;
    --msg-support-bg: rgba(16, 185, 129, 0.15);
    --msg-support-border: rgba(16, 185, 129, 0.3);
    --msg-support-text: #f8fafc;
    /* System = naranja (#f97316) */
    --msg-system-bg: rgba(249, 115, 22, 0.15);
    --msg-system-border: rgba(249, 115, 22, 0.35);
    --msg-system-text: #fdba74;
    --msg-system-accent: #f97316;
    /* Tool calls = morado */
    --msg-tool-bg: rgba(168, 85, 247, 0.12);
    --msg-tool-border: rgba(168, 85, 247, 0.35);
    --msg-tool-text: #e9d5ff;
    --msg-tool-accent: #a855f7;
    /* Transfer agents = azul celeste */
    --msg-transfer-bg: rgba(56, 189, 248, 0.12);
    --msg-transfer-border: rgba(56, 189, 248, 0.35);
    --msg-transfer-text: #bae6fd;
    --msg-transfer-accent: #38bdf8;
    --msg-user-bg: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --msg-user-text: white;
    --sidebar-card-bg: rgba(3, 7, 18, 0.8);
    --sidebar-text-label: #64748b;
    --sidebar-text-value: #f8fafc;
    --input-area-bg: #030712;

    /* Dashboard Specific */
    --item-bg: rgba(255, 255, 255, 0.01);
    --item-bg-hover: rgba(255, 255, 255, 0.02);
    --heading-gradient: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
}

:root[data-theme="light"] {
    --bg-color: #f8fafc;
    --bg-surface: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-highlight: rgba(0, 0, 0, 0.05);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    --card-bg: rgba(255, 255, 255, 0.8);
    --input-bg: rgba(0, 0, 0, 0.05);
    --surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);

    /* Chat Specific Light */
    --chat-bg: rgba(15, 23, 42, 0.6);
    --msg-agent-bg: #e0f2fe;
    --msg-agent-border: #bae6fd;
    --msg-agent-text: #0f172a;
    --msg-support-bg: #dcfce7;
    --msg-support-border: #bbf7d0;
    --msg-support-text: #0f172a;
    /* System = naranja (#f97316) */
    --msg-system-bg: #ffedd5;
    --msg-system-border: #fed7aa;
    --msg-system-text: #9a3412;
    --msg-system-accent: #f97316;
    /* Tool calls = morado */
    --msg-tool-bg: #f3e8ff;
    --msg-tool-border: #e9d5ff;
    --msg-tool-text: #6b21a8;
    --msg-tool-accent: #a855f7;
    /* Transfer agents = azul celeste */
    --msg-transfer-bg: #e0f2fe;
    --msg-transfer-border: #bae6fd;
    --msg-transfer-text: #075985;
    --msg-transfer-accent: #0ea5e9;
    --msg-user-bg: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --msg-user-text: white;
    --sidebar-card-bg: #ffffff;
    --sidebar-text-label: #64748b;
    --sidebar-text-value: #0f172a;
    --input-area-bg: #ffffff;

    /* Dashboard Specific Light */
    --item-bg: rgba(0, 0, 0, 0.03);
    --item-bg-hover: rgba(0, 0, 0, 0.05);
    --heading-gradient: linear-gradient(135deg, #0f172a 0%, #475569 100%);
}

html,
body {
    font-family: 'Manrope', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

    /* background-color: #000000; */
    color: var(--text-primary);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Global Background Mesh */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(circle at 15% 50%, rgba(6, 182, 212, 0.12), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(217, 70, 239, 0.12), transparent 25%);
    pointer-events: none;
    z-index: -1;
}

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

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Utilities */
.glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--backdrop-blur);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

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

/* Login Styles Updated */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: transparent;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 3rem;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.form-control, select, .form-select {
    background: var(--input-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary) !important;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: var(--transition-fast);
    font-size: 1rem;
    width: 100%; /* Ensure full width by default */
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Select Specifics */
select, .form-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 16px 12px;
    padding-right: 3rem !important; /* Space for arrow */
    cursor: pointer;
    color-scheme: dark; /* Forces browser native popup to be dark */
}

select option, .form-select option {
    background-color: #030712; /* Darker background for options */
    color: #f8fafc;
}

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

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.form-control:focus, select:focus, .form-select:focus {
    background-color: var(--glass-highlight); /* Use background-color to preserve image */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
    outline: none;
}

select:focus, .form-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2306b6d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;
    background-size: 30px;
}

.btn-primary {
    background: var(--primary-gradient);
    border: none;
    border-radius: 12px;
    padding: 1rem 3rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.3);
    min-width: 200px;
    cursor: pointer;
    color: #fff;
    transition: var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(6, 182, 212, 0.4);
}

.btn-small {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    min-width: auto;
    box-shadow: none;
}

.btn-danger {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.login-header, .login-footer {
    text-align: center;
}

.login-footer {
    margin-top: 2rem;
}

/* Action Buttons (Global) */
.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
}

.action-btn.with-text {
    width: auto;
    padding: 0 1rem;
    gap: 0.5rem;
}

.action-btn.neon-green {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.1);
}

.action-btn.neon-green:hover {
    background: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.action-btn.neon-blue {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}

.action-btn.neon-blue:hover {
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.action-btn.neon-yellow {
    color: #facc15;
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.2);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.1);
}

.action-btn.neon-yellow:hover {
    background: rgba(250, 204, 21, 0.2);
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.3);
    color: #fde047;
}

.action-btn.neon-red {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}


/* Blazor Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; /* HEADER: Hidden by default! */
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: black;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Fixes for badges and neon-cyan */
.action-btn.neon-cyan {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.1);
}

.action-btn.neon-cyan:hover {
    background: rgba(6, 182, 212, 0.2);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.badge-static {
    position: initial !important;
    transform: none !important;
}

/* =========================================
   Chat.razor Styles (Moved from Scoped CSS)
   ========================================= */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100dvh; /* Modern dynamic viewport height */
    width: 100%; /* Use full width */
    margin: 0;
    padding: 0;
    position: relative;
    background: var(--bg-color);
    overflow: hidden; /* Prevent container from scrolling */
}

.chat-container::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.chat-container::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.25) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* Header */
.chat-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 10;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
}

.logo-area h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    margin: 0;
    background: linear-gradient(135deg, #06b6d4 0%, #d946ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Header Actions & Status */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-indicator {
    font-size: 0.85rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    background: rgba(30, 41, 59, 0.5);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.active {
    background-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    animation: pulse 2s infinite;
}

.status-dot.waiting {
    background-color: #f59e0b;
    box-shadow: 0 0 10px #f59e0b;
    animation: pulse 2s infinite;
}

.status-dot.support {
    background-color: #10b981;
    box-shadow: 0 0 10px #10b981;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Messages Area */
.messages-area {
    flex: 1; /* Take up all available space */
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-behavior: smooth;
    z-index: 1;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-behavior: smooth;
    z-index: 1;
}

.messages-area::-webkit-scrollbar { width: 6px; }
.messages-area::-webkit-scrollbar-track { background: transparent; }
.messages-area::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

.scroll-to-bottom {
    position: absolute;
    right: 1.5rem;
    bottom: 6rem; /* Adjusted for input area height */
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    opacity: 0.9;
}

.scroll-to-bottom:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(6, 182, 212, 0.35);
    opacity: 1;
}

.scroll-to-bottom:active {
    transform: scale(0.98);
}

.scroll-to-bottom svg {
    width: 20px;
    height: 20px;
}

/* Message Bubbles */
.message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.message-wrapper.agent, .message-wrapper.support-agent {
    align-self: flex-start;
}

.message-wrapper.user {
    align-self: flex-end;
    align-items: flex-end;
}

.message-bubble-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.message-bubble {
    padding: 1rem 1.5rem;
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.agent .message-bubble {
    background: #1e3a8a; /* Consistent Blue */
    color: white;
    border-bottom-left-radius: 4px;
}

.support-agent .message-bubble {
    background: rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-bottom-left-radius: 4px;
    color: #f1f5f9;
}

.user .message-bubble {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

/* Slice 13a — fallback auto-inyectado cuando un adjunto inbound no se pudo procesar
   (ej. STT falló). Se pinta en gris atenuado para que no se confunda con un texto
   real del contacto. Sobrescribe el fondo del remitente (user/agent). */
.message-bubble.auto-fallback {
    background: rgba(100, 116, 139, 0.18) !important;
    color: #cbd5e1 !important;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    font-style: italic;
    box-shadow: none;
}

/* Slice 13e — contenedor que saca la tarjeta de audio FUERA del bubble azul/verde.
   Se alinea debajo del bubble respetando la dirección (izq/der) del message-row.
   Importante: los rows usan clases *-row (ver MessageStyleHelper.GetRowClass). */
.message-audio-outside {
    margin-top: .5rem;
    width: 100%;
    display: flex;
}

.user-row .message-audio-outside { justify-content: flex-end; }
.agent-row .message-audio-outside,
.support-row .message-audio-outside,
.zoho-widget-row .message-audio-outside,
.zoho-cliq-row .message-audio-outside { justify-content: flex-start; }

/* Slice 13e — tarjeta de audio con estilo neón cian/magenta (STT inbound / TTS outbound). */
.att-audio-card {
    background: #0b1120;
    border-radius: 12px;
    padding: .55rem .75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    cursor: pointer;
    transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
    min-width: 280px;
    max-width: 360px;
    position: relative;
    overflow: hidden;
}

.att-audio-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, var(--neon-1) 0%, var(--neon-2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .85;
}

.att-audio-inbound {
    --neon-1: #22d3ee;   /* cian neón */
    --neon-2: #6366f1;   /* indigo */
    box-shadow: 0 0 14px rgba(34, 211, 238, .25), inset 0 0 0 1px rgba(34, 211, 238, .08);
}

.att-audio-outbound {
    --neon-1: #f472b6;   /* rosa neón */
    --neon-2: #a855f7;   /* violet */
    box-shadow: 0 0 14px rgba(244, 114, 182, .25), inset 0 0 0 1px rgba(244, 114, 182, .08);
}

.att-audio-card:hover {
    transform: translateY(-1px);
}

.att-audio-inbound:hover {
    box-shadow: 0 0 22px rgba(34, 211, 238, .5), inset 0 0 0 1px rgba(34, 211, 238, .2);
}

.att-audio-outbound:hover {
    box-shadow: 0 0 22px rgba(244, 114, 182, .5), inset 0 0 0 1px rgba(244, 114, 182, .2);
}

.att-audio-head {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.att-audio-dir-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.att-audio-inbound .att-audio-dir-icon {
    background: rgba(34, 211, 238, .18);
    color: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, .35);
}

.att-audio-outbound .att-audio-dir-icon {
    background: rgba(244, 114, 182, .18);
    color: #f472b6;
    box-shadow: 0 0 8px rgba(244, 114, 182, .35);
}

.att-audio-meta {
    flex: 1;
    min-width: 0;
}

.att-audio-title {
    color: #f1f5f9;
    font-size: .88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-audio-sub {
    color: #94a3b8;
    font-size: .75rem;
}

.att-audio-player {
    width: 100%;
    height: 28px;
    outline: none;
}
.att-audio-player::-webkit-media-controls-panel {
    background: rgba(15, 23, 42, .7);
}

.att-audio-trans {
    padding: .5rem .7rem;
    background: rgba(30, 41, 59, .6);
    border-radius: 6px;
    border-left: 2px solid rgba(96, 165, 250, .5);
}

.att-audio-trans-text {
    color: #e2e8f0;
    font-size: .82rem;
    line-height: 1.45;
}

.att-audio-trans-text i {
    color: #60a5fa;
    margin-right: .25rem;
}

.att-audio-trans-meta {
    font-size: .72rem;
    font-weight: 500;
    margin-top: .3rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.system-message-wrapper {
    align-self: center;
    max-width: 90%;
    margin-bottom: 1rem;
}

.system-message-text {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: rgba(120, 53, 15, 0.3);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #fdba74;
    border-radius: 12px;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
}

.message-time {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}

/* Input Area */
.input-area {
    padding: 1.5rem;
    background: rgba(3, 7, 18, 0.8);
    border-top: 1px solid var(--glass-border);
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    .messages-area,
    .chat-body {
        padding: 1.5rem;
        padding-bottom: 7.5rem;
    }

    .scroll-to-bottom {
        right: 1rem;
        bottom: 6.5rem;
    }

    .input-area {
        padding: 1.25rem;
    }
}

.input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.6);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.input-wrapper:focus-within {
    border-color: #06b6d4;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
    transform: translateY(-1px);
    background: #0b1220;
}

.input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0;
    color: #e2e8f0;
    font-size: 1rem;
    outline: none;
}

.input-wrapper input::placeholder {
    color: #64748b;
}

.input-wrapper button {
    background: #3b82f6;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.35);
}

.input-wrapper button:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.input-wrapper button:active:not(:disabled) {
    transform: translateY(0);
}

.input-wrapper button:disabled {
    background: #1e293b;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}

/* Fix for double input border in login/register forms */
.input-wrapper .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0; /* Align text properly inside wrapper */
}

.input-wrapper .form-control:focus {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Fix for autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #111825 inset !important; /* Matches --bg-surface */
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.input-wrapper button svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Buttons & Status Tags */
.btn-sm { padding: 0.25rem 0.65rem; font-size: 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
.btn-outline { background: transparent; border: 1px solid rgba(6, 182, 212, 0.5); color: #06b6d4; }
.btn-outline:hover { background: rgba(6, 182, 212, 0.1); }

.btn-admin {
    display: inline-flex;
    align-items: center;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.3);
    text-decoration: none;
    margin-right: 0.5rem;
}

.btn-admin:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

.logout-form {
    display: inline;
    margin: 0;
}

.btn-logout {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}

.review-status {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: rgba(217, 70, 239, 0.1);
    border: 1px solid rgba(217, 70, 239, 0.3);
    border-radius: 20px;
    color: #d946ef;
    font-weight: 600;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 1rem 1.25rem !important;
    align-items: center;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Review Button */
.review-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    color: #94a3b8;
    z-index: 5;
}

.message-bubble-container:hover .review-btn {
    opacity: 1;
}

.review-btn:hover { background: #06b6d4; color: white; }

/* Responsive */
@media (max-width: 1024px) {
    .chat-container { max-width: 100%; width: 100%; }
    .debug-overlay { display: none; }
}