/* Wraps to a second (right-aligned) row rather than running off the left edge: the
   full button cluster is wider than a phone. max-width keeps it inside the same inset
   it keeps on the right. The landing page's own .corner-nav mirrors this. */
.noo-corner{position:fixed;top:18px;right:20px;z-index:2147483000;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 40px);}
/* These buttons are INJECTED INTO someone else's document, so this rule has to state
   its whole box - width and margin included - rather than inherit it. A host page's
   own bare element rule for buttons matches them (the accounts shell styles form
   buttons width:100%;margin-top:1.25rem), and anything that rule sets which this one
   leaves unsaid leaks straight into the overlay UI: full-width bars stacked down the
   page instead of a compact corner cluster. An element selector loses to this class,
   so declaring width/margin here settles it for every app, present and future. */
.noo-btn{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9aa0b4;text-decoration:none;cursor:pointer;
  white-space:nowrap;
  background:rgba(18,22,40,0.72);border:1px solid rgba(200,146,42,0.28);border-radius:8px;padding:8px 12px;width:auto;margin:0;
  transition:border-color .18s ease,color .18s ease;backdrop-filter:blur(4px);}
.noo-btn:hover{border-color:rgba(227,182,90,0.65);color:#e3b65a;}
.noo-msg-btn{position:relative;}
.noo-bell{font-size:14px;letter-spacing:0;padding:8px 11px;}
.noo-bell.noo-on{color:#e3b65a;border-color:rgba(227,182,90,0.65);}
.noo-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#c8922a;color:#05060d;font-size:11px;font-weight:700;line-height:18px;text-align:center;letter-spacing:0;display:none;}
.noo-badge.noo-show{display:block;}
.noo-hidden{display:none !important;}
.noo-overlay{position:fixed;inset:0;z-index:2147483001;display:none;align-items:center;justify-content:center;
  background:rgba(5,6,13,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:24px;box-sizing:border-box;
  overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:auto;touch-action:manipulation;}
.noo-overlay.noo-open{display:flex;}
/* height/max-height are bounded by 100% so that when the overlay is shrunk to the
   visual viewport (keyboard open, see overlayScript) the panel fits above it. */
.noo-panel{display:flex;flex-direction:column;width:100%;max-width:560px;height:min(80vh,100%);max-height:min(760px,100%);box-sizing:border-box;
  background:#0b0e1c;border:1px solid rgba(227,182,90,0.65);border-top:2px solid #c8922a;
  border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;}
.noo-frame{flex:1;width:100%;border:none;background:transparent;}
/* Keyboard open: the script adds .noo-kb (see fitViewport) once the overlay is
   pinned to the shrunk visual viewport. Drop the padding/centring and let the panel
   fill it edge-to-edge so the composer sits flush on top of the on-screen keyboard
   with no gap below it. */
.noo-overlay.noo-kb{padding:0;align-items:stretch;}
.noo-overlay.noo-kb .noo-panel{height:100%;max-height:100%;border-radius:0;}
@media (max-width:600px){.noo-corner{top:12px;right:12px;gap:8px;max-width:calc(100vw - 24px);}.noo-btn{padding:7px 10px;}.noo-overlay{padding:12px;}.noo-panel{height:min(88vh,100%);}}