/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "tailwind";

@import "markdown";

/* Ensure all buttons feel clickable */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  cursor: pointer;
}

.conversation-pagination .pagy.series-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 9999px;
  background: rgb(248 250 252 / 0.95);
  box-shadow: 0 10px 30px -18px rgb(15 23 42 / 0.45);
}

.conversation-pagination .pagy.series-nav a {
  display: inline-flex;
  min-width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(51 65 85);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.conversation-pagination .pagy.series-nav a[href] {
  background: rgb(255 255 255);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.conversation-pagination .pagy.series-nav a[href]:hover {
  background: rgb(226 232 240);
  color: rgb(15 23 42);
}

.conversation-pagination .pagy.series-nav a[href]:focus-visible {
  outline: none;
  background: rgb(255 255 255);
  color: rgb(15 23 42);
  box-shadow: 0 0 0 3px rgb(148 163 184 / 0.35);
}

.conversation-pagination .pagy.series-nav a[aria-current="page"] {
  background: rgb(15 23 42);
  color: rgb(255 255 255);
  box-shadow: 0 8px 18px -12px rgb(15 23 42 / 0.9);
}

.conversation-pagination .pagy.series-nav a[aria-disabled="true"]:not([aria-current="page"]) {
  color: rgb(148 163 184);
}

.conversation-pagination .pagy.series-nav a[role="separator"] {
  min-width: 1.5rem;
  padding-inline: 0.25rem;
}

.conversation-pagination .pagy.series-nav a:not([href]) {
  cursor: default;
}

/* Prevent iOS zoom on input focus */
input,
textarea {
  font-size: 16px;
}

/* Prevent double-tap zoom */
* {
  touch-action: manipulation;
}

/* Jump-to-present pulse animation */
@keyframes jump-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.jump-pulse {
  animation: jump-pulse 1.5s ease-in-out infinite;
}

/* ── Chat message bubbles ──────────────────────────────────────────────────
   "Own" (the viewing user's messages) sit right in a blue bubble; everyone else
   — other people AND Rhadamanthus — sit left in a neutral bubble. Whether a
   message is own is per-viewer, so it can't be baked into the server broadcast
   (one HTML blob fans out to every participant). Bubbles render neutral by
   default; .is-own is what flips them, added server-side on first paint (where
   current_user is known) and by chat_message_controller for broadcast-delivered
   messages. Both just toggle this one class, so the two paths can't disagree. */
.chat-msg { display: flex; width: 100%; justify-content: flex-start; }
.chat-msg.is-own { justify-content: flex-end; }

.chat-msg__bubble {
  background: var(--color-white, #fff);
  color: var(--color-slate-900, #0f172a);
  border: 1px solid var(--color-slate-200, #e2e8f0);
}
.chat-msg.is-own .chat-msg__bubble {
  background: var(--color-blue-600, #2563eb);
  color: #fff;
  border-color: transparent;
}

.chat-msg__name { color: var(--color-slate-700, #334155); }
.chat-msg__time,
.chat-msg__caption { color: var(--color-slate-500, #64748b); }
.chat-msg.is-own .chat-msg__name,
.chat-msg.is-own .chat-msg__time,
.chat-msg.is-own .chat-msg__caption { color: var(--color-blue-100, #dbeafe); }

/* ── Feed card accents ──────────────────────────────────────────────────────
   Each scheduled-task post takes a soft accent from the task's primary skill
   (ApplicationHelper#feed_accent_key → .feed-card--<key>): a coloured left
   border, a tinted eyebrow, and a barely-there background wash. The modifier
   sets custom properties; the base rules consume them. Selectors are scoped
   under .feed-item so they out-specify Tailwind's border/background utilities
   no matter the stylesheet load order. Tones are deliberately muted (≈400 for
   the rule, ≈600 for text, near-white for the wash) — soft, not shiny. */
.feed-item .feed-card {
  border-top-width: 3px;
  border-top-color: var(--feed-accent, #cbd5e1);
  border-left-width: 3px;
  border-left-color: var(--feed-accent, #cbd5e1);
  background-color: var(--feed-accent-bg, #fff);
}

.feed-item .feed-card__eyebrow {
  color: var(--feed-accent-text, #64748b);
}

/* Big pixel-art skill icon above the title. crispEdges in the SVG keeps the
   3×-scaled pixels sharp; this just sizes and spaces it. */
.feed-card__icon {
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
}

.feed-card--sysadmin      { --feed-accent: #34d399; --feed-accent-text: #059669; --feed-accent-bg: #f4fbf8; }
.feed-card--calendar      { --feed-accent: #fb7185; --feed-accent-text: #e11d48; --feed-accent-bg: #fdf5f6; }
.feed-card--weather       { --feed-accent: #38bdf8; --feed-accent-text: #0284c7; --feed-accent-bg: #f3fafe; }
.feed-card--news          { --feed-accent: #fbbf24; --feed-accent-text: #d97706; --feed-accent-bg: #fdfaf2; }
.feed-card--amazon_es     { --feed-accent: #fb923c; --feed-accent-text: #ea580c; --feed-accent-bg: #fdf8f3; }
.feed-card--browser       { --feed-accent: #a78bfa; --feed-accent-text: #7c3aed; --feed-accent-bg: #f8f6fe; }
.feed-card--memory_search { --feed-accent: #e879f9; --feed-accent-text: #c026d3; --feed-accent-bg: #fdf5fe; }
.feed-card--page_read     { --feed-accent: #22d3ee; --feed-accent-text: #0891b2; --feed-accent-bg: #f2fdfe; }
.feed-card--view_image    { --feed-accent: #2dd4bf; --feed-accent-text: #0d9488; --feed-accent-bg: #f2fdfb; }
.feed-card--web_search    { --feed-accent: #818cf8; --feed-accent-text: #4f46e5; --feed-accent-bg: #f5f6fe; }
.feed-card--default       { --feed-accent: #cbd5e1; --feed-accent-text: #64748b; --feed-accent-bg: #fff; }