/* ============================================================
   🎨 design_refresh.css — Additive visual polish layer
   ============================================================
   SAFETY GUARANTEES:
   - Loaded LAST (same pattern as responsive.css already in this app)
     so it wins specificity ties without needing !important anywhere.
   - Every rule here ADDS properties (transitions, hover states, focus
     rings, scrollbars) that the app's existing CSS does NOT already
     declare — nothing here overrides an existing color, layout, size,
     or positioning rule.
   - Zero JavaScript. Zero HTML changes. Zero risk to app logic.
   - To fully remove this polish layer at any time: delete the single
     <link> tag that references this file. Nothing else needs to change.
   - Performance: every effect below is GPU-composited (transform,
     filter, opacity, box-shadow) or native browser behavior (:hover,
     ::-webkit-scrollbar) — none of it triggers layout reflow or runs
     JavaScript, so it stays smooth even on large lists (History 12k+ rows).
============================================================ */

/* ── Buttons: smoother, more tactile interactions ── */
button {
  transition: transform .15s var(--ease, ease), filter .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.045);
}
button:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.97);
}
button:disabled {
  cursor: not-allowed;
}

/* ── .card: subtle elevation increase on hover (uses the app's own
   --shadow-md variable, already defined in :root) ── */
.card {
  transition: box-shadow .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.card:hover {
  box-shadow: var(--shadow-md);
}

/* ── .action-btn: adds depth on hover ── */
.action-btn:hover {
  box-shadow: var(--shadow-xs);
}

/* ── .badge: tiny lift on hover where clickable ── */
.badge {
  transition: transform .15s var(--ease, ease);
}

/* ── Inputs / selects / textareas: soft focus glow (doesn't touch
   border-color or background, just adds a ring around focused fields) ── */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.14);
  transition: box-shadow .15s var(--ease, ease);
}

/* ── Global scrollbar polish (extends the same aesthetic already used
   on .sidebar to every scrollable area in the app, for consistency) ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border2, #d7dbe6);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink3, #8b93a6);
}

/* ── Table rows: hover highlight for readability (History, lists...).
   Native :hover — zero JS, zero cost even on very large tables. ── */
table tr:hover td {
  background: var(--surface2, #f4f6fa);
}

/* ── Slightly refined letter-spacing on titles for a more premium feel ── */
.card-title, .section-title, .prop-section-title {
  letter-spacing: .01em;
}

/* ── Links: smoother color transition ── */
a {
  transition: color .15s var(--ease, ease), opacity .15s var(--ease, ease);
}

/* ============================================================
   🎨 BRAND POLISH — round 2 (still 100% additive, complements the
   app's existing Playfair Display / orange #f97316 brand identity,
   doesn't redefine anything already styled)
============================================================ */

/* Topbar logo: subtle warm glow on the orange "AI" accent */
.topbar-logo span {
  text-shadow: 0 0 18px rgba(249,115,22,0.35);
}

/* Connected status dot: gentle breathing pulse instead of a static glow */
@keyframes brandDotBreathe {
  0%,100% { box-shadow: 0 0 0 4px rgba(249,115,22,0.16); }
  50%     { box-shadow: 0 0 0 7px rgba(249,115,22,0.06); }
}
.status-dot.connected {
  animation: brandDotBreathe 2.2s ease-in-out infinite;
}

/* Toasts: nicer entrance (scale + slide, already-existing opacity/transform
   transition on .toast is extended here, not replaced) + colored accent
   bar on the left matching the toast type */
.toast {
  transform: translateY(8px) scale(.97);
  border-left: 3px solid rgba(255,255,255,0.35);
}
.toast.success { border-left-color: #ffffff; }
.toast.error   { border-left-color: #ffffff; }

/* Loading spinner: adds a soft outer halo ring behind the existing
   spinner (pure CSS ::after, no markup change needed) */
.loading-spinner {
  position: relative;
}
.loading-spinner::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(249,115,22,0.15);
}

/* Sidebar section titles: subtle hover feedback where clickable */
.section-title:hover::before {
  background: linear-gradient(90deg,#f97316,rgba(249,115,22,0.4));
}

/* Sidebar connected-website cards / list items: soft lift on hover
   (targets the common pattern already used for site cards) */
.sidebar-section > div[style*="cursor:pointer"]:hover,
.sidebar-section > div[onclick]:hover {
  transform: translateX(2px);
}
.sidebar-section > div[style*="cursor:pointer"],
.sidebar-section > div[onclick] {
  transition: transform .15s var(--ease, ease);
}

/* Primary gradient CTA buttons (Generate/Publish/Scrape/Export/Autopilot
   toolbar buttons): soft glow on hover to feel more "alive" without
   changing their existing individual brand colors per feature */
button[style*="linear-gradient"]:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}