.stage {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 4px 20px 14px;
}
.computer { width: min(1600px, 96vw, calc((100vh - 155px) * 16 / 10.2)); transform: none; }
.ad-narration {
  position: relative;
  z-index: 20;
  top: auto;
  left: auto;
  display: grid;
  width: min(1500px, 96vw);
  justify-items: center;
  gap: 4px;
  opacity: 0;
  text-align: center;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 360ms ease, transform 420ms ease;
}
.ad-narration.visible { opacity: 1; transform: translateY(0); }
.ad-narration.changing { animation: narration-change 520ms ease both; }
.ad-narration strong { color: #17211d; font-size: clamp(60px, 6vw, 88px); letter-spacing: -0.055em; line-height: 0.96; }
.ad-narration span { color: #54645d; font-size: clamp(20px, 2vw, 30px); font-weight: 600; line-height: 1.1; }

.tool-preview[data-tool="chrome"] .chrome-frame { display: grid; }
.chrome-launch, .chrome-navigation { display: none; height: 100%; }
.tool-preview[data-phase="launch"] .chrome-launch,
.tool-preview[data-phase="signed-in"] .chrome-launch,
.tool-preview[data-phase="address"] .chrome-navigation { display: grid; }

.chrome-launch {
  align-content: center;
  justify-items: center;
  gap: 7px;
  background: #f7f8fb;
  padding: 18px;
  text-align: center;
}
.chrome-logo {
  display: block;
  width: 35px;
  height: 35px;
  border: 5px solid #fbbc04;
  border-radius: 50%;
  background: #4285f4;
  box-shadow: inset 0 0 0 5px white;
}
.chrome-launch strong { color: #30343a; font-size: 13px; }
.chrome-launch > p { margin: 0; color: #717780; font-size: 9px; }
.chrome-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 86%;
  margin-top: 6px;
  border: 1px solid #d9dde3;
  border-radius: 9px;
  background: white;
  padding: 9px;
  text-align: left;
}
.chrome-profile div { display: grid; }
.chrome-profile b { font-size: 9px; }
.chrome-profile small { color: #717780; font-size: 8px; }
.chrome-profile > i { color: #2f9b63; font-style: normal; }
.chrome-navigation { grid-template-rows: 27px 31px 1fr; background: white; }
.chrome-tabs {
  display: flex;
  align-items: end;
  gap: 5px;
  background: #dfe3e8;
  padding: 4px 8px 0;
}
.chrome-tabs span { border-radius: 7px 7px 0 0; background: white; padding: 6px 28px 5px 8px; font-size: 8px; }
.chrome-tabs i { padding-bottom: 5px; font-size: 9px; font-style: normal; }
.chrome-address-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #e1e4e8;
  padding: 0 8px;
  color: #5f6670;
  font-size: 9px;
}
.chrome-address-row b {
  min-height: 20px;
  border-radius: 10px;
  background: #eef0f3;
  padding: 5px 9px;
  color: #343a42;
  font-size: 9px;
  font-weight: 500;
}
.chrome-address-row b i { font-style: normal; }
.chrome-address-row em {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #345b9c;
  color: white;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
}
.chrome-new-tab { display: grid; align-content: center; justify-items: center; gap: 7px; color: #4a5159; }
.chrome-new-tab .chrome-logo { width: 29px; height: 29px; border-width: 4px; }
.chrome-new-tab strong { font-size: 14px; }
.chrome-new-tab p { margin: 0; color: #777e86; font-size: 9px; }

.invest-terminal {
  height: 100%;
  background: #101715;
  color: #d7e5df;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.invest-terminal header { display: flex; align-items: center; gap: 5px; height: 27px; background: #252d2a; padding: 0 8px; }
.invest-terminal header i { width: 6px; height: 6px; border-radius: 50%; background: #69736f; }
.invest-terminal header span { margin-left: 5px; color: #a9b5b0; font-size: 9px; }
.invest-output { display: grid; align-content: start; gap: 8px; height: calc(100% - 27px); overflow-y: auto; padding: 12px 11px; scrollbar-width: none; }
.invest-output::-webkit-scrollbar { display: none; }
.invest-step {
  opacity: 0;
  color: #d3ddd9;
  font-size: clamp(9px, 0.72vw, 11px);
  line-height: 1.35;
  transform: translateY(3px);
  transition: opacity 180ms ease, transform 220ms ease;
}
.invest-step.visible { opacity: 1; transform: translateY(0); }
.invest-step b { color: #5ce0a7; }
.invest-step.success { color: #79d8b0; padding-left: 10px; }
.invest-step.alert { border-left: 2px solid #f1b35f; background: rgba(241, 179, 95, 0.08); color: #ffd092; padding: 5px 7px; }
.terminal-caret { width: 6px; height: 12px; background: #65e5b1; animation: blink 800ms step-end infinite; }
.assistant-body { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 14px; height: 91%; overflow: hidden; padding: 1.6% 2% 2%; }
.assistant-body.chat-transition .result-stage, .assistant-body.stock-transition .result-stage { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.agent-runtime { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 11px; min-height: 0; }
.result-stage { min-width: 0; min-height: 0; transition: opacity 280ms ease, transform 360ms ease; }
.assistant-content { height: 100%; min-height: 0; overflow-y: auto; border: 1px solid #dfe8e3; border-radius: 16px; background: rgba(255, 255, 255, 0.72); padding: 14px 16px 20px; scroll-behavior: smooth; scrollbar-width: none; }
.assistant-content::-webkit-scrollbar { display: none; }
.preparation-panel { position: relative; display: grid; align-content: start; gap: 10px; opacity: 0; border: 1px solid #cfe4d9; border-radius: 16px; background: linear-gradient(120deg, rgba(235, 248, 241, 0.97), rgba(255, 255, 255, 0.97)); padding: 15px 16px; transform: translateY(8px); box-shadow: 0 14px 30px rgba(34, 84, 63, 0.12); transition: opacity 280ms ease, transform 320ms ease; }
.preparation-panel.visible { opacity: 1; transform: translateY(0); }
.preparation-copy { display: grid; gap: 4px; }
.preparation-kicker { display: flex; align-items: center; gap: 7px; color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; }
.preparation-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(49, 201, 140, 0.13); animation: prep-pulse 1.2s ease-in-out infinite; }
.preparation-copy strong { font-size: clamp(17px, 1.6vw, 23px); letter-spacing: -0.025em; }
.preparation-copy p { margin: 0; color: #617169; font-size: clamp(10px, 0.9vw, 13px); line-height: 1.4; }
.preparation-routes { display: flex; flex-wrap: wrap; gap: 7px; }
.preparation-routes span { border: 1px solid #cfe4d9; border-radius: 999px; background: white; color: #315b49; padding: 7px 10px; font-size: clamp(10px, 0.86vw, 13px); font-weight: 800; white-space: nowrap; }
.tool-preview { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; border: 1px solid #d6e1db; border-radius: 16px; background: #f8faf8; box-shadow: 0 12px 26px rgba(34, 67, 53, 0.09); }
.tool-preview > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dce5e0; background: white; padding: 10px 12px; }
.tool-preview > header span { font-size: clamp(11px, 1vw, 14px); font-weight: 850; }
.tool-preview > header small { color: var(--green-dark); font-size: 8px; font-weight: 900; letter-spacing: 0.1em; }
.tool-screen { min-height: 0; overflow: hidden; background: #eef2ef; padding: 9px; }
.tool-toolbar { display: flex; align-items: center; gap: 5px; height: 25px; border-radius: 8px 8px 0 0; background: #e1e7e3; padding: 0 8px; }
.tool-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: #a9b5af; }
.tool-toolbar span { margin-left: auto; color: #75827b; font-size: 8px; }
.tool-frame { display: none; height: calc(100% - 25px); align-content: start; gap: 8px; border-radius: 0 0 8px 8px; background: white; padding: 12px; }
.tool-frame b { color: #31423a; font-size: clamp(11px, 1vw, 14px); }
.tool-preview[data-tool="gmail"] .gmail-frame, .tool-preview[data-tool="teams"] .teams-frame, .tool-preview[data-tool="market"] .market-frame, .tool-preview[data-tool="network"] .network-frame { display: grid; }
.mail-row, .market-line, .teams-message, .network-frame span { border-radius: 8px; background: #f2f5f3; color: #69766f; padding: 8px 9px; font-size: clamp(9px, 0.8vw, 12px); line-height: 1.3; }
.mail-row.active, .market-line.active { background: #e5f4ec; color: var(--green-dark); font-weight: 800; }
.teams-frame p { margin: 0; border-left: 3px solid #6e68c9; background: #f2f0fb; color: #58556a; padding: 10px; font-size: clamp(9px, 0.8vw, 12px); line-height: 1.45; }
.profile-name { color: #283c33 !important; font-size: clamp(15px, 1.4vw, 20px) !important; font-weight: 850; }

.conversation-window { position: absolute; top: 9%; right: 2%; bottom: 2%; left: 36%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; z-index: 10; opacity: 0; border: 1px solid #dfe8e3; border-radius: 16px; background: linear-gradient(145deg, #f7faf7, #edf3ef); padding: 20px 24px 22px; transform: translateY(18px); pointer-events: none; transition: opacity 320ms ease, transform 420ms ease; }
.conversation-window.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.conversation-header { display: grid; gap: 3px; }
.conversation-header span { color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: 0.13em; }
.conversation-header strong { font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -0.03em; }
.conversation-scroll { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 9px; padding-right: 4px; scroll-behavior: smooth; scrollbar-width: none; }
.conversation-scroll::-webkit-scrollbar { display: none; }
.user-request-bubble { justify-self: end; max-width: 68%; opacity: 0; border-radius: 16px 16px 4px 16px; background: #1e5b45; color: white; padding: 11px 14px; transform: translateY(8px); transition: opacity 260ms ease, transform 300ms ease; }
.user-request-bubble.visible, .trace-step.visible, .reply-draft.visible { opacity: 1; transform: translateY(0); }
.user-request-bubble span, .reply-draft span { font-size: 9px; font-weight: 900; letter-spacing: 0.1em; opacity: 0.72; }
.user-request-bubble p, .reply-draft p { margin: 4px 0 0; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.4; }
.agent-trace { display: grid; gap: 7px; }
.trace-step { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; opacity: 0; border: 1px solid #dbe6e0; border-radius: 13px; background: white; padding: 9px 12px; transform: translateY(8px); transition: opacity 260ms ease, transform 300ms ease; }
.trace-step b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e3f4eb; color: var(--green-dark); font-size: 10px; }
.trace-step div { display: grid; gap: 2px; }
.trace-step strong { font-size: clamp(12px, 1.05vw, 15px); }
.trace-step span { color: #718078; font-size: clamp(10px, 0.86vw, 13px); }
.reply-draft { opacity: 0; border: 1px solid #b9dccb; border-radius: 15px; background: #eef9f3; padding: 13px 15px; transform: translateY(8px); transition: opacity 300ms ease, transform 340ms ease; }
.reply-draft span { color: var(--green-dark); opacity: 1; }
.chat-composer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; min-height: 50px; border: 1px solid #d7e2dc; border-radius: 15px; background: white; padding: 0 9px 0 15px; box-shadow: 0 10px 24px rgba(37, 72, 57, 0.08); }
.chat-composer span { font-size: clamp(12px, 1.05vw, 15px); }
.chat-composer i { width: 2px; height: 18px; background: var(--green-dark); animation: blink 800ms step-end infinite; }
.chat-composer b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--green-dark); color: white; font-size: 17px; }
.chat-composer.submitted { opacity: 0.55; }

.tool-preview[data-tool="sources"] .sources-frame { display: grid; }
.sources-frame { grid-template-rows: auto minmax(0, 1fr); min-height: 0; align-content: stretch; gap: 0; overflow: hidden; background: #f7f9f8; }
.source-query { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; min-height: 48px; border-bottom: 1px solid #dce5e0; background: white; padding: 8px 10px; }
.source-query > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #e3f4eb; color: var(--green-dark); font-size: 17px; font-weight: 900; }
.source-query div { display: grid; gap: 2px; min-width: 0; }
.source-query small { color: #668075; font-size: 7px; font-weight: 900; letter-spacing: 0.1em; }
.source-query strong { overflow: hidden; color: #24352e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.source-activity-list { display: grid; align-content: start; gap: 3px; min-height: 0; overflow: hidden; padding: 5px; }
.source-operation { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; opacity: 0; border: 1px solid #dfe8e3; border-radius: 9px; background: white; padding: 2px 5px; transform: translateY(4px); transition: opacity 180ms ease, transform 220ms ease; }
.source-operation.visible { opacity: 1; transform: translateY(0); }
.source-operation > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #f0f5f2; font-size: 13px; }
.source-operation div { display: grid; gap: 1px; min-width: 0; }
.source-operation b { overflow: hidden; color: #263b32; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.source-operation p { overflow: hidden; margin: 0; color: #68776f; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.source-operation small { border-radius: 999px; background: #e7f5ed; color: #277252; padding: 4px 6px; font-size: 7px; font-weight: 850; white-space: nowrap; }

.market-frame { grid-template-rows: minmax(0, 1fr); min-height: 0; align-content: stretch; gap: 0; overflow: hidden; }
.invest-terminal { height: auto; min-height: 0; overflow: hidden; }
.chrome-frame { grid-template-rows: minmax(0, 1fr); min-height: 0; align-content: stretch; gap: 0; overflow: hidden; }
.chrome-launch, .chrome-navigation { height: auto; min-height: 0; }

@keyframes narration-change {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}