/* =================================================================
   Happyly — Shared Global Styles
   Loaded once in main.py via <link>. Page-specific CSS (FullCalendar
   overrides, print styles) stays in their respective pages.
   ================================================================= */

/* ---- Scrollbar Styling ---- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- Hide modal scrollbars on mobile (users swipe instead) ---- */
@media (max-width: 639px) {
    .q-dialog__inner::-webkit-scrollbar,
    .q-dialog__inner > div::-webkit-scrollbar,
    .q-dialog__inner .q-card::-webkit-scrollbar,
    .q-dialog__inner .q-card > div::-webkit-scrollbar {
        display: none !important;
    }
    .q-dialog__inner,
    .q-dialog__inner > div,
    .q-dialog__inner .q-card,
    .q-dialog__inner .q-card > div {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}

/* ---- Hide default NiceGUI connection-lost overlay ---- */
#nicegui-dialog, .nicegui-dialog, #popup, .nicegui-error-popup {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1000 !important;
}

/* ---- Custom Happyly disconnect overlay ---- */
#happyly-disconnect-overlay {
    position: fixed;
    inset: 0;                          /* covers entire viewport edge-to-edge */
    width: 100vw;
    height: 100vh;                     /* fallback for older browsers          */
    height: 100dvh;                    /* dynamic viewport height on mobile    */
    margin: 0;
    padding: 0;
    background-color: rgba(253, 254, 255, 0.95);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    backdrop-filter: blur(5px);
}
#happyly-disconnect-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ---- Pulsing moon animation (used on loading screens, insights, etc) ---- */
.pulsing-moon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    animation: pulse-moon 2s infinite ease-in-out;
}
@keyframes pulse-moon {
    0%   { transform: scale(1);    opacity: 0.9; }
    50%  { transform: scale(1.08); opacity: 1;   }
    100% { transform: scale(1);    opacity: 0.9; }
}

/* ---- Reconnection text fade ---- */
.reconnect-text {
    margin-top: 16px;
    color: #4b5563;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    animation: fade-pulse 2s infinite ease-in-out;
}
@keyframes fade-pulse {
    0%   { opacity: 0.6; }
    50%  { opacity: 1;   }
    100% { opacity: 0.6; }
}

/* ---- Chat avatar fix ---- */
.q-message-avatar {
    object-fit: contain !important;
    object-position: center !important;
}

/* ---- Subtle float animation (empty states, loading indicators) ---- */
@keyframes float-subtle {
    0%, 100% { transform: translateY(0);    }
    50%      { transform: translateY(-8px); }
}
.animate-float-subtle {
    animation: float-subtle 2.5s ease-in-out infinite;
}

/* ---- U-13: Smooth page fade-in on every navigation ---- */
@keyframes page-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
body {
    animation: page-fade-in 0.2s ease-out;
    /* Remove the 300ms iOS tap delay on ALL pages (was previously only in chat_page.css) */
    touch-action: manipulation;
}

/* ---- U-15: Scroll button spring animation on tap ---- */
.scroll-btn-spring {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scroll-btn-spring:active {
    transform: scale(0.88);
}

/* ---- U-20: Pulsing border for unselected event type toggle ---- */
@keyframes pulse-border {
    0%, 100% { border-color: #80aedb; box-shadow: 0 0 0 0 rgba(128, 174, 219, 0.3); }
    50%      { border-color: #a3c8e8; box-shadow: 0 0 0 4px rgba(128, 174, 219, 0); }
}
.toggle-needs-attention {
    animation: pulse-border 2s ease-in-out infinite;
    border-width: 2px;
    border-style: solid;
}

/* ---- Drawer menu button touch feedback (iOS Safari fix) ----
   iOS Safari does not show :active feedback unless elements have
   an explicit touch-action and a touchstart listener (added in
   sidebar.py).  The chat_page.css wildcard rule
   (* { -webkit-tap-highlight-color: transparent }) removes the
   browser-default blue flash, so we need our own :active style.  */
.q-drawer .q-btn {
    touch-action: manipulation;        /* Removes 300ms tap delay */
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, filter 0.1s ease;
}
.q-drawer .q-btn:active {
    transform: scale(0.95) !important;
    filter: brightness(1.15);
}

/* ---- Drawer always on top of Conversation Map ----
   The conversation map dialog uses z-index 5000.
   Force the Quasar drawer and its backdrop above that
   so the sidebar always renders on top when both are open. */
.q-drawer {
    z-index: 6000 !important;
}
.q-drawer__backdrop {
    z-index: 5999 !important;
}

/* ---- Login modal: compact on small screens, spacious on sm+ ---- */
.login-logo {
    width: 42px;
    height: 42px;
}
@media (min-width: 640px) {
    .login-logo {
        width: 68px;
        height: 68px;
        margin-bottom: 4px;
    }
}
/* Shrink Quasar input height on mobile to save vertical space */
@media (max-width: 639px) {
    .login-input .q-field__control {
        min-height: 40px !important;
    }
}