/* Frame 7 (new task) and Frame 3 (conversation) share one animated composer. */
.agent-page { --agent-files-width:clamp(185px,13.229167vw,254px); }
.agent-page .app-shell { grid-template-columns:var(--sidebar) minmax(0,1fr) var(--agent-files-width); }
.agent-page .composer-section,
.agent-page .agent-conversation,
.agent-presets { width:calc(100% - 86 * var(--u)); max-width:1180px; }
.agent-page .composer-section { position:relative; z-index:2; }
.agent-start .main { overflow-y:auto; }
.agent-start .agent-conversation { display:none; }
.agent-start .composer-section { margin:calc(115 * var(--u)) auto 0; }
.agent-start .greeting-row { height:calc(142 * var(--u)); padding-top:calc(49 * var(--u)); }
.agent-presets {
  flex-shrink:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,calc(231 * var(--u))));
  justify-content:space-between;
  gap:20px;
  margin:calc(64 * var(--u)) auto 40px;
}
.agent-preset {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:calc(246 * var(--u));
  min-width:0;
  padding:calc(23 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
  background:#fff;
  border-radius:calc(18 * var(--u));
  font-size:clamp(12px,.833333vw,16px);
  transition:box-shadow 240ms ease, background 240ms ease;
}
.agent-preset:hover { box-shadow:0 4px 14px #0000000a; }
.agent-preset.selected { box-shadow:0 0 calc(20 * var(--u)) #0000001c; }
.agent-preset-avatar { width:calc(61 * var(--u)); height:calc(61 * var(--u)); border-radius:50%; flex-shrink:0; object-fit:cover; }
.agent-preset-name { display:block; margin-top:calc(21 * var(--u)); line-height:calc(23 * var(--u)); }
.agent-preset-description { display:block; width:100%; line-height:calc(23 * var(--u)); margin-top:calc(4 * var(--u)); color:#939393; font-weight:350; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-preset-category { display:flex; align-items:center; justify-content:center; min-height:calc(22 * var(--u)); min-width:calc(79 * var(--u)); margin-top:calc(13 * var(--u)); border-radius:20px; padding:0 10px; font-size:clamp(10px,.625vw,12px); font-weight:700; background:#d9d9d9; }
.agent-preset-owner { color:#939393; font-weight:350; margin-top:calc(13 * var(--u)); line-height:calc(23 * var(--u)); }
.agent-preset-check { position:absolute; top:calc(10 * var(--u)); left:calc(12 * var(--u)); display:flex; align-items:center; justify-content:center; width:calc(22 * var(--u)); height:calc(22 * var(--u)); border-radius:50%; background:var(--red); color:#fff; opacity:0; transform:scale(.45); transition:opacity 180ms ease,transform 240ms cubic-bezier(.2,1.5,.4,1); }
.agent-preset-check .icon { width:70%; height:70%; stroke-width:3; }
.agent-preset.selected .agent-preset-check { opacity:1; transform:scale(1); }

.agent-files {
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  width:var(--agent-files-width);
  height:100dvh;
  padding:calc(77 * var(--u)) calc(33 * var(--u)) 20px;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  z-index:5;
}
.agent-files-heading { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding-bottom:calc(16 * var(--u)); border-bottom:1px solid #939393; }
.agent-files-heading h2 { color:#939393; font-size:1rem; font-weight:700; line-height:calc(23 * var(--u)); }
#agent-files-close { display:none; }
.agent-task-list { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; }
.agent-date-group { padding:calc(14 * var(--u)) 0 calc(17 * var(--u)); }
.agent-date-group + .agent-date-group { border-top:1px solid #939393; padding-top:calc(22 * var(--u)); }
.agent-date-title { margin:0 0 calc(11 * var(--u)); color:#939393; font-size:1rem; line-height:calc(23 * var(--u)); }
.agent-task-row { position:relative; border-radius:calc(8 * var(--u)); }
.agent-task-row + .agent-task-row { margin-top:calc(8 * var(--u)); }
.agent-task-row:hover { background:#fafafa; }
.agent-task-row.selected { background:#f5f5f5; color:var(--red); }
.agent-task-link { display:block; width:100%; height:calc(38 * var(--u)); min-height:32px; padding:calc(7 * var(--u)) 20px calc(7 * var(--u)) calc(41 * var(--u)); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:calc(24 * var(--u)); }
.agent-task-more { position:absolute; right:2px; top:50%; transform:translateY(-50%); width:22px; height:24px; border-radius:5px; opacity:0; color:#777; font-size:18px; }
.agent-task-row:hover .agent-task-more,
.agent-task-more:focus-visible { opacity:1; }
.agent-task-more:hover { background:#e9e9e9; }
.agent-history-empty { margin-top:24px; color:#aaa; font-size:13px; line-height:1.7; }
.agent-undo-delete { color:var(--red); flex-shrink:0; font-size:12px; text-align:left; margin-top:16px; padding:8px 0; }
.agent-task-menu { position:fixed; z-index:40; min-width:144px; padding:6px; border-radius:8px; background:#fff; border:1px solid #eee; box-shadow:0 8px 30px #0002; }
.agent-task-menu button { display:block; width:100%; padding:10px 14px; border-radius:5px; color:var(--red); text-align:left; font-size:14px; }
.agent-task-menu button:hover { background:#fff1f2; }
.agent-files-scrim { display:none; }

@media(max-width:1200px) {
  .agent-page { --agent-files-width:0px; }
  .agent-files { display:none; width:min(300px,88vw); padding:30px 24px 20px; }
  .agent-files-open .agent-files { display:flex; z-index:25; box-shadow:-12px 0 40px #0002; }
  .agent-files-open .agent-files-scrim { display:block; position:fixed; inset:0; width:100%; height:100%; background:#0005; z-index:24; }
  #agent-files-close { display:inline-flex; }
  .agent-files-heading h2 { line-height:28px; }
  .agent-date-title { line-height:24px; }
  .agent-task-link { height:38px; padding:7px 28px 7px 16px; line-height:24px; }
  .agent-task-more { opacity:1; }
  .agent-presets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .agent-preset { height:226px; padding:20px 12px; font-size:14px; border-radius:16px; }
  .agent-preset-avatar { width:52px; height:52px; }
  .agent-preset-name { margin-top:18px; line-height:23px; }
  .agent-preset-description { font-size:12px; line-height:20px; margin-top:4px; }
  .agent-preset-category { height:22px; margin-top:12px; min-width:79px; font-size:11px; }
  .agent-preset-owner { line-height:20px; margin-top:12px; font-size:12px; }
  .agent-preset-check { width:20px; height:20px; top:10px; left:10px; }
}

@media(max-width:760px) {
  .agent-page .composer-section,
  .agent-page .agent-conversation,
  .agent-presets { width:calc(100% - 40px); }
  .agent-start .main { height:auto; min-height:100dvh; overflow:visible; }
  .agent-start .composer-section { margin-top:48px; }
  .agent-start .greeting-row { height:95px; padding-top:26px; }
  .agent-presets { margin-top:32px; gap:16px; }
  .agent-preset { padding-right:8px; padding-left:8px; }
}

@media(prefers-reduced-motion:reduce) {
  .agent-preset,.agent-preset-check { transition:none; }
}