/* ============================================================
   Engagement Portal — app shell styles
   Design system tokens come from _ds/…/styles.css.
   Component-level styling is kept inline in app.js render to
   stay faithful to the Claude Design source.
   ============================================================ */

html, body { margin: 0; background: var(--be-mist); height: 100%; }
* { box-sizing: border-box; }

#app { height: 100vh; }

.ep-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.ep-scroll::-webkit-scrollbar-thumb {
  background: var(--be-stone-200);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

@keyframes epDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes epFade { from { opacity: 0; } to { opacity: 1; } }

/* search input focus */
.ep-searchbox:focus-within { border-color: var(--be-forest) !important; }

/* generic hover affordance on clickable rows/cards */
[data-hover]:hover { background: var(--be-mist) !important; }
button { font-family: inherit; }

/* Goldie "thinking" pulse */
@keyframes epPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.ep-goldie-dot { animation: epPulse 1.2s ease-in-out infinite; }