/* экран Колли: правила и журнал · решение CEO 09.10, источник design-fable/fresh/kolli.html, префикс ko- */
.ko-ko{padding:var(--kl-space-8) 0 var(--kl-space-16);overflow:hidden}
.ko-head{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--kl-space-8);align-items:end;margin-bottom:var(--kl-space-8)}
#assistant h2{margin:0;font-size:var(--kl-h2-size);font-weight:var(--kl-h2-weight);line-height:var(--kl-h2-leading);letter-spacing:var(--kl-h2-tracking)}
#assistant h2 b{font-weight:inherit;color:var(--kl-brand-orange)}
[data-theme="light"] #assistant h2 b{color:var(--kl-on-warm)}
.ko-head ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--kl-space-2);color:var(--kl-text-muted);justify-self:end}
.ko-head li::before{content:"·";margin-right:var(--kl-space-2);color:var(--kl-brand-orange)}
.ko-head li b{font-weight:var(--kl-weight-medium);color:var(--kl-text)}
.ko-hk{display:flex;align-items:center;gap:var(--kl-space-6)}
.ko-hk img{flex:none;width:112px;height:auto}
.ko-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--kl-space-6);align-items:start;max-width:1040px;margin:0 auto}
#ko-glow{position:absolute;inset:-10% -10%;width:120%;height:120%;z-index:-1;pointer-events:none;display:block;-webkit-mask:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 72%);mask:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 72%)}
@media (max-width:760px){#ko-glow{display:none}}
.ko-card{background:var(--kl-surface);border:var(--kl-border) solid var(--kl-line);border-radius:var(--kl-radius-card);box-shadow:var(--kl-shadow-1)}
.ko-meta{color:var(--kl-text-muted);font-size:var(--kl-caption-size)}
.ko-lbl{font-size:var(--kl-caption-size);font-weight:var(--kl-weight-medium);color:var(--kl-text-muted);text-transform:uppercase;letter-spacing:.06em}

/* Колли и роли — круг (§41.5) */
.ko-kolli{flex:none;position:relative;width:40px;height:40px;border-radius:var(--kl-radius-agent);overflow:hidden;background:var(--kl-tint-cold)}
.ko-kolli img{position:absolute;left:50%;top:52%;width:86%;height:auto;transform:translate(-50%,-50%)}
.ko-role{flex:none;position:relative;width:40px;height:40px;border-radius:var(--kl-radius-agent);display:grid;place-items:center;background:var(--kl-tint-cold)}
.ko-role .ko-ic{width:20px;height:20px;background:var(--kl-on-cold);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ko-role i{position:absolute;right:-6px;bottom:-4px;padding:0 4px;border-radius:var(--kl-radius-status);background:var(--kl-on-cold);color:var(--kl-surface);font:var(--kl-weight-medium) 10px/16px var(--kl-font);font-style:normal}

/* слева: мои правила */
.ko-col{display:grid;gap:var(--kl-space-3);min-width:0}
.ko-col>.ko-lbl{padding:0 var(--kl-space-1)}
.ko-rules{display:grid;gap:var(--kl-space-3)}
.ko-rule{padding:var(--kl-space-3) var(--kl-space-4);display:grid;grid-template-columns:auto 1fr auto;gap:var(--kl-space-3);align-items:center}
.ko-rule b{font-weight:var(--kl-weight-medium)}
.ko-rule b small{display:inline;font-weight:var(--kl-body-weight);color:var(--kl-text-muted);font-size:var(--kl-caption-size)}
.ko-rule p{margin:2px 0 0;color:var(--kl-text-muted);font-size:var(--kl-ui-size);line-height:1.35}
.ko-rule.ko-off p,.ko-rule.ko-off b{color:var(--kl-text-muted)}
.ko-sw{flex:none;position:relative;width:44px;height:var(--kl-h-touch);padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.ko-sw::before{content:"";width:40px;height:28px;border-radius:var(--kl-radius-ctl);background:var(--kl-line-strong);transition:background var(--kl-d2) var(--kl-e-std)}
.ko-sw::after{content:"";position:absolute;left:4px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:var(--kl-radius-pill);background:var(--kl-surface);box-shadow:var(--kl-shadow-1);transition:transform var(--kl-d2) var(--kl-e-std)}
.ko-sw[aria-checked="true"]::before{background:var(--kl-brand-blue)}
.ko-sw[aria-checked="true"]::after{transform:translateX(16px)}
.ko-sw:focus-visible{outline:2px solid var(--kl-focus);outline-offset:2px;border-radius:var(--kl-radius-ctl)}
.ko-new{min-height:var(--kl-h-touch);padding:var(--kl-space-4);display:flex;align-items:center;gap:var(--kl-space-3);border:var(--kl-border) dashed var(--kl-line-strong);border-radius:var(--kl-radius-card);color:var(--kl-text-muted)}
.ko-new span{width:40px;height:40px;border-radius:var(--kl-radius-agent);display:grid;place-items:center;border:var(--kl-border) dashed var(--kl-line-strong);font-size:20px;line-height:1}

/* справа: журнал */
.ko-log{padding:var(--kl-space-4);display:grid;gap:var(--kl-space-3)}
.ko-log .ko-hd{display:flex;align-items:center;gap:var(--kl-space-3)}
.ko-log .ko-hd b{display:block;font-weight:var(--kl-weight-medium)}
.ko-log ul{list-style:none;margin:0;padding:0;display:grid}
.ko-row{display:grid;grid-template-columns:44px 1fr auto;gap:var(--kl-space-3);align-items:center;padding:var(--kl-space-2) 0;border-top:var(--kl-border) solid var(--kl-line)}
.ko-row time{color:var(--kl-text-muted);font-size:var(--kl-caption-size);font-variant-numeric:tabular-nums}
.ko-row small{display:block;color:var(--kl-on-cold);font-size:var(--kl-caption-size)}
.ko-undo{height:var(--kl-h-compact);padding:0 var(--kl-space-3);border-radius:var(--kl-radius-ctl);border:var(--kl-border) solid var(--kl-line);background:var(--kl-surface);color:var(--kl-text);font:inherit;font-size:var(--kl-ui-size);cursor:pointer;transition:background var(--kl-d1) var(--kl-e-std)}
.ko-undo:hover{background:var(--kl-surface-2)}
.ko-undo:focus-visible{outline:2px solid var(--kl-focus);outline-offset:2px}
.ko-row.ko-undone>span{color:var(--kl-text-muted);text-decoration:line-through}
.ko-row.ko-undone small{color:var(--kl-text-muted)}
.ko-row .ko-was{color:var(--kl-text-muted);font-size:var(--kl-ui-size);padding:0 var(--kl-space-3)}

/* команда */
.ko-team{grid-column:1/-1;display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));align-items:center;gap:var(--kl-space-4);padding:var(--kl-space-3) var(--kl-space-4)}
.ko-mate{display:flex;align-items:center;gap:var(--kl-space-3);font-size:var(--kl-ui-size)}
.ko-mate small{display:block;color:var(--kl-text-muted);font-size:var(--kl-caption-size)}

/* появление по очереди */
.ko-step{opacity:0;transform:translateY(12px);transition:opacity var(--kl-d4) var(--kl-e-out),transform var(--kl-d4) var(--kl-e-out)}
.ko-step.ko-on{opacity:1;transform:none}

@media (max-width:760px){.ko-ko{padding-top:var(--kl-space-6)}
.ko-head{grid-template-columns:1fr;gap:var(--kl-space-4);margin-bottom:var(--kl-space-6)}
.ko-head ul{justify-self:start}
.ko-hk{flex-direction:column;align-items:flex-start;gap:var(--kl-space-3)}
.ko-hk img{width:96px}
.ko-stage{grid-template-columns:1fr;gap:var(--kl-space-4)}
.ko-rules{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--kl-margin));padding:0 var(--kl-margin) var(--kl-space-1);scroll-padding-inline:var(--kl-margin)}
.ko-rules::-webkit-scrollbar{display:none}
.ko-rules>*{scroll-snap-align:start}
.ko-rule{grid-template-columns:auto 1fr;align-content:start}
.ko-rule .ko-sw{grid-column:2;justify-self:start;margin-left:-2px}
.ko-undo{height:var(--kl-h-touch)}
.ko-row{grid-template-columns:40px 1fr auto;gap:var(--kl-space-2)}
.ko-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--kl-space-3) var(--kl-space-1)}
.ko-team .ko-lbl{grid-column:1/-1}
.ko-mate{flex-direction:column;text-align:center;gap:var(--kl-space-2);font-size:var(--kl-caption-size)}
.ko-mate small{display:none}}
@media (prefers-reduced-motion:reduce){.ko-step,.ko-sw::before,.ko-sw::after,.ko-undo{transition:none}
.ko-step{opacity:1;transform:none}}
/* новая строка журнала въезжает сверху · 09.10 */
.ko-row.ko-new-row{transform:translateY(-8px)}
.ko-row.ko-new-row.ko-on{transform:none}
.ko-row time[data-now]{color:var(--kl-on-cold)}
#assistant{scroll-margin-top:calc(var(--kl-space-16) + var(--kl-space-4))}

/* агенты — свои фигурки: форма, цвет, глаза (по образцу Grok Bot) · 09.10 */
.ko-ag{flex:none;position:relative;width:40px;height:40px;border-radius:var(--kl-radius-agent);display:grid;place-items:center;background:var(--kl-tint-warm)}
.ko-ag-polli{background:var(--kl-tint-cold)}
.ko-ag img{max-width:74%;max-height:74%;object-fit:contain}
.ko-ag i{position:absolute;right:-6px;bottom:-4px;padding:0 4px;border-radius:var(--kl-radius-status);background:var(--kl-on-cold);color:var(--kl-surface);font:var(--kl-weight-medium) 10px/16px var(--kl-font);font-style:normal}
.ko-ag-mini{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:4px}
.ko-ag.ko-busy img{animation:ko-hop .5s var(--kl-e-out) 2}
@keyframes ko-hop{0%,100%{transform:none}45%{transform:translateY(-6px) scale(1.06,.94)}}
@media (prefers-reduced-motion:reduce){.ko-ag.ko-busy img{animation:none}}

/* фигурка — сама форма, без кружка: так их различают (09.10) */
.ko-ag{display:block;width:48px;height:48px;background:none!important;border-radius:0}
.ko-ag img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .12))}
[data-theme="dark"] .ko-ag-molli img,[data-theme="dark"] .ko-ag-mini[src*="molli"]{filter:drop-shadow(0 0 1px rgb(255 255 255 / .55))}
.ko-team .ko-ag,.ko-team .ko-kolli{width:56px;height:56px}
.ko-team .ko-kolli{background:none;overflow:visible;border-radius:0}
.ko-team .ko-kolli img{width:100%;top:50%}
.ko-ag-mini{width:18px;height:18px}
@media (max-width:760px){.ko-team .ko-ag,.ko-team .ko-kolli{width:44px;height:44px}}

/* живой Колли: обёртка вместо картинки · 09.10 */
.ko-hk .kl-live{flex:none;width:112px}
.ko-kolli .kl-live{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%)}
.ko-kolli .kl-live>img{position:static;left:auto;top:auto;width:100%;transform:none}
.ko-kolli .kl-live.kl-happy>img{transform:scale(1.04,.96)}
@media (max-width:760px){.ko-hk .kl-live{width:96px}}

/* объёмный Колли (WebGL) · 09.10 */
.ko-hk .kl-3d{flex:none;width:120px}
.ko-kolli .kl-3d,.m6-kolli .kl-3d,.s5-kolli .kl-3d,.q8-kolli .kl-3d{position:absolute;left:50%;top:52%;width:92%;transform:translate(-50%,-50%)}
.ko-team .ko-kolli .kl-3d{top:50%;width:100%}
.ko-team .ko-kolli{overflow:visible}
@media (max-width:760px){.ko-hk .kl-3d{width:100px}}