/* "Connect Your AI Model": the pill (home page and Settings) and Settings → Your
   AI (js/modules/connectAi.js). Linked after theme.css. */

/* Liquid glass, the home page's own recipe (theme.css .sbar: tint + sheen,
   a hairline rim that catches light at opposite corners, a whisper of
   backdrop blur) with the popular-search chips' amber-and-blue hover glow. */
.rmai-pill {
  --glass-tint: rgba(255, 255, 255, .08);
  --glass-sheen: rgba(255, 255, 255, .035);
  --glass-rim: rgba(60, 67, 78, .42);
  --glass-rim-dim: rgba(60, 67, 78, .08);
  --glass-shadow: rgba(35, 45, 60, .06);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim-dim);
  background: linear-gradient(110deg, var(--glass-sheen), transparent 42%, var(--glass-sheen) 68%, transparent 92%), var(--glass-tint);
  -webkit-backdrop-filter: blur(.75px) saturate(115%);
  backdrop-filter: blur(.75px) saturate(115%);
  box-shadow: 0 4px 18px var(--glass-shadow);
  color: var(--hero-title-ink, var(--text));
  font: 500 13px/1 var(--font-product);
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .22s, box-shadow var(--glow-t, .6s) var(--ease-hover, ease), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.rmai-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: .8;
  background: linear-gradient(125deg, var(--glass-rim) 3%, var(--glass-rim-dim) 32%, transparent 48%, var(--glass-rim-dim) 64%, var(--glass-rim) 96%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.app.dark .rmai-pill {
  --glass-tint: rgba(255, 255, 255, .025);
  --glass-sheen: rgba(235, 240, 250, .015);
  --glass-rim: rgba(243, 247, 255, .78);
  --glass-rim-dim: rgba(222, 231, 247, .13);
  --glass-shadow: rgba(0, 0, 0, .16);
}
.rmai-pill:hover, .rmai-pill:focus-visible {
  border-color: var(--glow-edge, rgba(255, 170, 70, .5));
  box-shadow: var(--glow-neon-sm), 0 4px 18px var(--glass-shadow);
  transform: translateY(-1px);
  outline: none;
}
.rmai-pill:active { transform: translateY(0) scale(.985); transition-duration: .2s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rmai-pill { --glass-tint: rgba(255, 255, 255, .1); }
  .app.dark .rmai-pill { --glass-tint: rgba(255, 255, 255, .035); }
}
.rmai-label { position: relative; z-index: 2; }
.rmai-marks { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; }
.rmai-logo { width: 16px; height: 16px; display: block; flex: none; }

/* Home: above the RainMakers mark with a generous gap, between the top of
   the page and the mark (user: right under the mark was too low, pinned to
   the top too high). In the flow, so it can't overlap at any window size. */
.rmai-pill-hero { margin: 0 auto 80px; }

/* Large monitors: theme.css pins the home section 22vh from the top
   (min-width 1800px, min-height 900px), which with the pill above the mark
   sat far too low (user, 2026-11-12). Centred instead, like every other size. */
@media (min-width: 1800px) and (min-height: 900px) {
  .view[data-view-pane="home"] .scroll { align-items: center; padding-top: 48px; }
}
/* Phones: the mobile header covers the top of the page (mobile.css), so the
   pill sits in the flow just above the mark instead. */
@media (max-width: 768px) {
  .rmai-pill-hero { position: static; margin: 0 auto 18px; }
}

/* Settings → Your AI */
.rmai-list { margin: 0; }
.rmai-empty { padding: 18px 0; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.rmai-usage { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0 4px; font-size: 13.5px; color: var(--sub); }
.rmai-usage b { color: var(--text); font-weight: 500; }
.rmai-activity { list-style: none; margin: 0; padding: 4px 0 0; }
.rmai-activity li {
  display: flex; gap: 14px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--ddx-line, rgba(127, 127, 127, .14));
  font-size: 13.5px; line-height: 1.45; color: var(--text2, var(--text));
}
.rmai-activity li:last-child { border-bottom: 0; }
.rmai-activity time { flex-shrink: 0; color: var(--sub); font-size: 12.5px; }
.ddx-btn.is-confirm { border-color: rgba(255, 110, 110, .55); color: #ff6e6e; }

@media (prefers-reduced-motion: reduce) {
  .rmai-pill, .rmai-pill:hover, .rmai-pill:focus-visible { transition: none; transform: none; }
}