/* The Bot's computer pane and the conversation beside it, measured off the app (src/site/pc.tsx says
   how). Values are the app's own: its paper, its soft segment, its yellow, its sizes. */

.pc,.dbc{--a-paper:oklch(0.962 0.014 85);--a-card:#fff;--a-soft:oklch(0.947 0.018 86);--a-page:oklch(0.977 0.01 87);--a-fg:oklch(0.271 0.012 78);--a-muted:oklch(0.514 0.028 83);--a-line:oklch(0.271 0.012 78 / 9%);--a-yolk:oklch(0.883 0.165 92);--a-brand:oklch(0.962 0.064 96);--a-ok:oklch(0.56 0.12 155);font-family:"Manrope",system-ui,sans-serif;color:var(--a-fg);-webkit-font-smoothing:antialiased}
.pc-i{display:inline-grid;place-items:center;flex:none;width:16px;height:16px}
.pc-i svg{width:100%;height:100%}
.pc .db-eye,.dbc .db-eye{fill:none;transition:fill .2s}
.pc .pc-lit .db-eye,.dbc .db-lit .db-eye{fill:var(--a-yolk)}

/* the pane: a white card with the title, the segment, and what is in it */
.pc{display:flex;flex-direction:column;min-width:0;min-height:0;max-width:100%;background:var(--a-card);border-radius:14px;box-shadow:0 1px 2px oklch(0 0 0/.05),0 0 0 1px var(--a-line);overflow:hidden}
.pc-title{display:flex;align-items:center;gap:10px;padding:12px 10px 0 16px}
.pc-title .pc-lit{width:18px;height:18px}
.pc-who{flex:1;min-width:0;font-weight:800;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-close{width:34px;height:34px;padding:8px;color:var(--a-fg);opacity:.85}
.pc-seg{display:flex;gap:4px;margin:8px 12px 4px;padding:4px;border-radius:12px;background:var(--a-soft)}
.pc-seg>span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:9px;font-weight:700;font-size:12.5px;color:var(--a-muted);transition:background .2s,color .2s,box-shadow .2s;cursor:pointer}
.pc-seg>span>i{font-style:normal}
.pc-seg>span.on{background:var(--a-card);color:var(--a-fg);box-shadow:0 1px 2px oklch(0 0 0/.08),0 0 0 1px var(--a-line)}
.pc-panes{position:relative;flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr)}
.pc-panes>div{grid-area:1/1;display:flex;flex-direction:column;gap:9px;padding:12px;min-height:0;min-width:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.pc-panes>div.on{opacity:1;visibility:visible;transition:opacity .25s}
.pc-card{display:flex;flex-direction:column;border-radius:12px;background:var(--a-card);box-shadow:0 0 0 1px var(--a-line);overflow:hidden;min-height:0}

/* the Bot's browser: its tabs, its address, its page */
.pc-tabs{display:flex;align-items:flex-end;gap:2px;height:31px;padding:4px 4px 0;background:var(--a-soft)}
.pc-tablist{flex:1;min-width:0;display:flex;gap:2px;overflow:hidden}
.pc-tab{flex:0 1 195px;min-width:34px;display:flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 8px;border-radius:9px 9px 0 0;font-size:12px;color:var(--a-muted);white-space:nowrap;overflow:hidden;animation:pc-tab .3s ease-out}
.pc-tab.on{background:var(--a-card);color:var(--a-fg)}
.pc-tab em{flex:none;display:grid;place-items:center;width:13px;height:13px;border-radius:3px;font:600 9px/1 "Manrope",sans-serif;font-style:normal;color:oklch(0.271 0.012 78/.8)}
.pc-tab>span:not(.pc-i){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pc-tab .pc-i{width:13px;height:13px;opacity:0;color:var(--a-muted)}
.pc-tab.on .pc-i{opacity:1}
.pc-tab.done>span:not(.pc-i)::after{content:" ✓";color:var(--a-ok);font-weight:700}
@keyframes pc-tab{from{max-width:0;opacity:0}to{max-width:195px;opacity:1}}
.pc-count{display:flex;align-items:center;gap:2px;height:23px;margin-bottom:3px;padding:0 6px;border-radius:7px;font-size:11px;font-weight:500;color:var(--a-muted)}
.pc-count b{font-weight:500}
.pc-count .pc-i{width:13px;height:13px}
.pc-plus{width:28px;height:23px;margin-bottom:3px;padding:4px;color:var(--a-muted)}
.pc-addr{display:flex;align-items:center;gap:8px;height:34px;padding:0 9px;background:var(--a-soft)}
.pc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--a-yolk)}
.pc-url{flex:1;min-width:0;height:23px;display:flex;align-items:center;padding:0 9px;border-radius:999px;background:var(--a-card);font:11px/1 ui-monospace,"SF Mono",Menlo,monospace;color:var(--a-muted);white-space:nowrap;overflow:hidden}
.pc-addr .pc-i{width:15px;height:15px;color:var(--a-muted);margin:0 3px}
.pc-view{position:relative;aspect-ratio:16/10;background:var(--a-page);overflow:hidden}
.pc-site{position:absolute;left:0;top:0;width:720px;height:450px;transform-origin:0 0;transform:scale(var(--pc-s,.5));overflow:hidden}
.pc-site>div{position:absolute;inset:0;animation:pc-page .35s ease-out}
@keyframes pc-page{from{opacity:0}}
.pc-hand{position:absolute;left:30%;top:40%;width:22px;height:22px;transition:left .7s cubic-bezier(.5,0,.2,1),top .7s cubic-bezier(.5,0,.2,1),transform .15s;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8.2-6.3 1.6L9.4 19z' fill='%23F0642D' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;z-index:3}
.pc-hand.press{transform:scale(.8)}
.pc-hand.off{opacity:0}
.pc-drive{display:flex;align-items:center;gap:10px;padding:9px 9px 9px 14px;border-radius:12px;background:var(--a-soft);font-size:13px;color:var(--a-muted)}
.pc-drive .pc-i{width:16px;height:16px}
.pc-drive-t{flex:1;min-width:0;line-height:1.35}
.pc-drive b{flex:none;padding:7px 13px;border-radius:999px;background:var(--a-card);color:var(--a-fg);font-size:12.5px;font-weight:700;box-shadow:0 1px 2px oklch(0 0 0/.06)}

/* the workspace */
.pc-fcard{flex:1}
.pc-fhead{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 14px;background:var(--a-soft);border-bottom:1px solid var(--a-line);font-size:12.5px}
.pc-fhead b{flex:1;font-weight:600}
.pc-sort{display:flex;gap:0;padding:2px;border-radius:8px;background:var(--a-card);box-shadow:0 0 0 1px var(--a-line)}
.pc-sort i{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;color:var(--a-muted)}
.pc-sort i.on{background:var(--a-soft);color:var(--a-fg)}
.pc-fhead>.pc-i:last-child{width:15px;height:15px;margin:0 6px;color:var(--a-muted)}
.pc-rows{display:flex;flex-direction:column;padding:6px 0}
.pc-row{display:flex;align-items:center;gap:10px;height:33px;padding:0 12px 0 14px;font-size:13px}
.pc-row>.pc-i{color:var(--a-muted)}
.pc-row .pc-n{font-weight:500;color:oklch(0.271 0.012 78/.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-row .pc-new{flex:none;width:6px;height:6px;border-radius:50%;background:var(--a-yolk)}
.pc-row .pc-m{margin-left:auto;font-size:11.5px;color:var(--a-muted);white-space:nowrap}
.pc-row .pc-t{width:72px;text-align:right;font-size:11.5px;color:var(--a-muted);white-space:nowrap}
.pc-row .pc-t.fresh{color:oklch(0.494 0.101 87);font-weight:600}
.pc-row .pc-c{width:14px;height:14px;color:var(--a-muted)}
.pc-row.in{animation:pc-row .45s ease-out}
@keyframes pc-row{from{background:var(--a-brand)}}

/* the conversation beside it */
.dbc{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--a-paper)}
.dbc-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--a-line)}
.dbc-head b{font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.dbc-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:16px 16px 8px;overflow:hidden;font-size:14px;-webkit-mask-image:linear-gradient(transparent,#000 48px);mask-image:linear-gradient(transparent,#000 48px)}
.dbc-me{align-self:flex-end;max-width:86%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--a-brand);line-height:1.6;animation:dbc-in .35s ease-out}
.dbc-said{line-height:1.6;animation:dbc-in .35s ease-out}
.dbc-steps{display:flex;flex-direction:column;gap:8px}
.dbc-step{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:13px;color:var(--a-muted);animation:dbc-in .3s ease-out}
.dbc-step .pc-i{width:14px;height:14px;transform:translateY(2px);opacity:.8}
.dbc-step code{min-width:0;font:11px ui-monospace,"SF Mono",Menlo,monospace;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbc-step b{font-weight:600;color:var(--a-fg)}
.dbc-step>span:not(.pc-i){flex:none;white-space:nowrap}
.dbc-thread>*{flex:none}
.dbc-step.run .pc-i .db-eye{fill:var(--a-yolk)}
.dbc-step.run>span:not(.pc-i){background:linear-gradient(90deg,var(--a-muted) 30%,var(--a-fg) 50%,var(--a-muted) 70%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dbc-shimmer 1.6s linear infinite}
@keyframes dbc-shimmer{to{background-position:-150% 0}}
@keyframes dbc-in{from{opacity:0;transform:translateY(6px)}}
.dbc-ok{align-self:flex-end;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--a-ok);animation:dbc-in .3s ease-out}
.dbc-ok::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--a-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.dbc-compose{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 12px 12px;padding:11px 12px 11px 16px;border-radius:16px;background:var(--a-card);box-shadow:0 0 0 1.5px oklch(0.883 0.165 92/.55);font-size:13.5px;color:var(--a-muted)}
.dbc-compose i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--a-fg)}
.dbc-card{animation:dbc-in .35s ease-out}
.dbc-card img{display:block;max-width:100%;height:auto}

/* the plan card (app turn-extras.tsx PlanCard) */
.dbc-plan{background:var(--a-card);border-radius:14px;padding:12px 14px;box-shadow:0 0 0 1px var(--a-line);font-size:13.5px}
.dbc-plan.ask{box-shadow:0 0 0 2px oklch(0.883 0.165 92/.6)}
.dbc-plan p{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--a-muted);margin:0 0 6px}
.dbc-plan p span:last-child{text-transform:none;letter-spacing:0;font-size:12px}
.dbc-plan ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.dbc-plan li{display:flex;align-items:center;gap:9px;transition:color .3s}
.dbc-plan li::before{content:"";flex:none;width:13px;height:13px;border-radius:50%;border:1.5px solid oklch(0.271 0.012 78/.18);transition:.3s}
.dbc-plan li.now::before{border-color:var(--a-fg);border-right-color:transparent;animation:dbc-spin 1s linear infinite}
.dbc-plan li.did{color:var(--a-muted);text-decoration:line-through}
.dbc-plan li.did::before{background:oklch(0.271 0.012 78/.15);border-color:transparent}
.dbc-approve{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--a-line);font-size:12.5px;color:var(--a-muted)}
.dbc-approve b{padding:6px 12px;border-radius:9px;background:var(--a-fg);color:#fff;transition:.2s}
.dbc-approve b.on{transform:scale(.95);background:var(--a-ok)}
@keyframes dbc-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){.pc *,.dbc *{animation:none!important;transition:none!important}}