@import url("/ui/mode.css");
/* Agent renderer 1.2.0: tokens inherit each calendar's palette and theme. */
:root {
  --agent-measure: 720px; --agent-radius: var(--sure-radius); --agent-space: 24px;
  --agent-topbar-height: var(--appbar-row); --agent-accent: var(--blue, var(--accent));
  --agent-border: var(--field-line);
}
.mode-enabled .brand { display: none; }
[data-mode=agent] #main,
[data-mode=agent] #view-switcher, [data-mode=agent] #sidebar-toggle,
[data-mode=agent] #event-inspector { display: none !important; }
[data-mode=agent] body { overflow: auto; }
#agent-main { width:100%; margin:0; flex:none; height:calc(100dvh - var(--agent-topbar-height)); min-height:360px; }
.agent-surface {
  width:min(var(--agent-measure),calc(100% - 2 * var(--app-edge))); height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; padding: 20px 0 16px;
}
.agent-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.agent-heading h1 { font-size: 24px; line-height:1.3; font-weight: 400; letter-spacing: -.02em; }
#agent-status { color: var(--muted); font-size: 13px; }
.agent-conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 4px; }
.agent-empty { min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px 0 48px; gap: 12px; max-width: 46ch; }
.agent-empty h2 { font-size: 23px; font-weight: 400; letter-spacing: -.02em; }
.agent-empty p { color: var(--muted); line-height: 1.6; }
.agent-empty button { margin-top: 8px; }
.agent-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.agent-message { max-width: 65ch; }
.agent-speaker, .agent-notice > span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.agent-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.agent-message-user { margin-left: min(12%, 72px); padding: 14px 18px; border-radius: var(--agent-radius); background: var(--tint); }
.agent-notice { color: var(--muted); font-size: 13px; }
.agent-composer { display:flex; align-items:flex-end; gap:6px; flex-shrink:0; margin:16px 0 0; border:1px solid var(--agent-border); border-radius:var(--agent-radius); padding:6px; background:var(--surface); }
.agent-composer:has(textarea:focus-visible) { outline:2px solid var(--agent-accent); outline-offset:-1px; }
.agent-composer textarea { display:block; flex:1; min-width:0; resize:none; min-height:44px; max-height:160px; border:0; border-radius:0; background:transparent; color:var(--ink); font:inherit; line-height:22px; padding:11px 8px; caret-color:var(--agent-accent); }
.agent-composer textarea::placeholder { color:var(--placeholder,var(--muted)); opacity:1; }
.agent-composer textarea:focus-visible { outline:none; }
.agent-composer-actions { display:flex; align-items:center; gap:4px; }
.agent-composer-actions button { width:44px; height:44px; min-height:44px; padding:0; flex-shrink:0; }
.agent-send:disabled { color:var(--muted); border-color:transparent; opacity:1; background:transparent; }
.agent-composer-note { flex-shrink:0; margin-top:8px; color:var(--muted); font-size:13px; line-height:1.5; }
.agent-walkie { display:contents; }
.agent-talk { touch-action:none; user-select:none; -webkit-user-select:none; }
.agent-talk[aria-pressed=true] { color:var(--on-accent); background:var(--agent-accent); border-color:var(--agent-accent); }
.agent-composer:has(.agent-voice-cancel:not([hidden])) .agent-send { display:none; }
.agent-listen { margin-top:8px; padding:0; width:44px; height:44px; }
@media (max-width: 600px) {
  .agent-surface { padding-top: 12px; }
  .agent-heading { padding-bottom: 16px; }
  .agent-empty h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .agent-surface { animation: none; } }
/* One persistent shell hosts both calendar renderers. */
[data-calendar-view=agenda] #sidebar-toggle,
[data-calendar-view=agenda] #view-switcher,
[data-calendar-view=agenda] #event-inspector,
[data-calendar-view=grid] .brand svg { display: none !important; }