dialog {
      width: min(430px, calc(100vw - 28px));
      height: min(720px, calc(100dvh - 28px));
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
    }

    dialog::backdrop {
      background: rgba(25, 19, 16, 0.62);
      backdrop-filter: blur(5px);
    }

    .dialog-bar {
      height: 62px;
      padding: 0 12px 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ece6de;
      background: var(--surface);
    }

    .dialog-bar strong {
      font-size: 15px;
    }

    .dialog-title {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dialog-title span {
      flex: 0 0 auto;
      padding: 3px 7px;
      border-radius: 999px;
      background: #efe3d7;
      color: var(--accent-dark);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .dialog-close {
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: #eee8e0;
      color: var(--ink);
      cursor: pointer;
      font-size: 19px;
    }

    .dialog-body {
      position: relative;
      height: calc(100% - 62px);
      background: #f8f5f0;
    }

    dialog iframe {
      width: 100%;
      height: 100%;
      border: 0;
      opacity: 0;
      transition: opacity 180ms ease;
    }

    dialog iframe.is-ready {
      opacity: 1;
    }

    #route-dialog {
      width: min(760px, calc(100vw - 28px));
      height: auto;
      max-height: calc(100dvh - 28px);
      overflow: auto;
      background: #f7f0e6;
    }

    .route-dialog-body {
      padding: 14px;
    }

    .route-dialog-body video {
      width: 100%;
      max-height: calc(100dvh - 170px);
      display: block;
      border-radius: 17px;
      background: #eee6dc;
      object-fit: contain;
    }

    .route-dialog-note {
      margin: 11px 2px 1px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--ink-soft);
      font-size: 12px;
    }

    .route-dialog-note a {
      flex: 0 0 auto;
      color: #173b68;
      font-weight: 800;
      text-underline-offset: 3px;
    }

    .route-transcript {
      margin-top: 10px;
      border-top: 1px solid #dfd5ca;
      color: var(--ink-soft);
      font-size: 12px;
    }

    .route-transcript summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      color: var(--ink);
      cursor: pointer;
      font-weight: 800;
    }

    .route-transcript p {
      margin: 0 0 4px;
      line-height: 1.7;
    }

    .chat-state {
      position: absolute;
      inset: 0;
      z-index: 1;
      padding: 32px;
      display: grid;
      place-content: center;
      justify-items: center;
      background: #f8f5f0;
      color: var(--ink);
      text-align: center;
    }

    .chat-state[hidden] {
      display: none;
    }

    .loading-mark {
      width: 34px;
      height: 34px;
      margin-bottom: 16px;
      border: 3px solid #dfd4c9;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 800ms linear infinite;
    }

    .chat-state strong {
      font-size: 17px;
      letter-spacing: -0.03em;
    }

    .chat-state p {
      max-width: 285px;
      margin: 8px 0 0;
      color: var(--ink-soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .fallback-links {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .fallback-links a {
      min-height: 44px;
      padding: 10px 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      font-size: 13px;
      font-weight: 750;
      text-decoration: none;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }