/* ============================================================
   Builder Glass FX — bold visual accents for the smart editor
   Isolated file, loaded after site.min.css. Safe to remove/tweak
   without touching the main stylesheet or its build pipeline.
   ============================================================ */

@keyframes mycvGlassSpin {
  to { --mycv-angle: 360deg; }
}
@property --mycv-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes mycvPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,.45), 0 22px 55px rgba(15,23,42,.30); }
  50% { box-shadow: 0 0 0 10px rgba(56,189,248,0), 0 22px 55px rgba(15,23,42,.30); }
}

@keyframes mycvOrbBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); transform: scale(1.04); }
}

@keyframes mycvFadeScaleIn {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Command dock: animated gradient border ---------- */
.command-dock {
  position: relative;
  isolation: isolate;
}
.command-dock::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 20px;
  padding: 1.5px;
  background: conic-gradient(from var(--mycv-angle, 0deg), #38bdf8, #8b5cf6, #35d399, #38bdf8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mycvGlassSpin 6s linear infinite;
  z-index: -1;
  opacity: .55;
  pointer-events: none;
}

/* ---------- Real AI activity state: body.mycv-ai-working ---------- */
/* This class is toggled by real code (mycv-real-ai-enforcer.js, app.js)
   exactly while a genuine AI request is in flight — the glow below is
   tied to actual AI activity, not decorative timing. */
body.mycv-ai-working .command-dock::before {
  animation-duration: 1.4s;
  opacity: 1;
}
body.mycv-ai-working .command-dock {
  animation: mycvPulseGlow 1.4s ease-in-out infinite;
}
body.mycv-ai-working #aiGlobalCommand {
  border-color: #38bdf8;
}

/* ---------- Primary / execute buttons ---------- */
.execute-btn,
.ui-btn.primary {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.execute-btn:hover,
.ui-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(56,189,248,.35);
  filter: brightness(1.06);
}
.execute-btn:active,
.ui-btn.primary:active {
  transform: translateY(0);
  filter: brightness(.97);
}
.execute-btn::after,
.ui-btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position .5s ease;
  pointer-events: none;
}
.execute-btn:hover::after,
.ui-btn.primary:hover::after {
  background-position: -20% 0;
}

/* ---------- AI improve chips on the live preview (the actual visible
   improve control — [data-improve-field] buttons are hidden at runtime
   by mycv-ai-worker-bridge.js and replaced by these circular chips) --- */
.mycv-improve-chip {
  animation: mycvOrbBreathe 2.8s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mycv-improve-chip:hover {
  animation-play-state: paused;
  transform: scale(1.12);
  filter: brightness(1.12);
  box-shadow: 0 8px 22px rgba(139,92,246,.35);
}
.mycv-radial-improve-menu {
  animation: mycvFadeScaleIn .18s ease-out;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}


/* ---------- Section cards ---------- */
.section-title {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.section-title:hover {
  box-shadow: 0 14px 34px rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.35);
}

/* ---------- Feature "+" orb button ---------- */
.orb-btn {
  animation: mycvOrbBreathe 2.6s ease-in-out infinite;
}
.orb-btn:hover {
  animation-play-state: paused;
  filter: brightness(1.15);
}

/* ---------- CV photo: add / remove controls ----------
   The placeholder used to be an inert grey box that looked like an
   undeletable photo and gave no hint a photo could be added. It is now a
   real button, and uploaded photos carry their own delete control so they
   can be removed where they are seen. Both are stripped on export. */
.cv-photo-placeholder {
  position: relative;
  border: 2px dashed rgba(37, 99, 235, .45) !important;
  cursor: pointer;
  padding: 0;
  display: grid !important;
  place-items: center;
  transition: border-color .15s ease, filter .15s ease, transform .15s ease;
}
.cv-photo-placeholder:hover {
  border-color: rgba(37, 99, 235, .9) !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.cv-photo-placeholder-hint {
  display: grid;
  place-items: center;
  line-height: 1;
  color: #2563eb;
  font-weight: 900;
  font-size: 1.5rem;
  pointer-events: none;
}
.cv-photo-placeholder-hint small {
  font-size: .62rem;
  font-weight: 800;
  margin-top: 3px;
}

.photo-remove-btn {
  position: absolute;
  /* Top-RIGHT on purpose: the floating #localImproveBtn ("AI") is positioned
     at the clicked element's top-left with z-index 4200, so a delete control
     in that corner would sit underneath it and be unclickable.
     Kept inside the box because .photo-draggable sets overflow:hidden to crop
     the image to its rounded corners, which would clip an outset button. */
  top: 5px;
  right: 5px;
  z-index: 4300;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
  /* Always visible rather than revealed on hover: touch devices have no
     hover state, so a hover-only delete control is unreachable on mobile. */
  opacity: 1;
  transition: transform .15s ease, filter .15s ease;
  box-shadow: 0 4px 12px rgba(185, 28, 28, .45);
}
.photo-remove-btn:hover {
  transform: scale(1.12);
  filter: brightness(1.1);
}

/* ---------- Extra-page corner delete button ---------- */
.cv-extra-page {
  position: relative;
}
.page-delete-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  box-shadow: 0 4px 12px rgba(185,28,28,.20);
}
.page-delete-btn:hover {
  transform: scale(1.1);
  background: #fecaca;
}

/* ---------- Add-page control below the last page ---------- */
.add-page-control {
  display: flex;
  justify-content: center;
  padding: 18px 0 6px;
}
.add-page-btn {
  border: 2px dashed rgba(37,99,235,.35);
  border-radius: 14px;
  background: rgba(37,99,235,.05);
  color: #2563eb;
  font-weight: 800;
  padding: 12px 28px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.add-page-btn:hover {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.6);
  transform: translateY(-1px);
}

/* ---------- Modals: entrance motion (glass backdrop already exists) --- */
.mycv-visual-modal .visual-modal-panel,
.mycv-interview-modal .mycv-interview-card {
  animation: mycvFadeScaleIn .22s ease-out;
}

/* ---------- Pre-existing readability bugs (not caused by this file,
   fixed here since it's the same isolated stylesheet and easiest to
   verify/roll back). Confirmed via a contrast audit script: white
   card panels inheriting the page's dark-theme (near-white) text
   colors, and a success button with transparent background sitting
   on a dark bar behind near-black text. Selectors below are written
   with extra specificity (ID + class chains) because the legacy
   stylesheet has a more specific rule already using !important. */
#featureHub.mycv-visual-modal .visual-modal-panel,
#templateGallery.mycv-visual-modal .visual-modal-panel {
  color: #0f172a;
}
#featureHub .visual-modal-panel h1,
#featureHub .visual-modal-panel h2,
#featureHub .visual-modal-panel h3,
#featureHub .visual-modal-panel strong,
#featureHub .feature-card strong,
#templateGallery .visual-modal-panel h1,
#templateGallery .visual-modal-panel h2,
#templateGallery .visual-modal-panel h3,
#templateGallery .visual-modal-panel strong,
#templateGallery .template-gallery-card strong {
  color: #0f172a !important;
}
#featureHub .visual-modal-panel p,
#featureHub .visual-modal-panel span,
#featureHub .visual-modal-panel .visual-kicker,
#featureHub .feature-card p,
#templateGallery .visual-modal-panel p,
#templateGallery .visual-modal-panel span,
#templateGallery .visual-modal-panel .visual-kicker,
#templateGallery .template-gallery-card p {
  color: #475569 !important;
}
#featureHub .feature-card,
#templateGallery .template-gallery-card {
  background: #f8fbff !important;
  border: 1px solid #dce6f2 !important;
}

/* Note: the PDF export button (.ui-btn.success) was investigated too —
   it has an animated cyan/violet/yellow gradient (background-image) with
   dark navy text, which a plain backgroundColor contrast check flags as
   a false positive (it only sees the transparent background-color, not
   the gradient sitting behind it). Left untouched; it's fine as-is. */

/* ============================================================
   AI Copilot orb — persistent status presence + mobile FAB.
   Single shared element (#copilotOrb): a fixed floating orb above
   the command dock on every screen size. Idle = gentle breathing.
   Thinking = spinning ring + strong glow, driven by the REAL
   body.mycv-ai-working class (set from callMyCVApi whenever a
   genuine /api/ai/* request is in flight — see app.js). Done =
   brief green success flash. On mobile it doubles as the toggle
   for the input/tools bottom sheet (see sheet rules below).
   ============================================================ */
.mycv-copilot-orb {
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 3700;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6);
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  animation: mycvOrbBreathe 3.2s ease-in-out infinite;
  box-shadow: 0 12px 34px rgba(56,189,248,.5), 0 0 0 6px rgba(56,189,248,.14);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.mycv-copilot-orb .orb-core {
  display: grid;
  place-items: center;
  width: 60%;
  height: 60%;
  pointer-events: none;
}
.mycv-copilot-orb .orb-core svg {
  width: 26px;
  height: 26px;
}
.mycv-copilot-orb .orb-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from var(--mycv-angle, 0deg), #38bdf8, #8b5cf6, #35d399, #38bdf8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
body.mycv-ai-working .mycv-copilot-orb {
  animation: mycvOrbBreathe 1s ease-in-out infinite;
  box-shadow: 0 10px 32px rgba(139,92,246,.55);
}
body.mycv-ai-working .mycv-copilot-orb .orb-ring {
  opacity: 1;
  animation: mycvGlassSpin 1.1s linear infinite;
}
.mycv-copilot-orb.is-done {
  animation: none;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 10px 28px rgba(34,197,94,.55);
  transform: scale(1.14);
}
@media (max-width: 980px) {
  .mycv-copilot-orb {
    bottom: 90px;
    width: 72px;
    height: 72px;
  }
}

/* ---------- AI result typewriter reveal: blinking cursor ---------- */
.mycv-revealing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: mycvCursorBlink .9s steps(1) infinite;
}
@keyframes mycvCursorBlink {
  50% { opacity: 0; }
}

/* ---------- Proactive inline suggestion badge ---------- */
.mycv-suggest-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139,92,246,.35);
  background: rgba(139,92,246,.10);
  color: #6d28d9;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
  animation: mycvOrbBreathe 2.4s ease-in-out infinite;
}
.mycv-suggest-badge:hover {
  background: rgba(139,92,246,.18);
}

/* ---------- Mobile: unified sheet with two tabs (fields / tools) ---------- */
@media (max-width: 980px) {
  .mycv-sheet-tabs {
    display: none;
    position: fixed;
    right: 10px;
    left: 10px;
    bottom: calc(min(72vh, 680px) + 10px);
    z-index: 3450;
    gap: 8px;
    padding: 6px;
    background: rgba(15,23,42,.94);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  body.inputs-sheet-open .mycv-sheet-tabs {
    display: flex;
  }
  .mycv-sheet-tabs button {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 9px 8px;
    background: transparent;
    color: rgba(255,255,255,.66);
    font-weight: 800;
    font-size: .82rem;
    cursor: pointer;
  }
  .mycv-sheet-tabs button.is-active {
    background: #38bdf8;
    color: #0b1220;
  }
  body.studio-rebuild.inputs-sheet-open .side-stack{
    position: fixed !important;
    right: 10px !important;
    left: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    z-index: 3440 !important;
    height: min(72vh, 680px) !important;
    max-height: 72vh !important;
    overflow: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    transform: translateY(0) !important;
    transition: transform .28s ease !important;
    border-radius: 22px 22px 14px 14px !important;
    background: #fff !important;
    box-shadow: 0 -18px 45px rgba(15,23,42,.35) !important;
  }
  body.studio-rebuild.sheet-tab-tools .studio-editor-panel { display: none !important; }
  body.inputs-sheet-open:not(.sheet-tab-tools) .side-stack { display: none !important; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .command-dock::before,
  body.mycv-ai-working .command-dock,
  .orb-btn,
  .mycv-improve-chip,
  .mycv-visual-modal .visual-modal-panel,
  .mycv-interview-modal .mycv-interview-card,
  .mycv-copilot-orb,
  body.mycv-ai-working .mycv-copilot-orb,
  body.mycv-ai-working .mycv-copilot-orb .orb-ring,
  .mycv-suggest-badge {
    animation: none !important;
  }
  .mycv-revealing::after {
    animation: none !important;
    opacity: 1 !important;
  }
}