/* ============================================================
   logo-portal.css — shared HUD viewport portal + chatbot +
   speech-bubble styles. Loaded by index.html and all subpages
   so the brand logo behaves the same everywhere.
   ============================================================ */

/* ============================================================
   HUD VIEWPORT PORTAL — active brand mark (sandbox v2 → prod)
   Replaces .logo-mark visually; .logo-mark CSS above kept as
   fallback. The portal is a "cutout" into another plane:
   dark navy interior, cyan edge, animated scanlines + beam,
   PNG glyph centered, 3D parallax on hover, scroll-follow,
   parking in footer hub.
   ============================================================ */
/* The .logo anchor in nav becomes a positioning slot — slim height
   so the navbar doesn't grow, with absolute portal that overhangs. */
.nav .logo {
  position: relative;
  display: block;
  width: 96px;
  height: 28px;
  flex-shrink: 0;
}

.logo-portal {
  /* Default: navbar slot — 96×96 hanging over the navbar.
     Anchored absolute to .nav .logo so navbar height is unaffected.
     top: 0 keeps the portal flush with the navbar's content top. */
  width: 96px;
  height: 96px;
  border-radius: 18px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  display: block;
  /* The "other plane" — dark navy */
  background:
    linear-gradient(180deg, rgba(8, 14, 24, 0.98) 0%, rgba(13, 22, 36, 1) 100%);
  /* Cyan edge of the cutout */
  border: 1px solid rgba(0, 168, 232, 0.55);
  /* Outer glow (light bleeding from the other plane) + bevel */
  box-shadow:
    0 0 12px -1px rgba(0, 168, 232, 0.45),
    0 3px 8px -2px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  overflow: hidden;
  will-change: transform, top, left, width, height;
  /* Position transitions (top/left) carry most of the smoothness:
     JS picks a target each frame, CSS eases between successive
     targets the same way ai-pro-firmy.html does it. */
  transition:
    width 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    height 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 320ms ease,
    box-shadow 220ms ease,
    top 320ms cubic-bezier(0.22, 1, 0.36, 1),
    left 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.logo-portal:hover {
  border-color: rgba(0, 212, 212, 0.85);
  box-shadow:
    0 0 22px 0 rgba(0, 212, 212, 0.55),
    0 6px 14px -2px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}

/* PNG glyph centered, sized to ~72% of portal */
.logo-portal-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 72%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(0, 212, 212, 0.45));
}

/* Scanline overlay — subtle moving horizontal lines */
.logo-portal-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 212, 212, 0)    0px,
    rgba(0, 212, 212, 0)    1px,
    rgba(0, 212, 212, 0.06) 1px,
    rgba(0, 212, 212, 0.06) 2px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  animation: portalScanlineSweep 4s linear infinite;
}
@keyframes portalScanlineSweep {
  0%   { background-position: 0 0; }
  100% { background-position: 0 8px; }
}

/* Top scanline highlight — single brighter pixel sweeping vertically */
.logo-portal-beam {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(0, 212, 212, 0.6),
    rgba(0, 212, 212, 0.9),
    rgba(0, 212, 212, 0.6),
    transparent);
  box-shadow: 0 0 6px rgba(0, 212, 212, 0.9);
  pointer-events: none;
  z-index: 3;
  animation: portalBeamSweep 6s ease-in-out infinite;
}
@keyframes portalBeamSweep {
  0%, 100% { top: -2px; opacity: 0; }
  8%       { opacity: 1; }
  50%      { top: 100%; opacity: 0.8; }
  52%      { top: -2px; opacity: 0; }
}

/* Boot-up sequence on first load */
.logo-portal.boot-up { animation: portalBoot 700ms cubic-bezier(0.16, 0.84, 0.32, 1); }
@keyframes portalBoot {
  0%  { opacity: 0; filter: brightness(2.5) blur(3px); transform: scaleY(0.05); }
  25% { opacity: 0.5; filter: brightness(2) blur(1px); transform: scaleY(0.4); }
  45% { opacity: 1; filter: brightness(1.6) blur(0); transform: scaleY(1.05); }
  55% { opacity: 0.4; filter: brightness(1.4); }
  70% { opacity: 1; }
  85% { opacity: 0.7; }
  100%{ opacity: 1; filter: brightness(1); transform: scaleY(1); }
}

/* Quick flicker on state transition (navbar → following → parked) */
.logo-portal.flicker { animation: portalFlicker 240ms ease-out; }
@keyframes portalFlicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.2; filter: brightness(2); }
  40%  { opacity: 1; }
  60%  { opacity: 0.5; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

/* === Scroll-follow mode (desktop ≥ 1024 px) === */
@media (min-width: 1024px) {
  .logo-portal.is-following {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    position: fixed;
    z-index: 100;
    box-shadow:
      0 0 20px -1px rgba(0, 168, 232, 0.55),
      0 8px 18px -4px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  }
  .logo-portal.is-following .logo-portal-glyph {
    width: 70%; height: 70%;
  }
}

/* === Parked in footer hub === */
.logo-portal.is-parked-footer {
  width: 96px; height: 96px;
  border-radius: 18px;
  box-shadow:
    0 0 32px -1px rgba(0, 212, 212, 0.55),
    0 14px 28px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.logo-portal.is-parked-footer .logo-portal-glyph {
  width: 68%; height: 68%;
}

/* Mobile (≤ 768): static in navbar, no scroll-follow.
   Smaller portal because navbar real estate is tight. .logo slot
   also shrinks to match. Portal still overhangs below navbar. */
@media (max-width: 768px) {
  .nav .logo { width: 64px; height: 28px; }
  .logo-portal { width: 64px; height: 64px; border-radius: 14px; }
  .logo-portal.is-following {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 64px; height: 64px;
  }
}

/* Click ripple */
.logo-portal-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 212, 212, 0.40);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 4;
  animation: portalRipple 600ms cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
@keyframes portalRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* Lite-mode + reduced-motion: kill animations, keep static portal */
body.lite-mode .logo-portal,
body.lite-mode .logo-portal-scanlines,
body.lite-mode .logo-portal-beam {
  animation: none !important;
}
body.lite-mode .logo-portal { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .logo-portal,
  .logo-portal-scanlines,
  .logo-portal-beam { animation: none !important; }
}

/* Hide the inner static glyph in the footer hub once the floating
   portal has parked into it (avoid double-glyph). */
.sitemap-hub.has-sentinel .sitemap-hub-living,
.sitemap-hub.has-sentinel .sitemap-hub-glyph { opacity: 0; }

/* ============================================================
   LOGO CHATBOT — conversational menu opened from following logo
   A scripted dialog: bot messages on left (with avatar), user
   replies on right, quick-reply buttons under the latest turn.
   ============================================================ */
.logo-chatbot {
  position: fixed;
  left: 100px;
  top: 50%;
  transform: translateY(-50%) translateX(-16px);
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  background: rgba(13, 27, 42, 0.95);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 212, 212, 0.30);
  border-radius: 14px;
  z-index: 999;
  box-shadow:
    0 24px 60px -8px rgba(0, 0, 0, 0.65),
    0 0 24px -4px rgba(0, 212, 212, 0.30);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease,
              transform 240ms cubic-bezier(0.16, 0.84, 0.32, 1);
  overflow: hidden;
}
.logo-chatbot.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.logo-chatbot::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 2px;
  background: linear-gradient(90deg, #00D4D4, transparent);
  border-radius: 2px;
  z-index: 2;
}

/* Header bar: avatar + name + back / close */
.logo-chatbot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
  flex-shrink: 0;
}
.logo-chatbot-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.98), rgba(13, 22, 36, 1));
  border: 1px solid rgba(0, 168, 232, 0.55);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px -1px rgba(0, 168, 232, 0.45);
}
.logo-chatbot-avatar img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70%; height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(0, 212, 212, 0.45));
}
.logo-chatbot-avatar::after {
  /* presence dot */
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d36b;
  border: 2px solid rgba(13,27,42,1);
  box-shadow: 0 0 6px #22d36b;
}
.logo-chatbot-name {
  flex: 1;
  line-height: 1.2;
}
.logo-chatbot-name b {
  display: block;
  font-size: 13.5px;
  color: #fff;
  font-weight: 600;
}
.logo-chatbot-name small {
  display: block;
  font-size: 10.5px;
  color: #8b949e;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
}
.logo-chatbot-iconbtn {
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  font-size: 16px;
  transition: color 160ms, background 160ms;
}
.logo-chatbot-iconbtn:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.logo-chatbot-iconbtn[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
}
.logo-chatbot-iconbtn[disabled]:hover {
  color: #8b949e;
  background: none;
}

/* Conversation thread — scrollable */
.logo-chatbot-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.logo-chatbot-thread::-webkit-scrollbar { width: 6px; }
.logo-chatbot-thread::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
}

/* Bubbles */
.lcb-msg {
  display: flex;
  max-width: 85%;
  opacity: 0;
  transform: translateY(6px);
  animation: lcbMsgIn 280ms cubic-bezier(0.16,0.84,0.32,1) forwards;
}
@keyframes lcbMsgIn {
  to { opacity: 1; transform: translateY(0); }
}
.lcb-msg.bot { align-self: flex-start; }
.lcb-msg.user { align-self: flex-end; }

.lcb-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #c9d1d9;
}
.lcb-msg.bot .lcb-bubble {
  background: rgba(0, 168, 232, 0.10);
  border: 1px solid rgba(0, 168, 232, 0.22);
  border-top-left-radius: 3px;
}
.lcb-msg.bot .lcb-bubble strong { color: #fff; }
.lcb-msg.user .lcb-bubble {
  background: linear-gradient(135deg, rgba(0, 212, 212, 0.18), rgba(0, 168, 232, 0.18));
  border: 1px solid rgba(0, 212, 212, 0.30);
  border-top-right-radius: 3px;
  color: #fff;
}

/* Typing indicator (3 dots) */
.lcb-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.lcb-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0, 212, 212, 0.85);
  animation: lcbTyping 1.2s infinite ease-in-out;
}
.lcb-typing span:nth-child(2) { animation-delay: 0.15s; }
.lcb-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lcbTyping {
  0%, 60%, 100% { opacity: 0.30; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* "Napovídač" — compact horizontal hint chips above the input.
   Replaces the old vertical big-button list. */
.logo-chatbot-replies {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px 8px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.18);
  max-height: 96px;
  overflow-y: auto;
}
/* Free-text input form below replies */
.logo-chatbot-form {
  display: flex;
  gap: 6px;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.20);
  flex-shrink: 0;
}
.logo-chatbot-form input {
  flex: 1;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 11px;
  color: #c9d1d9;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.logo-chatbot-form input:focus { border-color: #00A8E8; }
.logo-chatbot-form button {
  background: linear-gradient(135deg, #00A8E8, #00D4D4);
  border: none;
  border-radius: 8px;
  width: 34px; height: 34px;
  color: #0d1117;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
}
.logo-chatbot-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0, 168, 232, 0.45);
}
.logo-chatbot-replies::-webkit-scrollbar { width: 4px; }
.logo-chatbot-replies::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 2px;
}
.logo-chatbot-replies .lcb-section-label { display: none; }

.lcb-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  color: rgba(201, 209, 217, 0.85);
  font-size: 11.5px;
  line-height: 1.2;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  transition: background 140ms ease, border-color 140ms ease,
              color 140ms ease;
}
.lcb-reply:hover {
  background: rgba(0, 168, 232, 0.12);
  border-color: rgba(0, 168, 232, 0.45);
  color: #fff;
}
.lcb-reply .lcb-arrow {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  line-height: 1;
  transition: color 140ms ease;
}
.lcb-reply:hover .lcb-arrow { color: #00D4D4; }
/* Tiny indicator glyphs by chip type — kept very subtle */
.lcb-reply.is-link .lcb-arrow::before    { content: '↗'; }
.lcb-reply.is-anchor .lcb-arrow::before  { content: '↓'; }
.lcb-reply:not(.is-link):not(.is-anchor) .lcb-arrow::before { content: '›'; }
/* Label-stack + target left over from the old design — hidden so
   even if the JS still emits them they won't render. */
.lcb-reply .lcb-label-stack { display: contents; }
.lcb-reply .lcb-target { display: none; }

/* Mobile / narrow viewport: full-width sheet */
@media (max-width: 768px) {
  .logo-chatbot {
    left: 12px; right: 12px;
    width: auto;
    max-width: none;
    top: auto; bottom: 16px;
    transform: translateY(16px);
    max-height: min(70vh, 520px);
  }
  .logo-chatbot.is-open {
    transform: translateY(0);
  }
}

/* ============================================================
   LOGO SPEECH BUBBLE — small message that pops out of the logo
   itself (no user click). Anchored beside the floating logo
   with a tail. Used by contextual triggers (scroll, idle, etc).
   ============================================================ */
.logo-bubble {
  position: fixed;
  background: rgba(13, 27, 42, 0.95);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(0, 212, 212, 0.40);
  border-radius: 12px;
  padding: 10px 30px 10px 14px;
  font-size: 13px;
  color: #c9d1d9;
  line-height: 1.45;
  max-width: 240px;
  z-index: 998;
  box-shadow:
    0 8px 22px -4px rgba(0, 0, 0, 0.55),
    0 0 16px -4px rgba(0, 212, 212, 0.30);
  opacity: 0;
  transform: translateY(0) scale(0.92);
  transform-origin: left center;
  transition: opacity 240ms ease,
              transform 280ms cubic-bezier(0.16, 0.84, 0.32, 1);
  pointer-events: auto;
  cursor: pointer;
}
.logo-bubble.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.logo-bubble::before {
  /* Arrow tail pointing back to logo */
  content: '';
  position: absolute;
  left: -7px;
  top: 18px;
  width: 12px; height: 12px;
  background: rgba(13, 27, 42, 0.95);
  border-left: 1px solid rgba(0, 212, 212, 0.40);
  border-bottom: 1px solid rgba(0, 212, 212, 0.40);
  transform: rotate(45deg);
}
.logo-bubble strong { color: #fff; }
.logo-bubble-x {
  position: absolute;
  top: 4px; right: 6px;
  background: none; border: none;
  color: #8b949e; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px;
}
.logo-bubble-x:hover { color: #fff; }
.logo-bubble-cta {
  display: block;
  margin-top: 6px;
  color: #00D4D4;
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
}
.logo-bubble-cta:hover { text-decoration: underline; }

@media (max-width: 768px) {
  /* On mobile the logo doesn't follow on the left edge, so
     the bubble drops to a top-pinned banner below navbar. */
  .logo-bubble {
    left: 12px; right: 12px;
    max-width: none;
    top: 80px !important;
  }
  .logo-bubble::before { display: none; }
}
body.lite-mode .logo-bubble,
body.lite-mode .logo-chatbot { transition: none !important; }

/* Footer hub: align with new sentinel style */
.sitemap-hub-mark {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(13, 17, 23, 0.98));
  border: 1px solid rgba(0, 168, 232, 0.30);
}
.sitemap-hub-mark .sitemap-hub-living {
  background: linear-gradient(135deg, #79c0ff 0%, #00D4D4 50%, #00A8E8 100%) !important;
  animation: none !important;
  filter: drop-shadow(0 0 4px rgba(0, 212, 212, 0.40));
}

/* === LOGO INFO POPUP === */
.logo-popup-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.logo-popup-backdrop.is-open { opacity: 1; pointer-events: auto; }
.logo-popup {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: rgba(13, 27, 42, 0.95);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 212, 212, 0.30);
  border-radius: 14px;
  padding: 28px 30px 24px;
  width: 380px; max-width: calc(100% - 32px);
  color: #c9d1d9;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.65);
  opacity: 0; pointer-events: none;
  transition: transform 240ms cubic-bezier(0.16,0.84,0.32,1), opacity 240ms ease;
  z-index: 1001;
}
.logo-popup.is-open { transform: translate(-50%,-50%) scale(1); opacity: 1; pointer-events: auto; }
.logo-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 2px;
  background: linear-gradient(90deg, #00D4D4, transparent);
  border-radius: 2px;
}
.logo-popup-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none;
  color: #8b949e; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 4px 8px;
}
.logo-popup-close:hover { color: #fff; }
.logo-popup-mark {
  width: 80px; height: 80px;
  border-radius: 16px;
  background: rgba(13, 27, 42, 0.92);
  border: 1px solid rgba(0, 212, 212, 0.30);
  box-shadow: 0 8px 18px -6px rgba(0, 212, 212, 0.35);
  margin: 0 auto 16px;
  position: relative;
  overflow: hidden;
}
.logo-popup-mark img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78%; height: 78%;
  object-fit: contain;
  pointer-events: none;
}
.logo-popup h3 { font-size: 19px; margin: 0 0 4px 0; text-align: center; color: #fff; }
.logo-popup .sub { text-align: center; color: #8b949e; font-size: 12px; margin: 0 0 18px 0; }
.logo-popup-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid rgba(48,54,61,0.6);
  font-size: 13px;
}
.logo-popup-row:last-child { border-bottom: none; }
.logo-popup-row .k { color: #8b949e; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; font-weight: 600; }
.logo-popup-row .v { color: #c9d1d9; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 12.5px; }
.logo-popup-row .v a { color: #58a6ff; text-decoration: none; }
.logo-popup-row .v a:hover { text-decoration: underline; }

/* ============================================================
   Footer brand mark — when the portal is repeated inside
   .footer-brand as a decorative logo (not the active sentinel),
   render it statically inline so it doesn't escape its container
   via position: absolute. Without this, the absolute portal
   anchors to the document body and ends up in the top-left
   viewport, duplicating the nav portal.
   ============================================================ */
.footer-brand .logo-portal {
  position: static !important;
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  vertical-align: middle;
}
.footer-brand .logo-portal.boot-up { animation: none !important; }
.footer-brand .logo { display: inline-block; }

/* === Portal topbar — inline-fit override (F5.3) ===
   Default .logo-portal is 96x96 absolutely positioned, overhanging the navbar.
   In portal.html topbar we want it static (in-flow) and small enough to fit
   the topbar row alongside text + portal-tag. Overrides is-following /
   is-parked-footer too, because in portal we never want scroll-follow / footer
   parking states to enlarge the logo. */
.topbar .logo-portal,
.topbar .logo-portal.is-following,
.topbar .logo-portal.is-parked-footer {
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}