/* ============================================================
Lucky Dream — Staff UI Enhancement Layer (enhance.css)
Purely ADDITIVE polish: animations, shadows, depth, labels.
------------------------------------------------------------
TO UNDO EVERYTHING:
1. Delete the line in staff/index.html
2. Delete this file (enhance.css)
Nothing in styles.css / redesign.css / app.js is touched, so
removing this file restores the exact previous look.
============================================================ */
:root{
--ez:cubic-bezier(.22,.61,.36,1);
--ez-out:cubic-bezier(.16,1,.3,1);
--ez-pop:cubic-bezier(.34,1.56,.64,1);
--dur:.18s;
--lift:0 6px 18px rgba(0,0,0,.12);
--lift-lg:0 14px 34px rgba(0,0,0,.20);
--glow:0 6px 18px color-mix(in srgb,var(--primary) 42%,transparent);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--lift:0 8px 22px rgba(0,0,0,.45);--lift-lg:0 16px 40px rgba(0,0,0,.60)}}
:root[data-theme="dark"]{--lift:0 8px 22px rgba(0,0,0,.45);--lift-lg:0 16px 40px rgba(0,0,0,.60)}
/* ---- global smooth transitions -------------------------------------- */
button,select,input,textarea,a,
.conversation-card,.icon-button,.composer-button,.tap-button,
.header-avatar,.label-chip,.pane-tabs button,.media-filter button,
.theme-card,.send-button,dialog{
transition:background-color var(--dur) var(--ez),color var(--dur) var(--ez),
border-color var(--dur) var(--ez),box-shadow var(--dur) var(--ez),
transform .2s var(--ez-out),filter var(--dur) var(--ez);
}
/* ---- keyframes ------------------------------------------------------- */
@keyframes dialogIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,18px) scale(.95)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes popIn{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes shimmer{100%{background-position:200% 0}}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 40%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
/* ---- structural depth ----------------------------------------------- */
.sidebar{box-shadow:4px 0 24px rgba(0,0,0,.05)}
.details-panel{box-shadow:-4px 0 24px rgba(0,0,0,.05)}
.conversation-header{box-shadow:0 3px 14px rgba(0,0,0,.05);position:relative;z-index:3}
.composer{box-shadow:0 -3px 16px rgba(0,0,0,.06);position:relative;z-index:2}
.toolbar{position:relative;z-index:2}
.pane-tabs{box-shadow:0 2px 8px rgba(0,0,0,.04)}
/* ---- generic buttons: give every button a bit of life --------------- */
/* Press feedback for normal buttons only. Buttons that rely on a transform
for POSITIONING (the funnel, the scroll-to-latest button) are excluded, or
this would clobber their centering and move them out from under the cursor. */
button:not(:disabled):not(.filter-toggle):not(.scroll-latest):not(.hover-reply-button):active{transform:translateY(1px) scale(.985)}
/* The reply icon centers itself with translateY(-50%); like the funnel and the
scroll-to-latest button, it must never be moved/resized by press or hover, or
the click lands off it. Lock its centering transform in every state. */
.hover-reply-button,
.hover-reply-button:hover,
.hover-reply-button:active,
.hover-reply-button:focus,
.hover-reply-button:focus-visible{transform:translateY(-50%)!important}
button:disabled{opacity:.55;cursor:not-allowed}
/* primary / accent buttons: gradient + colored glow + hover lift ------ */
.primary-button,.record-send{
background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 88%,#fff 12%),var(--primary));
box-shadow:var(--glow);border:none;font-weight:700;letter-spacing:.2px;
}
.primary-button:hover,.record-send:hover{transform:translateY(-2px);box-shadow:0 10px 26px color-mix(in srgb,var(--primary) 50%,transparent);filter:brightness(1.05)}
.primary-button:active,.record-send:active{transform:translateY(0)}
/* danger buttons */
.danger-button,.remove-filters{transition:transform .18s var(--ez-out),box-shadow .18s var(--ez),filter .18s}
.danger-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--danger) 34%,transparent);filter:brightness(1.03)}
/* details-panel + menu action buttons: hover slide + shadow ----------- */
.details-panel section button,.menu-section button,.dialog-actions button{
border-radius:11px;
}
.details-panel section button:hover,.menu-section button:hover{
transform:translateX(3px);box-shadow:var(--lift);
border-color:color-mix(in srgb,var(--primary) 45%,var(--line));
}
/* ---- icon buttons: circular hover halo + press ---------------------- */
.icon-button{position:relative;border-radius:11px}
.icon-button:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);transform:translateY(-1px)}
.icon-button:active{transform:scale(.92)}
.alerts-button:hover{transform:translateY(-1px) rotate(-8deg)}
/* ---- BUTTON LABELS ------------------------------------------------- */
/* All header nav buttons (Alerts, Menu, Find, Details) are icon-only. */
/* ---- composer buttons: playful hover + instant tooltip from title --- */
.composer-button{position:relative;border-radius:12px}
.composer-button:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);transform:translateY(-2px) scale(1.06)}
.composer-button:active{transform:scale(.9)}
#cameraButton:hover,#galleryButton:hover{transform:translateY(-2px) scale(1.08) rotate(-6deg)}
#voiceButton:hover{transform:translateY(-2px) scale(1.08) rotate(6deg)}
.composer-button[title]:hover::after{
content:attr(title);position:absolute;bottom:calc(100% + 9px);left:50%;
transform:translateX(-50%);background:var(--text);color:var(--panel);
padding:5px 9px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;
pointer-events:none;box-shadow:var(--lift);z-index:40;animation:tipIn .14s var(--ez-out);
}
/* send button: gradient orb that pops on hover ------------------------ */
.send-button{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 85%,#fff 15%),var(--primary))!important;box-shadow:var(--glow)}
.send-button:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 10px 26px color-mix(in srgb,var(--primary) 55%,transparent)}
.send-button:active{transform:scale(.94)}
/* ---- conversation cards: modern hover lift + active accent ---------- */
.conversation-card{border-radius:13px;margin:3px 7px;will-change:transform}
.conversation-card:hover{transform:translateX(3px);box-shadow:var(--lift);background:var(--hover)}
.conversation-card.active{box-shadow:inset 3px 0 0 var(--primary),var(--lift)}
.conversation-card.unread-card{box-shadow:inset 3px 0 0 var(--primary)}
.conversation-card.unread-card:hover{box-shadow:inset 3px 0 0 var(--primary),var(--lift)}
/* ---- filter panel reveal ------------------------------------------- */
#filterPanel:not(.hidden){animation:slideDown .22s var(--ez-out)}
/* Lock the funnel's vertical centering in EVERY state. Otherwise the global
button-press transform (or any :active rule) overrides translateY(-50%) and
drops the funnel ~20px, so the pointer ends up off it and the click is lost.
The 180° flip lives on the child