/* WEB-04: responsive and accessibility polish for the Commander website only. */
body.commander-landing.visual-v3 .site-header,
body.cm-library-page.visual-v3 .site-header {
  background: rgba(9,17,31,.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(126,165,226,.18);
}

body.commander-landing .cm-hero h1,
body.commander-landing .cm-showcase-copy h3,
body.commander-landing .cm-web03 h2,
body.cm-library-page .page-hero h1,
.cm-lib-section-top h2,
.cm-lib-detail-heading h2 { text-wrap: balance; }

/* Controls have a visible, consistent keyboard focus in the dark theme. */
body.commander-landing :is(.cm-hero a,.cm-remote a,.cm-showcase a,.cm-showcase button,.commander-film button):focus-visible,
body.cm-library-page :is(.button,.breadcrumbs a):focus-visible,
.cm-lib-main :is(button,input,a):focus-visible,
.cm-lib-detail :is(button,a):focus-visible,
.cm-lib-teaser a:focus-visible {
  outline: 2px solid #afd1ff;
  outline-offset: 4px;
}
.cm-lib-search input:focus-visible { outline: none; }
.cm-lib-search:focus-within { border-color: #9dc2ff; box-shadow: 0 0 0 3px rgba(114,160,245,.16); }

/* Make all compact prompt-library filters usable by touch, including at 320px. */
.cm-lib-filters button { min-height: 44px; }
.cm-lib-prompt-actions button { min-height: 46px; }
.cm-lib-top-link { min-height: 46px; }
.cm-lib-result-count { min-height: 18px; }
.cm-lib-card:focus-visible { outline: 2px solid #afd1ff; outline-offset: 4px; }

/* Favor a stable visual layout with longer Polish wording. */
.cm-lib-card strong,
.cm-lib-summary,
.cm-lib-detail-heading,
.cm-lib-result,
.cm-w3-security-core article,
.cm-w3-step-content { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  body.commander-landing.visual-v3 .site-header,
  body.cm-library-page.visual-v3 .site-header { background: rgba(9,17,31,.99); }
  .cm-lib-filters { gap: 8px; }
  .cm-lib-filters button { padding: 11px 12px; font-size: .78rem; }
  .cm-lib-search input { font-size: 16px; }
  .cm-lib-main .cm-lib-statrow { margin-bottom: 38px; }
  .cm-lib-teaser-grid,.cm-lib-grid { row-gap: 14px; }
  .cm-lib-card { min-height: 246px; }
  .cm-lib-card-foot { margin-top: 22px; }
  .cm-lib-prompt-top { flex-wrap: wrap; row-gap: 6px; }
}

/* WEB-01 artwork: keep the connection callout visible between phone and PC. */
@media (max-width: 390px) {
  body.commander-landing .cm-remote-connection {
    top: 51%;
    left: 63%;
    z-index: 3;
  }
  body.commander-landing .cm-remote-connection strong {
    background: rgba(9,22,41,.97);
    border: 1px solid rgba(124,173,249,.32);
  }
  body.commander-landing .cm-remote-label { margin-top: 10px; }
  body.commander-landing .cm-w3-closing-panel { border-radius: 17px; }
  .cm-lib-detail .cm-lib-safety { padding: 17px 16px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-lib-card:hover,.cm-lib-card:focus-visible,
  .cm-lib-top-link:hover,.cm-lib-top-link:focus-visible { transform: none; }
}

/* Commander product logo: distinct from the Trueway studio wordmark. */
.site-header .cm-product-brand { display: inline-flex; align-items: center; gap: 9px !important; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.site-header .cm-product-brand .cm-product-icon { display: block; width: 37px; height: 37px; max-width: 37px !important; object-fit: contain; flex: 0 0 37px; filter: drop-shadow(0 0 8px #1a79ef30); }
.site-header .cm-product-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-family: "Inter", sans-serif; letter-spacing: -.025em; }
.site-header .cm-product-lockup strong:first-child { font-size: 12px; line-height: 1.06; font-weight: 720; color: #a4bfdf; }
.site-header .cm-product-lockup strong:last-child { font-size: 15px; line-height: 1.12; font-weight: 800; color: #f5f9ff; }
.site-header .cm-product-brand:hover .cm-product-lockup strong:last-child { color: #b2dbff; }
.commander-landing .cm-story-agent-logo { background: transparent; border-radius: 0; }
.commander-landing .cm-story-agent-logo img { display: block; width: 17px; height: 17px; object-fit: contain; }
@media (max-width: 520px) {
  .site-header .cm-product-brand { gap: 6px !important; }
  .site-header .cm-product-brand .cm-product-icon { width: 30px; height: 30px; max-width: 30px !important; flex-basis: 30px; }
  .site-header .cm-product-lockup strong:first-child { font-size: 10px; }
  .site-header .cm-product-lockup strong:last-child { font-size: 12px; }
}
@media (max-width: 350px) {
  .site-header .cm-product-brand .cm-product-icon { width: 26px; height: 26px; max-width: 26px !important; flex-basis: 26px; }
  .site-header .cm-product-lockup strong:first-child { font-size: 9px; }
  .site-header .cm-product-lockup strong:last-child { font-size: 11px; }
}

/* Commander desktop brand illustration consistency. The phone depicts the product, not the company monogram. */
.commander-landing .cm-remote-avatar { width: 36px; height: 36px; flex: 0 0 36px; overflow: hidden; border: 1px solid #638fee80; border-radius: 11px; background: linear-gradient(145deg,#1a315a,#0d1933); box-shadow: 0 7px 20px #020d2b66,inset 0 1px #ffffff21; }
.commander-landing .cm-remote-avatar img { display: block; width: 32px; height: 32px; object-fit: contain; }

/* Readable desktop connection legend. The original centered label was hidden behind the illustrated devices. */
@media (min-width: 981px) {
  .commander-landing .cm-remote-connection { top: auto; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; max-width: calc(100% - 28px); padding: 8px 14px; border: 1px solid #7299cb73; border-radius: 999px; background: #10213ae8; box-shadow: 0 12px 35px #020d26a8,inset 0 1px #ffffff1c; }
  .commander-landing .cm-remote-connection > span { width: 26px; height: 26px; flex: 0 0 26px; border: 0; background: #204573; box-shadow: none; }
  .commander-landing .cm-remote-connection .cm-icon { width: 16px; height: 16px; }
  .commander-landing .cm-remote-connection strong { padding: 0; background: none; white-space: nowrap; }
}

/* Desktop interactive white ChatGPT phone-panel, inspired by the approved earlier mockup. */
.commander-landing .cm-remote-interactive {
  min-height: 610px;
  padding: 42px clamp(22px,3.6vw,48px) 69px;
  gap: clamp(24px,4.5vw,62px);
}
.commander-landing .cm-remote-whitechat {
  position: relative; z-index: 2; box-sizing: border-box;
  display: flex; flex: 0 1 480px; flex-direction: column;
  width: 480px; max-width: 55%; min-width: 0; height: 448px;
  overflow: hidden; border: 1px solid #ffffff;
  border-radius: 22px; background: #fff; color: #181a1e;
  box-shadow: 0 27px 55px #0009,0 0 65px #4e94ff25;
  font-family: "Inter",Arial,sans-serif;
  transform: rotate(-2deg);
}
.commander-landing .cm-whitechat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: 0 0 58px; padding: 0 18px; border-bottom: 1px solid #e5e7eb;
}
.commander-landing .cm-whitechat-brand { display: inline-flex; align-items: center; gap: 9px; color: #111318; white-space: nowrap; }
.commander-landing .cm-whitechat-brand img { width: 22px; height: 22px; filter: brightness(0); }
.commander-landing .cm-whitechat-brand strong { font: 650 15px/1.2 "Inter",sans-serif; }
.commander-landing .cm-whitechat-connected { display: inline-flex; align-items: center; gap: 7px; color: #079c70; font-size: 10px; white-space: nowrap; }
.commander-landing .cm-whitechat-connected i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #0ca47a; box-shadow: 0 0 0 3px #0ca47a14; }
.commander-landing .cm-whitechat-next {
  display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px;
  border: 1px solid #d9dde2; border-radius: 50%; background: #fff; color: #57606c;
  font: 650 15px/1 "Inter",sans-serif; cursor: pointer;
}
.commander-landing .cm-whitechat-next:hover { color: #171a1f; background: #f2f4f7; }
.commander-landing .cm-whitechat-next:focus-visible,
.commander-landing .cm-whitechat-send:focus-visible,
.commander-landing .cm-whitechat-compose input:focus-visible { outline: 3px solid #407af4; outline-offset: 2px; }
.commander-landing .cm-whitechat-conversation {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 0;
  min-height: 0; padding: 19px 19px 6px; overflow: hidden;
}
.commander-landing .cm-whitechat-prompt {
  align-self: flex-end; width: fit-content; max-width: 91%; min-height: 17px;
  padding: 11px 15px; border-radius: 21px; background: #f1f2f3;
  color: #202329; font-size: 12px; line-height: 1.4;
}
.commander-landing .cm-whitechat-typing .cm-whitechat-prompt::after { content: "|"; margin-left: 1px; font-weight: 450; animation: cm-whitechat-caret .6s steps(1) infinite; }
.commander-landing .cm-whitechat-status { min-height: 18px; margin: 20px 0 12px; color: #8d919b; font-size: 11px; }
.commander-landing .cm-whitechat-reply { min-height: 18px; margin: 0 0 10px; color: #22252b; font-size: 13px; line-height: 1.5; font-weight: 550; }
.commander-landing .cm-whitechat-results { display: grid; gap: 12px; margin: 0; padding: 0 0 0 17px; color: #555d66; }
.commander-landing .cm-whitechat-results li { padding-left: 2px; font-size: 11px; line-height: 1.5; animation: cm-whitechat-reveal .4s ease both; }
.commander-landing .cm-whitechat-results li::marker { color: #5f6673; }
.commander-landing .cm-whitechat-compose {
  display: flex; align-items: center; gap: 9px; flex: 0 0 45px;
  margin: 0 13px 2px; padding: 3px 4px 3px 12px;
  border: 1px solid #dedfe2; border-radius: 26px; background: #fff;
  box-shadow: 0 2px 5px #161a2210;
}
.commander-landing .cm-whitechat-plus { font: 300 24px/1 "Inter",sans-serif; color: #555c64; }
.commander-landing .cm-whitechat-compose input {
  flex: 1; width: 100%; min-width: 0; height: 34px; padding: 0 2px;
  border: 0; outline: 0; background: transparent; color: #171a20;
  font: 12px/1.35 "Inter",sans-serif;
}
.commander-landing .cm-whitechat-compose input::placeholder { color: #868b93; }
.commander-landing .cm-whitechat-send {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%; color: #fff;
  background: #0e1117; font: 700 20px/1 "Inter",sans-serif; cursor: pointer;
}
.commander-landing .cm-whitechat-send:hover { background: #315cac; }
.commander-landing .cm-whitechat-note { margin: 3px 12px 12px; color: #9a9da4; text-align: center; font: 9px/1.35 "Inter",sans-serif; }
.commander-landing .cm-remote-interactive .cm-remote-computer { flex: 0 1 415px; max-width: 47%; }
.commander-landing .cm-remote-interactive .cm-remote-connection { pointer-events: none; }
@keyframes cm-whitechat-caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes cm-whitechat-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .commander-landing .cm-remote-interactive { min-height: 570px; padding: 28px 24px 72px; gap: 18px; justify-content: center; flex-direction: row; }
  .commander-landing .cm-remote-whitechat { width: 52%; max-width: 52%; height: 425px; flex: 0 1 52%; transform: rotate(-1deg); }
  .commander-landing .cm-remote-interactive .cm-remote-computer { width: 43%; max-width: 43%; flex: 0 1 43%; margin: 0; transform: rotate(2deg) scale(.94); }
  .commander-landing .cm-remote-interactive .cm-remote-connection {
    top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: flex; align-items: center; gap: 7px; min-width: 0;
    padding: 7px 11px; border: 1px solid #7194c66b; border-radius: 99px; background: #0f2139e8;
  }
  .commander-landing .cm-remote-interactive .cm-remote-connection > span { width: 25px; height: 25px; border: 0; box-shadow: none; }
  .commander-landing .cm-remote-interactive .cm-remote-connection .cm-icon { width: 15px; height: 15px; }
  .commander-landing .cm-remote-interactive .cm-remote-connection strong { padding: 0; background: none; white-space: nowrap; }
}
@media (max-width: 700px) {
  .commander-landing .cm-remote-interactive { min-height: 0; padding: 22px 13px 73px; flex-direction: column; gap: 25px; }
  .commander-landing .cm-remote-whitechat { width: min(100%,500px); max-width: 100%; flex: none; height: 410px; transform: none; }
  .commander-landing .cm-remote-interactive .cm-remote-computer { width: min(100%,420px); max-width: 100%; flex: none; align-self: center; margin: 0; transform: rotate(1deg); }
  .commander-landing .cm-whitechat-head { padding: 0 12px; gap: 7px; }
  .commander-landing .cm-whitechat-connected { font-size: 9px; }
}
@media (max-width: 370px) {
  .commander-landing .cm-whitechat-brand strong { font-size: 13px; }
  .commander-landing .cm-whitechat-connected { max-width: 122px; white-space: normal; line-height: 1.2; }
  .commander-landing .cm-whitechat-conversation { padding: 14px 13px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .commander-landing .cm-whitechat-typing .cm-whitechat-prompt::after,
  .commander-landing .cm-whitechat-results li { animation: none; }
}


/* Commander whitechat input override: neutralize site-wide V3 form !important styles. */
.commander-landing .cm-whitechat-compose .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; padding: 0 !important; border: 0 !important;
}
.commander-landing .cm-whitechat-compose input {
  border: 0 !important; border-radius: 0 !important; outline: 0;
  background: transparent !important; box-shadow: none !important; color: #171a20 !important;
}

/* Interactive preview appearance switch. Dark and light modes share all interactions. */
.commander-landing .cm-whitechat-theme {
  display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px;
  border: 1px solid #d9dde2; border-radius: 50%; background: #fff; color: #57606c;
  font: 650 16px/1 "Inter",sans-serif; cursor: pointer;
}
.commander-landing .cm-whitechat-theme:hover { background: #f2f4f7; color: #171a1f; }
.commander-landing .cm-whitechat-theme:focus-visible { outline: 3px solid #407af4; outline-offset: 2px; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] {
  background: #131d2d; border-color: #556b88; color: #eef4ff;
  box-shadow: 0 27px 60px #000b, 0 0 65px #4787ed30;
}
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-head { border-bottom-color: #31425a; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-brand { color: #f5f8ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-brand img { filter: brightness(0) invert(1); }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-connected { color: #69ddb0; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-next,
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-theme { background: #223048; border-color: #53627c; color: #d7e7ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-next:hover,
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-theme:hover { background: #364c6a; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-prompt { background: #2b3a51; color: #f5f8ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-status { color: #9db1d0; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-reply { color: #f2f6ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-results { color: #bbcae0; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-results li::marker { color: #7194c6; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-compose { background: #1a273a; border-color: #445774; box-shadow: 0 2px 8px #0002; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-plus { color: #e3eaf5; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-compose input { color: #eef4ff !important; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-compose input::placeholder { color: #a0b1c9; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-send { background: #497ce5; color: #fff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-send:hover { background: #6595ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-note { color: #9aafc9; }

/* The paired monitor responds to the same example as the chat; cursor gently pulses. */
.commander-landing .cm-remote-interactive .cm-remote-screen > span { transition: color .22s, opacity .22s; }
.commander-landing .cm-remote-interactive .cm-remote-screen-cursor { animation: cm-remote-cursor-blink .8s steps(1) infinite; }
.commander-landing .cm-remote-interactive .cm-remote-screen .cm-remote-ok { white-space: normal; }
@keyframes cm-remote-cursor-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: .15; } }
@media (max-width: 700px) {
  .commander-landing .cm-whitechat-connected { font-size: 8px; }
  .commander-landing .cm-whitechat-head { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .commander-landing .cm-remote-interactive .cm-remote-screen-cursor { animation: none; }
}

/* WEB-04 workflow v2: real scrolling multi-step story inside the fictional device preview. */
.commander-landing .cm-whitechat-conversation {
  position: relative; display: block; overflow-y: auto; overscroll-behavior: contain;
  scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #b5c1d1 transparent;
  padding: 17px 14px 12px; margin: 0; min-height: 0;
}
.commander-landing .cm-whitechat-conversation::-webkit-scrollbar { width: 5px; }
.commander-landing .cm-whitechat-conversation::-webkit-scrollbar-thumb { background: #aeb9c9; border-radius: 6px; }
.commander-landing .cm-demo-message { display: flex; flex-direction: column; margin: 0 0 13px; animation: cm-demo-event-in .35s ease both; }
.commander-landing .cm-demo-message-text {
  max-width: 98%; margin: 0; padding: 9px 12px; border-radius: 16px;
  font: 500 11.7px/1.5 "Inter", Arial, sans-serif; overflow-wrap: anywhere;
}
.commander-landing .cm-demo-user { align-items: flex-end; }
.commander-landing .cm-demo-user .cm-demo-message-text {
  max-width: 88%; background: #eff1f4; color: #262e39; border-bottom-right-radius: 5px;
}
.commander-landing .cm-demo-assistant { align-items: flex-start; margin-top: 6px; }
.commander-landing .cm-demo-assistant .cm-demo-message-text {
  max-width: 100%; padding-left: 4px; background: transparent; color: #303841; font-weight: 560;
}
.commander-landing .cm-demo-tool-group {
  display: block; margin: 3px 0 16px; padding: 9px 10px 7px;
  border: 1px solid #e5e9f0; border-radius: 14px; background: #fafbfe;
  box-shadow: 0 2px 8px #1d2c4909;
}
.commander-landing .cm-demo-tool-head {
  display: flex; align-items: center; gap: 7px; padding: 0 1px 8px;
  border-bottom: 1px solid #e8edf3;
}
.commander-landing .cm-demo-tool-head img { width: 19px; height: 19px; object-fit: contain; }
.commander-landing .cm-demo-tool-head strong { color: #252c37; font: 690 11px/1.3 "Inter",Arial,sans-serif; }
.commander-landing .cm-demo-tool-badge {
  margin-left: auto; padding: 3px 6px; border-radius: 8px;
  color: #3874a6; background: #eaf1ff; font-size: 9px; line-height: 1.1;
}
.commander-landing .cm-demo-tool-list { display: grid; gap: 0; }
.commander-landing .cm-demo-tool-row {
  display: grid; grid-template-columns: 24px minmax(0,1fr) 14px;
  align-items: start; gap: 7px; min-width: 0;
  padding: 9px 1px; border-bottom: 1px solid #edf0f5;
  animation: cm-demo-event-in .3s ease both;
}
.commander-landing .cm-demo-tool-row:last-child { border-bottom: 0; }
.commander-landing .cm-demo-step-icon {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid #dae4ef; border-radius: 8px;
  color: #4773b6; background: #eff5ff;
}
.commander-landing .cm-demo-step-icon svg { width: 15px; height: 15px; }
.commander-landing .cm-demo-tool-body { display: grid; gap: 2px; min-width: 0; }
.commander-landing .cm-demo-tool-title {
  color: #303843; font: 650 11.3px/1.3 "Inter",Arial,sans-serif;
}
.commander-landing .cm-demo-tool-detail {
  color: #717f90; font: 440 9.8px/1.35 "Inter",Arial,sans-serif;
}
.commander-landing .cm-demo-tool-row.is-current { background: #eaf3ff; border-radius: 8px; margin: 0 -5px; padding-left: 6px; padding-right: 6px; }
.commander-landing .cm-demo-tool-row.is-current .cm-demo-step-icon { background: #d6e9ff; color: #165cbd; }
.commander-landing .cm-demo-tool-state { display: grid; place-items: center; width: 14px; height: 18px; color: #099768; font: 760 12px/1 "Inter",Arial,sans-serif; }
.commander-landing .cm-demo-tool-row.is-running .cm-demo-tool-state {
  width: 13px; height: 13px; margin-top: 3px; border-radius: 50%;
  border: 2px solid #c3d6ef; border-top-color: #3476d5;
  animation: cm-demo-spin .8s linear infinite;
}
.commander-landing .cm-demo-tool-row.is-warning .cm-demo-tool-state { color: #ae7722; }
.commander-landing .cm-whitechat-jump {
  position: absolute; z-index: 6; right: 25px; bottom: 66px;
  display: none; place-items: center; width: 32px; height: 32px;
  border: 1px solid #d3dbe5; border-radius: 50%; background: #fff; color: #23334c;
  box-shadow: 0 3px 12px #0d233a20; cursor: pointer; font: 700 17px/1 "Inter",sans-serif;
}
.commander-landing .cm-whitechat-jump[data-visible="true"] { display: grid; }
.commander-landing .cm-whitechat-jump:focus-visible { outline: 3px solid #407af4; outline-offset: 2px; }
.commander-landing .cm-remote-interactive .cm-remote-screen {
  display: block; box-sizing: border-box; height: 246px; min-height: 246px; max-height: 246px; overflow-y: auto;
  padding: 20px 17px 14px; scrollbar-width: thin; scrollbar-color: #415a7a transparent;
  overscroll-behavior: contain; scroll-behavior: auto;
}
.commander-landing .cm-remote-interactive .cm-remote-screen,
.commander-landing .cm-remote-interactive .cm-whitechat-conversation { transition: opacity .28s ease; }
.commander-landing .cm-remote-interactive.cm-demo-scene-leaving .cm-remote-screen,
.commander-landing .cm-remote-interactive.cm-demo-scene-leaving .cm-whitechat-conversation { opacity: .28; }
.commander-landing .cm-whitechat-pause {
  display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px;
  border: 1px solid #d9dde2; border-radius: 50%; background: #fff;
  color: #57606c; cursor: pointer; font: 650 13px/1 "Inter",sans-serif;
}
.commander-landing .cm-whitechat-pause:hover { color: #171a1f; background: #f2f4f7; }
.commander-landing .cm-whitechat-pause:focus-visible { outline: 3px solid #407af4; outline-offset: 2px; }
.commander-landing .cm-whitechat-pause[aria-pressed="true"] { color: #255db2; background: #e7f0ff; }
.commander-landing .cm-whitechat-pause:disabled { opacity: .5; cursor: default; }
.commander-landing .cm-remote-interactive .cm-demo-terminal-command.is-current { color: #fff; border-left: 2px solid #5e9bff; padding-left: 5px; background: #1e38553b; }
.commander-landing .cm-remote-interactive .cm-remote-connection { transition: box-shadow .24s ease, border-color .24s ease; }
.commander-landing .cm-remote-interactive.cm-demo-command-running .cm-remote-connection {
  border-color: #73aaff; box-shadow: 0 0 22px #397be443;
}
.commander-landing .cm-remote-interactive.cm-demo-command-running .cm-remote-screen {
  outline: 1px solid #6aafff55; outline-offset: -1px;
}
.commander-landing .cm-remote-interactive.cm-demo-playback-paused .cm-demo-message,
.commander-landing .cm-remote-interactive.cm-demo-playback-paused .cm-demo-tool-row,
.commander-landing .cm-remote-interactive.cm-demo-playback-paused .cm-demo-terminal-line,
.commander-landing .cm-remote-interactive.cm-demo-playback-paused .cm-remote-screen-cursor,
.commander-landing .cm-remote-interactive.cm-demo-playback-paused .cm-demo-tool-row.is-running .cm-demo-tool-state {
  animation-play-state: paused;
}
.commander-landing .cm-remote-interactive .cm-demo-terminal-prompt { color: #8fa9c6; }
.commander-landing .cm-remote-interactive .cm-demo-terminal-line {
  display: block; min-height: 15px; margin: 0 0 7px;
  font: 500 10.5px/1.4 "Cascadia Code","Consolas",monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
  animation: cm-demo-terminal-in .24s ease both;
}
.commander-landing .cm-remote-interactive .cm-demo-terminal-command { color: #d7e6ff; }
.commander-landing .cm-remote-interactive .cm-demo-terminal-ok { color: #68d5aa; }
.commander-landing .cm-remote-interactive .cm-demo-terminal-warn { color: #f6bd70; }
.commander-landing .cm-remote-interactive .cm-remote-screen-cursor { display: inline; color: #73a9ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-conversation { scrollbar-color: #536987 transparent; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-user .cm-demo-message-text { background: #2d3d54; color: #f2f6fc; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-assistant .cm-demo-message-text { color: #e7effc; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-group { background: #19283c; border-color: #34465e; box-shadow: 0 2px 12px #0002; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-head { border-bottom-color: #34465e; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-head strong { color: #f1f6ff; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-badge { color: #a6c8fb; background: #273e5e; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-row { border-bottom-color: #293a53; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-row.is-current { background: #27476a; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-title { color: #e5eefb; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-tool-detail { color: #a0b0c9; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-demo-step-icon { color: #a6caff; background: #273a54; border-color: #415876; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-jump { background: #253953; color: #e6f0ff; border-color: #5f7293; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-pause { color: #cfddf2; background: #1b2c43; border-color: #48617f; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-pause[aria-pressed="true"] { color: #85b8ff; background: #29466c; }
@keyframes cm-demo-spin { to { transform: rotate(360deg); } }
@keyframes cm-demo-event-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-demo-terminal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .commander-landing .cm-whitechat-conversation { padding: 12px 11px; }
  .commander-landing .cm-whitechat-jump { right: 20px; }
  .commander-landing .cm-remote-interactive .cm-remote-screen { height: 205px; min-height: 205px; max-height: 205px; }
}
@media (max-width: 420px) {
  /* A three-button header must never crop the last control on narrow phones. */
  .commander-landing .cm-remote-interactive { padding: 17px 7px 57px; gap: 15px; }
  .commander-landing .cm-remote-whitechat { height: 375px; }
  .commander-landing .cm-whitechat-head { padding: 0 9px; gap: 5px; }
  .commander-landing .cm-whitechat-brand { gap: 6px; }
  .commander-landing .cm-whitechat-brand img { width: 20px; height: 20px; }
  .commander-landing .cm-whitechat-brand strong { font-size: 13px; }
  .commander-landing .cm-whitechat-connected { flex: 0 0 7px; width: 7px; max-width: none; font-size: 0; line-height: 0; white-space: nowrap; gap: 0; }
  .commander-landing .cm-whitechat-connected i { flex: none; }
  .commander-landing .cm-whitechat-theme,
  .commander-landing .cm-whitechat-pause,
  .commander-landing .cm-whitechat-next { flex: 0 0 25px; }
  .commander-landing .cm-remote-interactive .cm-remote-computer { transform: none; }
  .commander-landing .cm-remote-interactive .cm-remote-screen { height: 224px; min-height: 224px; max-height: 224px; padding: 13px 11px 10px; }
  .commander-landing .cm-remote-interactive .cm-demo-terminal-line { font-size: 10.8px; line-height: 1.44; }
  .commander-landing .cm-demo-message-text { font-size: 11.9px; }
  .commander-landing .cm-demo-tool-title { font-size: 11.4px; }
  .commander-landing .cm-demo-tool-detail { font-size: 10px; }
}
@media (min-width: 701px) and (max-width: 860px) {
  /* Side-by-side tablet layout otherwise crops its third playback control. */
  .commander-landing .cm-whitechat-connected { font-size: 0; white-space: nowrap; gap: 5px; }
  .commander-landing .cm-whitechat-connected::after { content: "ONLINE"; font: 680 9px/1.2 "Inter",Arial,sans-serif; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) {
  .commander-landing .cm-whitechat-conversation,
  .commander-landing .cm-remote-interactive .cm-remote-screen { scroll-behavior: auto; }
  .commander-landing .cm-demo-tool-row,
  .commander-landing .cm-demo-message,
  .commander-landing .cm-demo-terminal-line,
  .commander-landing .cm-demo-tool-row.is-running .cm-demo-tool-state { animation: none; }
  .commander-landing .cm-remote-interactive .cm-remote-screen,
  .commander-landing .cm-remote-interactive .cm-whitechat-conversation { transition: none; }
}

/* WEB-04 composer v7: ChatGPT-like mobile input geometry and distinct controls. */
.commander-landing .cm-whitechat-compose {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 28px 34px;
  grid-template-rows: minmax(27px, auto) 34px;
  gap: 3px 7px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 78px;
  margin: 0 12px 2px;
  padding: 9px 10px 8px;
  border-radius: 24px;
  background: #f7f7f8;
  box-shadow: 0 1px 5px #161a2210;
}
.commander-landing .cm-whitechat-compose input {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 27px;
  padding: 0 8px;
  font-size: 13px;
}
.commander-landing .cm-whitechat-plus {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  font-size: 25px;
  color: #747981;
}
.commander-landing .cm-whitechat-mic {
  display: grid;
  grid-column: 3;
  grid-row: 2;
  place-items: center;
  width: 28px;
  height: 34px;
  color: #777e88;
}
.commander-landing .cm-whitechat-mic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.commander-landing .cm-whitechat-send {
  grid-column: 4;
  grid-row: 2;
  width: 34px;
  height: 34px;
  background: #2c5eaa;
}
.commander-landing .cm-whitechat-send svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.commander-landing .cm-whitechat-send:hover { background: #3b71cb; }
.commander-landing .cm-whitechat-jump {
  left: 50%;
  right: auto;
  bottom: 119px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
}
.commander-landing .cm-whitechat-jump svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-compose {
  background: #212121;
  border-color: #3b3b3b;
}
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-mic { color: #a8a8a8; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-send { background: #2c5eaa; }
.commander-landing .cm-remote-whitechat[data-cm-theme="dark"] .cm-whitechat-send:hover { background: #3b71cb; }

/* FE-02: controls and disclosure stay outside the scaled phone illustration. */
body.commander-landing .cm-demo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1100px; margin:28px auto 0; padding:16px 20px; border:1px solid #4b6688; border-radius:16px; background:#101e32; color:#d9e7fb; }
body.commander-landing .cm-demo-toolbar strong { font:650 14px/1.5 Inter,sans-serif; }
body.commander-landing .cm-demo-toolbar p { margin:3px 0 0; color:#b8cbe4; font:13px/1.5 Inter,sans-serif; }
body.commander-landing .cm-demo-toolbar .cm-whitechat-pause { display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; min-height:44px; padding:10px 16px; border:1px solid #6687b4; border-radius:10px; background:#1b3152; color:#e8f1ff; font:650 13px/1.4 Inter,sans-serif; white-space:nowrap; }
body.commander-landing .cm-demo-toolbar .cm-whitechat-pause[aria-pressed="true"] { background:#254674; color:#fff; }
body.commander-landing .cm-demo-toolbar .cm-whitechat-pause:focus-visible { outline:3px solid #9cc7ff; outline-offset:4px; }
body.commander-landing .cm-demo-toolbar .cm-whitechat-pause:disabled { opacity:1; color:#bed0e9; }
body.commander-landing .cm-whitechat-note { font-size:12px; line-height:1.5; color:#535b68; }
@media(max-width:600px) { body.commander-landing .cm-demo-toolbar { align-items:flex-start; flex-direction:column; padding:16px; } }

/* FE-04: scoped availability information shared by Commander public pages. */
.cm-availability { margin:24px 0 40px; padding:28px; border:1px solid #405878; border-radius:20px; background:linear-gradient(130deg,#15263d,#0d192b); color:#e9f1ff; scroll-margin-top:110px; }
.cm-availability .cm-availability-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:24px; }
.cm-availability .cm-availability-badge { display:inline-block; padding:5px 10px; border:1px solid #607da8; border-radius:7px; background:#233b5c; color:#c8ddff; font:600 12px/1.4 Inter,sans-serif; }
.cm-availability .cm-availability-title { margin:12px 0 0; color:#f1f6ff; font:650 26px/1.2 Archivo,Inter,sans-serif; letter-spacing:-.025em; }
.cm-availability .cm-availability-heading > p { max-width:520px; margin:0; color:#bacbe2; font:14px/1.65 Inter,sans-serif; }
.cm-availability .cm-availability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:0; padding:0; border-top:1px solid #58769e66; }
.cm-availability .cm-availability-grid > li { min-width:0; padding:20px 20px 0 0; }
.cm-availability .cm-availability-grid > li + li { padding-left:22px; border-left:1px solid #58769e44; }
.cm-availability .cm-availability-grid > li > span { display:block; color:#b4c8e3; font:13px/1.5 Inter,sans-serif; }
.cm-availability .cm-availability-grid strong { display:block; margin-top:7px; color:#edf4ff; font:650 17px/1.4 Inter,sans-serif; }
.cm-availability a { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#bed8ff; font:600 13px/1.5 Inter,sans-serif; text-decoration:underline; text-underline-offset:4px; }
.cm-availability a:focus-visible { outline:3px solid #a8ccff; outline-offset:4px; }
.cm-availability.cm-availability-compact { display:flex; align-items:center; gap:18px; padding:16px 20px; margin-top:0; }
.cm-availability-compact .cm-availability-badge { flex:none; }
.cm-availability.cm-availability-compact > p { margin:0; color:#bacbe2; font:13px/1.6 Inter,sans-serif; }
.cm-availability-compact a { min-height:32px; }
.commander-landing .cm-pricing-availability,.commander-landing .cm-pricing-billing-note { max-width:1360px; margin:16px auto 0; color:#c1d2eb; font:14px/1.65 Inter,sans-serif; text-align:left; }
.commander-landing .cm-pricing-availability { padding:16px 20px; border:1px solid #506e98; border-radius:12px; background:#15263e; }
.commander-landing .cm-pricing-billing-note { color:#b2c5df; font-size:13px; }
.cm-product-footer nav a { line-height:1.6; }
@media(max-width:720px) {
  .cm-availability { padding:20px; margin-top:12px; border-radius:16px; }
  .cm-availability .cm-availability-heading { display:block; margin-bottom:20px; }
  .cm-availability .cm-availability-heading > p { margin-top:14px; font-size:13px; }
  .cm-availability .cm-availability-title { font-size:23px; }
  .cm-availability .cm-availability-grid { grid-template-columns:1fr; }
  .cm-availability .cm-availability-grid > li,.cm-availability .cm-availability-grid > li + li { padding:14px 0; border-left:0; border-bottom:1px solid #58769e44; }
  .cm-availability .cm-availability-grid > li:last-child { padding-bottom:0; border-bottom:0; }
  .cm-availability.cm-availability-compact { align-items:flex-start; flex-direction:column; gap:10px; }
  .commander-landing .cm-pricing-availability { padding:14px 16px; }
}