/* fast.css — lightweight speed layer. Loaded after styles.css, overrides only.
/* Goal: kill layout thrash + blur cost, make long lists feel instant. */

/* 1. Contain message rows: browser can skip off-screen layout/paint. */
.message-row,
.msg-bubble,
.message-bubble {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
  contain: layout style;
}

/* Date separators + album wrappers are cheap, keep them eager */
.message-date-separator { content-visibility: visible; }

/* 2. Cut expensive backdrop-blur on low-end / large lists.
   Keep blur only for small overlays (modal, dropdown). */
#messages-container,
#messages-container *,
.category-filter-item,
.pinned-strip-item {
  backdrop-filter: none !important;
}

/* Keep blur ONLY where it matters (small fixed overlays) */
#category-dropdown,
#category-manage-modal,
#upload-modal,
.modal-backdrop,
.toast-card {
  backdrop-filter: blur(10px);
}

/* 3. Kill heavy shadows inside the scrolling list (biggest mobile jank source) */
#messages-container .message-row,
#messages-container .msg-bubble {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 4. Optimistic (pending) message style — instant feedback while socket round-trips */
.msg-pending {
  opacity: 0.72;
}
.msg-pending::after {
  content: " • sending…";
  font-size: 0.72em;
  opacity: 0.7;
  font-style: italic;
}
.msg-failed {
  opacity: 1;
  outline: 1px solid rgba(255, 90, 90, 0.55);
}
.msg-failed::after {
  content: " • failed — press Enter to retry";
  font-size: 0.72em;
  color: #ff8a8a;
}

/* 5. Category filter: counts + active state without re-render flashes */
#category-filter-list button {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}
.cat-count {
  margin-left: auto;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #9fb0c3;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
button.cat-active .cat-count {
  background: rgba(90, 161, 227, 0.25);
  color: #5aa1e3;
}

/* 6. Skeleton for first paint (replaces blank "Loading...") */
.msg-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 4px;
}
.msg-skeleton span {
  display: block;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  background-size: 200% 100%;
  animation: fastShimmer 1.1s linear infinite;
}
@keyframes fastShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-skeleton span { animation: none; }
}

/* 7. Dev-secret quick-insert hint inside composer (injected by chat-fast.js) */
#composer-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(90, 161, 227, 0.14);
  color: #7fb6ec;
  border: 1px solid rgba(90, 161, 227, 0.35);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#composer-cat-chip:empty { display: none; }

/* 8. Command-palette hint bar (Ctrl+K) */
#fast-hint-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  font-size: 11px;
  color: #8fa0b2;
  padding: 4px 8px;
  display: none;
}
#fast-hint-bar kbd {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 0 5px;
  font-family: inherit;
}