/* "Ask your AI assistant": a looping, scripted demonstration of connecting Operon to the visitor's own assistant and
   using it. Three hosts, each drawn in its own idiom (not their logos): a warm chat app, a plain chat app, a terminal. */
.agents__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.agents__apps { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.agents__apps button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--sheet); font: 650 14.5px/1 var(--sc-font-text); display: inline-flex; align-items: center; gap: 8px; }
.agents__apps button[aria-selected="true"] { background: #1b1c19; color: #fff; border-color: #1b1c19; }
.agents__apps button i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.agents__bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.agents__chapters { display: flex; gap: 6px; flex: 1; }
.agents__chapters button { flex: 1; position: relative; overflow: hidden; height: 40px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--sheet); font: 620 13.5px/1 var(--sc-font-text); color: var(--sc-ink-soft); text-align: left; padding: 0 12px; }
.agents__chapters button::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--green); }
.agents__chapters button[aria-current="true"] { color: var(--sc-ink); border-color: #bdb5a1; }
.agents__pause { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--sheet); display: grid; place-items: center; }

/* the window */
.win { --bg: #fff; --ink: #1b1b1f; --soft: #6b6c73; --line: #ececf0; --me: #f2f2f4; --accent: #1b1b1f;
  position: relative; height: 560px; border-radius: 14px; overflow: hidden; background: var(--bg); color: var(--ink);
  box-shadow: var(--e3), 0 0 0 1px rgba(0, 0, 0, .06); font: 450 15px/1.55 'Geist', 'Hanken', system-ui, sans-serif; display: grid; grid-template-rows: 40px 1fr auto; }
.win--claude { --bg: #faf9f5; --me: #efece2; --line: #e9e5da; --accent: #c66a43; }
.win--gpt { --bg: #ffffff; --me: #f3f3f3; --line: #ececec; --accent: #10a37f; }
.win--term { --bg: #14151a; --ink: #e6e6ea; --soft: #8a8c96; --line: #26272e; font-family: var(--sc-font-mono); font-size: 13.5px; }
.win__chrome { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 600 13px/1 'Geist', system-ui; color: var(--soft); }
.win__chrome i { width: 11px; height: 11px; border-radius: 50%; background: #e4e1d8; }
.win--term .win__chrome i { background: #3a3b42; }
.win__chrome b { margin-left: 8px; color: var(--ink); font-weight: 650; }
.win__chrome span { margin-left: auto; font-weight: 500; }
.win__feed { overflow: hidden; padding: 22px clamp(16px, 5%, 54px) 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.win__composer { margin: 0 clamp(14px, 5%, 48px) 16px; min-height: 52px; border-radius: 22px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; color: var(--soft); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.win--claude .win__composer { border-radius: 16px; }
.win--term .win__composer { background: transparent; border: 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: 0 16px; color: var(--ink); }
.win__composer em { font-style: normal; flex: 1; }
.win__composer .send { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); flex: none; }
.win--term .win__composer .send { display: none; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: currentColor; vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.msg { max-width: 82%; animation: msg-in .35s var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg--me { align-self: flex-end; background: var(--me); padding: 10px 14px; border-radius: 18px; }
.win--claude .msg--me { border-radius: 14px; }
.msg--ai p { margin: 0 0 6px; }
.msg--ai ul { margin: 4px 0 6px; padding-left: 18px; }
.tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .02); font: 560 13px/1.2 'Geist', system-ui; color: var(--soft); animation: msg-in .3s var(--ease) both; }
.tool b { color: var(--ink); font-weight: 650; }
.tool .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--soft); border-top-color: transparent; animation: spin .7s linear infinite; }
.tool.done .spin { animation: none; border: 0; background: var(--green); clip-path: circle(50%); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin: 8px 0 4px; padding: 10px 12px 0; border-radius: 10px; border: 1px solid var(--line); }
.chart i { flex: 1; height: calc(var(--h) * 64px); border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; position: relative; transform-origin: bottom; animation: bar .6s var(--spring) both; animation-delay: calc(var(--n) * 60ms); }
.chart i::after { content: attr(data-d); position: absolute; bottom: -18px; left: 50%; translate: -50% 0; font: 500 10.5px/1 'Geist', system-ui; color: var(--soft); }
.chart { padding-bottom: 22px; }
@keyframes bar { from { transform: scaleY(0); } }

/* connect scene: the host's settings sheet and Operon's consent window */
.sheet-ui { position: absolute; inset: 40px 0 0; z-index: 3; display: grid; place-items: center; background: rgba(20, 20, 24, .28); animation: fade .25s var(--ease) both; }
.win--term .sheet-ui { display: none; }
@keyframes fade { from { opacity: 0; } }
.dlg { width: min(430px, 88%); border-radius: 16px; background: #fff; color: #15161a; padding: 18px 20px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); font: 450 14.5px/1.45 'Geist', system-ui; animation: msg-in .3s var(--ease) both; }
.dlg h4 { margin: 0 0 4px; font: 700 17px/1.2 'Geist', system-ui; }
.dlg .sub { margin: 0 0 12px; color: #6b6e76; font-size: 13.5px; }
.dlg label { display: grid; gap: 4px; margin: 10px 0; font-size: 12.5px; color: #6b6e76; }
.dlg .fld { padding: 9px 11px; border-radius: 9px; border: 1px solid #ddd; color: #15161a; font-size: 14px; min-height: 38px; overflow-wrap: anywhere; }
.dlg .fld.on { border-color: #15161a; box-shadow: 0 0 0 3px rgba(21, 22, 26, .08); }
.dlg .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg .b { padding: 8px 14px; border-radius: 9px; font: 650 13.5px/1 'Geist', system-ui; background: #15161a; color: #fff; transition: transform .12s; }
.dlg .b.b--ghost { background: #fff; color: #15161a; border: 1px solid #ddd; }
.dlg .b.press { transform: scale(.95); }
.dlg--op { border-top: 4px solid var(--green); }
.dlg--op .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dlg--op .perm { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.dlg--op .perm li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 13.5px; }
.dlg--op .perm li::before { content: ''; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; border: 1.5px solid #c9c6bd; }
.dlg--op .perm li.on::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--green); }
.dlg--op .perm small { display: block; color: #6b6e76; font-size: 12.5px; }
.ok-toast { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--green-tint); color: var(--green-2); font: 650 13.5px/1 'Geist', system-ui; animation: msg-in .3s var(--ease) both; }
.term-line { white-space: pre-wrap; animation: msg-in .2s var(--ease) both; }
.term-line .p { color: #8be38b; } .term-line .d { color: var(--soft); } .term-line .y { color: #f0c674; }

.agents__side h3 { margin: 0 0 10px; font: 720 1.3rem/1.15 var(--sc-font-display); letter-spacing: -.02em; }
.agents__can { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.agents__can li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 480 15.5px/1.45 var(--sc-font-text); }
.agents__can li::before { content: ''; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.agents__can b { font-weight: 650; }
.agents__safe { padding: 14px 16px; border-radius: 12px; background: var(--sheet); box-shadow: var(--e1); font: 480 14.5px/1.5 var(--sc-font-text); color: var(--sc-ink-soft); margin-bottom: 18px; }
.agents__guides { display: grid; gap: 8px; }
.agents__guides a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--sheet); box-shadow: var(--e1); text-decoration: none; font: 620 15px/1 var(--sc-font-text); color: var(--sc-ink); }
.agents__guides a::after { content: '→'; color: var(--green-2); }
@media (max-width: 960px) { .agents__grid { grid-template-columns: 1fr; } .win { height: 520px; } }
@media (max-width: 560px) { .win { height: 500px; font-size: 14px; } .agents__chapters button { font-size: 12.5px; padding: 0 8px; } }

/* never let a long command or URL widen the window (it pushed the whole page sideways on phones) */
.agents__grid > *, .agents__demo { min-width: 0; }
.win { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
.win > *, .win__feed > * { min-width: 0; }
.term-line, .msg, .tool, .dlg .fld { overflow-wrap: anywhere; }
@media (max-width: 960px) { .agents__grid { grid-template-columns: minmax(0, 1fr); } }

/* the connection film takes the full width (capped so stage + controls fit a laptop screen); the notes sit beneath */
.agents__grid--film { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.agents__film { width: 100%; max-width: min(1080px, calc((100svh - 190px) * 1.6)); margin: 0 auto; }
.agents__grid--film .agents__side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; align-items: start; }
.agents__grid--film .agents__side h3:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.agents__grid--film .agents__side > h3:first-child { grid-column: 1; grid-row: 1; }
.agents__grid--film .agents__can { grid-column: 1 / 3; grid-row: 2 / 4; }
.agents__grid--film .agents__safe { grid-column: 1 / 3; grid-row: 4; margin: 0; }
.agents__grid--film .agents__guides { grid-column: 3; grid-row: 2 / 5; display: grid; gap: 8px; }
@media (max-width: 860px) {
  .agents__film { max-width: none; }
  .agents__grid--film .agents__side { display: block; }
}