/* Shared message and interaction styles. Visibility and actions belong to the existing screens. */
:root {
  --message-info: #99c9ed;
  --message-warning: #edc17e;
  --message-error: #ff9bac;
  --message-success: #88d6b0;
}
:root { --message-info-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6m0-10v1%22%2F%3E%3C%2Fsvg%3E"); }
:root { --message-warning-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%2010%2018H2L12%203Z%22%2F%3E%3Cpath%20d%3D%22M12%209v5m0%203v.2%22%2F%3E%3C%2Fsvg%3E"); }
:root { --message-error-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206m0-6-6%206%22%2F%3E%3C%2Fsvg%3E"); }
:root { --message-success-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m7.5%2012%203%203%206-6%22%2F%3E%3C%2Fsvg%3E"); }

body :is(.notice-inline, .warn-box, .connect-warn, .watermark-notice, .setup-limit, .setup-program-note, .setup-program-next, .setup-error, .blk-error, .pair-note, .pair-error, .error-box, .login-page #error, .billing-capacity-note) {
  --message-tone: var(--message-warning);
  --message-icon: var(--message-warning-icon);
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--message-tone) 24%, #263748);
  border-left-width: 1px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--message-tone) 5%, #14212e);
  color: #c3cfdd;
  padding: 14px 16px 14px 46px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  text-align: left;
}
body :is(.notice-inline, .warn-box, .connect-warn, .watermark-notice, .setup-limit, .setup-program-note, .setup-program-next, .setup-error, .blk-error, .pair-note, .pair-error, .error-box, .login-page #error, .billing-capacity-note)::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 15px;
  width: 19px;
  height: 19px;
  background: var(--message-tone);
  -webkit-mask: var(--message-icon) center / contain no-repeat;
  mask: var(--message-icon) center / contain no-repeat;
}
body :is(.notice-inline, .warn-box, .connect-warn, .watermark-notice, .setup-limit, .setup-program-note, .setup-program-next, .setup-error, .blk-error, .pair-note, .pair-error, .error-box, .login-page #error, .billing-capacity-note) :is(strong, h3) {
  color: #eef3f9;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  margin: 0 0 4px;
}
body :is(.notice-inline, .warn-box, .connect-warn, .watermark-notice, .setup-limit, .setup-program-note, .setup-program-next, .setup-error, .blk-error, .pair-note, .pair-error, .error-box, .login-page #error, .billing-capacity-note) > :is(strong, h3) { display: block; }
body :is(.notice-inline, .warn-box, .connect-warn, .watermark-notice, .setup-limit, .setup-program-note, .setup-program-next, .setup-error, .blk-error, .pair-note, .pair-error, .error-box, .login-page #error, .billing-capacity-note) p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 5px 0 0;
}
body :is(.notice-inline, .warn-box, .connect-warn, .watermark-notice, .setup-limit, .setup-program-note, .setup-program-next, .setup-error, .blk-error, .pair-note, .pair-error, .error-box, .login-page #error, .billing-capacity-note) a { color: #c0ddf4; text-decoration: underline; text-underline-offset: 3px; }
body :is(.notice-inline.info, .setup-program-note, .setup-program-next, .pair-note, .billing-capacity-note, .login-page #error.info) {
  --message-tone: var(--message-info);
  --message-icon: var(--message-info-icon);
}
body :is(.notice-inline.bad, .blk-error, .setup-error, .pair-error, .error-box, .login-page #error, #nc-error, #tg-error, #blk-error) {
  --message-tone: var(--message-error);
  --message-icon: var(--message-error-icon);
}
body :is(.notice-inline.good, .error-box#sent) {
  --message-tone: var(--message-success);
  --message-icon: var(--message-success-icon);
}
body :is(.setup-error, .pair-error, .error-box, .login-page #error):empty { display: none; }
body .notice-inline[data-notice] { padding-right: 48px; }
body .notice-inline .notice-close { top: 6px; right: 6px; width: 32px; height: 32px; opacity: 1; color: #aebed0; }
body .library-view .pl-main .notice-inline, body.library-view .pl-main .notice-inline {
  padding: 14px 16px 14px 46px;
  border-left-width: 1px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--message-tone) 5%, #14212e);
  border-color: color-mix(in srgb, var(--message-tone) 24%, #263748);
  color: #c3cfdd;
  line-height: 1.7;
}
/* All modal layers clear the mobile menu; confirmation remains above plan selection. */
.modal-overlay { z-index: 400; }
#confirm-modal { z-index: 1100; }
.drawer-overlay { z-index: 500; }
.modal { background: #14212e; border-color: #354658; border-radius: 14px; }
.modal-header, .modal-footer { border-color: #304153; }
.modal-body { min-width: 0; }
.modal-header h2 { overflow-wrap: anywhere; }
.modal .field input:not([type=checkbox]):not([type=radio]), .modal .field select, .modal .field textarea {
  color-scheme: dark;
  background-color: #0e1a27;
  border-color: #3d5065;
  border-radius: 8px;
}
body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #a9d7f6;
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; }
.modal .icon-btn { min-width: 32px; min-height: 32px; flex-shrink: 0; }
.modal-footer { flex-wrap: wrap; gap: 10px; }
.modal .field-note { line-height: 1.65; }
.toast { max-width: calc(100vw - 32px); background: #1b2c3b; color: #ecf4fb; border-color: #4e687f; font-size: 13px; line-height: 1.6; border-radius: 10px; }
@media (max-width: 820px) {
  .modal-overlay:not(#pricing-modal):not(#plan-confirm-modal) { padding: 10px; }
  .modal { max-width: 100%; max-height: calc(100dvh - 20px); }
  .modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea,
  .settings-view input:not([type=checkbox]), .settings-view select,
  .login-page input, .auth-card input { font-size: 16px; }
  .nav-toggle { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-overlay, .sidebar, .toast { animation: none; transition: none; }
}

.toast.toast-error { border-color: #965163; color: #ffb1bf; }
/* The same brand and navigation treatment on every signed-in screen. */
body .sidebar-wordmark { display: none; }
body .sidebar .app-brand-new { display: flex; align-items: center; }
body .sidebar-logo { font-size: 29px; letter-spacing: -1.3px; }
body .sidebar { background: #101c28; border-right-color: #293b4d; }
body .nav-btn { border-radius: 9px; }
body .nav-btn.active { background: linear-gradient(110deg,#ff517b23,#ffa3610b); color: #ffb0bc; }
@media (max-width: 820px) {
  /* The header already has a close control; the window-corner duplicate overlaps it on phones. */
  .modal-overlay:has(.modal-header [data-close]) > .overlay-close { display: none; }
}

.field-error { color: #ffacbb; line-height: 1.6; }

/* Keep setup actions reachable while a dialog is open. */
body:has(.modal-overlay:not(.hidden), dialog[open]) :is(.bmc-launch,.bmc-panel){display:none!important}
.first-video-ready > button{margin-top:16px}
.connection-result-dialog{margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:28px;border:1px solid #405164;border-radius:18px;background:#142230;color:#f5f7fc;box-shadow:0 24px 80px #0008;font:inherit}
.connection-result-dialog::backdrop{background:#060d16bb;backdrop-filter:blur(4px)}
.connection-result-dialog .connection-eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#ffb5a5;margin:0 0 12px}
.connection-result-dialog h2{font-size:24px;line-height:1.3;margin:0 0 16px}
.connection-result-dialog p,.connection-result-dialog li{font-size:14px;line-height:1.7;color:#c1cddd}
.connection-result-dialog ol{padding-left:22px;margin:18px 0 24px}.connection-result-dialog li+li{margin-top:10px}
.connection-result-dialog strong{color:#f5f7fc}.connection-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.connection-result-actions a{text-decoration:none}
@media(max-width:600px){.connection-result-dialog{padding:22px}.connection-result-dialog h2{font-size:21px}}

/* Give phone-sized page actions room without squeezing the page title. */
@media (max-width: 480px) {
  .topbar:has(#topbar-action:not(:empty)) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
  .topbar-titles { min-width: 0; }
  .topbar:has(#topbar-action:not(:empty)) #topbar-action {
    grid-column: 2;
    justify-content: flex-start;
  }
  #topbar-action > button { white-space: nowrap; min-height: 44px; }
}
@media (max-width: 360px) {
  .seg[aria-label="Filter by shape"] button {
    padding-inline: 6px;
    font-size: 12px;
    text-overflow: clip;
  }
}