/* Study assistant card: live light/dark editor animation, built by js/study-assistant.js */

/* ---------- study assistant (live animation card) ---------- */
@property --split {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 48%;
}

.card--study .card__frame { background: #edeef0; }
.sa { position: absolute; inset: 0; }
.sa__stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 768px; height: 768px;
  transform: translate(-50%, -50%) scale(var(--sa-scale, .56));
  font-family: 'Poppins', sans-serif;
  pointer-events: none;
}
.sa__stage { animation: sa-wipe 7s infinite; }
@keyframes sa-wipe {
  0%   { --split: 0%;   animation-timing-function: linear; }
  12%  { --split: 0%;   animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  40%  { --split: 100%; animation-timing-function: linear; }
  56%  { --split: 100%; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  84%  { --split: 0%;   animation-timing-function: linear; }
  100% { --split: 0%; }
}

.sa .layer { position: absolute; inset: 0; background: var(--bg); }
.sa .layer.dark { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.sa .abs { position: absolute; }

.sa .light {
  --bg: #edeef0; --bg-0: rgba(237, 238, 240, 0); --text: #2d2c2c; --sel: #e2ddf6;
  --bar: #fefefe; --bar-shadow: rgba(177, 177, 177, .4); --ai: #e5dcff; --label: #161719;
  --divider: #d8d7d8; --active: #ededed; --tip-bg: #ffffff; --tip-text: #000000;
}
.sa .dark {
  --bg: #161719; --bg-0: rgba(22, 23, 25, 0); --text: #f3f3f3; --sel: #4c3d54;
  --bar: #22242b; --bar-shadow: rgba(42, 42, 42, .4); --ai: #d9bfff; --label: #cdcdcd;
  --divider: #34363c; --active: #3d404b; --tip-bg: #22242b; --tip-text: #e5e5e5;
}

.sa .layer { overflow: hidden; }

/* Toolbar + text as one block, centered in the square stage.
   The block is as wide as the toolbar; the text wraps to that width. */
.sa .group {
  position: absolute;
  left: 50%; top: 248px;
  width: max-content;
  transform: translateX(-50%);
  padding-top: 30px;
}
.sa .sel {
  position: relative;
  background: var(--sel);
  padding: 4px 0 2px;
}
.sa .handle { position: absolute; width: 5px; height: 29px; display: block; }
.sa .handle.l { left: -3px; top: -1px; }
.sa .handle.r { right: -3px; top: 5px; transform: rotate(180deg); }
.sa .copy {
  width: 0; min-width: 100%;
  height: 180px; overflow: hidden;
  margin-top: 21px;
  font-size: 16px; line-height: 30px; font-weight: 400; color: var(--text);
}
.sa .fade {
  left: -400px; right: -400px; top: 125px; height: 159px;
  background: linear-gradient(to bottom, var(--bg-0), var(--bg));
}
.sa .toolbar {
  position: relative; height: 42px;
  display: flex; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 12px;
  background: var(--bar);
  filter: drop-shadow(0 10px 25px var(--bar-shadow));
}
.sa .toolbar img { width: 14px; height: 14px; display: block; }
.sa .chip {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 14px; line-height: 22px; font-weight: 600;
  color: var(--label); white-space: nowrap;
}
.sa .chip.ai { background: var(--ai); color: #22242b; }
.sa .chip.align .pad { padding: 4px; }
.sa .chip.cite img { width: 16px; height: 16px; }
.sa .chip.color { padding: 8px; }
.sa .sep { width: 1px; height: 16px; border-radius: 20px; background: var(--divider); flex-shrink: 0; }
.sa .icons { display: flex; gap: 2px; }
.sa .icon-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.sa .icon-btn.active { background: var(--active); }
.sa .cursor { left: 213px; top: 57px; width: 30px; height: 30px; }
.sa .cursor img {
  position: absolute;
  left: calc(18.48% - .6px); top: calc(18.32% - .6px);
  width: 18.83px; height: 19.81px;
}
.sa .tooltip {
  left: 181px; top: 0; padding: 6px; border-radius: 6px;
  background: var(--tip-bg); color: var(--tip-text);
  font-size: 12px; font-weight: 500; line-height: 12px; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sa__stage { animation: none; }
}