/* Grok preview comments (from the RIOO kit) - loaded inside a shadow root, so nothing here leaks into the site. PREVIEW ONLY. */
:host{all:initial}
.ra{--plum:#2B2065;--plum-2:#3A2E7E;--red:#D7332E;--tart:#F5514C;--ink:#2B2065;--muted:#5B5484;--alab:#F8F1E4;--line:rgba(43,32,101,.14);--ok:#1E8E5A;--amber:#D9921A;
  font:14px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:0}
:where(.ra) *,:where(.ra) *::before,:where(.ra) *::after{box-sizing:border-box}
.ra [hidden]{display:none !important}
:where(.ra) button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;margin:0}
:where(.ra) svg{width:18px;height:18px;flex:none;display:block}
.dock,.mini,.pop,.panel,.pin,.toast{pointer-events:auto}

/* highlight */
.hl{position:fixed;left:0;top:0;pointer-events:none;border:2px solid var(--red);border-radius:6px;background:rgba(215,51,46,.08);box-shadow:0 0 0 4000px rgba(43,32,101,.04);transition:transform .06s linear,width .06s linear,height .06s linear;z-index:1}
.hl__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:4px;max-width:320px;padding:2px 7px;border-radius:5px;background:var(--plum);color:#fff;font:600 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl.tag-below .hl__tag{bottom:auto;top:100%;margin:4px 0 0}

/* pins */
.pins{position:fixed;inset:0;pointer-events:none;z-index:2}
.pin{position:fixed;left:0;top:0;width:26px;height:26px;border-radius:50% 50% 50% 4px;display:grid;place-items:center;background:var(--red);color:#fff !important;font:700 12px/1 "Inter",system-ui,sans-serif;
  box-shadow:0 0 0 2px #fff,0 6px 14px -4px rgba(43,32,101,.55);transition:box-shadow .15s, background .15s}
.pin:hover,.pin.is-active{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(215,51,46,.35),0 8px 18px -4px rgba(43,32,101,.6)}
.pin.is-in-progress{background:var(--amber)}
.pin.is-done{background:#8E8AA8}
.pin.is-local{outline:2px dashed var(--amber);outline-offset:2px}
.pin.is-flash{animation:raflash 1.2s ease 1}
@keyframes raflash{0%,100%{transform-origin:center}30%{box-shadow:0 0 0 2px #fff,0 0 0 12px rgba(215,51,46,.35)}}
.pin--static{position:static;transform:none !important;width:22px;height:22px;font-size:11px;box-shadow:none}

/* hint */
.hint{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:5;padding:8px 14px;border-radius:999px;background:var(--plum);color:#fff;font-size:13px;box-shadow:0 12px 30px -12px rgba(23,18,47,.6);pointer-events:none;white-space:nowrap}
.hint b{display:inline-block;padding:0 5px;margin:0 2px;border-radius:4px;background:rgba(255,255,255,.18);font-weight:700}

/* dock */
.dock{position:fixed;left:20px;bottom:20px;z-index:6;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--plum);color:#fff;box-shadow:0 16px 34px -14px rgba(23,18,47,.7),0 0 0 1px rgba(255,255,255,.06) inset}
.dock__main{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:999px;color:#fff;font-weight:600;font-size:14px;transition:background .15s}
.dock__main:hover{background:rgba(255,255,255,.1)}
.dock__main.is-on{background:var(--red)}
.dock__main.is-on:hover{background:var(--tart)}
.dock__n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.dock__main.is-on .dock__n{background:#fff;color:var(--red)}
.dock__btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.85)}
.dock__btn:hover{background:rgba(255,255,255,.12);color:#fff}
.dock__min svg{width:14px;height:14px}
.dock__dot{width:8px;height:8px;margin:0 4px;border-radius:50%;background:#9A96B5;flex:none}
.dock__dot.is-on,.sdot.is-on{background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.2)}
.dock__dot.is-off,.sdot.is-off{background:var(--amber);box-shadow:0 0 0 3px rgba(217,146,26,.25)}
.dock__dot.is-sync,.sdot.is-sync{background:#8DB5FF;animation:rapulse 1s ease-in-out infinite}
@keyframes rapulse{50%{opacity:.35}}
.mini{position:fixed;left:16px;bottom:16px;z-index:6;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--plum);color:#fff;box-shadow:0 12px 26px -10px rgba(23,18,47,.7);opacity:.85}
.mini:hover{opacity:1}
.mini__n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);font-size:10px;font-weight:700;display:grid;place-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:999px;font-weight:600;font-size:13px;transition:background .15s,color .15s}
.btn--primary{background:var(--red);color:#fff !important}
.btn--primary:hover{background:var(--tart)}
.btn--ghost{background:rgba(43,32,101,.07);color:var(--plum)}
.btn--ghost:hover{background:rgba(43,32,101,.13)}
.btn--danger{color:var(--red);padding:0 10px}
.btn--danger:hover{background:rgba(215,51,46,.08)}
.iconbtn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.iconbtn:hover{background:rgba(43,32,101,.08);color:var(--plum)}
.iconbtn svg{width:16px;height:16px}

/* popover */
.pop{position:fixed;z-index:8;width:min(360px,calc(100vw - 24px));padding:14px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -20px rgba(23,18,47,.45),0 0 0 1px var(--line)}
.pop.is-sheet{left:8px !important;right:8px;top:auto !important;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;border-radius:20px;max-height:70vh;overflow:auto}
.pop__hd{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.pop__num{flex:none;width:26px;height:26px;border-radius:50% 50% 50% 4px;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:700;font-size:12px}
.pop__num.is-in-progress{background:var(--amber)}.pop__num.is-done{background:#8E8AA8}
.pop__ctx{flex:1;min-width:0}
.pop__ctx b{display:block;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop__ctx small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop__up{display:block;margin:-2px 0 8px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--plum);background:rgba(43,32,101,.07)}
.pop__up:hover{background:rgba(43,32,101,.13)}
.pop__ta{display:block;width:100%;min-height:96px;resize:vertical;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#FCFAF6;color:var(--ink);font:16px/1.45 "Inter",system-ui,sans-serif;outline:none}
.pop__ta:focus{border-color:var(--plum);background:#fff;box-shadow:0 0 0 3px rgba(43,32,101,.12)}
.pop__ta.is-err{border-color:var(--red)}
.pop__ft{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.pop__ft .sp{flex:1}
.pop__text{margin:0 0 10px;font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.pop__shot{display:block;max-width:100%;max-height:160px;margin:0 0 10px;border-radius:10px;border:1px solid var(--line);object-fit:cover;object-position:top}
.seg{display:flex;padding:3px;border-radius:999px;background:rgba(43,32,101,.07);gap:2px}
.seg button{flex:1;height:30px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button.is-on{background:#fff;color:var(--plum);box-shadow:0 2px 6px -2px rgba(43,32,101,.3)}
.reply{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--alab);border-left:3px solid var(--plum)}
.reply__who{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);margin-bottom:2px}
.reply p{margin:0;font-size:13.5px;white-space:pre-wrap}

/* panel */
.panel{position:fixed;top:12px;right:12px;bottom:12px;z-index:7;width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 30px 70px -24px rgba(23,18,47,.5),0 0 0 1px var(--line);overflow:hidden}
.panel__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 18px 10px;background:var(--plum);color:#fff}
.panel__hd .iconbtn{color:rgba(255,255,255,.8)}.panel__hd .iconbtn:hover{background:rgba(255,255,255,.12);color:#fff}
.panel__eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tart)}
.panel__title{margin:2px 0 0;font-size:18px;line-height:1.25;font-weight:700;color:#fff}
.panel__tabs{display:flex;gap:4px;padding:0 14px 12px;background:var(--plum)}
.panel__tabs button{height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75)}
.panel__tabs button.is-on{background:rgba(255,255,255,.16);color:#fff}
.panel__filters{display:flex;gap:6px;padding:12px 14px 8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.panel__filters button{height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);box-shadow:0 0 0 1px var(--line) inset}
.panel__filters button.is-on{background:var(--plum);color:#fff;box-shadow:none}
.panel__list{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 10px 14px}
.grp{margin:12px 6px 4px;font-size:12px;font-weight:700}
.grp a{color:var(--plum)}
.item{padding:12px;border-radius:14px;cursor:pointer;transition:background .15s}
.item:hover{background:#F6F2EA}
.item+.item{margin-top:2px}
.item__hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.item__hd time{margin-left:auto;color:var(--muted);font-size:11.5px}
.item__text{margin:0 0 4px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.item__ctx{margin:0 0 6px;color:var(--muted);font-size:12px;word-break:break-word}
.item__ctx code{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(43,32,101,.06);padding:1px 5px;border-radius:4px}
.warn{color:var(--red);font-weight:600}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:capitalize;background:rgba(215,51,46,.1);color:var(--red)}
.chip--in-progress{background:rgba(217,146,26,.14);color:#9A6408}
.chip--done{background:rgba(30,142,90,.12);color:var(--ok)}
.chip--local{background:rgba(217,146,26,.14);color:#9A6408;text-transform:none}
.empty{padding:28px 18px;text-align:center;color:var(--muted)}
.empty p{margin:0 0 6px}
.empty b{color:var(--plum)}
.panel__ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.panel__sync{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.sdot{width:8px;height:8px;border-radius:50%;background:#9A96B5}

/* toast */
.toast{position:fixed;left:20px;bottom:76px;z-index:9;max-width:calc(100vw - 40px);padding:9px 14px;border-radius:12px;background:#17122F;color:#fff;font-size:13px;box-shadow:0 14px 30px -12px rgba(23,18,47,.6)}

/* phones / touch */
@media (max-width:640px){
  .dock{left:12px;bottom:calc(76px + env(safe-area-inset-bottom));padding:4px}
  .dock__main{height:36px;padding:0 12px 0 10px;font-size:13px}
  .dock__btn{width:32px;height:32px}
  .mini{left:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .hint{top:auto;bottom:calc(128px + env(safe-area-inset-bottom));font-size:12.5px}
  .panel{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:72vh;border-radius:22px}
  .toast{left:12px;bottom:calc(128px + env(safe-area-inset-bottom))}
  .pin{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){.hl,.pin,.dock__main{transition:none}.dock__dot.is-sync{animation:none}}

/* drag-to-mark area (generic kit) */
.box{position:fixed;left:0;top:0;pointer-events:none;border:2px dashed var(--red);border-radius:4px;background:rgba(215,51,46,.10);z-index:1}
.pop__draft{margin:6px 2px 0;font-size:12px;color:var(--muted)}
/* movable comment bar */
.dock__grip{width:22px;height:34px;margin-left:2px;border-radius:999px;display:grid;place-items:center;color:rgba(255,255,255,.6);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.dock__grip svg{width:16px;height:16px}
.dock__grip:hover{color:#fff;background:rgba(255,255,255,.1)}
.dock.is-dragging{cursor:grabbing;box-shadow:0 22px 44px -14px rgba(23,18,47,.8),0 0 0 2px rgba(255,255,255,.25) inset}
.dock.is-dragging .dock__grip{cursor:grabbing;color:#fff}
.dock__side svg{width:16px;height:16px}
.dock.is-moved,.mini.is-moved{transition:none}
@media (max-width:640px){.dock__grip{width:28px;height:32px}}
/* pending vs done counts in the bar */
.dock__stat{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap}
.dock__stat:hover{background:rgba(255,255,255,.12);color:#fff}
.dock__stat b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:700}
.dock__pend b{background:var(--red);color:#fff}
.dock__done b{background:#3DDC97;color:#0F3D29}
.dock__stat.is-zero b{background:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
.dock__ip{font-size:11px;font-weight:700;color:#FFD08A}
.dock__ip::before{content:"";display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--amber);vertical-align:1px}
.l-short{display:none}
.panel__donebar{display:flex;flex-direction:column;gap:4px;padding:8px 16px 10px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.panel__donebar label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--plum);cursor:pointer}
.panel__donebar input{accent-color:var(--plum);width:15px;height:15px;margin:0}
.panel__donebar[hidden]{display:none}
.item__when{color:var(--ok);font-weight:600}
.item__acts{display:flex;justify-content:flex-end;margin-top:4px}
.item__acts .btn{height:30px;font-size:12px}
@media (max-width:640px){
  .l-long{display:none}.l-short{display:inline}
  .dock__stat{padding:0 7px;font-size:12px}
  .dock__ip{display:none}
  .dock__lbl{display:none}
}

/* kenzo-share additions: author chip + "You: name" in the panel footer */
.chip--by{background:#eef2ff;color:#3730a3;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel__me{margin-left:auto;margin-right:8px;font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop__ctx small .by{font-weight:600;color:inherit}