/* Avyra component overrides — compact sizing to match tweakCN proportions */

/* Button size overrides */
.avyra-btn.avyra-btn { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.avyra-btn-sm.avyra-btn-sm { height: 1.75rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.avyra-btn-lg.avyra-btn-lg { height: 2.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.avyra-btn-icon.avyra-btn-icon { height: 2rem; width: 2rem; padding: 0; }
.avyra-btn-icon-sm.avyra-btn-icon-sm { height: 1.75rem; width: 1.75rem; padding: 0; }
.avyra-btn-icon-lg.avyra-btn-icon-lg { height: 2.5rem; width: 2.5rem; padding: 0; }

/* Card overrides: no shadow, tighter header-to-content spacing */
.avyra-card.avyra-card { box-shadow: none; }
.avyra-card > div:first-child:not(.avyra-card-body) { padding-bottom: 0.25rem !important; }
.avyra-card > div:nth-child(2):not(.avyra-card-body) { padding-top: 0.25rem !important; }

/* Input overrides: 36px height, 14px font */
.avyra-input.avyra-input { height: 2.25rem; font-size: 0.875rem; line-height: 1.25rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }


/* Checkbox overrides: 16px, neutral border when unchecked */
.avyra-checkbox.avyra-checkbox { width: 1rem; height: 1rem; }
.avyra-checkbox.avyra-checkbox[data-state="unchecked"] { border-color: var(--border); }

/* Dark-themed scrollbar for all scrollable elements */
.dark * {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.4 0 0) transparent;
}
.dark *::-webkit-scrollbar { width: 8px; height: 8px; }
.dark *::-webkit-scrollbar-track { background: transparent; }
.dark *::-webkit-scrollbar-thumb { background: oklch(0.4 0 0); border-radius: 4px; }
.dark *::-webkit-scrollbar-thumb:hover { background: oklch(0.5 0 0); }


/* Reconnect modal — dark themed */
#components-reconnect-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  border: none; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
}
#components-reconnect-modal::backdrop { display: none; }
#components-reconnect-modal[open] { display: flex; }
#components-reconnect-modal .components-reconnect-container {
  background: oklch(0.2686 0 0); color: oklch(0.985 0 0);
  border: 1px solid oklch(0.274 0.006 286.03);
  border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  padding: 2rem; max-width: 22rem; width: 100%; margin: 1rem; text-align: center;
}
#components-reconnect-modal .components-reconnect-container p { font-size: 0.875rem; margin: 0.5rem 0; }
#components-reconnect-modal .components-reconnect-container button {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; background: oklch(0.681 0.162 222.72); color: oklch(0.985 0 0);
  font-size: 0.875rem; font-weight: 500; height: 2.25rem; padding: 0 1rem;
  border: none; cursor: pointer; margin-top: 0.5rem;
}
#components-reconnect-modal .components-reconnect-container button:hover { opacity: 0.9; }
#components-reconnect-modal .components-reconnect-container a {
  display: inline-block; color: oklch(0.681 0.162 222.72);
  font-size: 0.75rem; margin-top: 0.5rem; text-decoration: underline;
}
#components-reconnect-modal .components-rejoining-animation { display: flex; justify-content: center; margin-bottom: 1rem; }
#components-reconnect-modal .components-rejoining-animation > div {
  width: 0.75rem; height: 0.75rem; margin: 0 0.25rem; border-radius: 50%;
  background: oklch(0.681 0.162 222.72); animation: reconnectPulse 1.4s infinite ease-in-out both;
}
#components-reconnect-modal .components-rejoining-animation > div:nth-child(2) { animation-delay: 0.2s; }
@keyframes reconnectPulse {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Fix sidebar visibility — our Tailwind 'hidden' overrides BB's 'md:flex' due to CSS load order */
@media (min-width: 768px) {
  aside.hidden.md\:flex { display: flex !important; }
}