.digital-twin,
.digital-twin * {
   box-sizing: border-box;
}

.digital-twin [hidden] {
   display: none !important;
}

.digital-twin .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.digital-twin {
   --twin-ink: #f4f7f8;
   --twin-muted: #aeb9be;
   --twin-panel: #121a20;
   --twin-surface: #1b272f;
   --twin-line: rgba(255, 255, 255, 0.12);
   --twin-accent: #f0833a;
   --twin-teal: #11abb0;
   position: fixed;
   right: 24px;
   bottom: 24px;
   z-index: 10000;
   color: var(--twin-ink);
   font-family: 'opensans-regular', sans-serif;
}

.digital-twin button,
.digital-twin textarea {
   font: inherit;
}

.digital-twin__launcher {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 54px;
   margin: 0;
   padding: 8px 18px 8px 8px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 999px;
   background: #121a20;
   box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
   color: #fff;
   font-family: 'opensans-semibold', sans-serif;
   font-size: 13px;
   letter-spacing: 0.02em;
   text-transform: none;
}

.digital-twin__launcher:hover,
.digital-twin__launcher:focus-visible {
   border-color: var(--twin-accent);
   background: #1b272f;
}

.digital-twin__launcher-mark {
   display: grid;
   width: 38px;
   height: 38px;
   place-items: center;
   border-radius: 50%;
   background: linear-gradient(145deg, var(--twin-accent), #c64d14);
   color: #fff;
   font: 11px/1 'opensans-bold', sans-serif;
   letter-spacing: 0.08em;
}

.digital-twin__panel {
   position: absolute;
   right: 0;
   bottom: 68px;
   display: flex;
   width: min(400px, calc(100vw - 32px));
   max-height: min(720px, calc(100vh - 110px));
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--twin-line);
   border-radius: 24px;
   background: var(--twin-panel);
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.digital-twin__header {
   position: static;
   display: flex;
   width: auto;
   height: 74px;
   max-height: 74px;
   min-height: 0;
   flex: 0 0 74px;
   align-items: flex-start;
   justify-content: space-between;
   padding: 20px 20px 12px;
   border-bottom: 1px solid var(--twin-line);
   background: none;
   text-align: left;
}

.digital-twin__eyebrow {
   margin: 0 0 3px;
   color: var(--twin-accent);
   font: 10px/1.4 'opensans-bold', sans-serif;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}

.digital-twin__header h2 {
   margin: 0;
   color: #fff;
   font: 20px/1.25 'opensans-semibold', sans-serif;
}

.digital-twin__icon-button {
   display: grid;
   width: 36px;
   min-width: 36px;
   height: 36px;
   margin: -4px -4px 0 12px;
   padding: 0;
   place-items: center;
   border: 1px solid transparent;
   border-radius: 50%;
   background: transparent;
   color: var(--twin-muted);
   font-size: 25px;
   line-height: 1;
   text-transform: none;
}

.digital-twin__icon-button:hover,
.digital-twin__icon-button:focus-visible {
   border-color: var(--twin-line);
   background: var(--twin-surface);
   color: #fff;
}

.digital-twin__disclosure {
   margin: 0;
   padding: 8px 20px;
   background: rgba(17, 171, 176, 0.08);
   color: #c7d4d7;
   font-size: 10px;
   line-height: 1.4;
}

.digital-twin__setup {
   padding: 10px 20px;
   border-bottom: 1px solid var(--twin-line);
}

.digital-twin__setup > p {
   margin: 0 0 10px;
   color: var(--twin-muted);
   font-size: 11px;
   line-height: 1.55;
}

.digital-twin__progress {
   width: 100%;
   height: 5px;
   overflow: hidden;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.09);
}

.digital-twin__progress span {
   display: block;
   width: 0;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--twin-teal), var(--twin-accent));
   transition: width 180ms ease;
}

.digital-twin__status {
   min-height: 17px;
   margin: 8px 0 !important;
}

.digital-twin[data-model-ready='true'] .digital-twin__setup {
   padding-block: 8px;
}

.digital-twin[data-model-ready='true'] .digital-twin__status {
   min-height: 0;
   margin: 0 !important;
}

.digital-twin__status[data-state='ready'] { color: #8ad9bc; }
.digital-twin__status[data-state='warning'] { color: #ffd28c; }
.digital-twin__status[data-state='error'] { color: #ffaaa0; }

.digital-twin__setup-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.digital-twin__primary-button,
.digital-twin__secondary-button,
.digital-twin__send,
.digital-twin__cancel {
   min-height: 38px;
   margin: 0;
   padding: 8px 14px;
   border-radius: 10px;
   font: 11px/1 'opensans-bold', sans-serif;
   letter-spacing: 0.04em;
   text-transform: none;
}

.digital-twin__primary-button,
.digital-twin__send {
   border: 1px solid var(--twin-accent);
   background: var(--twin-accent);
   color: #17110d;
}

.digital-twin__primary-button:hover,
.digital-twin__primary-button:focus-visible,
.digital-twin__send:hover,
.digital-twin__send:focus-visible {
   border-color: #ffa76f;
   background: #ffa76f;
}

.digital-twin__secondary-button,
.digital-twin__cancel {
   border: 1px solid var(--twin-line);
   background: transparent;
   color: var(--twin-ink);
}

.digital-twin__secondary-button:hover,
.digital-twin__secondary-button:focus-visible,
.digital-twin__cancel:hover,
.digital-twin__cancel:focus-visible {
   border-color: var(--twin-teal);
   background: rgba(17, 171, 176, 0.1);
}

.digital-twin__cache-note {
   margin: 8px 0 0 !important;
   color: #7f9097 !important;
   font-size: 10px !important;
}

.digital-twin__suggestions {
   padding: 14px 16px 6px;
}

.digital-twin__suggestions > p {
   margin: 0 0 8px;
   color: #82939a;
   font: 9px/1.2 'opensans-bold', sans-serif;
   letter-spacing: 0.09em;
   text-transform: uppercase;
}

.digital-twin__suggestions > div {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
}

.digital-twin__suggestions button {
   min-height: 32px;
   margin: 0;
   padding: 7px 10px;
   border: 1px solid rgba(17, 171, 176, 0.35);
   border-radius: 999px;
   background: rgba(17, 171, 176, 0.08);
   color: #cde5e6;
   font: 10px/1.35 'opensans-regular', sans-serif;
   letter-spacing: 0;
   text-align: left;
   text-transform: none;
}

.digital-twin__suggestions button:hover,
.digital-twin__suggestions button:focus-visible {
   border-color: var(--twin-teal);
   background: rgba(17, 171, 176, 0.16);
   color: #fff;
}

.digital-twin__messages {
   flex: 1 1 auto;
   min-height: 140px;
   margin: 0;
   padding: 16px 16px 6px;
   overflow-y: auto;
   list-style: none;
}

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

.digital-twin__message--user {
   margin-left: auto;
   text-align: right;
}

.digital-twin__message-label {
   display: block;
   margin: 0 7px 4px;
   color: #82939a;
   font: 9px/1.2 'opensans-bold', sans-serif;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.digital-twin__message p {
   display: inline-block;
   margin: 0;
   padding: 10px 12px;
   border: 1px solid var(--twin-line);
   border-radius: 6px 15px 15px;
   background: var(--twin-surface);
   color: #e7edef;
   font-size: 12px;
   line-height: 1.55;
   text-align: left;
   white-space: pre-wrap;
}

.digital-twin__message--user p {
   border-color: rgba(240, 131, 58, 0.45);
   border-radius: 15px 6px 15px 15px;
   background: rgba(240, 131, 58, 0.13);
}

.digital-twin__response-line {
   display: block;
}

.digital-twin__response-line + .digital-twin__response-line {
   margin-top: .55em;
}

.digital-twin__response-item {
   padding-left: 1.45em;
}

.digital-twin__response-number {
   display: inline-block;
   width: 1.45em;
   margin-left: -1.45em;
   color: var(--twin-teal);
   font-weight: 700;
}

.digital-twin__response-line strong {
   color: #fff;
   font-weight: 700;
}

.digital-twin__thinking {
   min-width: 42px;
   color: #9fb0b6 !important;
   font-weight: 700;
   letter-spacing: .2em;
   animation: digital-twin-thinking 900ms ease-in-out infinite alternate;
}

@keyframes digital-twin-thinking {
   from { opacity: .4; }
   to { opacity: 1; }
}

.digital-twin__composer {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   margin: 0;
   padding: 10px 12px;
   border-top: 1px solid var(--twin-line);
}

.digital-twin__composer textarea {
   width: 100%;
   min-height: 40px;
   max-height: 120px;
   margin: 0;
   padding: 10px 11px;
   resize: none;
   border: 1px solid var(--twin-line);
   border-radius: 11px;
   outline: none;
   background: #0c1318;
   color: #fff;
   font-size: 12px;
   line-height: 1.45;
}

.digital-twin__composer textarea:focus {
   border-color: var(--twin-teal);
   box-shadow: 0 0 0 3px rgba(17, 171, 176, 0.12);
}

.digital-twin__composer textarea:disabled {
   cursor: not-allowed;
   opacity: 0.55;
}

.digital-twin__send,
.digital-twin__cancel {
   flex: 0 0 auto;
}

.digital-twin__send:disabled {
   cursor: not-allowed;
   opacity: 0.45;
}

.digital-twin__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 15px 10px;
   color: #72838a;
   font-size: 9px;
}

.digital-twin__footer button {
   min-height: 28px;
   margin: 0;
   padding: 4px;
   border: 0;
   background: transparent;
   color: #91a4ab;
   font-size: 9px;
   letter-spacing: 0;
   text-decoration: underline;
   text-transform: none;
}

.digital-twin__disclaimer {
   flex: 1 1 auto;
   padding: 0 8px;
   color: #87989e;
   text-align: center;
}

.digital-twin__footer button:hover,
.digital-twin__footer button:focus-visible {
   color: #fff;
}

@media only screen and (max-width: 480px) {
   .digital-twin {
      right: 26px;
      bottom: 12px;
   }

   .digital-twin__panel {
      position: fixed;
      inset: 10px 10px 76px;
      width: auto;
      max-height: none;
      border-radius: 20px;
   }

   .digital-twin__launcher {
      min-height: 50px;
      padding-right: 14px;
   }

   .digital-twin__messages {
      flex: 1 1 auto;
   }
}

@media (prefers-reduced-motion: reduce) {
   .digital-twin__progress span,
   .digital-twin__thinking {
      transition: none;
      animation: none;
   }
}