/* ==========================================================================
   css/components/native-titlebar.css
   Split from app.html (build 2026.10.08.9-beta), original lines 128-193.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- NATIVE APP TITLE BAR ---------------------------------------- */
body { flex-direction: column; }

/* Always visible - in the browser too. What is native-ONLY is the window controls and
   the update button, which are gated below rather than by hiding the whole bar. */
/* Shared so the pinned server rail can be positioned exactly under the bar without the two
   drifting apart if this ever changes. */
:root { --titlebar-h: 32px; }
#nativeTitleBar {
  display: flex;
  height: var(--titlebar-h);
  background: var(--bg-deep);
  transition: background .25s ease;
  flex-shrink: 0;
  align-items: center;
  padding: 0 0 0 10px;
  user-select: none;
  gap: 8px;
  min-width: 0;
}
body.native #nativeTitleBar { padding-right: 138px; }

#nativeTitleBar .nt-logo {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  flex: 1 1 0; min-width: 0; overflow: hidden;
  white-space: nowrap;
}
/* The server you are in, centred ON THE WINDOW.
   Flex centring does not work here: in the app the bar reserves 138px on the right for the
   pinned window controls, so its content box is not symmetric and an equal-flex middle lands
   64px left of true centre (measured). Absolute positioning against the bar - which does span
   the full window - is centred in both modes with no padding arithmetic.
   It is out of flow, so it cannot push the logo or the actions: the max-width keeps it off
   them, and below 760px it gives up and hides rather than collide. */
#nativeTitleBar { position: relative; }
#nativeTitleBar .nt-server {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  min-width: 0; max-width: 38%;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  -webkit-app-region: no-drag; pointer-events: none;
}
@media (max-width: 760px) { #nativeTitleBar .nt-server { display: none; } }
#nativeTitleBar .nt-server:empty { display: none; }
.nt-server-icon {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  object-fit: cover; display: block;
}
.nt-server-icon.is-initials {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.nt-server-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nativeTitleBar .nt-logo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Title-bar action buttons (update / support / help). Sit right of the logo, left of
   the pinned window controls. Marked no-drag so clicks don't move the window. */
.nt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1px;
              flex: 1 1 0; min-width: 0; -webkit-app-region: no-drag; }
/* Checking for updates is meaningless in a browser tab - the page IS the latest build. */
#ntUpdateBtn { display: none; }
body.native #ntUpdateBtn { display: flex; }
.nt-action {
  width: 34px; height: 32px; background: transparent; border: none;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background 0.1s, color 0.1s; flex-shrink: 0; padding: 0;
}
.nt-action:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
/* Update icon is NEUTRAL at rest; turns green ONLY when an update is actually available. */
.nt-action.has-update { color: var(--green, #3ba55d); }
.nt-action.has-update:hover { color: #47c46b; background: rgba(59,165,93,0.14); }
.nt-action.checking svg { animation: nt-spin 0.9s linear infinite; }
@keyframes nt-spin { to { transform: rotate(360deg); } }
/* Custom BELOW-anchored tooltip for title-bar buttons (native title= tooltips are killed
   app-wide). Positioned under the bar since it sits at the very top of the window. */
.nt-action[data-nttip] { position: relative; }
.nt-action[data-nttip]::after {
  content: attr(data-nttip); position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-3px); white-space: nowrap;
  background: var(--bg-elevated, #1e1f24); color: var(--text-primary); border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease; z-index: var(--z-tooltip, 1001);
}
.nt-action[data-nttip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Window controls are PINNED to the very top-right of the viewport so they can
   NEVER be pushed off-screen, no matter how content/the window is sized. The
   title bar reserves 138px of right padding so its drag area doesn't sit under
   them. (Hidden in web mode since the parent title bar is display:none there.) */
/* Window controls are PINNED to the top-right of the viewport so they can never be pushed
   off-screen. They used to be hidden only as a side effect of the whole bar being
   display:none on web; the bar is always visible now, so they are gated explicitly - a
   browser tab has its own close button and does not want ours. */
.nt-winbtns { display: none; position: fixed; top: 0; right: 0; height: 32px; z-index: 1000; }
body.native .nt-winbtns { display: flex; }
#nativeTitleBar .nt-winbtn { flex-shrink: 0; }
.nt-winbtn {
  width: 46px; height: 32px; background: transparent; border: none;
  color: var(--text-muted); font-family: 'Segoe MDL2 Assets'; font-size: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s; flex-shrink: 0;
}
.nt-winbtn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.nt-winbtn.nt-close:hover { background: #c42b1c; color: #fff; }