/* Shared UI styles: icons, motion, small components. */

/* ---------- Icons (Lucide sprite) ---------- */
.i {
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ---------- Scrollbars ---------- */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ---------- Keyframes ---------- */
@keyframes fade-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in    { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes typing    { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ping-soft { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes shimmer   { 100% { transform: translateX(100%); } }
@keyframes bell-ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }

/* Page content enters with a short stagger. */
.animate-page > * { animation: fade-up .45s cubic-bezier(.2,.7,.2,1) both; }
.animate-page > *:nth-child(2) { animation-delay: .05s; }
.animate-page > *:nth-child(3) { animation-delay: .1s; }
.animate-page > *:nth-child(4) { animation-delay: .15s; }
.animate-page > *:nth-child(5) { animation-delay: .2s; }

.stagger > * { animation: fade-up .4s cubic-bezier(.2,.7,.2,1) both; }
.stagger > *:nth-child(1) { animation-delay: .03s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .11s; }
.stagger > *:nth-child(4) { animation-delay: .15s; }
.stagger > *:nth-child(5) { animation-delay: .19s; }
.stagger > *:nth-child(6) { animation-delay: .23s; }
.stagger > *:nth-child(n+7) { animation-delay: .27s; }

.msg-new { animation: pop-in .28s cubic-bezier(.2,.7,.2,1) both; }
.fade-in { animation: fade-in .25s ease both; }

/* ---------- Components ---------- */
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .18); border-color: #BBF7D0; }

.btn-press { transition: transform .1s ease, background-color .15s ease, box-shadow .15s ease; }
.btn-press:active { transform: scale(.97); }

/* Dropdown menus: animated open/close via .open class */
.menu { opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .16s ease, transform .16s ease; transform-origin: top right; }
.menu.open { opacity: 1; transform: none; pointer-events: auto; }

/* Toast */
.toast { opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Live "ping" dot */
.ping { position: relative; }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: ping-soft 1.6s cubic-bezier(0,0,.2,1) infinite; }

.bell-ring { animation: bell-ring .9s ease; transform-origin: top center; }

/* Typing indicator */
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1.5px; border-radius: 9999px; background: #16A34A; animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

/* Spinner */
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background: #EEF2F6; border-radius: .5rem; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.2s infinite; }

/* Nav active indicator */
.nav-link { position: relative; transition: background-color .15s ease, color .15s ease; }
.nav-link.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: #16A34A; }

/* ---------- Mobile / PWA ---------- */
.chat-shell { height: calc(100dvh - 4rem - env(safe-area-inset-top)); }
@media (max-width: 767px) {
  .chat-shell:not(.chat-open) { height: calc(100dvh - 4rem - 3.75rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .chat-open #composer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  /* Bigger tap targets and no iOS zoom on focus */
  input, select, textarea { font-size: 16px !important; }
}
.sheet { animation: sheet-up .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
html { -webkit-tap-highlight-color: transparent; }
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}