#page-agent { min-width:0; padding:0; }
/* Project tools stay in the same chat and use the existing theme tokens. */
.agent-context-panel[hidden] {display:none;}
.agent-context-panel {display:flex;flex-wrap:wrap;gap:7px;max-height:190px;overflow:auto;padding:10px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);}
.agent-context-panel p,.agent-context-panel label {width:100%;margin:0;font-size:11px;line-height:1.6;}
.agent-context-panel select {width:100%;min-width:0;}
.agent-context-panel button,.agent-document-links button {padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:11px;cursor:pointer;overflow-wrap:anywhere;}
.agent-media-note {font-size:10px;line-height:1.6;margin:0 0 5px;}
.agent-composer .agent-attachment,.agent-user-assets .agent-attachment {width:104px;height:78px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;margin-bottom:5px;background:var(--field-bg);}
.agent-attachment .agent-mention {position:absolute;inset:auto 0 0;width:100%;height:25px;display:block;border:0;border-radius:0 0 9px 9px;padding:3px 4px;background:var(--panel);color:var(--text);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agent-media-icon {display:grid;place-items:center;height:52px;font-size:23px;color:var(--muted);}
.agent-composer .agent-attachment img,.agent-user-assets .agent-attachment img {width:100%;height:52px;border:0;border-radius:9px 9px 0 0;}
.agent-batch {padding:14px;margin:12px 0;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft);font-size:13px;line-height:1.6;}
.agent-batch p {margin:6px 0;font-size:11px;}
.agent-batch button {width:100%;min-height:40px;}
.agent-document {border:1px solid var(--line);border-radius:12px;background:var(--field-bg);margin-top:13px;overflow:hidden;}
.agent-document summary {padding:13px;display:flex;justify-content:space-between;gap:12px;cursor:pointer;font-size:12px;line-height:1.6;}
.agent-document summary small {color:var(--muted);white-space:nowrap;}
.agent-document-body {padding:0 13px 13px;}.agent-document-text {width:100%;min-height:110px;max-height:320px;resize:vertical;}
.agent-document label {display:block;font-size:11px;line-height:1.8;color:var(--muted);}
.agent-document textarea,.agent-document input {font:12px/1.6 inherit;width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);}
.agent-document fieldset {min-width:0;margin:12px 0;border:1px solid var(--line);border-radius:10px;padding:10px;}
.agent-document legend {font-size:11px;color:var(--muted);padding:0 4px;}.agent-shot-fields {display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px;}
.agent-document-links {display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;margin-top:10px;}.agent-document-links a {color:var(--accent);overflow-wrap:anywhere;}
.agent-dragging .agent-composer {outline:2px solid var(--accent);outline-offset:2px;}
.agent-answer .agent-table-wrap {overflow-x:auto;margin:14px 0;}.agent-answer table {width:100%;border-collapse:collapse;font-size:12px;}.agent-answer th,.agent-answer td {text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:normal;min-width:80px;}
.agent-answer a {color:var(--accent);overflow-wrap:anywhere;}
@media(max-width:600px){.agent-compose-tools {gap:3px;flex-wrap:wrap;}.agent-media-note{font-size:9px;}.agent-attachment .agent-mention{font-size:10px;}.agent-document textarea,.agent-document input {font-size:16px;}.agent-floating .agent-compose-wrap {max-height:48dvh;overflow:auto;}.agent-context-panel{max-height:140px;}}
.agent-layout { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:600px; height:calc(100dvh - 112px); max-height:1100px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; }
.agent-sidebar { padding:18px 12px; border-right:1px solid var(--line); background:var(--field-bg); display:flex; flex-direction:column; gap:18px; min-height:0; }
.agent-new { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; font-size:13px; }
.agent-sidebar-label { padding:0 8px; font-size:11px; letter-spacing:.08em; color:var(--muted); }
.agent-chat-list { overflow:auto; min-height:0; display:flex; flex-direction:column; gap:4px; flex:1; }
.agent-chat-list button { display:block; text-align:left; width:100%; padding:11px 12px; border:0; border-radius:10px; background:transparent; cursor:pointer; }
.agent-chat-list button:hover, .agent-chat-list button[aria-current="true"] { background:var(--accent-soft); }
.agent-chat-list strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
.agent-chat-list small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.agent-sidebar-foot { color:var(--muted); font-size:11px; line-height:1.8; padding:8px; }
.agent-main { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; }
.agent-top { min-height:64px; padding:14px 22px; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line); }
.agent-top-brand { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; white-space:nowrap; }
.agent-top-brand svg { width:18px; height:18px; color:var(--accent); }
.agent-model-wrap { min-width:0; width:220px; max-width:50%; margin-left:auto; }
.agent-model-wrap .glide-trigger, .agent-model-wrap select { width:100%; height:36px; min-height:36px; font-size:12px; }
.agent-lock { width:14px; height:14px; color:var(--muted); flex:none; }
.agent-close { display:none; width:32px; height:32px; border:1px solid var(--line); background:transparent; border-radius:9px; cursor:pointer; flex:none; }
.agent-mobile-history { display:none; }
.agent-log { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:28px max(24px, calc((100% - 760px)/2)); scroll-behavior:auto; }
.agent-empty { display:flex; min-height:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 0; }
.agent-empty-logo { width:44px; height:44px; padding:10px; border:1px solid var(--line); background:var(--accent-soft); border-radius:14px; color:var(--accent); margin-bottom:20px; }
.agent-empty-logo svg { width:100%; height:100%; }
.agent-empty h2 { font-size:25px; font-weight:600; letter-spacing:-.035em; margin:0 0 10px; }
.agent-empty p { color:var(--muted); font-size:13px; max-width:400px; line-height:1.9; margin:0 0 28px; }
.agent-starters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:520px; }
.agent-starters button { min-height:38px; padding:8px 13px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--field-bg); font-size:12px; cursor:pointer; }
.agent-starters button:hover { color:var(--text); background:var(--accent-soft); }
.agent-turn { margin-bottom:30px; }
.agent-user { max-width:90%; margin-left:auto; width:fit-content; padding:12px 17px; background:var(--accent-soft); border-radius:16px 16px 4px 16px; font-size:14px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.agent-user-assets { display:flex; gap:6px; justify-content:flex-end; margin:8px 0; overflow-x:auto; }
.agent-user-assets img { width:56px; height:56px; object-fit:cover; border-radius:9px; border:1px solid var(--line); }
.agent-answer { padding-top:23px; color:var(--text); font-size:14px; line-height:1.95; overflow-wrap:anywhere; }
.agent-answer p { margin:0 0 13px; white-space:pre-wrap; }
.agent-answer h3 { font-size:16px; margin:20px 0 10px; }
.agent-answer ul, .agent-answer ol { padding-left:22px; margin:10px 0 15px; }
.agent-answer pre { border:1px solid var(--line); background:var(--field-bg); padding:15px; border-radius:10px; overflow-x:auto; font-size:12px; line-height:1.7; }
.agent-answer code { font:12px/1.7 Consolas,monospace; white-space:pre-wrap; }
.agent-answer .agent-inline-code { padding:2px 5px; background:var(--field-bg); border:1px solid var(--line); border-radius:4px; }
.agent-reply-actions { display:flex; gap:12px; align-items:center; font-size:10px; color:var(--muted); flex-wrap:wrap; margin-top:10px; }
.agent-copy { color:var(--muted); background:transparent; border:0; padding:4px 0; cursor:pointer; font-size:11px; }
.agent-progress { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; margin-top:16px; }
.agent-progress[hidden], .agent-steps[hidden] { display:none; }
.agent-progress i, .agent-send.is-busy::after { width:12px; height:12px; border:1.5px solid var(--muted); border-right-color:transparent; border-radius:50%; animation:agent-spin 1s linear infinite; }
@keyframes agent-spin { to { transform:rotate(360deg); } }
.agent-steps { color:var(--muted); font-size:11px; margin-top:12px; }
.agent-steps summary { cursor:pointer; }
.agent-steps ul { padding-left:20px; line-height:1.9; margin:8px 0; }
.agent-error { color:var(--bad); font-size:12px; line-height:1.7; margin:12px 0; }
.agent-action { border:1px solid var(--line); background:var(--field-bg); border-radius:13px; padding:15px; margin-top:14px; }
.agent-action-head { display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; }
.agent-action-spec { color:var(--muted); font-size:11px; margin:7px 0 12px; display:flex; gap:10px; flex-wrap:wrap; }
.agent-action details { font-size:12px; color:var(--muted); margin:10px 0; }
.agent-action details p { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); }
.agent-confirm { min-height:36px; font-size:12px; border-radius:9px; width:100%; }
.agent-action-media { display:block; max-width:100%; width:100%; max-height:300px; object-fit:contain; background:var(--bg); border-radius:9px; margin-top:12px; }
.agent-action-links { display:flex; gap:18px; padding-top:12px; font-size:12px; }
.agent-compose-wrap { margin-top:auto; padding:12px max(24px, calc((100% - 760px)/2)) 17px; background:var(--panel); }
.agent-composer { border:1px solid var(--line); border-radius:15px; background:var(--field-bg); padding:12px; }
.agent-composer:focus-within { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.agent-composer textarea { display:block; min-height:45px; max-height:160px; width:100%; resize:none; border:0; border-radius:0; outline:0; background:transparent; padding:3px 4px; font-size:14px; line-height:1.75; box-shadow:none; }
.agent-compose-tools { display:flex; gap:8px; align-items:center; padding-top:7px; }
.agent-icon-btn { background:transparent; border:0; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px; font-size:11px; min-height:30px; border-radius:8px; }
.agent-icon-btn:hover { color:var(--text); background:var(--accent-soft); }
.agent-icon-btn svg { width:17px; height:17px; }
.agent-compose-spacer { flex:1; }
.agent-send { display:flex; align-items:center; justify-content:center; width:33px; height:33px; border:0; border-radius:9px; background:var(--btn-bg); color:var(--btn-fg); cursor:pointer; padding:0; }
.agent-send:disabled { cursor:default; opacity:.45; }
.agent-send svg { width:18px; height:18px; }
.agent-send.is-busy svg { display:none; }
.agent-send.is-busy::after { content:''; border-color:var(--btn-fg); border-right-color:transparent; }
.agent-compose-note { font-size:10px; color:var(--muted); text-align:center; margin:8px 0 0; line-height:1.7; }
.agent-attached { display:flex; flex-wrap:wrap; gap:6px; }
.agent-attachment { position:relative; width:53px; height:53px; margin-bottom:8px; }
.agent-attachment img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.agent-attachment button { position:absolute; right:-4px; top:-4px; padding:0; width:19px; height:19px; border:1px solid var(--line); background:var(--drop-bg); border-radius:50%; cursor:pointer; font-size:12px; }
.agent-skill-list { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:9px; }
.agent-skill-list label { display:flex; gap:5px; align-items:center; padding:5px 9px; background:var(--panel); border:1px solid var(--line); border-radius:8px; font-size:11px; color:var(--muted); cursor:pointer; }
.agent-skill-list input { accent-color:var(--accent); width:13px; height:13px; }
.agent-skill-list label:has(input:checked) { background:var(--accent-soft); color:var(--text); }
.agent-price-details { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.8; }
.agent-price-details summary { cursor:pointer; width:fit-content; margin:auto; }
.agent-price-details p { margin:7px 0; text-align:center; }
.agent-fab { display:none; position:fixed; right:20px; bottom:20px; z-index:16; align-items:center; gap:7px; padding:11px 14px; border:1px solid var(--line); border-radius:13px; background:var(--drop-bg); color:var(--text); box-shadow:var(--shadow); cursor:pointer; font-size:12px; }
.agent-fab svg { width:17px; height:17px; color:var(--accent); }
body.in-app .agent-fab { display:flex; }
body.page-admin .agent-fab, body.page-agent .agent-fab, body.agent-is-floating .agent-fab { display:none; }
.agent-floating { position:fixed; z-index:120; top:80px; bottom:18px; right:18px; width:min(570px,calc(100vw - 36px)); border-radius:var(--radius); box-shadow:var(--shadow); }
.agent-floating .agent-layout { display:block; height:100%; min-height:0; }
.agent-floating .agent-sidebar { display:none; }
.agent-floating .agent-main { height:100%; }
.agent-floating .agent-close, .agent-floating .agent-mobile-history { display:block; }
.agent-floating .agent-log { padding:22px; }
.agent-floating .agent-compose-wrap { padding:12px 16px; }
.agent-floating .agent-top { padding:12px 16px; }
.agent-floating .agent-model-wrap { max-width:55%; }
.agent-floating .agent-top-brand span { display:none; }
.agent-floating.agent-history-open .agent-sidebar { display:flex; position:absolute; z-index:3; left:0; top:64px; bottom:0; width:225px; background:var(--panel); box-shadow:var(--shadow); }
.agent-billing-detail { margin:0 0 24px; border-bottom:1px solid var(--line); padding-bottom:20px; overflow-x:auto; }
.agent-billing-detail h2 { font-size:16px; }
.agent-billing-detail p { font-size:12px; color:var(--muted); }
.agent-billing-detail table { min-width:520px; }
@media(max-width:760px) {
 .agent-layout { display:block; height:calc(100dvh - 152px); min-height:480px; position:relative; }
 .agent-main { height:100%; }
 .agent-sidebar { display:none; }
 .agent-top { padding:11px 13px; gap:8px; min-height:57px; }
 .agent-top-brand span { display:none; }
 .agent-model-wrap { margin-left:auto; width:200px; max-width:65%; }
 .agent-mobile-history { display:flex; }
 .agent-log { padding:20px 16px; }
 .agent-compose-wrap { padding:10px 12px 12px; }
 .agent-answer, .agent-user { font-size:13px; }
 .agent-empty h2 { font-size:22px; }
 .agent-empty p { font-size:12px; }
 .agent-new-chat-top { padding:5px; font-size:11px; }
 .agent-history-open .agent-sidebar { display:flex; position:absolute; z-index:3; left:0; top:57px; bottom:0; width:215px; background:var(--panel); box-shadow:var(--shadow); }
 .agent-fab { right:12px; bottom:calc(82px + env(safe-area-inset-bottom)); padding:10px; }
 .agent-fab span { display:none; }
 .agent-floating { inset:calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px); width:auto; }
 .agent-floating .agent-layout { min-height:0; }
 .agent-floating .agent-log { padding:18px 15px; }
 .agent-floating .agent-top { padding:11px 12px; }
 .agent-price-details p { overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) { .agent-progress i,.agent-send.is-busy::after { animation:none; } }