.route-control { display: inline-flex; align-items: stretch; flex: 0 0 auto; border: 1px solid var(--soft-line, var(--border)); border-radius: 5px; background: var(--soft-surface, var(--panel)); }
.route-control #routeBtn { border: 0; border-radius: 4px 0 0 4px; min-height: 32px; height: auto; max-width: 240px; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; font-size: 12px; background: transparent; box-shadow: none; white-space: nowrap; }
.route-control .route-control-arrow { display: grid; place-items: center; width: 30px; min-height: 32px; padding: 0; border: 0; border-left: 1px solid var(--soft-line, var(--border)); border-radius: 0 4px 4px 0; background: transparent; color: var(--muted); }
.route-control-arrow svg { width: 13px; height: 13px; transition: transform .15s; }
.route-control-open .route-control-arrow svg { transform: rotate(180deg); }
.route-control button:hover:not(:disabled), .route-control-open { background: var(--soft-selected, var(--accent-soft)); }
.route-control button:focus-visible, .route-popover button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.route-popover { position: fixed; z-index: 1000; width: min(272px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px; border: 1px solid var(--soft-line, var(--border)); border-radius: 9px; color: var(--text); background: var(--soft-surface, var(--panel)); box-shadow: 0 8px 24px #0003; }
.route-popover[hidden] { display: none; }
.route-popover > strong { display: block; padding: 5px 8px 9px; font-size: 12px; font-weight: 600; }
.route-popover > button { display: grid; grid-template-columns: 1fr auto; width: 100%; min-height: 60px; gap: 3px 8px; padding: 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); text-align: left; }
.route-popover > button:hover:not(:disabled) { background: var(--soft-selected, var(--accent-soft)); }
.route-popover > button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.route-option-title { font-size: 13px; font-weight: 600; }
.route-option-check { visibility: hidden; color: var(--accent); }
[aria-pressed="true"] > .route-option-check { visibility: visible; }
.route-option-detail { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.5; }
.route-popover-message { padding: 9px 8px 3px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .route-control #routeBtn { max-width: 100px; padding: 5px 7px; font-size: 11px; }
  .route-control .route-control-arrow { width: 26px; }
  body.soft-ui.fluent .topbar:has(.route-control) { height: auto; min-height: 70px; flex-basis: auto; flex-wrap: wrap; }
  body.soft-ui.fluent .topbar .soft-title-tools:has(.route-control) { flex: 1 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  body.soft-ui.fluent .topbar .soft-title-tools .soft-connection-actions { min-width: 0; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .route-control-arrow svg { transition: none; } }