/* agent chat: conversation, inspector (cut from app.css, order preserved) */
/* =================== agent chat: Claude-like conversation + Claude Console-like inspector =================== */
@keyframes fxIn { from { opacity: 0; transform: translateY(7px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulse { 50% { opacity: .35; } }
.fx { animation: fxIn .5s cubic-bezier(.2,.7,.2,1) both; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.ag { grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); gap: 0; height: calc(calc(100vh / var(--z, 1)) - 52px); }
.main:has(#agent.on) { padding-bottom: 0; }
.ag-main { padding-right: 26px; } .ag-side { padding-left: 22px; border-left: 1px solid var(--border); }
 .ag-opts, .ag-msgs, .ag-composer { width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; }
 
.ag-skills { gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 3px; } .ag-skills .btn { border: 0; background: transparent; color: var(--muted); padding: 4px 11px; font-weight: 500; } .ag-skills .btn:hover { color: var(--text); } .ag-skills .btn.on { background: var(--amber-soft); color: var(--amber); } .ag-skills .btn small { opacity: .6; }
 
.ag-opts { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; color: var(--muted); animation: fxIn .25s both; } .ag-opts[hidden] { display: none; } .ag-opts input { flex: 1; min-width: 180px; }
.ag-msgs { padding: 8px 4px 28px; scroll-behavior: smooth; }
.ag-m { margin: 22px 0; display: block; } .ag-m.u { display: flex; justify-content: flex-end; }
.ag-m.u .b { background: var(--surface-3); color: var(--text); border-radius: 20px; padding: 10px 16px; max-width: min(620px, 88%); line-height: 1.55; font-weight: 400; white-space: pre-wrap; }
.ag-m.a { padding-left: 2px; position: relative; } .ag-m.a::before { content: ''; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; } .ag-m.a.sel::before { background: var(--amber); } .ag-m.a:not(.sel):hover::before { background: var(--border-strong); }
.ag-answer { font-family: var(--read); font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--text); }
.ag-answer > * { animation: none; } .ag-answer > .fx { animation: fxIn .55s cubic-bezier(.2,.7,.2,1) both; }
.ag-answer p { margin: 0 0 13px; } .ag-answer p:last-child { margin-bottom: 0; }
.ag-answer h5 { font-family: var(--display); margin: 22px 0 6px; font-size: 14px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text); } .ag-answer h5:first-child { margin-top: 0; }
.ag-answer ul, .ag-answer ol { margin: 2px 0 13px; padding-left: 22px; } .ag-answer li { margin: 6px 0; } .ag-answer li::marker { color: var(--faint); }
.ag-answer b { font-weight: 650; } .ag-answer code { font-family: var(--mono); font-size: 13px; }
.ag-answer .ag-tbl table, .ag-answer th, .ag-answer td { font-family: var(--sans); }
.cite { min-width: 17px; height: 17px; font-size: 10.5px; margin: 0 1px 0 3px; border: 0; background: var(--surface-3); color: var(--muted); vertical-align: 2px; font-family: var(--mono); } .cite:hover { background: var(--primary); color: var(--primary-ink); }
/* thinking trace */
.ag-think { margin: 0 0 12px; font-size: 13.5px; font-family: var(--sans); } .ag-think[hidden] { display: none; }
.think-h { display: inline-flex; align-items: center; gap: 9px; padding: 4px 4px 4px 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; border-radius: 8px; } .think-h:hover { color: var(--text); }
.think-h .chev { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; opacity: .7; } .ag-think.open .chev { transform: rotate(180deg); }
.shim { background: linear-gradient(90deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--amber); animation: spin .8s linear infinite; flex: none; }
.tick { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; background: var(--green-soft); color: var(--green); } .tick.bad { background: var(--red-soft); color: var(--red); }
.think-body { margin: 4px 0 4px 6px; padding-left: 14px; border-left: 1px solid var(--border); display: none; } .ag-think.open .think-body { display: block; }
.tn { display: flex; gap: 10px; padding: 3px 0; color: var(--muted); } .tn .tt { display: block; } .tn .tf { display: block; font-size: 12.5px; color: var(--faint); animation: fxIn .5s both; } .tn .tf.bad { color: var(--red); }
.tn .ti { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--green); flex: none; } .tn.running .ti { background: var(--amber); animation: pulse 1s ease-in-out infinite; } .tn.running .tt { color: var(--text); } .tn.error .ti { background: var(--red); } .tn.warn .ti { background: var(--amber); }
/* answer tail */
.ag-tail { font-family: var(--sans); } .ag-sources { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; border: 0; } .ag-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--border); border-radius: 99px; font-size: 12px; color: var(--muted); cursor: pointer; background: transparent; } .ag-src:hover { border-color: var(--amber); color: var(--text); } .ag-src small { color: var(--faint); font-size: 11px; } .ag-src .cite { margin: 0; }
.ag-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--faint); } .pill-btn { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer; transition: all .12s; } .pill-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); }
.ag-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 12px; color: var(--faint); } .ag-meta .okc { color: var(--green); } .ag-meta .warnc { color: var(--amber); cursor: help; }
.ag-fail { margin-top: 8px; border-radius: 12px; }
/* empty + composer */
.ag-empty { text-align: center; padding: calc(11vh / var(--z, 1)) 10px 0; } .ag-empty .spark { font-size: 30px; color: var(--amber); margin-bottom: 8px; } .ag-empty h2 { margin: 0 0 6px; font: 500 28px/1.25 var(--display); letter-spacing: -.01em; } .ag-empty p { color: var(--muted); margin: 0 0 22px; }
.ag-ex { display: grid; gap: 8px; max-width: 520px; margin: 0 auto; } .ag-ex .ex { text-align: left; padding: 11px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: all .12s; } .ag-ex .ex:hover { border-color: var(--amber); transform: translateY(-1px); }
.ag-composer { position: relative; display: block; padding: 0 0 18px; border: 0; } .ag-composer textarea { display: block; width: 100%; min-height: 56px; max-height: 200px; padding: 16px 56px 16px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-strong); font: 15.5px/1.5 var(--sans); box-shadow: var(--shadow); }
.send { position: absolute; right: 12px; bottom: 28px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; cursor: pointer; transition: transform .12s, opacity .12s; } .send:hover { transform: scale(1.06); } .send:disabled { opacity: .35; cursor: default; transform: none; } .send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* inspector (flow) */
.ag-side .vtabs { margin: 0 0 14px; background: transparent; border: 0; padding: 0; gap: 2px; } .ag-side .vtabs button { border-radius: 8px; padding: 6px 12px; color: var(--muted); } .ag-side .vtabs button.on { background: var(--surface-3); color: var(--text); }
.flow { display: grid; gap: 0; } .flow-sum { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 14px; font-size: 12.5px; color: var(--muted); } .flow-sum b { color: var(--text); font-size: 14px; }
.stage { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; transition: border-color .2s; } .stage:not(:last-child)::after { content: ''; position: absolute; left: 24px; top: 100%; height: 18px; width: 1px; background: var(--border-strong); } .stage.running { border-color: var(--amber); } .stage.running:not(:last-child)::after { background: linear-gradient(var(--amber), transparent); }
.stage-h { display: flex; align-items: baseline; gap: 8px; cursor: pointer; } .stage-h b { font-size: 13.5px; } .stage-h small { color: var(--faint); } .stage-h .sd { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); align-self: center; flex: none; }
.stage.done .sd { background: var(--green); } .stage.running .sd { background: var(--amber); animation: pulse 1s infinite; } .stage.error .sd { background: var(--red); } .stage.warn .sd { background: var(--amber); }
.stage-h small:nth-child(3) { display: none; }
.stage-b { margin-top: 8px; display: grid; gap: 1px; }
.fl { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: 13px; } .fl:hover { background: var(--surface-2); } .fl.on { background: var(--amber-soft); }
.fl .fd { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--green); flex: none; } .fl.running .fd { background: var(--amber); animation: pulse 1s infinite; } .fl.error .fd { background: var(--red); } .fl.warn .fd { background: var(--amber); } .fl.pending .fd { background: var(--faint); }
.fl .fm { flex: 1; min-width: 0; } .fl .fm small { display: block; color: var(--faint); font-size: 12px; overflow-wrap: anywhere; } .fl .ft { color: var(--faint); font-variant-numeric: tabular-nums; }
.ag-side .stats .stat { background: var(--surface); }
@media (max-width: 1100px) { .ag { grid-template-columns: 1fr; height: auto; } .ag-side { border: 0; padding: 0; } }

/* =================== wide screens: FHD, 2K/QHD, ultrawide, 4K ===================
   Below 2200px (1920x1080 and laptops) nothing is scaled. Above it the whole UI is zoomed so text and controls keep a comfortable physical size, and the
   layout uses the extra width: wider chat column, wider inspector, no max-width cap on the agent page. --z is the zoom, so vh-based heights stay exact. */
:root { --z: 1; }
@media (min-width: 2200px) and (min-height: 1150px) { :root { --z: 1.2; } html { zoom: 1.2; } }
@media (min-width: 3000px) and (min-height: 1900px) { :root { --z: 1.6; } html { zoom: 1.6; } }
@media (min-width: 5000px) and (min-height: 2500px) { :root { --z: 2; } html { zoom: 2; } }
.main:has(#agent.on) { max-width: none; padding: 14px 24px 0; }
.ag { height: calc(100vh / var(--z, 1) - 16px); grid-template-columns: minmax(0, 1fr) clamp(430px, 31%, 820px); }
  .ag-skills { overflow: auto; scrollbar-width: none; } .ag-skills .btn { white-space: nowrap; }
.ag-opts, .ag-msgs, .ag-composer { max-width: clamp(760px, 56vw / var(--z, 1), 1080px); }
.ag-answer { font-size: clamp(16.5px, 0.35vw + 10px, 19px); }
.ag-main { padding-right: clamp(20px, 2vw, 40px); } .ag-side { padding-left: clamp(18px, 1.6vw, 34px); }

   

.ag-skills .btn { padding: 4px 10px; }


/* tighter reading rhythm in chat answers */
.ag-answer { line-height: 1.55; } .ag-answer p { margin: 0 0 8px; } .ag-answer ul, .ag-answer ol { margin: 0 0 8px; padding-left: 20px; } .ag-answer li { margin: 2px 0; } .ag-answer li > ul, .ag-answer li > ol { margin: 2px 0; }
.ag-answer h5 { margin: 14px 0 4px; } .ag-answer blockquote { margin: 0 0 8px; } .ag-answer .ag-tbl { margin: 2px 0 10px; } .ag-answer .ag-code { margin: 0 0 8px; }
.ag-m { margin: 16px 0; } .ag-think { margin: 0 0 8px; } .ag-sources { margin-top: 10px; } .ag-sugg, .ag-meta { margin-top: 8px; }