/**
 * NeuroTOC AI — Public Stylesheet
 * Design language: Notion × Linear × Vercel Docs
 * ------------------------------------------------------------------ */

/* ---- Design tokens ------------------------------------------------ */
:root {
  --ntoc-radius:        8px;
  --ntoc-radius-sm:     4px;
  --ntoc-radius-lg:     12px;
  --ntoc-font-scale:    1;
  --ntoc-font-size:     calc(0.875rem * var(--ntoc-font-scale, 1));
  --ntoc-font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  --ntoc-font-mono:     "SF Mono", "Fira Code", monospace;

  /* Light palette */
  --ntoc-bg:            #ffffff;
  --ntoc-bg-hover:      #f4f4f5;
  --ntoc-border:        #e4e4e7;
  --ntoc-text:          #18181b;
  --ntoc-text-muted:    #71717a;
  --ntoc-accent:        #6366f1;
  --ntoc-accent-light:  #eef2ff;
  --ntoc-active:        #6366f1;
  --ntoc-active-bg:     #eef2ff;
  --ntoc-shadow:        0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08);
  --ntoc-shadow-lg:     0 4px 12px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.12);
  --ntoc-transition:    150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode */
[data-neurotoc-theme="dark"], .neurotoc-ai--dark {
  --ntoc-bg:            #18181b;
  --ntoc-bg-hover:      #27272a;
  --ntoc-border:        #3f3f46;
  --ntoc-text:          #fafafa;
  --ntoc-text-muted:    #a1a1aa;
  --ntoc-accent:        #818cf8;
  --ntoc-accent-light:  #1e1b4b;
  --ntoc-active:        #818cf8;
  --ntoc-active-bg:     #1e1b4b;
  --ntoc-shadow:        0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
  --ntoc-shadow-lg:     0 4px 12px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}

/* Dyslexia mode */
[data-neurotoc-dyslexia="true"] .neurotoc-ai {
  --ntoc-font-family:   "OpenDyslexic", "Comic Sans MS", cursive;
  letter-spacing:       0.05em;
  word-spacing:         0.1em;
  line-height:          1.8;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .neurotoc-ai *,
  .neurotoc-ai-floating__panel,
  .neurotoc-ai-floating__trigger {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Base wrapper                                                        */
/* ------------------------------------------------------------------ */
.neurotoc-ai {
  font-family:    var(--ntoc-font-family);
  font-size:      var(--ntoc-font-size);
  color:          var(--ntoc-text);
  background:     var(--ntoc-bg);
  border:         1px solid var(--ntoc-border);
  border-radius:  var(--ntoc-radius-lg);
  padding:        1rem 1.25rem;
  margin:         1.5rem 0;
  max-width:      660px;
  box-shadow:     var(--ntoc-shadow);
  contain:        content;
}

/* ---- Header ------------------------------------------------------- */
.neurotoc-ai__header {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  margin-bottom:  0.75rem;
  user-select:    none;
}

.neurotoc-ai__icon {
  display:        flex;
  color:          var(--ntoc-accent);
  flex-shrink:    0;
}

.neurotoc-ai__title {
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--ntoc-text-muted);
  flex:           1;
}

.neurotoc-ai__reading-time {
  font-size:      0.75rem;
  color:          var(--ntoc-text-muted);
  background:     var(--ntoc-bg-hover);
  padding:        0.1rem 0.4rem;
  border-radius:  var(--ntoc-radius-sm);
}

.neurotoc-ai__toggle {
  background:     none;
  border:         none;
  cursor:         pointer;
  color:          var(--ntoc-text-muted);
  padding:        0.25rem;
  border-radius:  var(--ntoc-radius-sm);
  display:        flex;
  align-items:    center;
  transition:     color var(--ntoc-transition), background var(--ntoc-transition);
}
.neurotoc-ai__toggle:hover { color: var(--ntoc-text); background: var(--ntoc-bg-hover); }
.neurotoc-ai__toggle svg  { transition: transform var(--ntoc-transition); }
.neurotoc-ai--collapsed .neurotoc-ai__toggle svg { transform: rotate(180deg); }

/* ---- Lists -------------------------------------------------------- */
.neurotoc-ai__list,
.neurotoc-ai__sub-list {
  list-style:     none;
  margin:         0;
  padding:        0;
}

.neurotoc-ai__sub-list {
  padding-left:   1rem;
  margin-top:     0.125rem;
  border-left:    2px solid var(--ntoc-border);
  margin-left:    0.5rem;
}

.neurotoc-ai__item {
  margin:         0;
}

.neurotoc-ai__link {
  display:        flex;
  align-items:    center;
  gap:            0.375rem;
  padding:        0.3125rem 0.5rem;
  border-radius:  var(--ntoc-radius-sm);
  color:          var(--ntoc-text-muted);
  text-decoration:none;
  font-size:      var(--ntoc-font-size);
  line-height:    1.45;
  transition:     color var(--ntoc-transition), background var(--ntoc-transition);
  position:       relative;
}

.neurotoc-ai__link:hover {
  color:          var(--ntoc-text);
  background:     var(--ntoc-bg-hover);
}

.neurotoc-ai__link:focus-visible {
  outline:        2px solid var(--ntoc-accent);
  outline-offset: 2px;
}

/* Active state */
.neurotoc-ai__item.neurotoc-ai--active > .neurotoc-ai__link {
  color:          var(--ntoc-active);
  background:     var(--ntoc-active-bg);
  font-weight:    500;
}

/* Progress indicator dot */
.neurotoc-ai__progress-indicator {
  width:          5px;
  height:         5px;
  border-radius:  50%;
  background:     var(--ntoc-active);
  flex-shrink:    0;
  opacity:        0;
  margin-left:    auto;
  transform:      scale(0);
  transition:     opacity var(--ntoc-transition), transform var(--ntoc-transition);
}
.neurotoc-ai__item.neurotoc-ai--active > .neurotoc-ai__link .neurotoc-ai__progress-indicator {
  opacity:        1;
  transform:      scale(1);
}

/* Depth indentation */
.neurotoc-ai__item--depth-2 > .neurotoc-ai__link { padding-left: 1rem; }
.neurotoc-ai__item--depth-3 > .neurotoc-ai__link { padding-left: 1.5rem; }

/* CTA slot */
.neurotoc-ai__cta {
  margin-top:     0.75rem;
  padding-top:    0.75rem;
  border-top:     1px solid var(--ntoc-border);
}

/* ------------------------------------------------------------------ */
/* Collapsible                                                         */
/* ------------------------------------------------------------------ */
.neurotoc-ai__body {
  overflow:       hidden;
  transition:     height var(--ntoc-transition);
}
.neurotoc-ai--collapsed .neurotoc-ai__body { display: none; }

/* ------------------------------------------------------------------ */
/* Floating TOC                                                        */
/* ------------------------------------------------------------------ */
.neurotoc-ai--floating {
  position:     fixed;
  z-index:      9999;
  margin:       0;
  max-width:    none;
  border:       none;
  background:   none;
  box-shadow:   none;
  padding:      0;
}

/* Position variants */
.neurotoc-ai--floating[data-position="bottom-right"] { bottom: 1.5rem; right: 1.5rem; }
.neurotoc-ai--floating[data-position="bottom-left"]  { bottom: 1.5rem; left:  1.5rem; }
.neurotoc-ai--floating[data-position="top-right"]    { top:    5rem;   right: 1.5rem; }
.neurotoc-ai--floating[data-position="top-left"]     { top:    5rem;   left:  1.5rem; }

/* Trigger pill */
.neurotoc-ai-floating__trigger {
  display:          flex;
  align-items:      center;
  gap:              0.4rem;
  background:       var(--ntoc-bg);
  border:           1px solid var(--ntoc-border);
  border-radius:    2rem;
  padding:          0.5rem 0.875rem 0.5rem 0.625rem;
  cursor:           pointer;
  color:            var(--ntoc-text);
  font-size:        0.8125rem;
  font-family:      var(--ntoc-font-family);
  font-weight:      500;
  box-shadow:       var(--ntoc-shadow-lg);
  transition:       transform var(--ntoc-transition), box-shadow var(--ntoc-transition);
  position:         relative;
}
.neurotoc-ai-floating__trigger:hover {
  transform:        translateY(-1px);
  box-shadow:       0 6px 20px rgba(0,0,0,.15);
}
.neurotoc-ai-floating__trigger:focus-visible {
  outline:          2px solid var(--ntoc-accent);
  outline-offset:   2px;
}

.neurotoc-ai-floating__icon { color: var(--ntoc-accent); }

/* Progress ring */
.neurotoc-ai-floating__progress-ring {
  position:     absolute;
  top:          -3px;
  right:        -3px;
  pointer-events: none;
}
.neurotoc-ai-floating__ring-bg {
  fill:         none;
  stroke:       var(--ntoc-border);
  stroke-width: 3;
}
.neurotoc-ai-floating__ring-fill {
  fill:         none;
  stroke:       var(--ntoc-accent);
  stroke-width: 3;
  transform:    rotate(-90deg);
  transform-origin: center;
  transition:   stroke-dasharray 0.3s ease;
}

/* Panel */
.neurotoc-ai-floating__panel {
  position:       absolute;
  bottom:         calc(100% + 0.5rem);
  right:          0;
  width:          280px;
  max-height:     70vh;
  background:     var(--ntoc-bg);
  border:         1px solid var(--ntoc-border);
  border-radius:  var(--ntoc-radius-lg);
  box-shadow:     var(--ntoc-shadow-lg);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  opacity:        0;
  transform:      translateY(8px) scale(0.97);
  transition:     opacity var(--ntoc-transition), transform var(--ntoc-transition);
  pointer-events: none;
}
.neurotoc-ai-floating--visible .neurotoc-ai-floating__panel {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
}

[data-position="bottom-left"] .neurotoc-ai-floating__panel  { right: auto; left: 0; }
[data-position="top-right"]   .neurotoc-ai-floating__panel,
[data-position="top-left"]    .neurotoc-ai-floating__panel  {
  bottom: auto;
  top:    calc(100% + 0.5rem);
  transform-origin: top center;
}

.neurotoc-ai-floating__header {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.875rem 1rem 0.625rem;
  border-bottom:  1px solid var(--ntoc-border);
}
.neurotoc-ai-floating__title {
  flex:           1;
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.03em;
  color:          var(--ntoc-text-muted);
  text-transform: uppercase;
}
.neurotoc-ai-floating__time {
  display:        flex;
  align-items:    center;
  gap:            0.2rem;
  font-size:      0.75rem;
  color:          var(--ntoc-text-muted);
}
.neurotoc-ai-floating__close {
  background:     none;
  border:         none;
  cursor:         pointer;
  color:          var(--ntoc-text-muted);
  padding:        0.2rem;
  border-radius:  var(--ntoc-radius-sm);
  display:        flex;
  transition:     color var(--ntoc-transition), background var(--ntoc-transition);
}
.neurotoc-ai-floating__close:hover { color: var(--ntoc-text); background: var(--ntoc-bg-hover); }

.neurotoc-ai-floating__reading-bar {
  height:         2px;
  background:     var(--ntoc-border);
}
.neurotoc-ai-floating__reading-progress {
  height:         100%;
  background:     var(--ntoc-accent);
  transition:     width 0.2s ease;
  width:          0%;
}

.neurotoc-ai-floating__nav {
  overflow-y:     auto;
  padding:        0.5rem;
  flex:           1;
  scrollbar-width: thin;
  scrollbar-color: var(--ntoc-border) transparent;
}

/* ------------------------------------------------------------------ */
/* Timeline layout                                                     */
/* ------------------------------------------------------------------ */
.neurotoc-ai--timeline {
  padding:        1.25rem 1.5rem;
  position:       relative;
}

.neurotoc-ai-timeline__list {
  list-style:     none;
  margin:         0;
  padding:        0;
  position:       relative;
  padding-left:   2rem;
}

.neurotoc-ai-timeline__track {
  position:       absolute;
  left:           calc(1.5rem + 7px);
  top:            3rem;
  bottom:         1.25rem;
  width:          2px;
  background:     var(--ntoc-border);
  overflow:       hidden;
}
.neurotoc-ai-timeline__progress-line {
  width:          100%;
  height:         0%;
  background:     linear-gradient(to bottom, var(--ntoc-accent), var(--ntoc-accent));
  transition:     height 0.2s ease;
}

.neurotoc-ai-timeline__item {
  position:       relative;
  margin-bottom:  0.25rem;
}

.neurotoc-ai-timeline__dot {
  position:       absolute;
  left:           -1.75rem;
  top:            50%;
  transform:      translateY(-50%);
  width:          12px;
  height:         12px;
  border-radius:  50%;
  background:     var(--ntoc-bg);
  border:         2px solid var(--ntoc-border);
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     border-color var(--ntoc-transition), background var(--ntoc-transition);
  z-index:        1;
}
.neurotoc-ai-timeline__dot-inner {
  width:          4px;
  height:         4px;
  border-radius:  50%;
  background:     transparent;
  transition:     background var(--ntoc-transition);
}

.neurotoc-ai-timeline__item.neurotoc-ai--active .neurotoc-ai-timeline__dot {
  border-color:   var(--ntoc-accent);
}
.neurotoc-ai-timeline__item.neurotoc-ai--active .neurotoc-ai-timeline__dot-inner {
  background:     var(--ntoc-accent);
}

.neurotoc-ai-timeline__link {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.3125rem 0.5rem;
  border-radius:  var(--ntoc-radius-sm);
  color:          var(--ntoc-text-muted);
  text-decoration:none;
  transition:     color var(--ntoc-transition), background var(--ntoc-transition);
}
.neurotoc-ai-timeline__link:hover { color: var(--ntoc-text); background: var(--ntoc-bg-hover); }
.neurotoc-ai-timeline__item.neurotoc-ai--active .neurotoc-ai-timeline__link {
  color:          var(--ntoc-active);
  font-weight:    500;
}

.neurotoc-ai-timeline__number {
  font-size:      0.6875rem;
  font-weight:    600;
  color:          var(--ntoc-text-muted);
  min-width:      1.5rem;
  text-align:     right;
  flex-shrink:    0;
}
.neurotoc-ai-timeline__item--depth-3 .neurotoc-ai-timeline__link { padding-left: 1rem; }
.neurotoc-ai-timeline__item--depth-4 .neurotoc-ai-timeline__link { padding-left: 1.75rem; }

/* ------------------------------------------------------------------ */
/* Checklist layout                                                    */
/* ------------------------------------------------------------------ */
.neurotoc-ai--checklist { padding: 1.25rem; }

.neurotoc-ai-checklist__counter {
  font-size:      0.75rem;
  color:          var(--ntoc-text-muted);
  margin-left:    auto;
}

.neurotoc-ai-checklist__progressbar {
  height:         4px;
  background:     var(--ntoc-border);
  border-radius:  2px;
  margin:         0.625rem 0 0.875rem;
  overflow:       hidden;
}
.neurotoc-ai-checklist__progressbar-fill {
  height:         100%;
  background:     linear-gradient(90deg, var(--ntoc-accent), #8b5cf6);
  width:          0%;
  transition:     width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius:  2px;
}

.neurotoc-ai-checklist__list { list-style: none; margin: 0; padding: 0; }

.neurotoc-ai-checklist__item {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.1875rem 0;
}
.neurotoc-ai-checklist__item--depth-1 { padding-left: 1rem; }
.neurotoc-ai-checklist__item--depth-2 { padding-left: 2rem; }

.neurotoc-ai-checklist__checkbox {
  width:          16px;
  height:         16px;
  border-radius:  4px;
  border:         2px solid var(--ntoc-border);
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     border-color var(--ntoc-transition), background var(--ntoc-transition);
}
.neurotoc-ai-checklist__item--done .neurotoc-ai-checklist__checkbox {
  background:     var(--ntoc-accent);
  border-color:   var(--ntoc-accent);
}
.neurotoc-ai-checklist__check-icon { opacity: 0; transition: opacity var(--ntoc-transition); }
.neurotoc-ai-checklist__item--done .neurotoc-ai-checklist__check-icon { opacity: 1; stroke: #fff; }

.neurotoc-ai-checklist__link {
  color:          var(--ntoc-text-muted);
  text-decoration:none;
  font-size:      var(--ntoc-font-size);
  transition:     color var(--ntoc-transition);
  flex:           1;
}
.neurotoc-ai-checklist__link:hover { color: var(--ntoc-text); }
.neurotoc-ai-checklist__item--done .neurotoc-ai-checklist__link {
  color:          var(--ntoc-text-muted);
  text-decoration:line-through;
  opacity:        0.6;
}
.neurotoc-ai-checklist__item.neurotoc-ai--active .neurotoc-ai-checklist__link {
  color:          var(--ntoc-active);
  font-weight:    500;
}

/* ------------------------------------------------------------------ */
/* Block wrapper (Gutenberg)                                           */
/* ------------------------------------------------------------------ */
.neurotoc-ai-block > .neurotoc-ai { margin: 0; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .neurotoc-ai { padding: 0.875rem 1rem; }
  .neurotoc-ai--floating[data-position="bottom-right"],
  .neurotoc-ai--floating[data-position="bottom-left"] { bottom: 1rem; right: 1rem; left: auto; }
  .neurotoc-ai-floating__panel { width: calc(100vw - 2rem); max-width: 320px; }
}

/* ------------------------------------------------------------------ */
/* Animations (only when motion is allowed)                            */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .neurotoc-ai {
    animation: ntoc-fadein 0.3s ease both;
  }
  @keyframes ntoc-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
  }

  .neurotoc-ai__item {
    animation: ntoc-item-in 0.2s ease both;
    animation-delay: calc(var(--ntoc-item-index, 0) * 20ms);
  }
  @keyframes ntoc-item-in {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0);    }
  }
}