:root { --tv-offline-bg: #fff; --tv-offline-fg: #252525; --tv-offline-muted: #626269; --tv-offline-border: #dedee3; }
html[data-theme="dark"] { --tv-offline-bg: #242426; --tv-offline-fg: #ededed; --tv-offline-muted: #b4b4bb; --tv-offline-border: #424247; }
#tv-connection-notice {
  position: fixed; z-index: 2147483000; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px;
  max-width: min(490px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--tv-offline-border);
  border-radius: 14px; box-shadow: 0 4px 20px #0002; background: var(--tv-offline-bg); color: var(--tv-offline-fg);
  font: 13px/1.5 "Segoe UI", Arial, sans-serif;
}
#tv-connection-notice[hidden] { display: none; }
#tv-connection-notice .tv-connection-message { align-self: center; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
#tv-connection-notice .tv-connection-detail { grid-column: 1 / -1; margin: 0; color: var(--tv-offline-muted); font-size: 12px; line-height: 1.55; }
#tv-connection-notice button { min-height: 32px; padding: 5px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
#tv-connection-notice button:hover { background: color-mix(in srgb, var(--tv-offline-fg) 8%, transparent); }
#tv-connection-notice button:disabled { opacity: .6; cursor: default; }
#tv-connection-notice button:focus-visible { outline: 1px solid var(--tv-offline-muted); outline-offset: 2px; }
#tv-connection-notice .tv-connection-collapse { padding: 0; min-width: 28px; font-size: 20px; }
#tv-connection-notice.is-compact .tv-connection-detail { display: none; }
@media (max-width: 600px) {
  #tv-connection-notice { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); padding: 8px 10px; gap: 2px 6px; }
  #tv-connection-notice button { min-height: 44px; }
  #tv-connection-notice .tv-connection-collapse { min-width: 44px; }
}