/* "Keep improving it yourself" demo: a change is requested in chat and a Follow-up column
   appears in the live deals table. Phases (idle, typing, sending, updating, updated) come from
   feature-motion.js. The new column's space is reserved, so the panel never resizes. */
.ki{align-items:center;font-size:13px;line-height:18px;color:#3d433a}
.ki-window{width:min(470px,100%);background:#fff;border:1px solid #e3e6df;border-radius:16px;box-shadow:0 8px 24px #2834200a;overflow:hidden}
.ki-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #eef0ec;background:#fafbf9}
.ki-bar b{font-weight:600;color:#242823}
.ki-logo{width:16px;height:16px;border-radius:5px;background:#ffac67;box-shadow:-2px -2px 0 #ffdab6}
.ki-version{position:relative;display:grid;margin-left:auto}
.ki-version span{grid-area:1/1;justify-self:end;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;transition:opacity .3s,transform .3s}
.ki-v-old{background:#f1f3ef;color:#8a8f86}
.ki-v-new{background:#fff1e4;color:#9a5a24;opacity:0;transform:translateY(6px)}
.motion-improve[data-phase=updated] .ki-v-old{opacity:0;transform:translateY(-6px)}
.motion-improve[data-phase=updated] .ki-v-new{opacity:1;transform:none}

/* Deals table with a reserved Follow-up column. */
.ki-table{padding:6px 16px 4px}
.ki-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.05fr) minmax(0,.6fr) minmax(0,.85fr);align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f3f4f1}
.ki-row:last-child{border-bottom:0}
.ki-head{padding:6px 0;font-size:11.5px;font-weight:500;color:#9a9e96}
.ki-row b{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500;color:#242823;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ki-row b i{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--c)}
.ki-row em{font-style:normal;padding:2px 8px;border-radius:999px;background:#f1f3ef;color:#626b59;font-size:11.5px;white-space:nowrap}
.ki-row em.ki-won{background:#e4f2e6;color:#4f7c53}
.ki-row>span{font-variant-numeric:tabular-nums;white-space:nowrap}
.ki-row u{text-decoration:none;padding:2px 8px;border-radius:7px;background:#f6f7f4;color:#3d433a;font-size:12px}
.ki-row u.ki-today{background:#fff1e4;color:#9a5a24;font-weight:500}
.ki-row u.ki-none{background:none;color:#b2b6ad}

.ki-new{position:relative;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.motion-improve[data-phase=updated] .ki-new{opacity:1;transform:none;transition-delay:calc(var(--i,0)*.1s + .1s)}
.ki-head .ki-new{--i:-1}
.motion-improve[data-phase=updated] .ki-row:not(.ki-head) .ki-new{animation:ki-flash 1.4s calc(var(--i)*.1s + .1s) both}
/* Placeholder shimmer while the column is being added. */
.ki-new:before{content:'';position:absolute;left:0;top:50%;width:62%;height:10px;margin-top:-5px;border-radius:5px;background:linear-gradient(90deg,#f8e6d6 0,#fff4ea 50%,#f8e6d6 100%);background-size:200% 100%;opacity:0;transition:opacity .2s}
.motion-improve[data-phase=updating] .ki-new{opacity:1;transform:none;color:transparent}
.motion-improve[data-phase=updating] .ki-new>u{visibility:hidden}
.motion-improve[data-phase=updating] .ki-new:before{opacity:1;animation:ki-shimmer 1s linear infinite}

/* Chat composer and status. */
.ki-chat{padding:10px 14px 14px;border-top:1px solid #eef0ec;background:#fcfcfb}
.ki-status{display:flex;align-items:center;gap:8px;height:20px;margin-bottom:8px;font-size:12px;color:#72746f;opacity:0;transition:opacity .25s}
.motion-improve:is([data-phase=sending],[data-phase=updating],[data-phase=updated]) .ki-status{opacity:1}
.ki-spin{position:relative;width:15px;height:15px;flex-shrink:0;border-radius:50%;border:2px solid #f2e2d4;border-top-color:#f08a3c;animation:demo-spin .8s linear infinite}
.motion-improve[data-phase=updated] .ki-spin{animation:none;border:0;background:#e4f2e6}
.motion-improve[data-phase=updated] .ki-spin:after{content:'';position:absolute;left:5px;top:3px;width:3.5px;height:7px;border:solid #4f7c53;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ki-status-done{display:none;color:#3d433a}
.motion-improve[data-phase=updated] .ki-status-busy{display:none}
.motion-improve[data-phase=updated] .ki-status-done{display:inline}

.ki-composer{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 13px;border:1px solid #e3e6df;border-radius:12px;background:#fff;transition:border-color .25s,box-shadow .25s}
.motion-improve[data-phase=typing] .ki-composer{border-color:#ffc896;box-shadow:0 0 0 3px #ffac6726}
.ki-input{position:relative;flex:1;min-width:0;height:20px;font-size:13.5px;white-space:nowrap;overflow:hidden}
.ki-typed,.ki-placeholder{position:absolute;left:0;top:0;transition:opacity .2s}
.ki-typed{color:#242823;opacity:0}
.ki-placeholder{color:#a3a79e}
.motion-improve:is([data-phase=typing],[data-phase=sending]) .ki-typed{opacity:1}
.motion-improve:is([data-phase=typing],[data-phase=sending]) .ki-placeholder{opacity:0}
.motion-improve[data-phase=typing] .ki-typed{animation:ki-type 1.2s .1s steps(34,end) both}
.motion-improve[data-phase=typing] .ki-typed:after{content:'';display:inline-block;width:1.5px;height:15px;margin-left:1px;vertical-align:-3px;background:#242823;animation:ki-caret .5s steps(1) infinite}
.ki-send{width:28px;height:28px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;background:#e9ebe6;color:#fff;transition:background .2s,transform .12s}
.ki-send svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.motion-improve:is([data-phase=typing],[data-phase=sending]) .ki-send{background:#242823}
.motion-improve[data-phase=sending] .ki-send{transform:scale(.88)}

@keyframes ki-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ki-caret{50%{opacity:0}}
@keyframes ki-shimmer{to{background-position:-200% 0}}
@keyframes ki-flash{0%{background:transparent}30%{background:#fff4ea}100%{background:transparent}}

@container feature-demo (max-width:440px){
 .ki{font-size:12px}
 .ki-table{padding:4px 12px 2px}
 .ki-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.55fr) minmax(0,.85fr);gap:8px;padding:8px 0}
 .ki-row>span:nth-child(2){display:none}
 .ki-chat{padding:8px 10px 10px}
 .ki-input{font-size:12.5px}
}