/* ZypeLabs Mail - Modern Card Layout (MailZen Inspired with Zype Brand Colors) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg-app: #f1f4f9;
    --card-bg: #ffffff;
    --border-light: #eef2f6;
    --zype-navy: #012771;
    --zype-blue: #0055D4;
    --zype-cyan: #00A6D6;
    --zype-sky: #009FE3;
    --zype-gradient: linear-gradient(135deg, #012771 0%, #0055D4 50%, #009FE3 100%);
    --zype-gradient-hover: linear-gradient(135deg, #001d57 0%, #0047b3 50%, #0088c4 100%);
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-app);
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Zype Brand Compose Button */
.btn-zype-compose {
    background: var(--zype-gradient);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgba(0, 85, 212, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-zype-compose:hover {
    background: var(--zype-gradient-hover);
    box-shadow: 0 6px 20px 0 rgba(0, 85, 212, 0.38);
    transform: translateY(-1px);
}
.btn-zype-compose:active {
    transform: translateY(0);
}

/* Card Floating Panels (MailZen Style) */
.mailzen-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #eef2f6;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 1px 4px -1px rgba(15, 23, 42, 0.02);
}

/* Mail Row Hover & Active Transitions */
.mail-row-card {
    transition: all 0.15s ease;
    border-radius: 16px;
    border: 1px solid transparent;
}
.mail-row-card:hover {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    transform: translateY(-1px);
}
.mail-row-card.active {
    background-color: #f0f7ff;
    border-color: #bae0fd;
}

/* Sandboxed Mail Body Frame */
.mail-body-iframe {
    width: 100%;
    min-height: 480px;
    border: none;
    background: #ffffff;
    border-radius: 16px;
    color: #0f172a;
}

/* Docked Compose Window */
.compose-dock {
    position: fixed;
    bottom: 24px;
    right: 28px;
    width: 600px;
    max-width: calc(100vw - 48px);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 45px -10px rgba(0, 40, 120, 0.2), 0 0 0 1px rgba(0, 85, 212, 0.12);
    z-index: 60;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.compose-dock.minimized {
    height: 48px !important;
    overflow: hidden;
}
.compose-dock.maximized {
    width: 92vw;
    height: 90vh;
    max-width: 1100px;
    bottom: 5vh;
    right: 4vw;
}

/* Tag Pills (Social, Personal, Finance, Leads) */
.tag-social {
    background-color: #fff1f2;
    color: #e11d48;
    border: 1px solid #ffe4e6;
}
.tag-personal {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #ffedd5;
}
.tag-finance {
    background-color: #ecfdf5;
    color: #059669;
    border: 1px solid #d1fae5;
}
.tag-lead {
    background-color: #eff6ff;
    color: #0055D4;
    border: 1px solid #dbeafe;
}