:root {
    --app-main-theme-text-color: #f8ad9d; /* Warm Peach */
    --app-main-theme-bg-color: #f7a897; /* Warm Peach */

    --cp-clay-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15), 0px 5px 10px rgba(0, 0, 0, 0.05), inset 2px 2px 6px rgba(255, 255, 255, 0.6), inset -2px -2px 8px rgba(0, 0, 0, 0.15);
    --cp-clay-shadow-hover: 0px 30px 50px rgba(0, 0, 0, 0.2), 0px 10px 15px rgba(0, 0, 0, 0.1), inset 3px 3px 8px rgba(255, 255, 255, 0.8), inset -3px -3px 10px rgba(0, 0, 0, 0.2);
    --cp-card-gradient: linear-gradient(145deg, #ff6b00, #ff9e00);

    --pro-clay-shadow: 0px 20px 40px rgba(0, 0, 0, 0.25), 0px 5px 10px rgba(0, 0, 0, 0.05), inset 2px 2px 6px rgba(255, 255, 255, 0.6), inset -2px -2px 8px rgba(0, 0, 0, 0.15);
    --pro-clay-shadow-hover: 0px 40px 60px rgba(0, 0, 0, 0.3), 0px 10px 20px rgba(0, 0, 0, 0.1), inset 3px 3px 8px rgba(255, 255, 255, 0.8), inset -3px -3px 10px rgba(0, 0, 0, 0.2);
    --pro-grad-monthly: linear-gradient(145deg, #a1a1aa, #d4d4d8); /* Silver */
    --pro-grad-annual: linear-gradient(145deg, #fbbf24, #f59e0b); /* Gold */
}

html, body {
	background: #e7e0e0;
	/* Ensure body doesn't bounce weirdly when scrolling on iOS */
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

body { 
	font-family: 'Outfit', 
	sans-serif; 
}

h1, h2, h3, .serif { 
	font-family: 'DM Serif Display', serif; 
}

.bg-zinc-custom { background-color: #27272a; } /* Zinc 800 */
.text-peach-custom { color: var(--app-main-theme-text-color);  } 
.bg-peach-custom { background-color: var(--app-main-theme-bg-color); }
.bg-peach-light { background-color: #ffeadb; }

.border-peach-custom { border-color: var(--app-main-theme-bg-color); }
.hover\:border-peach-custom:hover { border-color: var(--app-main-theme-bg-color) !important; }
.hide-scrollbars::-webkit-scrollbar { display: none; }

/* iOS Safe Area Padding */
.pt-safe {
    padding-top: max(2rem, env(safe-area-inset-top));
}
.pb-safe {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
}


/* Card Load Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; /* Ensures they stay hidden before the animation starts */
}

/* Convert faint grey borders to a slightly thicker, warm peachy-zinc */
.border-zinc-100 {
    border-color: #F0E6EA !important; 
    border-width: 2px !important;
}

/* Give small shadows a softer wider peachy-purple tint to lift cards off the background */
.shadow-sm {
    box-shadow: 0 4px 14px 0 rgba(156, 121, 164, 0.08) !important; 
}

/* Ensure inputs and text areas match the new warm aesthetic */
input.border-zinc-100, textarea.border-zinc-100 {
    border-width: 1px !important; /* Keep inputs slightly thinner than cards */
    background-color: #FCFAFB !important;
}

.fc { font-family: inherit; }
.fc-theme-standard td, .fc-theme-standard th { border-color: #F0E6EA !important; }

/* Calendar Mobile Responsiveness */
@media (max-width: 768px) {
    .fc-header-toolbar {
        flex-direction: column !important;
        gap: 1rem;
    }
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .fc-toolbar-title {
        font-size: 1.5rem !important; 
    }
}

/* Better Button Styling */
.fc .fc-button {
    background-color: #18181b !important;
    border-color: #18181b !important;
    border-radius: 0.5rem !important; /* Softer rounded corners */
    text-transform: capitalize !important; /* Removes the harsh uppercase */
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.8rem !important;
    transition: all 0.2s ease !important;
}

/* Fix the Button Groups so they don't have weird gaps */
.fc .fc-button-group > .fc-button {
    border-radius: 0 !important;
}
.fc .fc-button-group > .fc-button:first-child {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}
.fc .fc-button-group > .fc-button:last-child {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

/* Hover States */
.fc .fc-button-primary:hover, .fc .fc-button-active {
    background-color: #f8ad9d !important;
    border-color: #f8ad9d !important;
    color: #18181b !important;
}

.fc-event {
    background-color: #ffeadb !important; /* peach-light bg */
    border: 1px solid #f8ad9d !important; /* peach-custom border */
    color: #27272a !important; /* zinc text for readability */
    border-radius: 0.5rem !important;
    padding: 2px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s !important;
    margin-bottom: 2px !important;
}

.fc-event:hover {
    background-color: #f8ad9d !important; /* solid peach on hover */
    color: white !important;
}

/* Force inner text containers to inherit our dark text rather than defaulting to white */
.fc-event-main, .fc-event-title, .fc-event-time { 
    color: inherit !important; 
    font-family: 'Inter', sans-serif; 
}

/* List View Specific Styling */
.fc-list-day-cushion {
    background-color: #FCFAFB !important; /* Match the header backgrounds */
}

.fc-list-event-dot {
    border-color: #f8ad9d !important; /* Peach dot */
}

/* Force the table row to turn peach and the text to turn white on hover */
.fc-list-event:hover td {
    background-color: #f8ad9d !important; 
    color: white !important;
}

/* Ensure any links/titles inside the hovered list row also turn white */
.fc-list-event:hover td a, 
.fc-list-event:hover td .fc-list-event-time {
    color: white !important; 
}

/* Calendar Body Styling */
.fc-toolbar-title { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.5rem !important; 
    color: #18181b; 
}
.fc-col-header-cell { 
    padding: 12px 0; 
    background-color: #FCFAFB; 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: #a1a1aa; 
}
.fc-daygrid-day-number { 
    color: #52525b; 
    font-weight: 600; 
    padding: 8px !important; 
}
.fc-day-today { 
    background-color: rgba(248, 173, 157, 0.1) !important; /* Faint true peach highlight for today */
}


.notebook-binder {
    background: #FCFAFB;
    box-shadow: 
        inset 40px 0 40px -40px rgba(0,0,0,0.15),
        inset -40px 0 40px -40px rgba(0,0,0,0.15);
}

.lined-paper {
    line-height: 2.2rem !important; 
    
    background-image: linear-gradient(rgba(248, 173, 157, 0.8) 1px, transparent 1px) !important;
    background-size: 100% 2.2rem !important;
    background-position: 0 1.95rem !important;
    padding-top: 0px !important;
    
    overflow-y: hidden;
}

/* Onload Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Onload Animation */
@keyframes fadeInHeader {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-nav {
    animation: fadeInHeader 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Nav Item Hover Animation */
/* This handles the 1.02x scale on hover for individual links */
nav a, nav button {
    transition: transform 0.2s ease, color 0.2s ease !important;
}

nav a:hover, nav button:hover {
    transform: scale(1.02);
}

/* Card Expansion Transition */
.invoice-card {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(0px);
}

.invoice-card.expanded {
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.95);
    border-color: #f8ad9d; /* Peach */
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Ensure details are visible on expand */
.invoice-card .invoice-details:not(.hidden) {
    display: block;
    opacity: 1;
}

/* Print/PDF Helper */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}

.ql-toolbar { border-radius: 12px 12px 0 0; background: #fafafa; border-color: #e4e4e7 !important; }
.ql-container { border-radius: 0 0 12px 12px; border-color: #e4e4e7 !important; min-height: 500px; font-family: 'Inter', sans-serif; font-size: 15px; }
.ql-editor { padding: 2rem; }

.cp-text-layer { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 1; transform: translateY(-5%); font-family: 'Inter', sans-serif; }
.cp-small-title { font-size: clamp(32px, 4vw, 64px); font-weight: 900; color: #1a1a1a; letter-spacing: -1px; margin-bottom: -1vw; z-index: 5; }
.cp-massive-text { display: flex; flex-direction: column; align-items: center; line-height: 0.75; font-size: clamp(120px, 22vw, 300px); font-weight: 900; color: #928f88; letter-spacing: -0.06em; text-transform: lowercase; }
.cp-word-1 { z-index: 2; }
.cp-word-2 { z-index: 4; }

.cp-cards-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.cp-card-wrapper { position: absolute; pointer-events: auto; will-change: transform; }

.cp-clay-card { width: 100%; height: 100%; background: var(--cp-card-gradient); border-radius: 16px; box-shadow: var(--cp-clay-shadow); border: 2px solid rgba(255, 255, 255, 0.4); overflow: hidden; position: relative; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; }
.cp-clay-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--cp-card-gradient); mix-blend-mode: multiply; opacity: 0.5; z-index: 2; pointer-events: none; }
.cp-clay-card img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; filter: contrast(1.1) brightness(1.05); transition: transform 0.4s ease; }

.cp-clay-card:hover { box-shadow: var(--cp-clay-shadow-hover); transform: scale(1.08) translateZ(20px); }
.cp-clay-card:hover img { transform: scale(1.1); }

.cp-card-wrapper:hover { z-index: 100 !important; }

.cp-c1 { top: 32%; left: 2%; width: 13vw; height: 18vw; min-width: 120px; min-height: 160px; z-index: 1; }
.cp-c2 { top: 48%; left: 24%; width: 13vw; height: 18vw; min-width: 120px; min-height: 160px; z-index: 2; }
.cp-c3 { top: 35%; left: 46%; width: 13vw; height: 18vw; min-width: 120px; min-height: 160px; z-index: 1; }
.cp-c4 { top: 45%; left: 67%; width: 13vw; height: 18vw; min-width: 120px; min-height: 160px; z-index: 3; }

@media (max-width: 768px) {
    .cp-cards-layer { display: block; }
    
    /* FIXED MOBILE ALIGNMENT: Unified on the exact same horizontal baseline */
    .cp-c1 { top: 45%; left: 4%;  min-width: 80px; min-height: 110px; }
    .cp-c2 { top: 45%; left: 27%; min-width: 80px; min-height: 110px; }
    .cp-c3 { top: 45%; left: 51%; min-width: 80px; min-height: 110px; }
    .cp-c4 { top: 45%; left: 75%; min-width: 80px; min-height: 110px; }
    
    /* Shrink the background text slightly so it doesn't overwhelm the smaller cards */
    .cp-massive-text { font-size: 80px; } 
    .cp-small-title { font-size: 24px; margin-bottom: -10px; }
}

.pro-text-layer { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 1; transform: translateY(-5%); font-family: 'Inter', sans-serif; pointer-events: none; }
.pro-small-title { font-size: clamp(32px, 4vw, 64px); font-weight: 900; color: #1a1a1a; letter-spacing: -1px; margin-bottom: -1vw; z-index: 5; }
.pro-massive-text { display: flex; flex-direction: column; align-items: center; line-height: 0.75; font-size: clamp(100px, 20vw, 250px); font-weight: 900; color: #e4e4e7; letter-spacing: -0.06em; text-transform: lowercase; }

.pro-cards-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.pro-card-wrapper { position: absolute; pointer-events: auto; will-change: transform; }

.pro-clay-card { width: 100%; height: 100%; border-radius: 2rem; box-shadow: var(--pro-clay-shadow); border: 2px solid rgba(255, 255, 255, 0.5); overflow: hidden; position: relative; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; }
.pro-clay-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; opacity: 0.3; z-index: 2; pointer-events: none; }

.pro-clay-card.monthly { background: var(--pro-grad-monthly); }
.pro-clay-card.monthly::before { background: var(--pro-grad-monthly); }

.pro-clay-card.annual { background: var(--pro-grad-annual); }
.pro-clay-card.annual::before { background: var(--pro-grad-annual); }

.pro-clay-card:hover { box-shadow: var(--pro-clay-shadow-hover); transform: scale(1.05) translateZ(30px); border: 2px solid rgba(255, 255, 255, 0.9); }
.pro-card-wrapper:hover { z-index: 100 !important; }

/* Layout: 2 Massive Centered Cards */
.pro-c1 { top: 25%; left: 15%; width: 28vw; height: 38vw; min-width: 300px; min-height: 420px; z-index: 1; }
.pro-c2 { top: 35%; left: 55%; width: 28vw; height: 38vw; min-width: 300px; min-height: 420px; z-index: 2; }

@media (max-width: 768px) {
    .pro-c1 { top: 15%; left: 10%; width: 80vw; height: auto; min-height: 250px; }
    .pro-c2 { top: 55%; left: 10%; width: 80vw; height: auto; min-height: 250px; }
    .pro-massive-text { font-size: 70px; margin-top: 20px; } 
}

/* Reaction Bar */
.message-bubble-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    will-change: transform;
}

.chat-message-bubble, 
.reaction-bar-wrapper, 
.chat-dots-menu {
    transform-style: preserve-3d;
    will-change: transform;
}

.reaction-bar-wrapper {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #F0E6EA;
    border-radius: 9999px;
    padding: 6px 12px;
    display: flex;
    gap: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    transform-origin: bottom left;
    animation: pop-bounce-anim 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    white-space: nowrap;
}

/* Auto-align to the right for outgoing messages to prevent screen overflow */
.message-outgoing .reaction-bar-wrapper {
    left: auto;
    right: 0;
    transform-origin: bottom right;
}

.reaction-emoji-btn {
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-emoji-btn:hover {
    transform: scale(1.4) translateY(-3px);
}

/* Embedded Reaction Badge on the message itself */
.reaction-display-badge {
    position: absolute;
    bottom: -10px;
    right: 10px;
    background: #ffffff;
    border: 1px solid #F0E6EA;
    border-radius: 9999px;
    padding: 2px 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    cursor: pointer;
}

.message-outgoing .reaction-display-badge {
    right: auto;
    left: 10px;
}


@media (max-width: 768px) {
    /* Force injected tabs into a sleek, swipeable one-line nav */
    #app-content .max-w-7xl > .flex:not(.flex-col) {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 12px 16px !important;
        margin: 0 !important;
        background: white;
        border-bottom: 1px solid #f4f4f5;
    }
    #app-content .max-w-7xl > .flex:not(.flex-col)::-webkit-scrollbar { display: none; }
    #app-content .max-w-7xl > .flex:not(.flex-col) > button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    /* Force Chat Grid to fill the rest of the screen exactly without scrolling */
    #app-content .max-w-7xl > .grid { 
        display: flex; 
        flex-direction: column; 
        flex: 1; 
        min-height: 0;
        gap: 0 !important; 
    }
    #app-content .max-w-7xl > .grid > div { 
        flex: 1; 
        min-height: 0; 
        display: flex; 
        flex-direction: column; 
        border-radius: 0 !important; /* Make it flush with phone edges */
        border: none !important;
    }
}