/* ==========================================================================
   style/inboxstyle.css - MailAI Edition (Optimized & Cached)
   ========================================================================== */

/* ── 1. BASE INBOX LAYOUT OVERRIDES ─────────────────────────────────────── */
.inbox-app *::-webkit-scrollbar { width: 6px; height: 6px; }
.inbox-app *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.feed-container { scroll-behavior: smooth; }

/* ── 2. EMAIL CARDS & FEED ──────────────────────────────────────────────── */
.email-card { transition: all 0.15s ease; border-left: 3px solid transparent; }
.email-card:hover { border-left-color: #3b82f6; background-color: #f8fafc; transform: translateX(2px); }
.email-card.selected { background-color: #eff6ff; border-left-color: #3b82f6; }
.vip-glow { box-shadow: 0 0 8px rgba(234, 179, 8, 0.5); }
.highlight { background-color: #fef08a; padding: 0 2px; border-radius: 2px; font-weight: bold; }

/* ── 3. CHAT BUBBLES & THREADS ──────────────────────────────────────────── */
.bubble-received { background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #64748b; border-radius: 0 12px 12px 12px; }
.bubble-sent { background: #eff6ff; border: 1px solid #bfdbfe; border-right: 4px solid #3b82f6; border-radius: 12px 0 12px 12px; }
.thread-line { position: absolute; left: 24px; top: 40px; bottom: -20px; width: 2px; background: #e2e8f0; z-index: 0; }
.thread-item:last-child .thread-line { display: none; }

/* ── 4. STATUS BADGES ───────────────────────────────────────────────────── */
.status-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; }
.status-new { background: #fee2e2; color: #ef4444; }
.status-open { background: #fef08a; color: #a16207; }
.status-awaiting { background: #e0e7ff; color: #4338ca; }
.status-closed { background: #dcfce7; color: #166534; }
.status-bin { background: #f1f5f9; color: #64748b; }

/* ── 5. NAVIGATION & DROPDOWNS ──────────────────────────────────────────── */
.nav-btn { position: relative; }
.nav-btn.active { background-color: #1e293b; color: white; border-left: 3px solid #3b82f6; font-weight: 600; }
.nav-btn.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #3b82f6; border-radius: 0 4px 4px 0; }
.filter-btn.active { background-color: #3b82f6; color: white; border-color: #3b82f6; }

/* Fixed malformed Tailwind syntax in dropdown */
.dropdown-menu { 
    display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; width: 12rem; 
    background: white; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    border: 1px solid #e2e8f0; z-index: 50; 
}
.dropdown-menu.show { display: block; animation: fadeIn 0.15s ease-out; }

/* ── 6. UI ELEMENTS & MODALS ────────────────────────────────────────────── */
.toggle-checkbox:checked { right: 0; border-color: #3b82f6; }
.toggle-checkbox:checked + .toggle-label { background-color: #3b82f6; }

#compose-modal { transition: opacity 0.2s ease-out; }
#compose-modal > div:last-child { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#compose-modal.hidden { pointer-events: none; }
#compose-modal.hidden > div:last-child { transform: translateY(20px) scale(0.95); }

.html-wrapper { width: 100%; border: none; overflow: hidden; background: white; border-radius: 8px; border: 1px solid #e2e8f0; }

/* Fixed syntax in attachment pill */
.attachment-pill { display: inline-flex; align-items: center; padding: 4px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 11px; font-weight: 600; color: #475569; transition: all 0.2s; cursor: pointer; text-decoration: none; }
.attachment-pill:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); }
.attachment-icon { width: 12px; height: 12px; margin-right: 4px; color: #64748b; }

/* ── 7. ANIMATIONS ──────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spinner { border: 3px solid rgba(59,130,246,0.1); width: 24px; height: 24px; border-radius: 50%; border-left-color: #3b82f6; animation: spin 1s linear infinite; }

/* ── 8. MARKDOWN RENDERER ───────────────────────────────────────────────── */
.prose pre { background-color: #f8fafc; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; border: 1px solid #e2e8f0; }
.prose code { background-color: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.875em; color: #ef4444; }
.prose pre code { background-color: transparent; padding: 0; color: inherit; }
.prose blockquote { border-left: 4px solid #e2e8f0; padding-left: 1rem; color: #64748b; font-style: italic; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.prose a { color: #3b82f6; text-decoration: underline; }
.prose a:hover { color: #2563eb; }

/* ── 9. RESPONSIVE MOBILE BEHAVIOR ──────────────────────────────────────── */
.reading-pane { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@media (max-width: 768px) {
    .reading-pane { position: fixed; inset: 0; z-index: 50; transform: translateX(100%); background: white; }
    .reading-pane.active { transform: translateX(0); }
    .hide-on-mobile { display: none; }
}

/* ── 10. LEGACY TABLE / BASIC STYLES (Preserved for safe fallbacks) ─────── */
.inbox-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; padding: 40px 20px; min-height: 85vh; }
.inbox-container { max-width: 1400px; margin: 0 auto; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.page-header h1 { font-size: 1.5rem; margin: 0; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.header-right { display: flex; align-items: center; gap: 15px; }
.btn-billing { text-decoration: none; color: #667eea; border: 1px solid #667eea; padding: 8px 15px; border-radius: 8px; font-weight: 600; font-size: 0.9em; transition: all 0.2s; background: transparent; }
.btn-billing:hover { background: #667eea; color: white; }
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.stat-card { background: white; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; text-align: center; }
.stat-card h3 { font-size: 0.85rem; color: #64748b; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .val { font-size: 1.8rem; font-weight: 700; color: #1e293b; }
.stat-card.has-failed { border-color: #fca5a5; background: #fef2f2; }
.table-container { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; background: white; }
.table-inbox { width: 100%; border-collapse: collapse; min-width: 900px; }
.table-inbox th { background: #f8fafc; padding: 12px 15px; text-align: left; font-size: 0.85rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0; }
.table-inbox td { padding: 14px 15px; border-bottom: 1px solid #e2e8f0; color: #334155; font-size: 0.95rem; vertical-align: top; }
.table-inbox tr:hover { background: #f1f5f9; }
.note-cell { max-width: 300px; color: #64748b; font-size: 0.9em; line-height: 1.4; max-height: 80px; overflow: hidden; position: relative; }
.note-cell::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.phone-cell { font-family: monospace; color: #059669; background: #ecfdf5; padding: 2px 6px; border-radius: 4px; }
.subject-cell { font-weight: 600; color: #1e293b; display: block; margin-bottom: 4px; }
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75em; font-weight: 700; text-transform: uppercase; }
.badge-high { background: #fee2e2; color: #ef4444; }
.badge-low { background: #dcfce7; color: #166534; }
.cost-negative { color: #ef4444; font-weight: 700; }
.upgrade-blur-row { filter: blur(5px); user-select: none; opacity: 0.5; pointer-events: none; }
.upgrade-overlay { text-align: center; padding: 20px; background: #fff7ed; border: 1px solid #ffedd5; color: #c2410c; border-radius: 8px; margin-bottom: 20px; }
.upgrade-overlay a { color: #ea580c; font-weight: bold; text-decoration: underline; }
.empty-state { text-align: center; padding: 50px 20px; color: #94a3b8; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.btn-page { padding: 6px 12px; border: 1px solid #cbd5e1; background: white; border-radius: 6px; color: #475569; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-page:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.btn-page:disabled { opacity: 0.5; cursor: not-allowed; }
.page-info { font-size: 0.9em; color: #64748b; font-weight: 500; }
/* ── 11. SPLIT PANE RESIZER ─────────────────────────────────────────────── */
.resizer-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px; /* Hangs perfectly over the border */
    width: 6px;
    cursor: col-resize;
    z-index: 40;
    background-color: transparent;
    transition: background-color 0.2s;
}
.resizer-handle:hover, .resizer-handle:active {
    background-color: #3b82f6; /* Turns blue when you grab it */
}
/* ── TIMER ANIMATIONS ───────────────────────────────────────────────────── */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── TIMER BUTTONS (matches tracker hero exactly) ───────────────────────── */
.btn-hero-start,
.btn-hero-stop {
    border: none;
    padding: 0 22px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s;
    white-space: nowrap;
    color: #fff;
    line-height: 1;
}
.btn-hero-start {
    background: #16a34a;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
}
.btn-hero-start:hover  { background: #15803d; }
.btn-hero-start:active { transform: scale(0.97); }
.btn-hero-start:disabled { opacity: 0.65; cursor: not-allowed; }

.btn-hero-stop {
    background: #dc2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.btn-hero-stop:hover  { background: #b91c1c; }
.btn-hero-stop:active { transform: scale(0.97); }
.btn-hero-stop:disabled { opacity: 0.65; cursor: not-allowed; }

/* Running state pill — same height as buttons */
.badge-running-pill {
    background: #fef08a;
    color: #713f12;
    padding: 0 18px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.3);
}