/* ============================================================
   AI Page Notes Widget — Premium Redesign
   Scope: #ai-page-notes-* / .apn-*  — zero global overrides
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --apn-bubble-bottom   : 32px;
  --apn-bubble-right    : 32px;
  --apn-panel-width     : 336px;
  --apn-panel-max-h     : 500px;
  --apn-z-bubble        : 99800;
  --apn-z-panel         : 99801;

  /* Palette */
  --apn-gold            : #d4a853;
  --apn-gold-light      : #f0d78c;
  --apn-gold-dim        : #c9963c;
  --apn-violet          : #7289f5;
  --apn-violet-dim      : #4a5dd4;
  --apn-bg-deep         : #080912;
  --apn-bg-panel        : rgba(10, 11, 24, 0.82);
  --apn-surface         : rgba(22, 24, 52, 0.75);
  --apn-surface-hover   : rgba(30, 33, 66, 0.85);
  --apn-border-gold     : rgba(212, 168, 83, 0.28);
  --apn-border-subtle   : rgba(114, 137, 245, 0.14);
  --apn-text            : #e8eaf8;
  --apn-text-dim        : #9da0bf;
  --apn-green           : #4ade80;

  /* Shapes */
  --apn-radius-panel    : 20px;
  --apn-radius-btn      : 10px;

  /* Shadows */
  --apn-shadow-bubble   : 0 0 0 1px rgba(212,168,83,0.35),
                          0 8px 28px rgba(0,0,0,0.55),
                          0 0 40px rgba(212,168,83,0.18);
  --apn-shadow-panel    : 0 0 0 1px rgba(212,168,83,0.18),
                          0 0 0 4px rgba(212,168,83,0.05),
                          0 24px 64px rgba(0,0,0,0.7),
                          0 4px 24px rgba(114,137,245,0.08);
}

/* ══════════════════════════════════════════════════════════════
   BUBBLE
   ══════════════════════════════════════════════════════════════ */
#ai-page-notes-bubble {
  position   : fixed;
  bottom     : var(--apn-bubble-bottom);
  right      : var(--apn-bubble-right);
  z-index    : var(--apn-z-bubble);
  width      : 52px;
  height     : 52px;
  border-radius : 50%;
  border     : none;
  cursor     : grab;
  display    : flex;
  align-items : center;
  justify-content : center;
  font-size  : 1.15rem;
  color      : #0a0b14;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;

  /* Layered gold gradient */
  background : linear-gradient(145deg,
    var(--apn-gold-light) 0%,
    var(--apn-gold)       45%,
    var(--apn-gold-dim)   75%,
    #a8782e               100%
  );
  box-shadow : var(--apn-shadow-bubble);
  transition : transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
               box-shadow 0.2s ease;
}

/* Inner ring overlay */
#ai-page-notes-bubble::before {
  content       : '';
  position      : absolute;
  inset         : 4px;
  border-radius : 50%;
  border        : 1px solid rgba(255,255,255,0.35);
  pointer-events: none;
}

/* Idle pulse ring */
#ai-page-notes-bubble::after {
  content       : '';
  position      : absolute;
  inset         : -6px;
  border-radius : 50%;
  border        : 1.5px solid rgba(212,168,83,0.3);
  animation     : apn-pulse-ring 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes apn-pulse-ring {
  0%   { opacity: 0.9; transform: scale(1);    }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

#ai-page-notes-bubble:hover {
  transform  : scale(1.12) translateY(-2px);
  box-shadow : 0 0 0 1px rgba(212,168,83,0.55),
               0 12px 36px rgba(0,0,0,0.6),
               0 0 60px rgba(212,168,83,0.32);
}
#ai-page-notes-bubble:active { cursor: grabbing; transform: scale(1.04); }

/* Green dot — has notes */
#ai-page-notes-bubble.apn-has-notes .apn-indicator {
  display : block;
}
.apn-indicator {
  display       : none;
  position      : absolute;
  top           : 4px;
  right         : 4px;
  width         : 10px;
  height        : 10px;
  border-radius : 50%;
  background    : var(--apn-green);
  border        : 2px solid var(--apn-bg-deep);
  box-shadow    : 0 0 8px rgba(74,222,128,0.8);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   PANEL
   ══════════════════════════════════════════════════════════════ */
#ai-page-notes-panel {
  position    : fixed;
  z-index     : var(--apn-z-panel);
  width       : var(--apn-panel-width);
  max-height  : var(--apn-panel-max-h);
  display     : flex;
  flex-direction: column;
  overflow    : hidden;

  /* Glass morphism */
  background  : var(--apn-bg-panel);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: var(--apn-radius-panel);
  border      : 1px solid var(--apn-border-gold);
  box-shadow  : var(--apn-shadow-panel);

  /* Default position — JS overrides */
  bottom      : calc(var(--apn-bubble-bottom) + 66px);
  right       : var(--apn-bubble-right);

  /* Open/close animation */
  opacity     : 0;
  transform   : translateY(14px) scale(0.96);
  pointer-events: none;
  transition  : opacity 0.26s cubic-bezier(0.16,1,0.3,1),
                transform 0.26s cubic-bezier(0.16,1,0.3,1);
  will-change : transform, opacity;
}

/* Diagonal gold shimmer line at top edge */
#ai-page-notes-panel::before {
  content       : '';
  position      : absolute;
  top           : 0; left: 0; right: 0;
  height        : 1px;
  background    : linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,83,0.7) 30%,
    rgba(240,215,140,0.9) 50%,
    rgba(212,168,83,0.7) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index       : 1;
}

/* Subtle violet glow in corner */
#ai-page-notes-panel::after {
  content       : '';
  position      : absolute;
  bottom        : -40px; right: -30px;
  width         : 180px; height: 180px;
  border-radius : 50%;
  background    : radial-gradient(circle, rgba(114,137,245,0.09) 0%, transparent 70%);
  pointer-events: none;
}

#ai-page-notes-panel.apn-open {
  opacity        : 1;
  transform      : translateY(0) scale(1);
  pointer-events : all;
}

/* ── Header ──────────────────────────────────────────────────── */
.apn-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 15px 18px 13px;
  flex-shrink     : 0;
  position        : relative;
  background      : linear-gradient(135deg,
    rgba(212,168,83,0.09) 0%,
    rgba(114,137,245,0.05) 100%
  );
  border-bottom   : 1px solid var(--apn-border-gold);
}

.apn-title {
  display     : flex;
  align-items : center;
  gap         : 10px;
}

.apn-title-icon {
  width           : 30px;
  height          : 30px;
  border-radius   : 8px;
  background      : linear-gradient(135deg, var(--apn-gold) 0%, var(--apn-gold-dim) 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #0a0b14;
  font-size       : 0.82rem;
  box-shadow      : 0 2px 8px rgba(212,168,83,0.4),
                    inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink     : 0;
}

.apn-title-text {
  font-family     : 'Poppins', system-ui, sans-serif;
  font-size       : 0.72rem;
  font-weight     : 700;
  letter-spacing  : 0.14em;
  text-transform  : uppercase;
  background      : linear-gradient(90deg, var(--apn-gold-light), var(--apn-gold));
  -webkit-background-clip: text;
  background-clip : text;
  -webkit-text-fill-color: transparent;
}

.apn-close-btn {
  width       : 30px;
  height      : 30px;
  border-radius: 8px;
  border      : 1px solid rgba(255,255,255,0.08);
  background  : rgba(255,255,255,0.05);
  color       : var(--apn-text-dim);
  cursor      : pointer;
  font-size   : 0.88rem;
  display     : flex;
  align-items : center;
  justify-content: center;
  transition  : background 0.18s, color 0.18s, border-color 0.18s;
  flex-shrink : 0;
}
.apn-close-btn:hover {
  background    : rgba(248,113,113,0.15);
  color         : #fca5a5;
  border-color  : rgba(248,113,113,0.3);
}

/* ── Char counter bar ──────────────────────────────────────── */
.apn-counter-row {
  display         : flex;
  align-items     : center;
  gap             : 10px;
  padding         : 7px 18px 5px;
  background      : rgba(0,0,0,0.12);
  border-bottom   : 1px solid rgba(212,168,83,0.06);
  flex-shrink     : 0;
}
.apn-counter-label {
  font-family : 'Poppins', monospace, sans-serif;
  font-size   : 0.66rem;
  font-weight : 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color       : var(--apn-text-dim);
  white-space : nowrap;
}
.apn-counter-bar-wrap {
  flex        : 1;
  height      : 3px;
  border-radius: 999px;
  background  : rgba(255,255,255,0.06);
  overflow    : hidden;
}
.apn-counter-bar {
  height      : 100%;
  width       : 0%;
  border-radius: 999px;
  background  : linear-gradient(90deg, var(--apn-gold-dim), var(--apn-gold-light));
  transition  : width 0.3s ease;
}

/* ── Textarea ────────────────────────────────────────────────── */
.apn-textarea {
  flex        : 1;
  min-height  : 190px;
  max-height  : 260px;
  resize      : vertical;
  background  : rgba(6, 7, 18, 0.5);
  border      : none;
  border-bottom: 1px solid rgba(212,168,83,0.1);
  color       : var(--apn-text);
  font-family : 'Poppins', system-ui, sans-serif;
  font-size   : 0.875rem;
  line-height : 1.7;
  padding     : 16px 18px;
  outline     : none;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,168,83,0.35) rgba(15,16,28,0.5);
  transition  : background 0.2s;
  position    : relative;
}
.apn-textarea::placeholder {
  color       : rgba(157,160,191,0.5);
  font-style  : italic;
  font-size   : 0.84rem;
}
.apn-textarea:focus {
  background  : rgba(8, 10, 24, 0.7);
  box-shadow  : inset 0 0 0 1px rgba(212,168,83,0.12);
}

/* ── Footer ──────────────────────────────────────────────────── */
.apn-footer {
  display     : flex;
  gap         : 8px;
  padding     : 13px 14px 14px;
  flex-shrink : 0;
  background  : linear-gradient(180deg,
    rgba(10,11,24,0.4) 0%,
    rgba(10,11,24,0.7) 100%
  );
  position    : relative;
}

/* Divider shimmer above footer */
.apn-footer::before {
  content   : '';
  position  : absolute;
  top: 0; left: 14px; right: 14px;
  height    : 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,168,83,0.2) 50%,
    transparent
  );
}

.apn-btn {
  flex        : 1;
  padding     : 8px 6px;
  border-radius: var(--apn-radius-btn);
  border      : 1px solid transparent;
  font-family : 'Poppins', system-ui, sans-serif;
  font-size   : 0.72rem;
  font-weight : 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor      : pointer;
  display     : flex;
  align-items : center;
  justify-content: center;
  gap         : 5px;
  transition  : transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.15s ease,
                background 0.18s ease,
                border-color 0.18s ease;
  position    : relative;
  overflow    : hidden;
}

/* Shimmer on hover */
.apn-btn::after {
  content     : '';
  position    : absolute;
  top: 0; left: -75%;
  width       : 50%;
  height      : 100%;
  background  : linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  transition  : left 0.4s ease;
  pointer-events: none;
}
.apn-btn:hover::after { left: 125%; }
.apn-btn:hover  { transform: translateY(-2px); }
.apn-btn:active { transform: translateY(0) scale(0.97); }

/* Save */
.apn-btn-save {
  background  : linear-gradient(135deg, var(--apn-gold-light) 0%, var(--apn-gold) 50%, var(--apn-gold-dim) 100%);
  color       : #0a0b14;
  border-color: rgba(240,215,140,0.3);
  box-shadow  : 0 2px 12px rgba(212,168,83,0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
}
.apn-btn-save:hover {
  box-shadow  : 0 4px 20px rgba(212,168,83,0.5),
                inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Copy */
.apn-btn-copy {
  background  : rgba(114,137,245,0.12);
  color       : #a5b4ff;
  border-color: rgba(114,137,245,0.25);
  box-shadow  : 0 2px 8px rgba(114,137,245,0.1);
}
.apn-btn-copy:hover {
  background  : rgba(114,137,245,0.22);
  border-color: rgba(114,137,245,0.45);
  box-shadow  : 0 4px 16px rgba(114,137,245,0.22);
}
.apn-btn-copy.apn-copied {
  background  : rgba(74,222,128,0.15);
  color       : #86efac;
  border-color: rgba(74,222,128,0.35);
  box-shadow  : 0 2px 12px rgba(74,222,128,0.2);
}

/* Clear */
.apn-btn-clear {
  background  : rgba(239, 68, 68, 0.08);
  color       : #fca5a5;
  border-color: rgba(239,68,68,0.2);
  box-shadow  : 0 2px 8px rgba(239,68,68,0.08);
}
.apn-btn-clear:hover {
  background  : rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.4);
  box-shadow  : 0 4px 16px rgba(239,68,68,0.18);
}

/* ── Toast ───────────────────────────────────────────────────── */
#ai-page-notes-toast {
  position    : fixed;
  z-index     : calc(var(--apn-z-panel) + 2);
  bottom      : calc(var(--apn-bubble-bottom) + 70px);
  right       : var(--apn-bubble-right);
  background  : rgba(10, 11, 24, 0.92);
  backdrop-filter: blur(12px);
  border      : 1px solid var(--apn-border-gold);
  color       : var(--apn-green);
  font-family : 'Poppins', system-ui, sans-serif;
  font-size   : 0.74rem;
  font-weight : 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding     : 7px 16px;
  border-radius: 999px;
  box-shadow  : 0 4px 22px rgba(0,0,0,0.5),
                0 0 14px rgba(74,222,128,0.12);
  opacity     : 0;
  transform   : translateY(6px);
  transition  : opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
#ai-page-notes-toast.apn-visible {
  opacity     : 1;
  transform   : translateY(0);
}

/* ── Save to All Pages row ───────────────────────────────────── */
.apn-save-all-row {
  padding: 0 14px 14px;
  background: rgba(0,0,0,0.18);
}
.apn-btn-save-all {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(212,168,83,0.28);
  background: linear-gradient(135deg,
    rgba(212,168,83,0.09) 0%,
    rgba(201,150,60,0.06) 100%
  );
  color: rgba(212,168,83,0.85);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease, transform 0.18s ease;
}
/* top shimmer line */
.apn-btn-save-all::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,83,0.45), transparent);
  pointer-events: none;
}
/* sweep on hover */
.apn-btn-save-all::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,168,83,0.12), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.apn-btn-save-all:hover::after { left: 130%; }
.apn-btn-save-all:hover {
  background: linear-gradient(135deg,
    rgba(212,168,83,0.18) 0%,
    rgba(201,150,60,0.12) 100%
  );
  border-color: rgba(212,168,83,0.55);
  color: #f0d78c;
  box-shadow: 0 0 22px rgba(212,168,83,0.15),
              inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.apn-btn-save-all:active { transform: translateY(0) scale(0.98); }
.apn-btn-save-all svg {
  flex-shrink: 0; opacity: 0.72;
  transition: opacity 0.2s, transform 0.35s ease;
}
.apn-btn-save-all:hover svg { opacity: 1; transform: rotate(18deg); }

/* ── Inspector toggle row ────────────────────────────────────── */
.apn-inspect-row {
  padding    : 0 14px 14px;
  background : rgba(0, 0, 0, 0.18);
}
.apn-btn-inspect {
  width           : 100%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 9px;
  padding         : 10px 16px;
  border-radius   : 12px;
  border          : 1px solid rgba(114, 137, 245, 0.3);
  background      : linear-gradient(135deg,
    rgba(114, 137, 245, 0.10) 0%,
    rgba(74, 93, 212, 0.08)   100%
  );
  color           : rgba(165, 180, 255, 0.9);
  font-family     : 'Poppins', system-ui, sans-serif;
  font-size       : 0.71rem;
  font-weight     : 700;
  letter-spacing  : 0.1em;
  text-transform  : uppercase;
  cursor          : pointer;
  position        : relative;
  overflow        : hidden;
  transition      : background 0.22s ease, border-color 0.22s ease,
                    box-shadow 0.22s ease, transform 0.18s ease, color 0.22s ease;
}
.apn-btn-inspect::before {
  content   : '';
  position  : absolute;
  top       : 0; left: 8%; right: 8%;
  height    : 1px;
  background: linear-gradient(90deg, transparent, rgba(114, 137, 245, 0.45), transparent);
  pointer-events: none;
}
.apn-btn-inspect::after {
  content   : '';
  position  : absolute;
  top       : 0; left: -80%;
  width     : 55%;
  height    : 100%;
  background: linear-gradient(90deg, transparent, rgba(114, 137, 245, 0.14), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.apn-btn-inspect:hover::after { left: 130%; }
.apn-btn-inspect:hover {
  background   : linear-gradient(135deg,
    rgba(114, 137, 245, 0.20) 0%,
    rgba(74, 93, 212, 0.14)   100%
  );
  border-color : rgba(114, 137, 245, 0.6);
  color        : #d2dbff;
  box-shadow   : 0 0 22px rgba(114, 137, 245, 0.18),
                 inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform    : translateY(-1px);
}
.apn-btn-inspect:active { transform: translateY(0) scale(0.98); }
.apn-btn-inspect svg {
  flex-shrink: 0;
  opacity    : 0.78;
  transition : opacity 0.2s ease, transform 0.4s ease;
}
.apn-btn-inspect:hover svg { opacity: 1; transform: rotate(-12deg) scale(1.08); }

.apn-inspect-hint {
  margin-left   : auto;
  font-size     : 0.6rem;
  letter-spacing: 0.06em;
  padding       : 2px 7px;
  border-radius : 6px;
  background    : rgba(114, 137, 245, 0.18);
  color         : rgba(210, 219, 255, 0.85);
  text-transform: lowercase;
  border        : 1px solid rgba(114, 137, 245, 0.3);
  font-weight   : 600;
}

/* Active (Inspector ON) — switch palette to gold/alert */
.apn-btn-inspect.apn-inspect-on {
  background   : linear-gradient(135deg,
    rgba(250, 204, 21, 0.20) 0%,
    rgba(217, 119, 6, 0.16)  100%
  );
  border-color : rgba(250, 204, 21, 0.6);
  color        : #fde68a;
  box-shadow   : 0 0 24px rgba(250, 204, 21, 0.28),
                 inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation    : apn-inspect-pulse 1.8s ease-in-out infinite;
}
.apn-btn-inspect.apn-inspect-on .apn-inspect-hint {
  background   : rgba(250, 204, 21, 0.22);
  border-color : rgba(250, 204, 21, 0.45);
  color        : #fef3c7;
}
@keyframes apn-inspect-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(250, 204, 21, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50%      { box-shadow: 0 0 32px rgba(250, 204, 21, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}

/* ── Inspector overlay (highlight rectangle over hovered element) */
#apn-inspect-overlay {
  position       : fixed;
  pointer-events : none;
  z-index        : 99700;
  border         : 2px dashed #facc15;
  border-radius  : 4px;
  background     : rgba(250, 204, 21, 0.08);
  box-shadow     : 0 0 18px rgba(250, 204, 21, 0.30),
                   inset 0 0 0 1px rgba(250, 204, 21, 0.35);
  display        : none;
  transition     : top 0.06s ease, left 0.06s ease,
                   width 0.06s ease, height 0.06s ease;
}
#apn-inspect-overlay.apn-active { display: block; }

/* Floating tag label that follows the hovered element */
#apn-inspect-label {
  position       : fixed;
  pointer-events : none;
  z-index        : 99701;
  background     : linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color          : #0a0b14;
  padding        : 3px 10px;
  border-radius  : 6px;
  font-family    : 'Roboto Mono', 'Consolas', monospace;
  font-size      : 0.7rem;
  font-weight    : 800;
  letter-spacing : 0.02em;
  white-space    : nowrap;
  max-width      : 70vw;
  overflow       : hidden;
  text-overflow  : ellipsis;
  box-shadow     : 0 4px 14px rgba(0, 0, 0, 0.5),
                   0 0 0 1px rgba(250, 204, 21, 0.5);
  display        : none;
}
#apn-inspect-label.apn-active { display: block; }

/* Crosshair cursor + dim non-widget UI to focus the page on inspection */
body.apn-inspect-mode,
body.apn-inspect-mode *:not(#ai-page-notes-bubble):not(#ai-page-notes-bubble *) {
  cursor: crosshair !important;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 520px) {
  #ai-page-notes-panel {
    width       : calc(100vw - 20px) !important;
    right       : 10px !important;
    left        : 10px !important;
    bottom      : calc(var(--apn-bubble-bottom) + 64px) !important;
    max-height  : 58vh;
    border-radius: 16px;
  }
  .apn-btn {
    font-size   : 0.68rem;
    padding     : 7px 4px;
  }
  .apn-inspect-hint { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #ai-page-notes-bubble,
  #ai-page-notes-bubble::after,
  #ai-page-notes-panel,
  #ai-page-notes-toast,
  .apn-btn,
  .apn-btn::after,
  .apn-close-btn,
  .apn-counter-bar,
  .apn-btn-inspect,
  .apn-btn-inspect::after,
  #apn-inspect-overlay { transition: none !important; animation: none !important; }
}