/* One continuous horizontal agent surface, with its platform directly below. */
.demo { --agent-height: 202px; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--agent-height) minmax(0,1fr); gap: 18px; height: min(720px,calc(100svh - 32px)); min-height: 0; }
.mcp-launch { grid-row: 1; grid-column: 1; display: grid; grid-template-rows: 28px 74px minmax(0,1fr); gap: 10px; height: 100%; min-height: 0; padding: 14px 18px; border: 1px solid #ffffffed; border-radius: 16px; background: linear-gradient(145deg,#ffffffb3,#ffffff69); box-shadow: inset 0 1px 0 #fff,0 0 0 1px #d2dbe680,0 18px 48px #253b5710; }
.agent-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-width: 0; }
.agent-toolbar .chat-header { height: auto; padding: 0; border: 0; background: none; border-radius: 0; gap: 8px; }
.agent-toolbar .chat-tag { margin-left: 8px; }
.client-switcher { display: flex; align-items: center; gap: 22px; }
.client-option { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 0; border: 0; background: none; opacity: .42; filter: grayscale(1); color: #6e7b8c; transition: opacity 250ms,filter 250ms; }
.client-option img { display: block; width: 20px; height: 20px; object-fit: contain; }
.client-option[data-client=chatgpt] img { filter: grayscale(1) brightness(0); }
.client-option > span { font-size: 9px; line-height: 1.2; }
.client-option[aria-pressed=true], .client-option:hover { opacity: 1; filter: none; }
.client-option:disabled { cursor: default; }
.launch-prompt { width: 100%; min-width: 0; min-height: 0; }
.mcp-launch .composer { display: flex; flex-direction: row; align-items: center; gap: 22px; height: 100%; min-height: 0; margin: 0; padding: 12px 18px; border: 1px solid #d8dfe6; border-radius: 24px; background: linear-gradient(135deg,#ffffffed,#ffffffbd); box-shadow: inset 0 1px 0 #fff,0 2px 8px #1f304008; animation: none; transition: border-radius 500ms var(--ease),border-color 300ms; }
.mcp-launch .query-main { display: block; font-size: 14px; line-height: 1.45; font-weight: 450; letter-spacing: -.22px; color: #354354; }
.mcp-launch .query-followup { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.6; color: #7a8798; }
.mcp-launch .run { flex: none; gap: 9px; min-height: 32px; min-width: 0; font-size: 9px; color: #778494; }
.mcp-launch .run-arrow { width: 30px; height: 30px; border-radius: 50%; background: #26313c; border-color: #26313c; box-shadow: inset 0 1px 0 #ffffff24,0 2px 4px #17233412; }
.mcp-launch .run-arrow .icon { width: 16px; height: 16px; }
.mcp-launch .run:disabled .run-arrow { background: #eef2f5; color: #8090a0; border-color: #e5eaf0; box-shadow: none; }
.mcp-launch[data-client=claude] .composer { border-radius: 12px; border-color: #d8d5ce; background: linear-gradient(135deg,#faf9f6,#f4f2ed); }
.mcp-launch[data-client=claude] .run-arrow { border-radius: 8px; }
.mcp-launch[data-client=mcp] .composer { border-radius: 18px; border-color: #c8d7e6; background: linear-gradient(135deg,#f7fafde8,#edf3f9de); }
.mcp-launch[data-client=mcp] .run-arrow { border-radius: 10px; }
.mcp-launch .chat-panel { min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mcp-launch .chat-conversation { display: flex; align-items: center; padding: 0; height: 100%; min-height: 0; }
.mcp-launch .chat-assistant { width: 100%; margin: 0; }
.mcp-launch .connector-card { margin: 0; padding: 0; border: 0; width: 100%; }
.mcp-launch .connector-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 18px; margin: 0; }
.mcp-launch .connector-steps li { display: flex; align-items: flex-start; gap: 6px; min-height: 0; padding: 0; }
.mcp-launch .conversation-message { font-size: 11px; line-height: 1.55; }
.mcp-launch .chat-assistant .assistant-avatar { width: 13px; height: 13px; margin-top: 2px; }
.mcp-launch .message-status { margin-top: 3px; width: 10px; height: 10px; }
.mcp-launch .connector-steps li[data-state=running] .message-status { margin-top: 3px; }
.mcp-launch .chat-conversation .connector-card { display: block !important; }
.platform-window { grid-column: 1; grid-row: 2; }
.platform-header { flex-basis: 34px; }
.platform-nav { flex-basis: 28px; }
.connector-bridge { left: 50%; top: calc(var(--agent-height) + 9px); transform: translate(-50%,-50%); width: 24px; height: 24px; display: grid; grid-template-columns: 24px; }
.connector-bridge > .connector-rail, .connector-bridge > .connector-label { display: none; }
.connector-node { width: 24px; height: 24px; }
.connector-node svg { width: 12px; height: 12px; }
.platform-window .results { animation: cole-panel-reveal 320ms var(--ease) both; }
@media (min-width: 821px) {
  .platform-window .parcel-view { height: 100%; max-height: 220px; min-height: 0; aspect-ratio: auto; }
  .platform-window .detail-panel[id$="-brief"] { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); column-gap: 28px; }
  .platform-window .email-body { max-width: 760px; }
  .platform-window .detail-panel[id$="-call"] { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows: auto minmax(0,1fr); column-gap: 28px; align-content: start; }
  .platform-window .call-contact { grid-column: 1; grid-row: 1; }
  .platform-window .recorder { grid-column: 1; grid-row: 2; align-self: start; }
  .platform-window .call-result { grid-column: 2; grid-row: 1/-1; padding-top: 0; }
  .platform-window .call-result h3 { margin-top: 7px; }
}
@media (max-width: 820px) {
  .demo { --agent-height: 188px; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--agent-height) minmax(0,1fr); gap: 12px; height: min(740px,calc(100svh - 24px)); min-height: 0; }
  .mcp-launch { grid-template-rows: 24px 70px minmax(0,1fr); gap: 6px; padding: 10px 12px; border-radius: 12px; }
  .agent-toolbar { gap: 10px; }
  .agent-toolbar .chat-tag { display: none; }
  .client-switcher { gap: 15px; }
  .client-option { min-height: 24px; padding: 2px 0; }
  .client-option img { width: 18px; height: 18px; }
  .client-option > span { display: none; }
  .mcp-launch .composer { padding: 8px 10px; gap: 10px; border-radius: 18px; }
  .mcp-launch .query-main { font-size: 10.5px; line-height: 1.4; letter-spacing: -.08px; }
  .mcp-launch .query-followup { font-size: 8.5px; line-height: 1.45; margin-top: 3px; }
  .mcp-launch .run { flex-direction: column-reverse; gap: 4px; font-size: 7px; }
  .mcp-launch .run-arrow { width: 24px; height: 24px; }
  .mcp-launch .run-arrow .icon { width: 13px; height: 13px; }
  .mcp-launch .connector-steps { grid-template-columns: minmax(0,1fr); gap: 1px; }
  .mcp-launch .connector-steps li { min-height: 0; align-items: center; gap: 6px; }
  .mcp-launch .conversation-message { font-size: 8.8px; line-height: 1.4; }
  .mcp-launch .chat-assistant .assistant-avatar { width: 10px; height: 10px; margin: 0; }
  .mcp-launch .message-status, .mcp-launch .connector-steps li[data-state=running] .message-status { margin-top: 0; margin-bottom: 0; }
  .connector-bridge { top: calc(var(--agent-height) + 6px); display: none; }
  .platform-header { flex-basis: 28px; height: 28px; }
  .platform-nav { flex-basis: 25px; height: 25px; min-height: 25px; }
}
@media (prefers-reduced-transparency: reduce) { .mcp-launch { background: #f5f8fb; } }
@media (prefers-contrast: more) { .mcp-launch .query-followup,.mcp-launch .conversation-message,.client-option { color: #46566c; } }