/* premium-theme.css - Design System Profissional (V2 - Modern Blue) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    /* --- Modern Palette --- */
    /* Primary Brand: Deep Indigo/Blue */
    --primary: #4f46e5;       /* Indigo 600 */
    --primary-light: #6366f1; /* Indigo 500 */
    --primary-dark: #4338ca;  /* Indigo 700 */
    --primary-soft: #eef2ff;  /* Indigo 50 */
    
    /* Secondary / Accents */
    --accent-teal: #14b8a6;   /* Teal 500 */
    --accent-rose: #f43f5e;   /* Rose 500 */
    --accent-amber: #f59e0b;  /* Amber 500 */

    /* Neutrals (Slate) */
    --bg-page: #f1f5f9;       /* Slate 100 - Main BG */
    --bg-surface: #ffffff;    /* White - Panels/Cards */
    --bg-subtle: #f8fafc;     /* Slate 50 - Secondary BG */
    
    --text-main: #0f172a;     /* Slate 900 - Headings */
    --text-body: #334155;     /* Slate 700 - Body */
    --text-muted: #64748b;    /* Slate 500 - Metadata */
    --text-disabled: #94a3b8; /* Slate 400 */

    --border: #e2e8f0;        /* Slate 200 */
    --border-light: #f1f5f9;  /* Slate 100 */

    /* Chat Specifics */
    --chat-bg: #f3f4f6;       /* Gray 100 pattern base */
    
    /* User Bubble (Right) - Gradient */
    --msg-out-bg: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --msg-out-text: #ffffff;
    --msg-out-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);

    /* Contact Bubble (Left) - Clean White */
    --msg-in-bg: #ffffff;
    --msg-in-text: #1e293b;
    --msg-in-border: #e2e8f0;
    --msg-in-shadow: 0 2px 4px rgba(0,0,0,0.02);

    /* Dimensions & Effects */
    --radius-xl: 24px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-float: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --anim-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Reset & Typography --- */
body {
    background-color: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .section-title {
    font-family: var(--font-heading);
    color: var(--text-main);
}

/* --- Layout Structure Overrides --- */
/* The layout is handled by view.html styles, here we refine appearance */

.view-container {
    background: var(--bg-page);
}

/* Sidebar Styling - "Card" look */
.panel-side {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.02); /* Subtle separation shadow */
    z-index: 20; /* Above pattern */
}

/* Main Panel - Textured Background */
.panel-main {
    background-color: #f0f4f8; /* Light blueish gray */
    /* Subtle geometric pattern */
    background-image: 
        radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(20, 184, 166, 0.03) 0px, transparent 50%),
        linear-gradient(#e5e7eb 1px, transparent 1px), 
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    background-blend-mode: normal, normal, overlay, overlay;
    background-attachment: fixed;
}

/* --- Components --- */

/* 1. Header */
.chat-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 18px 28px;
    box-shadow: var(--shadow-sm);
}

.chat-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    gap: 24px;
    align-items: center;
}
.chat-meta strong { color: var(--text-main); font-weight: 600; }
.chat-meta span { display: flex; align-items: center; gap: 6px; }

/* 2. Messages (The Star of the Show) */
.chat-messages {
    padding: 30px;
    gap: 20px; /* Space between bubbles */
}

.msg {
    max-width: 65%;
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.5;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
    word-wrap: break-word;
}

/* Message In (Contact) */
.msg.in {
    background: var(--msg-in-bg);
    color: var(--msg-in-text);
    border: 1px solid var(--msg-in-border);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px; /* Tail bottom-left */
    align-self: flex-start;
    box-shadow: var(--shadow-sm);
}
.msg.in:hover {
    box-shadow: var(--shadow-card);
}

/* Message Out (User/AI) */
.msg.out {
    background: var(--msg-out-bg);
    color: var(--msg-out-text);
    border-radius: var(--radius-lg) var(--radius-lg) 2px var(--radius-lg); /* Tail bottom-right */
    align-self: flex-end;
    box-shadow: var(--msg-out-shadow);
    border: none;
}
.msg.out:hover {
    filter: brightness(105%);
}

/* TimeStamp inside bubble */
.msg-time {
    display: block;
    font-size: 10px;
    margin-top: 6px;
    text-align: right;
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: 0.3px;
}
.msg.in .msg-time { color: var(--text-muted); }
.msg.out .msg-time { color: rgba(255,255,255,0.85); }


/* 3. Sidebar Details (Card Style) */
.section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    margin-top: 28px;
    font-weight: 700;
    padding-left: 4px; /* Align with card content */
}
.section-title:first-child { margin-top: 0; }

.info-grid {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex; 
    flex-direction: column;
    gap: 12px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 8px;
}
.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label { color: var(--text-muted); font-weight: 500; }
.info-value { color: var(--text-main); font-weight: 600; text-align: right; }

/* Tags / Pills */
.pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: var(--anim-fast);
}

.pill.status-primary {
    background: rgba(99, 102, 241, 0.1); 
    color: var(--primary);
    border-color: rgba(99, 102, 241, 0.2);
}
.pill.status-success {
    background: rgba(20, 184, 166, 0.1);
    color: var(--accent-teal);
    border-color: rgba(20, 184, 166, 0.2);
}
.pill.status-warn {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-amber);
    border-color: rgba(245, 158, 11, 0.2);
}

/* Funnel Timings - Clean List */
.stages-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.stage-item {
    display: flex; 
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}
.stage-item:last-child { border-bottom: none; }
.stage-item:hover { background: var(--bg-subtle); }

.stage-name { font-size: 12px; color: var(--text-body); font-weight: 500; }
.stage-time { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: var(--primary); font-weight: 700; }


/* 4. Manual Chat Area */
#manualChatContainer {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
}

/* Input & Button styling already in view.html, but let's refine colors via vars if needed */
/* Since view.html uses inline styles primarily for overriding, we rely on classes added there if any. 
   Currently view.html manual input is heavily inline styled, but we can target IDs to inject theme vars if needed.
*/
#manualInput {
    border-color: var(--border) !important;
    background: var(--bg-subtle) !important;
    font-size: 14px !important;
}
#manualInput:focus {
    border-color: var(--primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

#btnSendManual svg {
    stroke: white; /* Icon color */
}

/* AI Toggle Modern */
.switch-toggle .slider {
    background-color: #cbd5e1; /* Slate 300 when off */
}
input:checked + .slider {
    background-color: var(--primary);
}
input:checked + .slider:before {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Buttons General */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--primary);
    border: none;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}
.btn-primary:hover {
    background: var(--primary-light);
    box-shadow: 0 6px 12px -2px rgba(79, 70, 229, 0.4);
}