/* ============================================================
   DIALED — Enhanced Interactions CSS
   ============================================================ */


/* ============================================================
   CURSOR SPOTLIGHT
   A warm, subtle radial glow that follows the mouse
   ============================================================ */

.cursor-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(240, 242, 240, 0.09) 35%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}


/* ============================================================
   GLASS SHEEN — cursor-tracking highlight
   CSS custom properties --sheen-x and --sheen-y set by JS
   ============================================================ */

.topbar,
.calendar-container,
.journal-page,
.archive-table {
    --sheen-x: 50%;
    --sheen-y: 0%;
}

.topbar::before,
.calendar-container::before,
.journal-page::before,
.archive-table::before {
    background: radial-gradient(
        ellipse 220px 120px at var(--sheen-x) var(--sheen-y),
        rgba(255, 255, 255, 0.45),
        transparent 80%
    ) !important;
    transition: background 0.05s linear;
    z-index: 5;
    pointer-events: none;
}



/* ============================================================
   TODAY PULSE RING
   ============================================================ */

.today-pulse {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1.5px solid rgba(50, 50, 50, 0.25);
    animation: todayRingPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* Place relative to the day-number */
.calendar-day.today {
    position: relative;
}

.calendar-day.today .day-number {
    position: relative;
    z-index: 1;
}

@keyframes todayRingPulse {
    0%   { opacity: 0.6; transform: scale(1); }
    50%  { opacity: 0.15; transform: scale(1.35); }
    100% { opacity: 0.6; transform: scale(1); }
}


/* ============================================================
   WORD COUNT BADGE
   ============================================================ */

.word-count-badge {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(230, 231, 228, 0.6);
    color: #aaa;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4px;
    transition: color 0.25s ease, background 0.25s ease;
    user-select: none;
}

.word-count-badge.pulse {
    animation: wordCountPulse 0.35s ease;
}

@keyframes wordCountPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); color: #555; }
    100% { transform: scale(1); }
}


/* ============================================================
   AUTO-EXPANDING TEXTAREA
   ============================================================ */

.entry-text {
    /* Override fixed height from style.css — let JS control it */
    max-height: none !important;
    resize: none !important;
    transition: height 0.15s ease;
}


/* ============================================================
   UNIFIED MAGNET TRANSITION
   All magnetised elements share this spring-back.
   The JS sets transform on mousemove; this handles the
   smooth return and the visual hover/active states.
   ============================================================ */

/* Spring-back when cursor leaves */
.nav-button,
.icon-button,
.back-button,
.danger-button,
.secondary-button,
.brand,
#imageUploadButton,
.calendar-day:not(.empty),
.archive-row {
    will-change: transform;
    transition:
        transform 0.55s cubic-bezier(.2,.8,.2,1),
        background 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        padding-left 0.22s ease !important;
}

/* While cursor is over — snap instantly to follow */
.nav-button:hover,
.icon-button:hover,
.back-button:hover,
.danger-button:hover,
.secondary-button:hover,
.brand:hover,
#imageUploadButton:hover,
.calendar-day:not(.empty):hover,
.archive-row:hover {
    transition:
        transform 0.08s linear,
        background 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        padding-left 0.22s ease !important;
}

/* Press — instant compress, then spring back */
.nav-button:active,
.icon-button:active,
.back-button:active,
.danger-button:active,
.secondary-button:active,
.brand:active,
#imageUploadButton:active,
.calendar-day:not(.empty):active,
.archive-row:active {
    transition: transform 0.08s ease !important;
}

/* Calendar day hover glow (separate from transform) */
.calendar-day:not(.empty):hover {
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.9) inset,
        0 12px 28px rgba(40, 45, 50, 0.09) !important;
    z-index: 2;
}


/* ============================================================
   ENTRY DOT POP ANIMATION
   ============================================================ */

@keyframes entryDotPop {
    0%   { opacity: 0; transform: scale(0.7) translateY(4px); }
    60%  { transform: scale(1.06) translateY(-1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}


/* ============================================================
   ARCHIVE ROW HOVER — enhanced slide
   ============================================================ */

.archive-row {
    transition:
        background 0.22s ease,
        padding-left 0.22s ease,
        box-shadow 0.22s ease !important;
}

.archive-row:hover {
    background: rgba(255, 255, 255, 0.72) !important;
    padding-left: 26px !important;
    box-shadow: inset 3px 0 0 rgba(50,50,50,0.12);
}


/* ============================================================
   VIEW TRANSITION — ensure views can animate out
   ============================================================ */

.view {
    will-change: opacity, transform;
}


/* ============================================================
   TOPBAR SCROLL RESPONSE
   ============================================================ */

.topbar {
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease !important;
}


/* ============================================================
   MONTH LABEL TRANSITION — (set by JS)
   ============================================================ */

#calendarMonth {
    transition: opacity 0.22s ease;
    will-change: opacity;
}


/* ============================================================
   JOURNAL PAGE — focus glow
   ============================================================ */

.entry-title:focus {
    opacity: 1 !important;
}

.journal-page:focus-within {
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.95) inset,
        0 25px 75px rgba(40, 45, 50, 0.1),
        0 8px 25px rgba(40, 45, 50, 0.055) !important;
    transition: box-shadow 0.4s ease;
}


/* ============================================================
   SAVE STATUS — animated saved indicator
   ============================================================ */

.save-status {
    transition: opacity 0.4s ease, color 0.4s ease !important;
}

.save-status.saving {
    color: #888;
    animation: savingDots 1s ease infinite;
}

.save-status.saved {
    color: #aaa;
}

@keyframes savingDots {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}


/* ============================================================
   ICON BUTTONS — enhanced hover
   ============================================================ */

.icon-button {
    transition:
        background 0.22s ease,
        transform 0.22s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.22s ease !important;
}

.icon-button:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.1) !important;
}

.icon-button:active {
    transform: scale(0.9) !important;
    transition-duration: 0.08s !important;
}


/* ============================================================
   BRAND MARK — enhanced spin-on-hover
   ============================================================ */

.brand-mark {
    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.3s ease !important;
}

.brand:hover .brand-mark {
    transform: rotate(-8deg) scale(1.08) !important;
}


/* ============================================================
   NAV BUTTON — active indicator shimmer
   ============================================================ */

.nav-button.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: rgba(30,30,30,0.25);
    animation: activeSlideIn 0.3s cubic-bezier(.2,.8,.2,1);
}

@keyframes activeSlideIn {
    from { width: 0; opacity: 0; }
    to   { width: 16px; opacity: 1; }
}


/* ============================================================
   DROP ZONE — dragover pulse
   ============================================================ */

.image-drop-zone.dragover {
    animation: dropZonePulse 0.8s ease infinite alternate;
}

@keyframes dropZonePulse {
    from {
        border-color: rgba(100,101,99,0.6);
        background: rgba(255,255,255,0.45);
    }
    to {
        border-color: rgba(60,62,60,0.85);
        background: rgba(255,255,255,0.62);
    }
}


/* ============================================================
   CALENDAR CONTAINER — hover lift
   ============================================================ */

.calendar-container:hover {
    box-shadow:
        0 1px 1px rgba(255,255,255,0.95) inset,
        0 28px 70px rgba(40,45,50,0.09),
        0 8px 22px rgba(40,45,50,0.045) !important;
    transition: box-shadow 0.4s ease;
}


/* ============================================================
   PAGE HEADER — stagger children
   ============================================================ */

.page-header .eyebrow {
    animation: headerEnter 0.45s ease both;
}
.page-header h1 {
    animation: headerEnter 0.5s 0.06s ease both;
}
.page-header .subtitle {
    animation: headerEnter 0.55s 0.12s ease both;
}


/* ============================================================
   REDUCED MOTION — override all new animations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .cursor-spotlight,
    .today-pulse,
    .paint-splash-svg {
        display: none !important;
    }

    .calendar-day:not(.empty) {
        will-change: auto;
    }

    .word-count-badge.pulse {
        animation: none !important;
    }
}

/* ============================================================
   DIALED — DIALedAI ROBOT
   Minimal floating journal assistant
   ============================================================ */

.archive-robot {
    position: fixed;

    right: 24px;
    bottom: 22px;

    width: 62px;
    height: 62px;

    padding: 0;
    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}


/* ------------------------------------------------------------
   HOVER
------------------------------------------------------------ */

.archive-robot:hover {
    transform: translateY(-3px) scale(1.03);
}

.archive-robot:active {
    transform: scale(0.96);
}


/* ------------------------------------------------------------
   ROBOT HEAD
------------------------------------------------------------ */

.robot-head {
    position: relative;

    width: 48px;
    height: 42px;

    border-radius: 14px;

    background: var(--surface, #f5f5f5);

    border: 1px solid var(
        --border,
        rgba(0, 0, 0, 0.12)
    );

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.09);

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ------------------------------------------------------------
   FACE
------------------------------------------------------------ */

.robot-face {
    position: relative;

    width: 36px;
    height: 27px;

    border-radius: 9px;

    background: var(--text, #181818);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}


/* ------------------------------------------------------------
   EYES
------------------------------------------------------------ */

.robot-eye {
    position: relative;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #ffffff;

    overflow: hidden;
}

.robot-pupil {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #181818;

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.07s linear;
}


/* ------------------------------------------------------------
   SIMPLE MOUTH
------------------------------------------------------------ */

.robot-mouth {
    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 8px;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.55);
}


/* ------------------------------------------------------------
   SIMPLE ANTENNA
------------------------------------------------------------ */

.robot-antenna {
    position: absolute;

    left: 50%;
    top: 1px;

    width: 1px;
    height: 7px;

    transform:
        translateX(-50%);

    background: var(
        --border,
        rgba(0, 0, 0, 0.22)
    );
}

.robot-antenna::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -3px;

    width: 5px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: var(--text, #181818);
}


/* ------------------------------------------------------------
   SIMPLE EARS
------------------------------------------------------------ */

.robot-ear {
    position: absolute;

    top: 16px;

    width: 3px;
    height: 8px;

    border-radius: 3px;

    background: var(
        --border,
        rgba(0, 0, 0, 0.18)
    );
}

.robot-ear-left {
    left: -3px;
}

.robot-ear-right {
    right: -3px;
}


/* ------------------------------------------------------------
   MESSAGE BUBBLE
------------------------------------------------------------ */

.archive-robot::after {
    content:
        "I am DialedAI. Ask me anything about your journal :)";

    position: absolute;

    right: 56px;
    bottom: 8px;

    width: 205px;

    padding: 10px 13px;

    border-radius: 12px;

    background: var(
        --surface,
        #ffffff
    );

    color: var(
        --text,
        #181818
    );

    border: 1px solid var(
        --border,
        rgba(0, 0, 0, 0.10)
    );

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.08);

    font-size: 12px;
    line-height: 1.4;

    text-align: left;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(5px)
        scale(0.97);

    transform-origin: right center;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* ------------------------------------------------------------
   SHOW MESSAGE ON HOVER
------------------------------------------------------------ */

/* ------------------------------------------------------------
   MESSAGE VISIBILITY
------------------------------------------------------------ */

.archive-robot:hover::after,
.archive-robot.robot-intro::after {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0)
        scale(1);
}


/* ------------------------------------------------------------
   SEARCH FEEDBACK
------------------------------------------------------------ */

.archive-robot.robot-searching .robot-head {
    transform: scale(1.04);
}

.archive-robot.robot-searching {
    animation:
        robotSearchPulse 0.4s ease;
}

@keyframes robotSearchPulse {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }

    100% {
        opacity: 1;
    }

}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 700px) {

    .archive-robot {
        right: 14px;
        bottom: 14px;

        width: 56px;
        height: 56px;
    }

    .robot-head {
        width: 44px;
        height: 38px;
    }

    .robot-face {
        width: 33px;
        height: 25px;
    }

    .archive-robot::after {
        right: 50px;
        bottom: 6px;

        width: 180px;

        font-size: 11px;
    }

}