@media only screen and (max-width: 960px) {
   .digital-twin__panel::before {
      background:
         linear-gradient(90deg, rgba(3, 14, 26, 0.94) 0%, rgba(3, 15, 27, 0.72) 38%, rgba(3, 15, 27, 0.12) 72%),
         linear-gradient(0deg, rgba(2, 10, 19, 0.82) 0%, transparent 33%),
         linear-gradient(180deg, rgba(2, 10, 19, 0.56) 0%, transparent 20%);
   }

   .digital-twin__workspace {
      padding-inline: 28px;
      grid-template-columns: minmax(330px, 48vw) minmax(0, 1fr);
   }
}

@media only screen and (max-width: 700px) {
   .digital-twin {
      right: max(14px, env(safe-area-inset-right));
      bottom: calc(14px + env(safe-area-inset-bottom));
   }

   .digital-twin__launcher {
      min-width: 180px;
      min-height: 64px;
      grid-template-columns: 48px auto;
   }

   .digital-twin__launcher-mark {
      width: 48px;
      height: 48px;
   }

   .digital-twin__panel::before {
      background:
         linear-gradient(90deg, rgba(2, 12, 23, 0.72) 0%, rgba(2, 12, 23, 0.25) 62%, rgba(2, 12, 23, 0.08)),
         linear-gradient(0deg, rgba(2, 9, 17, 0.96) 0%, rgba(2, 10, 18, 0.66) 29%, transparent 54%),
         linear-gradient(180deg, rgba(2, 10, 19, 0.72) 0%, transparent 24%);
   }

   .digital-twin__scene-poster {
      object-position: 66.5% center;
   }

   .digital-twin__stage {
      background-position: 66.5% center;
   }

   .digital-twin__header {
      min-height: 67px;
      padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
   }

   .digital-twin__identity {
      gap: 9px;
   }

   .digital-twin__presence {
      width: 34px;
      height: 34px;
   }

   .digital-twin__eyebrow {
      font-size: 8px;
   }

   .digital-twin__header h2 {
      font-size: 16px;
   }

   .digital-twin__icon-button {
      width: 42px;
      min-width: 42px;
      height: 42px;
   }

   .digital-twin__scene-caption {
      display: none;
   }

   .digital-twin__workspace {
      display: block;
      min-height: 0;
      padding: 8px 12px 4px;
   }

   .digital-twin__conversation {
      width: 100%;
      height: 100%;
      max-width: none;
      justify-content: flex-start;
      padding: 6px 0 0;
   }

   .digital-twin__conversation-intro {
      max-width: min(64vw, 300px);
      margin-top: 5px;
      margin-bottom: 10px;
      padding: 15px 15px 14px;
      border-radius: 6px 17px 17px 17px;
   }

   .digital-twin__conversation-intro p {
      font-size: 15px;
      line-height: 1.35;
   }

   .digital-twin__conversation-intro span {
      top: -10px;
      padding: 4px 10px;
      font-size: 9px;
   }

   .digital-twin__setup {
      max-width: 64vw;
      min-height: 20px;
      margin-bottom: 3px;
   }

   .digital-twin__status {
      overflow: hidden;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .digital-twin__verification {
      min-height: 62px;
      transform: scale(0.86);
      transform-origin: left top;
   }

   .digital-twin__suggestions {
      max-width: min(66vw, 310px);
      margin-top: 0;
   }

   .digital-twin__suggestions > p {
      margin-bottom: 6px;
      font-size: 8px;
   }

   .digital-twin__suggestions > div {
      gap: 5px;
   }

   .digital-twin__suggestions button {
      min-height: 38px;
      padding: 7px 10px 7px 39px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.25;
   }

   .digital-twin__suggestions button::before {
      left: 12px;
      font-size: 9px;
   }

   .digital-twin__messages {
      width: min(92vw, 520px);
      margin-top: 0;
      padding-top: 4px;
   }

   .digital-twin__message {
      max-width: 88%;
      margin-bottom: 12px;
   }

   .digital-twin__message p {
      padding: 11px 13px;
      border-radius: 6px 16px 16px 16px;
      font-size: 16px;
      line-height: 1.48;
   }

   .digital-twin__message--user p {
      border-radius: 16px 6px 16px 16px;
   }

   .digital-twin__composer-shell {
      padding-top: 7px;
   }

   .digital-twin__composer {
      width: calc(100% - 20px);
      min-height: 53px;
      padding-left: 13px;
      overflow: hidden;
      border-radius: 18px;
   }

   .digital-twin__composer-mark {
      display: none;
   }

   .digital-twin__send span:first-child {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
   }

   .digital-twin__send {
      width: 44px;
      min-width: 44px;
      padding: 0;
      border-radius: 14px;
      font-size: 17px;
   }

   .digital-twin__footer {
      width: calc(100% - 24px);
      min-height: 37px;
   }

   .digital-twin__disclosure {
      max-width: 76%;
      font-size: 9px;
   }

   .digital-twin__footer button {
      font-size: 9px;
   }
}

@media only screen and (max-width: 700px) and (max-height: 710px) {
   .digital-twin__conversation-intro {
      display: none;
   }

   .digital-twin__suggestions button {
      min-height: 34px;
      font-size: 11px;
   }

   .digital-twin__scene-caption {
      display: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   .digital-twin__launcher,
   .digital-twin__panel,
   .digital-twin__suggestions button,
   .digital-twin__scene-poster {
      transition: none;
      animation: none;
   }

   .digital-twin__thinking,
   .digital-twin__scene-pulse {
      animation: none !important;
   }
}