/* main.css — SkillEX CSS entry point
   Import order matters: tokens → base → modal/overlay → keyframes
   Tailwind handles all component classes via index.html @layer components.
*/

@import url("./themes.css");
@import url("./base.css");

/* ── App shell ── */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#route-view {
  transition: none !important;
  transform: none !important;
}

/* ── Modal host overlay ── */
.modal-host {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-host.is-open {
  display: flex;
}

/* ── Keyframes ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes credit-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,111,255,0.3); }
  100% { box-shadow: 0 0 0 16px rgba(124,111,255,0); }
}
.animate-fade-in { animation: fade-in 0.2s ease-out both; }
.animate-slide-in { animation: slide-in 0.2s ease-out both; }
.badge--pulse { animation: credit-pulse 1.1s ease; }

/* ── Data-chat-scroll container ── */
[data-chat-scroll] {
  overflow-y: auto;
  flex: 1;
}

/* ── Utility ── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }