/* GFF-Agent */
.module[data-module="agent"] { container-type: inline-size; }
.module[data-module="agent"] .ag { min-height: 0; }
.module[data-module="agent"] .ag-reset { margin-left: auto; padding: .35em .9em; }
.module[data-module="agent"] .ag-body { background: var(--paper-2); padding: 1rem; }
.module[data-module="agent"] .ag-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.module[data-module="agent"] .ag-panel { background: var(--paper); border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.module[data-module="agent"] .ag-chat { height: 600px; }
.module[data-module="agent"] .ag-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; scroll-behavior: smooth; min-height: 0; }
.module[data-module="agent"] .ag-pad { display: block; }
.module[data-module="agent"] .ag-ph { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); flex: none; }
.module[data-module="agent"] .ag-ph h3 { font-size: var(--t-m); }
.module[data-module="agent"] .ag-sub { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--f-body); font-weight: 600; margin: 1rem 0 .4rem; }
@container (min-width: 640px) {
  .module[data-module="agent"] .ag-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: 760px; }
  .module[data-module="agent"] .ag-chat { grid-row: 1 / span 2; height: auto; }
}
@container (min-width: 960px) {
  .module[data-module="agent"] .ag-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; height: 700px; }
  .module[data-module="agent"] .ag-chat { grid-row: auto; }
}

/* chat */
.module[data-module="agent"] .ag-b { max-width: 92%; animation: pop .3s var(--ease-spring) both; }
.module[data-module="agent"] .bubble.bot { white-space: pre-wrap; }
.module[data-module="agent"] .bubble.bot.rich { white-space: normal; }
.module[data-module="agent"] .bubble.bot.rich p { margin: 0 0 .5em; }
.module[data-module="agent"] .bubble.bot.rich p:last-child { margin: 0; }
.module[data-module="agent"] .bubble a, .module[data-module="agent"] .ag-src a { color: var(--mint); word-break: break-all; }
.module[data-module="agent"] .ag-plan { font-size: var(--t-xs); color: var(--ink-3); display: flex; gap: .4rem; align-items: center; animation: pop .25s var(--ease-out) both; }
.module[data-module="agent"] .ag-lv { display: inline-block; font-size: var(--t-xs); font-weight: 700; padding: .12em .6em; border-radius: var(--r-pill); white-space: nowrap; }
.module[data-module="agent"] .ag-lv-read { background: var(--mint-soft); color: #11776d; }
.module[data-module="agent"] .ag-lv-draft { background: var(--yellow-soft); color: #8a6a00; box-shadow: inset 0 0 0 1px var(--yellow); }
.module[data-module="agent"] .ag-lv-write { background: var(--magenta-soft); color: var(--magenta-2); }
.module[data-module="agent"] .ag-lv-never { background: var(--paper-3); color: var(--ink-2); }
.module[data-module="agent"] .ag-lv-plan { background: var(--paper-3); color: var(--ink-2); }
.module[data-module="agent"] .ag-tool { border: 1.5px solid var(--line); border-left-width: 4px; border-radius: var(--r-s); padding: .6rem .7rem; display: grid; gap: .45rem; background: var(--paper); animation: pop .3s var(--ease-out) both; font-size: var(--t-s); align-self: stretch; }
.module[data-module="agent"] .ag-t-read { border-left-color: var(--mint); }
.module[data-module="agent"] .ag-t-draft { border-left-color: var(--yellow); }
.module[data-module="agent"] .ag-t-write { border-left-color: var(--magenta); }
.module[data-module="agent"] .ag-refused { border-style: dashed; border-left-style: dashed; border-color: var(--ink-3); background: var(--paper-2); }
.module[data-module="agent"] .ag-refused p { margin: 0; color: var(--ink-2); }
.module[data-module="agent"] .ag-th { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.module[data-module="agent"] .ag-tn { font-weight: 700; font-family: var(--f-display); }
.module[data-module="agent"] .ag-args { display: flex; flex-wrap: wrap; gap: .3rem; }
.module[data-module="agent"] .ag-arg { font-size: var(--t-xs); background: var(--paper-2); border-radius: var(--r-pill); padding: .15em .65em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module[data-module="agent"] .ag-arg i { font-style: normal; color: var(--ink-3); margin-right: .35em; }
.module[data-module="agent"] .ag-arg i::after { content: ":"; }
.module[data-module="agent"] .ag-arg-none { color: var(--ink-3); }
.module[data-module="agent"] .ag-run { display: flex; gap: .5rem; align-items: center; color: var(--ink-3); font-size: var(--t-xs); }
.module[data-module="agent"] .ag-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mint-soft); border-top-color: var(--mint); animation: ag-spin .7s linear infinite; }
@keyframes ag-spin { to { transform: rotate(360deg); } }
.module[data-module="agent"] .ag-res summary { cursor: pointer; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); padding: .15rem 0; }
.module[data-module="agent"] .ag-rb { display: grid; gap: .35rem; padding-top: .35rem; }
.module[data-module="agent"] .ag-rb p { margin: 0; }
.module[data-module="agent"] .ag-jsonbtn { margin-top: .4rem; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-pill); font-size: var(--t-xs); padding: .1em .7em; cursor: pointer; color: var(--ink-2); }
.module[data-module="agent"] .ag-jsonbtn.on, .module[data-module="agent"] .ag-jsonbtn:hover { border-color: var(--mint); color: #11776d; }
.module[data-module="agent"] pre.ag-json { margin: .4rem 0 0; background: var(--ink); color: #e9e7f1; border-radius: var(--r-s); padding: .6rem .7rem; font-size: 11px; line-height: 1.4; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.module[data-module="agent"] .ag-quote { background: var(--paper-2); border-radius: var(--r-s); padding: .5rem .65rem; line-height: 1.45; }
.module[data-module="agent"] .ag-pre { white-space: pre-wrap; }
.module[data-module="agent"] .ag-ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.module[data-module="agent"] .ag-err { color: var(--red); background: var(--red-soft); border-radius: var(--r-s); padding: .4rem .6rem; }
.module[data-module="agent"] .ag-note { font-weight: 600; color: var(--ink-2); }
.module[data-module="agent"] .ag-queued { background: var(--magenta-soft); border-radius: var(--r-s); padding: .45rem .65rem; }
.module[data-module="agent"] .ag-src { font-size: var(--t-xs); color: var(--ink-3); }
.module[data-module="agent"] .ag-kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; }
.module[data-module="agent"] .ag-kv dt { color: var(--ink-3); font-size: var(--t-xs); padding-top: .15em; }
.module[data-module="agent"] .ag-kv dd { margin: 0; }
.module[data-module="agent"] .ag-events { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.module[data-module="agent"] .ag-events li { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--t-xs); border-bottom: 1px dashed var(--line); padding-bottom: .2rem; }
.module[data-module="agent"] .ag-events time { color: var(--ink-3); white-space: nowrap; }
.module[data-module="agent"] .ag-plist { display: grid; gap: .35rem; margin: .4rem 0; }
.module[data-module="agent"] .ag-prow { display: flex; gap: .6rem; align-items: center; background: var(--paper); border-radius: var(--r-s); padding: .3rem .5rem .3rem .3rem; box-shadow: 0 0 0 1px var(--line); }
.module[data-module="agent"] .ag-thumb { width: 38px; height: 38px; flex: none; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.module[data-module="agent"] .ag-thumb img { width: 100%; height: 100%; object-fit: cover; }
.module[data-module="agent"] .ag-pname { flex: 1; min-width: 0; font-size: var(--t-xs); font-weight: 600; line-height: 1.3; color: var(--ink); }
.module[data-module="agent"] .ag-pname small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; }
.module[data-module="agent"] .ag-price { font-family: var(--f-display); color: var(--magenta); font-size: var(--t-xs); white-space: nowrap; }
.module[data-module="agent"] .ag-bul { padding-left: .9rem; position: relative; font-size: var(--t-s); }
.module[data-module="agent"] .ag-bul::before { content: ""; position: absolute; left: .2rem; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.module[data-module="agent"] .ag-foot { border-top: 1px solid var(--line); padding: .7rem .8rem .8rem; display: grid; gap: .6rem; flex: none; background: var(--paper); }
.module[data-module="agent"] .ag-sugg { display: flex; gap: .4rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; scrollbar-width: thin; }
.module[data-module="agent"] .ag-chip { flex: none; font-size: var(--t-xs); padding: .35em .8em; }
.module[data-module="agent"] .ag-form { display: flex; gap: .5rem; }
.module[data-module="agent"] .ag-form.busy .btn { opacity: .5; pointer-events: none; }
.module[data-module="agent"] .ag-form.busy ~ .ag-sugg, .module[data-module="agent"] .ag-foot:has(.ag-form.busy) .ag-chip { opacity: .55; pointer-events: none; }

/* approvals */
.module[data-module="agent"] .ag-badge { margin-left: auto; min-width: 1.6em; text-align: center; border-radius: var(--r-pill); background: var(--paper-3); color: var(--ink-2); font-weight: 700; font-size: var(--t-xs); padding: .15em .55em; }
.module[data-module="agent"] .ag-badge.has { background: var(--magenta); color: #fff; }
.module[data-module="agent"] .ag-badge.pulse { animation: ag-pulse .6s var(--ease-spring) 1; }
@keyframes ag-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.module[data-module="agent"] .ag-pending, .module[data-module="agent"] .ag-done { display: grid; gap: .6rem; }
.module[data-module="agent"] .ag-ap { border: 1.5px solid var(--magenta); border-radius: var(--r-s); padding: .65rem .75rem; display: grid; gap: .5rem; background: var(--paper); animation: pop .35s var(--ease-spring) both; transition: opacity .2s, transform .2s; }
.module[data-module="agent"] .ag-ap.leaving { opacity: 0; transform: translateX(24px); }
.module[data-module="agent"] .ag-ap header, .module[data-module="agent"] .ag-dn header { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: var(--t-s); }
.module[data-module="agent"] .ag-ap p, .module[data-module="agent"] .ag-dn p { margin: 0; }
.module[data-module="agent"] .ag-apb { display: grid; gap: .4rem; font-size: var(--t-s); }
.module[data-module="agent"] .ag-acts { display: flex; gap: .5rem; }
.module[data-module="agent"] .ag-acts .btn { padding: .45em 1em; }
.module[data-module="agent"] .ag-diff { display: grid; gap: .35rem; }
.module[data-module="agent"] .ag-diff > div { border-radius: var(--r-s); padding: .4rem .6rem; font-size: var(--t-s); }
.module[data-module="agent"] .ag-diff small { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.module[data-module="agent"] .ag-old { background: var(--red-soft); text-decoration: line-through; text-decoration-color: rgba(214, 69, 69, .5); }
.module[data-module="agent"] .ag-new { background: var(--mint-soft); }
.module[data-module="agent"] .ag-dn { border-radius: var(--r-s); padding: .55rem .7rem; background: var(--paper-2); display: grid; gap: .2rem; }
.module[data-module="agent"] .ag-dn.fresh { animation: pop .4s var(--ease-spring) both; }
.module[data-module="agent"] .ag-dn.no { opacity: .8; }
.module[data-module="agent"] .ag-empty { color: var(--ink-3); font-size: var(--t-s); margin: 0; }
.module[data-module="agent"] [hidden] { display: none !important; }

/* permissions */
.module[data-module="agent"] .ag-grp { margin-bottom: .9rem; }
.module[data-module="agent"] .ag-grp h4 { font-size: var(--t-s); margin-bottom: .2rem; }
.module[data-module="agent"] .ag-grp p { margin: 0 0 .25rem; }
.module[data-module="agent"] .ag-grp ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-s); display: grid; gap: .1rem; }
.module[data-module="agent"] .ag-never ul { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.module[data-module="agent"] .ag-cnt { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.module[data-module="agent"] .ag-c { border-radius: var(--r-s); padding: .45rem .5rem; text-align: center; background: var(--paper-2); display: grid; }
.module[data-module="agent"] .ag-c b { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.1; }
.module[data-module="agent"] .ag-c span { font-size: var(--t-xs); color: var(--ink-2); }
.module[data-module="agent"] .ag-c-read { background: var(--mint-soft); }
.module[data-module="agent"] .ag-c-draft { background: var(--yellow-soft); }
.module[data-module="agent"] .ag-c-write { background: var(--magenta-soft); }
.module[data-module="agent"] .ag-mode { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: var(--t-s); }
.module[data-module="agent"] .ag-modedot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.module[data-module="agent"] .ag-modedot.live { background: var(--mint); }
.module[data-module="agent"] .ag-modenote { margin: .3rem 0 0; line-height: 1.5; }

@media (max-width: 460px) {
  .module[data-module="agent"] .ag-body { padding: .6rem; }
  .module[data-module="agent"] .ag-chat { height: 560px; }
  .module[data-module="agent"] .ag-scroll { padding: .7rem; }
  .module[data-module="agent"] .ag-reset { padding: .3em .7em; }
}