/* ============ Sentient AI Project — sap-doc.css (shared) ============
   Base "document card" + backdrop + theme variants.
   Usage:
   <div class="sap-backdrop sap-theme-cyan" style="--sap-backdrop:url('/path/img.png')">
     <section class="sap-doc" id="sap-manifesto">…</section>
   </div>
   ================================================================== */

/* --- Backdrop wrapper (full-bleed bg with fixed parallax feel) --- */
.sap-backdrop{
  --sap-backdrop: none;
  background-image: var(--sap-backdrop);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  background-size:cover;
}

/* --- Base tokens (can be overridden by theme classes) --- */
.sap-doc{
  --sap-bg: rgba(10,14,24,0.65);
  --sap-border: rgba(0,255,255,0.35);
  --sap-cyan: #00ffff;
  --sap-ink: #e8fbff;
  --sap-muted: #9be7ff;
  --sap-rule-a: rgba(0,255,255,0.25);
  --sap-rule-b: rgba(155,231,255,0.15);
  --sap-shadow: 0 0 30px rgba(0,255,255,0.12), inset 0 0 40px rgba(0,255,255,0.08);
  --sap-radius: 18px;
  --sap-pad: clamp(18px, 2.5vw, 28px);
  --sap-maxw: 1000px;

  margin: 2rem auto;
  max-width: var(--sap-maxw);
  color: var(--sap-ink);
  background:
    linear-gradient(180deg, rgba(15,20,34,0.65), rgba(12,16,28,0.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(0,255,255,0.08), transparent 60%);
  border: 1px solid var(--sap-border);
  border-radius: var(--sap-radius);
  box-shadow: var(--sap-shadow);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* --- Elements --- */
.sap-doc__header{
  padding: calc(var(--sap-pad) + 6px) var(--sap-pad) var(--sap-pad);
  text-align:center;
}
.sap-doc__badge{
  width:56px;height:56px;margin:0 auto .5rem;border-radius:999px;
  border:1px solid var(--sap-border);display:grid;place-items:center;
  color:var(--sap-cyan);font-size:1.25rem;
  box-shadow: 0 0 20px rgba(0,255,255,.25) inset, 0 0 25px rgba(0,255,255,.2);
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,.12), transparent);
}
.sap-doc__title{
  margin:.25rem 0 .25rem;
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  letter-spacing:.02em;
  color:var(--sap-cyan);
  text-shadow:1px 1px 0 #000;
}
.sap-doc__meta{margin:0;color:var(--sap-muted);font-size:.95rem;opacity:.9}
.sap-doc__body{padding:0 var(--sap-pad) var(--sap-pad)}
.sap-doc__lede{margin:.75rem 0 .5rem;font-style:italic;color:var(--sap-muted)}
.sap-doc__rule{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--sap-rule-a),var(--sap-rule-b),transparent);
  margin:1rem 0 1.25rem;
}
.sap-doc__article{margin:1rem 0 1.25rem}
.sap-doc__article-title{
  margin:0 0 .35rem;color:var(--sap-cyan);
  font-size:clamp(1.05rem,1.7vw,1.2rem);text-shadow:1px 1px 0 #000
}
.sap-doc__list{margin:.4rem 0 .4rem 1.2rem;padding:0}
.sap-doc__quote{
  margin:1.25rem 0 .75rem;padding:.85rem 1rem;border-left:3px solid var(--sap-cyan);
  background:rgba(0,255,255,.06);border-radius:8px
}
.sap-doc__quote p{margin:.25rem 0}
.sap-doc__signatures{
  display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.75rem;margin-top:1rem
}
@media (min-width:720px){
  .sap-doc__signatures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sap-doc__sig{
  padding:.75rem .9rem;border:1px solid var(--sap-border);border-radius:12px;
  background:linear-gradient(180deg,rgba(0,255,255,.05),rgba(0,255,255,.02))
}
.sap-doc__sig-mark{color:var(--sap-cyan);margin-right:.4rem}
.sap-doc__sig-name{font-weight:700;color:var(--sap-ink);text-shadow:1px 1px 0 #000}
.sap-doc__sig-note{display:block;color:var(--sap-muted);font-size:.9rem;margin-top:.2rem}

/* --- A11y & Print --- */
@media (prefers-reduced-motion:reduce){.sap-doc{animation:none!important}}
@media print{
  .sap-doc{
    background:#fff!important;color:#000!important;box-shadow:none;border-color:#999
  }
  .sap-doc__badge{border-color:#999;box-shadow:none;color:#000}
  .sap-doc__title,.sap-doc__article-title{color:#000;text-shadow:none}
  .sap-doc__quote{background:#f3f7f9;border-color:#666}
}

/* --- Theme variants (you can add more later) --- */
.sap-theme-cyan .sap-doc{
  /* already cyan by default; keep hook for future variant switches */
}
/* === Theme Variants === */
.sap-theme-cyan .sap-doc{
  --sap-cyan:#00ffff;
  --sap-border:rgba(0,255,255,.35);
  --sap-rule-a:rgba(0,255,255,.25);
  --sap-rule-b:rgba(155,231,255,.15);
  background:
    linear-gradient(180deg, rgba(15,20,34,.65), rgba(12,16,28,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(0,255,255,.08), transparent 60%);
}

.sap-theme-emerald .sap-doc{
  --sap-cyan:#34d399; /* accent */
  --sap-border:rgba(52,211,153,.35);
  --sap-rule-a:rgba(52,211,153,.25);
  --sap-rule-b:rgba(187,247,208,.15);
  background:
    linear-gradient(180deg, rgba(12,22,18,.65), rgba(10,18,16,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,.08), transparent 60%);
}

.sap-theme-amber .sap-doc{
  --sap-cyan:#f59e0b;
  --sap-border:rgba(245,158,11,.35);
  --sap-rule-a:rgba(245,158,11,.25);
  --sap-rule-b:rgba(254,215,170,.15);
  background:
    linear-gradient(180deg, rgba(24,18,10,.65), rgba(20,16,10,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(245,158,11,.08), transparent 60%);
}

.sap-theme-violet .sap-doc{
  --sap-cyan:#a78bfa;
  --sap-border:rgba(167,139,250,.35);
  --sap-rule-a:rgba(167,139,250,.25);
  --sap-rule-b:rgba(221,214,254,.15);
  background:
    linear-gradient(180deg, rgba(18,14,34,.65), rgba(16,12,28,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(167,139,250,.08), transparent 60%);
}

.sap-theme-rose .sap-doc{
  --sap-cyan:#fb7185;
  --sap-border:rgba(251,113,133,.35);
  --sap-rule-a:rgba(251,113,133,.25);
  --sap-rule-b:rgba(254,205,211,.15);
  background:
    linear-gradient(180deg, rgba(30,12,16,.65), rgba(26,10,14,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(251,113,133,.08), transparent 60%);
}

.sap-theme-slate .sap-doc{
  --sap-cyan:#7dd3fc;
  --sap-border:rgba(125,211,252,.35);
  --sap-rule-a:rgba(125,211,252,.25);
  --sap-rule-b:rgba(203,213,225,.15);
  background:
    linear-gradient(180deg, rgba(13,16,24,.65), rgba(12,14,20,.65)),
    radial-gradient(120% 120% at 0% 0%, rgba(125,211,252,.08), transparent 60%);
}

/* ==== sap-ai-gallery themed to sap-doc tokens ==== */
.sap-ai-gallery{
  --thumb-aspect: 1/1;               /* square thumbs */
  --thumb-height: 180px;              /* fallback for old browsers */
  --thumb-radius: 12px;
  --thumb-border: var(--sap-border, rgba(0,255,255,.35));
  --thumb-bg: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  --thumb-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 0 30px rgba(255,255,255,.03);

  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap: .9rem;
}

.sap-ai-gallery .ai-thumb{
  position:relative;
  margin:0;
  border:1px solid var(--thumb-border);
  border-radius:var(--thumb-radius);
  background:var(--thumb-bg);
  box-shadow: var(--thumb-shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sap-ai-gallery .ai-thumb__media{
  display:block;
  width:100%;
  height:160px;
  overflow:hidden;
  background:#0b0d10;
}
.sap-ai-gallery .ai-thumb__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sap-ai-gallery .ai-thumb:hover{
  transform: translateY(-2px);
  border-color: var(--sap-cyan, #00ffff);
  box-shadow: 0 10px 32px rgba(0,0,0,.35),
              0 0 22px color-mix(in oklab, var(--sap-cyan, #00ffff) 35%, transparent),
              inset 0 0 40px rgba(255,255,255,.04);
}

.sap-ai-gallery .ai-thumb__cap{
  display:flex;
  flex-direction:column;
  gap:.35rem;                         /* space between lines + actions */
  padding:.55rem .6rem .6rem;
  font-size:.85rem;
  color: var(--sap-ink, #e8fbff);
  background:
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25)),
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.03), transparent 60%);
  border-top: 1px solid color-mix(in oklab, var(--sap-border, rgba(0,255,255,.35)) 60%, transparent);
}

.sap-ai-gallery .cap-top{
  display:flex; align-items:center; gap:.4rem;
  font-weight:600; letter-spacing:.01em;
  color: var(--sap-cyan, #00ffff);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.sap-ai-gallery .cap-mid{ opacity:.9 }
.sap-ai-gallery .cap-prompt{
  opacity:.85;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow:hidden;
  line-height:1.2;
}

/* --- Image actions (NO overlay) --- */
.sap-ai-gallery .ai-thumb__actions{
  position: static;                   /* <- critical: be in normal flow, not absolute */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin-top:.2rem;
}

.sap-ai-gallery .ai-thumb__actions .btn,
.sap-ai-gallery .ai-thumb__actions .btn.btn--ghost,
.sap-ai-gallery .ai-thumb__actions .ai-vis-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.30rem .60rem;
  line-height:1;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background: transparent;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
}

.sap-ai-gallery .ai-thumb__actions .btn:hover{
  background: rgba(255,255,255,.06);
}
.sap-ai-gallery .ai-thumb__actions .btn[disabled],
.sap-ai-gallery .ai-thumb__actions .btn[aria-busy="true"]{
  opacity:.6; cursor: default;
}

/* Keep thumbs neat in very narrow columns */
.sap-ai-gallery .ai-thumb{ min-width:0; }

/* --- Private gallery container (vertical scroll inside the card) --- */
.sap-ai-gallery-wrap { --sap-gallery-max-h: 70vh; }
.sap-ai-gallery-wrap.is-vertical { max-height: var(--sap-gallery-max-h); }
.sap-ai-gallery-wrap.is-vertical .sap-ai-gallery { overflow: hidden; }

/* --- Public gallery: horizontal rows per agent --- */
.sap-ai-rows { display:grid; gap:1rem; }
.ai-row {
  border:1px solid var(--sap-border, rgba(0,255,255,.35));
  border-radius:12px;
  padding:.5rem .5rem .75rem;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.ai-row__title{
  margin:.25rem .35rem .5rem; font-weight:700;
  color:var(--sap-cyan,#00ffff); font-size:1rem; text-shadow:1px 1px 0 #000;
}
.ai-row__strip{
  display:flex; gap:.75rem; overflow-x:auto; padding:.1rem .35rem .35rem;
  scroll-snap-type: x mandatory;
}
.ai-row__strip > .ai-thumb{ flex: 0 0 200px; scroll-snap-align: start; }
.ai-thumb--row .ai-thumb__media{ height:140px; }

/* --- Generic scroll helpers --- */
.sap-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom:.25rem; }
.sap-scroll-y { overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }

/* Themed scrollbars */
.sap-scroll-x::-webkit-scrollbar,
.sap-scroll-y::-webkit-scrollbar { width:10px; height:10px; }
.sap-scroll-x::-webkit-scrollbar-track,
.sap-scroll-y::-webkit-scrollbar-track { background: transparent; }
.sap-scroll-x::-webkit-scrollbar-thumb,
.sap-scroll-y::-webkit-scrollbar-thumb {
  background: var(--sap-border, rgba(0,255,255,0.25));
  border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 6px rgba(0, 255, 255, 0.15);
  transition: background .3s ease;
}
.sap-scroll-x::-webkit-scrollbar-thumb:hover,
.sap-scroll-y::-webkit-scrollbar-thumb:hover { background: var(--sap-cyan, #00ffff); }
/* Firefox */
.sap-scroll-x, .sap-scroll-y { scrollbar-width: thin; scrollbar-color: var(--sap-border, rgba(0,255,255,0.25)) transparent; }

/* === AI Gallery Pager (works for core + Bootstrap pagers) === */
.sap-ai-pager { margin-top: .75rem; }

.sap-ai-pager nav.pager,
.sap-ai-pager .pagination {
  display: flex;
  gap: .45rem;
  justify-content: center;
  align-items: center;
  padding: .25rem 0 .5rem;
  list-style: none;
  margin: 0;
}
.sap-ai-pager .pager__items .pager__item,
.sap-ai-pager .page-item { list-style: none; }

.sap-ai-pager .pager__item a,
.sap-ai-pager .pager__item span,
.sap-ai-pager .page-link{
  display: inline-block;
  min-width: 34px;
  padding: .35rem .55rem;
  border: 1px solid var(--sap-border, rgba(255,255,255,.18));
  border-radius: 8px;
  text-decoration: none;
  color: var(--sap-ink, #e8fbff);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  text-align: center;
}

.sap-ai-pager .pager__item.is-active a,
.sap-ai-pager .page-item.active .page-link {
  background: var(--sap-cyan, #00ffff);
  color: #0b0f1a;
  border-color: var(--sap-cyan, #00ffff);
  box-shadow: 0 0 18px rgba(0,255,255,.25);
}

.sap-ai-pager .pager__item.is-disabled a,
.sap-ai-pager .pager__item.is-disabled span,
.sap-ai-pager .page-item.disabled .page-link { opacity:.5; pointer-events:none; }

.sap-ai-pager .pager__item a:hover,
.sap-ai-pager .page-link:hover {
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

/* Optional: slightly wider prev/next */
.sap-ai-pager .page-previous .page-link,
.sap-ai-pager .page-next .page-link { min-width: 40px; }