/* Режим размышления: спокойный тёмно-фиолетовый экран в обеих темах, пузырьки рисуются на canvas (reflect.js). */
body.reflect-open{overflow:hidden}
.reflect{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;overflow:auto;color:#f3eefb;background:radial-gradient(1200px 800px at 20% 10%,#4b2f7c 0%,transparent 60%),radial-gradient(900px 700px at 90% 100%,#5d2a63 0%,transparent 60%),linear-gradient(160deg,#241638,#140c22);opacity:0;transition:opacity 420ms cubic-bezier(.2,.8,.2,1)}
.reflect.open{opacity:1}
.reflect.closing{opacity:0;transition-duration:280ms}
.reflect .reflect-bubbles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.reflect .reflect-breath{position:fixed;left:50%;top:50%;width:min(70vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#b196ea26 0%,#b196ea0d 45%,transparent 70%);transform:translate(-50%,-50%) scale(.85);animation:reflect-breath 10s ease-in-out infinite;pointer-events:none}
.reflect .reflect-close{position:fixed;top:20px;right:20px;z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#f3eefb;background:#ffffff14;border:1px solid #ffffff26;backdrop-filter:blur(8px);transition:background 200ms,transform 260ms cubic-bezier(.2,.8,.2,1)}
.reflect .reflect-close:hover{background:#ffffff26;transform:rotate(90deg)}
.reflect .reflect-card{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;width:min(720px,100%);text-align:center;transform:translateY(14px);transition:transform 520ms cubic-bezier(.2,.8,.2,1)}
.reflect.open .reflect-card{transform:none}
.reflect .reflect-kicker{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cbb8ef}
.reflect h2{margin:0;font-size:clamp(24px,3.4vw,38px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#fff}
.reflect h2.swap{animation:reflect-swap 520ms cubic-bezier(.2,.8,.2,1)}
.reflect .reflect-link{padding:4px 10px;border-radius:999px;font-size:12px;color:#d9ccef;background:none;border:0;text-decoration:underline;text-underline-offset:3px}
.reflect .reflect-link:hover{color:#fff}
.reflect .reflect-field{width:100%;margin-top:6px}
.reflect textarea{width:100%;min-height:clamp(180px,34vh,340px);padding:20px 22px;resize:vertical;border-radius:22px;border:1px solid #ffffff2e;background:#ffffff12;color:#fff;font-size:17px;line-height:1.65;backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px #00000099;outline:none;transition:border-color 200ms,background 200ms}
.reflect textarea::placeholder{color:#cbbfdc;opacity:.8}
.reflect textarea:focus{border-color:#c8b0f5;background:#ffffff18}
.reflect .reflect-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.reflect .button{min-height:44px;border-radius:999px;border:1px solid #ffffff33;background:#ffffff14;color:#fff;padding:10px 18px}
.reflect .button:hover{background:#ffffff26}
.reflect .reflect-save{background:#f3eefb;color:#2d1b4a;border-color:#f3eefb}
.reflect .reflect-save:hover{background:#fff}
.reflect .reflect-save.saved{animation:reflect-saved 700ms cubic-bezier(.2,.8,.2,1)}
.reflect .reflect-toggle b{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:4px;border-radius:11px;background:#ffffff26;font-size:11px}
.reflect .reflect-hint{margin:0;font-size:12px;color:#b9abd0}
.reflect .reflect-notes{position:fixed;z-index:2;top:84px;right:20px;bottom:20px;width:min(340px,calc(100vw - 40px));display:grid;align-content:start;gap:10px;padding:16px;overflow:auto;border-radius:22px;background:#1c1230e6;border:1px solid #ffffff1f;backdrop-filter:blur(14px);animation:reflect-notes 360ms cubic-bezier(.2,.8,.2,1)}
.reflect .reflect-notes[hidden]{display:none}
.reflect .reflect-note{padding:12px 14px;border-radius:16px;background:#ffffff0f;text-align:left}
.reflect .reflect-note p{margin:0 0 8px;white-space:pre-wrap;font-size:13px;line-height:1.55;color:#f3eefb}
.reflect .reflect-note footer{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#b9abd0}
.reflect .reflect-note button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#d9ccef;background:none;border:0}
.reflect .reflect-note button:hover{background:#ffffff1a;color:#fff}
.reflect .reflect-empty{margin:8px 0;font-size:13px;color:#b9abd0}
.reflect .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reflect :focus-visible{outline:3px solid #c8b0f5;outline-offset:3px}
@keyframes reflect-breath{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@keyframes reflect-swap{from{opacity:0;transform:translateY(8px)}}
@keyframes reflect-saved{40%{transform:scale(1.06)}}
@keyframes reflect-notes{from{opacity:0;transform:translateX(18px)}}
@media(max-width:760px){.reflect{place-items:start center;padding:76px 16px 24px}.reflect .reflect-close{top:14px;right:14px}.reflect .reflect-notes{top:auto;left:12px;right:12px;bottom:12px;width:auto;max-height:55vh}.reflect textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.reflect,.reflect .reflect-card,.reflect .reflect-close{transition:none}.reflect .reflect-breath,.reflect h2.swap,.reflect .reflect-save.saved,.reflect .reflect-notes{animation:none}}
/* Когда открыт список записей, поле сдвигается влево, чтобы панель его не перекрывала. */
@media(min-width:761px) and (max-width:1560px){.reflect.open:has(.reflect-notes:not([hidden])) .reflect-card{transform:translateX(calc(-1 * min(190px, (100vw - 720px) / 2)))}}
@media(min-width:761px) and (max-width:1180px){.reflect:has(.reflect-notes:not([hidden])) .reflect-card{width:min(720px,calc(100vw - 420px))}}
.reflect .reflect-sync{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff1a;text-align:left;cursor:pointer}
.reflect .reflect-sync input{flex:0 0 18px;min-width:18px;width:18px;height:18px;margin:2px 0 0;padding:0;appearance:auto;-webkit-appearance:checkbox;accent-color:#c8b0f5}
.reflect .reflect-sync span{display:grid;gap:4px}
.reflect .reflect-sync strong{font-size:13px;color:#fff}
.reflect .reflect-sync small{font-size:11px;line-height:1.5;color:#b9abd0}
.reflect .reflect-note footer>span{display:flex;align-items:center;gap:2px}
.reflect .reflect-note .reflect-to-task{display:inline-flex;width:auto;gap:6px;padding:0 10px;border-radius:999px;font-size:11px;color:#e6dcf7}