/* Persistent product companion uses the shared TXF surface and state tokens. */
#key-companion{position:fixed;inset:80px 20px auto auto;margin:0;width:268px;max-width:calc(100vw - 24px);padding:0;color:var(--text);background:var(--window);border:1px solid var(--line-green);border-radius:var(--radius-lg);box-shadow:0 16px 55px #0008;z-index:100;overflow:hidden}
#key-companion[open]{display:flex;flex-direction:column}
.key-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.key-header strong{font-size:.9rem}.key-header small{display:block;color:var(--muted);font:.65rem var(--font-mono);letter-spacing:.09em;margin-top:5px}
#key-companion button{cursor:pointer;font-family:var(--font-ui)}
.key-quiet{background:transparent;border:0;color:var(--text-soft);font-size:.75rem;min-height:36px;padding:4px 6px}
#key-companion button:focus-visible{outline:2px solid var(--emerald-bright);outline-offset:-2px}
.key-viewport{position:relative;height:208px;background:#080e0c}
#key-frame{width:100%;height:100%;border:0;display:block;color-scheme:dark}
.key-renderer-state{position:absolute;left:14px;top:10px;font:.625rem var(--font-mono);color:var(--muted);pointer-events:none}
.key-fallback{height:100%;padding:22px 12px 8px;text-align:center}.key-fallback img{width:100%;height:125px;object-fit:contain}.key-fallback p{font-size:.7rem;margin:0;color:var(--muted)}
.key-body{min-height:0}.key-controls{padding:4px 14px 14px}.key-finish-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.key-finish-row>span{font-size:.8rem}
.key-swatches{display:flex;gap:0}.key-swatches button{background:transparent;border:1px solid transparent;border-radius:50%;padding:9px;width:36px;height:36px}.key-swatches button[aria-pressed=true]{border-color:var(--emerald)}.key-swatches i{display:block;width:16px;height:16px;border-radius:50%;background:var(--finish);border:1px solid #ffffff38}
.key-view-hint{font-size:.65rem;color:var(--muted);margin:2px 0 12px}
.key-feedback{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:.75rem;border-top:1px solid var(--line)}
.key-feedback i{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--emerald)}
[data-signal=cyan] .key-feedback i{background:#45d8df;box-shadow:0 0 8px #45d8df}
[data-signal=white] .key-feedback i{background:#d7ece6;box-shadow:0 0 8px #d7ece6}
[data-signal=amber] .key-feedback i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.key-actions{display:flex;align-items:center;justify-content:space-between;gap:4px}
#key-expand{width:100%;margin-top:8px;min-height:40px}
.key-disclaimer{font-size:.65rem;line-height:1.6;color:var(--muted);margin:10px 0 0}
#key-companion.is-collapsed .key-body{display:none}
#key-companion.is-collapsed .key-header{border:0}
#key-companion.is-expanded{inset:0;margin:auto;width:min(1120px,calc(100vw - 32px));height:min(900px,calc(100dvh - 32px));max-height:calc(100dvh - 32px)}
#key-companion.is-expanded .key-body{display:flex;flex:1;flex-direction:column;overflow:hidden}
#key-companion.is-expanded .key-viewport{flex:1;min-height:160px;height:auto}
#key-companion.is-expanded .key-controls{display:grid;grid-template-columns:1fr auto;column-gap:24px;padding:10px 20px;border-top:1px solid var(--line)}
#key-companion.is-expanded .key-view-hint,#key-companion.is-expanded .key-renderer-state{display:none}
#key-companion.is-expanded .key-feedback{border:0;padding:0}
#key-companion.is-expanded #key-expand{grid-column:2;grid-row:2;margin:0;width:auto}
#key-companion.is-expanded .key-disclaimer{grid-column:1/-1}
#key-companion::backdrop{background:#000c;backdrop-filter:blur(8px)}
@media(min-width:1280px){body.key-docked .desktop-shell{padding-right:308px;max-width:2060px}body.key-docked .app-grid{grid-template-columns:1fr}body.key-docked .sidebar{display:none}body.key-docked .chat-workspace{grid-template-columns:minmax(180px,.7fr) minmax(0,1.7fr)}body.key-docked .compute-system{grid-column:1/-1;grid-template-columns:1fr 1fr}body.key-docked .setup-cards{grid-template-columns:repeat(3,minmax(0,1fr))}body.key-docked .setup-card:last-child{grid-column:span 2}}
@media(max-width:1279px){#key-companion{top:auto;bottom:calc(108px + env(safe-area-inset-bottom));width:256px}#key-companion.is-collapsed{width:205px}.key-header{padding:8px 12px}}
@media(max-width:767px){#key-companion{right:12px;bottom:calc(94px + env(safe-area-inset-bottom))}#key-companion.is-collapsed{width:190px}#key-companion.is-expanded{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}#key-companion.is-expanded .key-controls{padding:8px 12px;column-gap:12px}.key-header small{font-size:.6rem}#key-companion.is-expanded .key-feedback{font-size:.65rem;max-width:135px}}