.agent{width:340px; flex-shrink:0; background:var(--card); border:1px solid var(--line); border-radius:10px;
    display:flex; flex-direction:column; min-height:0; overflow:hidden}
  @media(max-width:1400px){.agent{width:300px}}
  @media(max-width:1200px){.agent{width:280px}}
  @media(max-width:1000px){.agent{width:100%; max-height:400px}}
  @media(max-width:480px){.agent{max-height:280px}}
  .agent-h{padding:12px 14px; border-bottom:1px solid var(--line); font-family:'Space Grotesk',sans-serif; font-weight:700;
    display:flex; justify-content:space-between; align-items:center}
  .agent-h small{font-family:'Inter'; font-weight:400; color:var(--muted)}
  .agent-toggle{display:none} /* narrow screens only - see the chat section below */
  .agent-collapse-btn{display:none} /* wide screens only - see the collapse rules below */
  .agent-spine{display:none} /* wide screens, collapsed only - see the collapse rules below */
  .chat{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; min-height:200px; background:var(--paper)}
  /* overflow-wrap so a long unbroken string (a URL in an API error message, say) wraps inside the
     bubble instead of running past its max-width - white-space:pre-wrap alone only wraps at actual
     whitespace, and has nowhere to break a single long word/URL. */
  .msg{max-width:88%; padding:8px 11px; border-radius:10px; white-space:pre-wrap; overflow-wrap:break-word; line-height:1.45}
  .msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:3px}
  .msg.assistant{align-self:flex-start; background:#EEF1F5; color:#101825; border-bottom-left-radius:3px}
  [data-theme="dark"] .msg.assistant{background:#2C3E50; color:#F0F2F5}
  @media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .msg.assistant{background:#2C3E50; color:#F0F2F5}
  }
  .msg-time{font-size:10px; opacity:.65; margin-top:3px; display:block}
  .chat-date-sep{align-self:center; font-size:11px; font-weight:600; color:var(--muted); background:var(--card); padding:4px 12px; border-radius:999px; margin:4px 0}
  .quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; background:var(--paper)}
  .chip{font-size:11px; padding:6px 10px; border-radius:999px; font-weight:400; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer}
  .chip:hover{border-color:var(--accent); background:var(--accent); color:#fff}
  .inrow{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--paper)}
  .inrow input{flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink)}
  .inrow input::placeholder{color:var(--muted)}

  /* ==========================================================================================
     CHAT PANEL COLLAPSE (>=1001px only)
     Above 1000px the agent panel is a persistent column beside the calendar (see .agent above) with
     no way to close it. This mirrors the mini calendar's own collapse-to-a-strip toggle on the
     opposite side of the layout (see .mini-cal.collapsed in calendar.css) - a slim 36px strip with
     just the toggle and a vertical label, so the calendar can reclaim the ~280-340px it normally
     takes. Below 1000px the panel already collapses a different way (tap the header to expand full-
     screen - see the chat-open rules further down), so this button and the spine label stay hidden
     there instead of offering two conflicting ways to do the same thing.
     ========================================================================================== */
  @media(min-width:1001px){
    /* Same shape and same spot as the mini calendar's own toggle (.mini-cal-toggle/.mini-cal-header
       in calendar.css): a real button left on the app's ordinary button chrome (border, background,
       radius - see the base button rule) rather than a bespoke borderless icon button, sitting
       inside the header row rather than centred over the whole panel. */
    .agent-collapse-btn{display:block; padding:4px 6px; font-size:12px; color:var(--muted); margin-left:8px; flex-shrink:0}
    /* The glyph itself lives here (not as text in index.html) - scoped to .agent-collapse-btn
       specifically, since .toggle-caret-h is also the mini calendar's own class (calendar.js
       renders its own "›" text straight into that span - this ::before would double up with it
       if the selector weren't scoped this narrowly). "‹" rather than mini-cal's "›": this button
       sits on the right of the layout and reopens by growing leftward, the mirror of mini-cal's
       own left-side, grows-rightward panel. */
    .agent-collapse-btn .toggle-caret-h::before{content:"\2039"}
    .agent-collapse-btn .toggle-caret-h{display:none}
    /* Closing is red, like every other dismiss in the app; reopening isn't, since nothing is being given up. */
    .agent-collapse-btn .toggle-close{color:#C0392B; font-weight:700}
    .agent-collapse-btn:hover .toggle-close{color:#E74C3C}
    .agent.collapsed .agent-collapse-btn .toggle-close{display:none}
    .agent.collapsed .agent-collapse-btn .toggle-caret-h{display:inline}
    .agent.collapsed{width:36px; flex-shrink:0; overflow:hidden}
    /* Mirrors .mini-cal.collapsed .mini-cal-header: the row collapses to just the centred toggle,
       every other header child (the title) hidden rather than removed. */
    .agent.collapsed .agent-h{padding:10px 4px; justify-content:center; border-bottom:none}
    .agent.collapsed .agent-h-title{display:none}
    /* Exactly .mini-cal.collapsed .mini-cal-toggle's own values (calendar.css) - true parity with
       the mini calendar's toggle, not just the same shape. margin-left:0 overrides the button's
       own base rule (8px, needed to space it from the title in the expanded header) - left in
       place here, that margin sits outside the width:100% box and shoves the whole button 8px
       past centre, clipped on the right by .agent.collapsed's overflow:hidden. */
    .agent.collapsed .agent-collapse-btn{width:100%; margin-left:0; padding:6px 0; font-size:15px}
    .agent.collapsed .chat,.agent.collapsed .quick,.agent.collapsed .inrow{display:none}
    /* Fills the rest of the strip below the header - mirrors .mini-cal-spine exactly, just reading
       the opposite direction (see the HTML comment above .agent-spine). */
    .agent.collapsed .agent-spine{display:flex; align-items:center; justify-content:center; flex:1;
      writing-mode:vertical-rl; margin-top:6px; overflow:hidden; font-size:12px; font-weight:600;
      letter-spacing:.03em; color:var(--muted); white-space:nowrap; cursor:pointer}
  }