/* Agent chat drawer — AgentPOC. Styling for the aside #agentChat that
   agent-chat.js fills. Three tiers:
   - ≥901px: the page's own push pattern — like the project drawer (#drawer)
     it is a flex child of .body that animates width from 0, so the table
     shrinks beside it instead of being covered.
   - ≤900px: overlay from the right (the .body row has no room to share).
   - ≤640px: full-screen sheet.
   The interior is the same at every width
   (docs/superpowers/specs/2026-09-07-agent-drawer-layout-design.md):
   header → ask zone (question box + starter chips) → card stack, newest
   first. House style via the page's :root vars (--pe-black, --pe-yellow,
   --sans). */
.agent-chat{width:0;flex:0 0 auto;overflow:hidden;background:#f0f0f0;border-left:0 solid var(--pe-black);display:flex;flex-direction:column;
  /* Pinned to the viewport: .body is as tall as the whole table, so without
     this the panel stretches to document height. sticky+100vh keeps the
     push-aside geometry while the page scrolls underneath; align-self:
     flex-start is what lets a flex child stick. agent-chat.js scrolls the
     panel into place on open. */
  position:sticky;top:0;height:100vh;align-self:flex-start;
  /* Closed = invisible, so the box and buttons leave the tab order (they were
     reachable through the 0-width panel before). Visibility flips after the
     width has animated shut, and instantly on open. */
  visibility:hidden;transition:width .18s ease,visibility 0s linear .18s;}
.agent-chat.open{width:380px;border-left-width:3px;visibility:visible;transition:width .18s ease;}
/* Above the page's sticky filter bar (.controls, z-index 5): both stick to the
   top, and the bar spans the main column, so it painted over the drawer's
   header and question box once the drawer scrolled itself flush. Below the
   page's own overlays (project drawer / column panel 50, undo toast 60). */
.agent-chat.open{z-index:10;}
/* The floating LIVE/OFFLINE badge (#apiBadge, projects.js) is fixed to the
   bottom-right, over the card stack at every width. Hidden while open. */
body.agent-open #apiBadge{display:none;}

.ac-head{flex:none;background:var(--pe-black);color:#fff;border-bottom:3px solid var(--pe-yellow);display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;}
.ac-head .yel{color:var(--pe-yellow);}
.ac-head-sp{flex:1;}
.ac-hbtn{font-family:var(--sans);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:transparent;color:#fff;border:2px solid #fff;padding:3px 7px;cursor:pointer;}
.ac-hbtn:hover{background:var(--pe-yellow);color:var(--pe-black);border-color:var(--pe-yellow);}

/* Ask zone — sits under the header, so no on-screen keyboard can cover it. */
.ac-ask{flex:none;background:#fff;border-bottom:3px solid var(--pe-black);padding:12px 12px 10px;}
.ac-form{display:flex;align-items:flex-end;gap:8px;}
.ac-input{flex:1;min-width:0;display:block;box-sizing:border-box;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--pe-black);border:3px solid var(--pe-black);padding:9px 10px;background:#fff;resize:none;min-height:42px;max-height:120px;overflow-y:auto;}
.ac-input::placeholder{color:#777;font-weight:600;}
.ac-input:focus{outline:3px solid var(--pe-yellow);outline-offset:-3px;}
.ac-input:disabled{background:#e0e0e0;}
.ac-send{flex:none;height:42px;font-family:var(--sans);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border:3px solid var(--pe-black);padding:0 13px;cursor:pointer;background:var(--pe-yellow);box-shadow:4px 4px 0 0 #000;transition:transform .12s,box-shadow .12s;}
.ac-send:disabled{opacity:.55;cursor:default;box-shadow:none;}

.ac-chips{margin-top:10px;}
.ac-chips-lab{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:6px;}
.ac-chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.ac-chip{flex:none;font-family:var(--sans);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--pe-black);background:#fff;color:var(--pe-black);padding:6px 8px;cursor:pointer;white-space:nowrap;}
.ac-chip:active:not(:disabled){background:var(--pe-yellow);}
.ac-chip:disabled{opacity:.5;cursor:default;}
/* Hover only for real pointers: a touch screen keeps :hover stuck on the last
   tapped chip until the next tap, so it would sit yellow under the answer. */
@media (hover:hover){
  .ac-send:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 #000;}
  .ac-chip:hover:not(:disabled){background:var(--pe-yellow);}
}
/* Once there is a card the chips fold to one swipeable row so the stack gets
   the room. The cut-off last chip is the scroll hint; house style has no fades. */
.agent-chat.has-msgs .ac-chip-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;}
.agent-chat.has-msgs .ac-chip-row::-webkit-scrollbar{display:none;}

/* Card stack — newest first, numbered, one card per exchange. */
.ac-log{flex:1;min-height:0;overflow-y:auto;padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px;}
.ac-empty{font-size:12.5px;font-weight:600;color:#555;line-height:1.5;padding:12px;border:2px dashed #999;background:#fff;}
.ac-card{flex:none;background:#fff;border:3px solid var(--pe-black);box-shadow:4px 4px 0 0 #000;padding:10px 12px 12px;margin-right:4px;}
.ac-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ac-q{min-width:0;overflow-wrap:anywhere;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;line-height:1.35;background:var(--pe-yellow);border:2px solid var(--pe-black);padding:3px 7px;}
.ac-n{flex:none;font-size:9px;font-weight:900;letter-spacing:.08em;color:#777;white-space:nowrap;padding-top:4px;}
.ac-a{font-size:12.5px;font-weight:500;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--pe-black);}
.ac-a.ac-thinking{color:#666;font-weight:700;font-size:12px;}
.ac-a.ac-error{color:#dc2626;font-weight:700;border-left:3px solid #dc2626;padding-left:8px;}

/* Tablet and down: the .body row has no room to share — overlay instead.
   Two declarations here are load-bearing (Julio's phone check, 2026-09-07):
   - height:auto — the base rule's height:100vh otherwise wins over top/bottom,
     and on iPhone Safari 100vh is the toolbar-collapsed height, so the bottom
     of the drawer sat hidden under the bottom bar. With top:0/bottom:0 the
     drawer tracks the visible area instead.
   - align-self:auto — the base rule's align-self:flex-start (needed for the
     desktop sticky push layout) also applies to an absolutely positioned box,
     and there it means "shrink to content and sit at the top" — the drawer
     came out 208px tall. Resetting it lets top/bottom stretch the box. */
@media (max-width:900px){
  .agent-chat.open{position:fixed;right:0;top:0;bottom:0;height:auto;align-self:auto;width:min(380px,92vw);z-index:60;border-left:3px solid var(--pe-black);box-shadow:-6px 0 0 0 var(--pe-yellow);}
}

/* Phone: full-screen sheet. The page behind it stops scrolling; the ask zone
   is at the top, so the on-screen keyboard cannot reach it. 16px input stops
   iOS from zooming the page on focus. */
@media (max-width:640px){
  .agent-chat.open{left:0;width:auto;max-width:none;border-left:0;box-shadow:none;}
  body.agent-open{overflow:hidden;}
  .ac-head{padding:8px 12px;}
  .ac-input{font-size:16px;padding:10px 12px;min-height:48px;}
  .ac-send{height:48px;font-size:12px;padding:0 14px;}
  .ac-empty{font-size:13px;}
  .ac-a{font-size:14px;}
}
@media print{ .agent-chat{display:none;} }