/* NEWCHAT_V1175_NAVIGATION_AVATAR_PWA_HF3_START
 * Targeted navigation/avatar/PWA UI. Composer geometry, template and palette are untouched.
 */

/* Old top/bottom bot launchers are controller-only and never visible. */
#botQuickbar.nc-bot-command-source,
#botFabBtn,
#botFabMenu {
  display: none !important;
}

/* A radio without a configured stream never becomes a large visible panel. */
body.radio-stream-unavailable #radioCard.ux-radio-strip,
body.radio-stream-unavailable.radio-player-pinned #radioCard.ux-radio-strip,
body.radio-stream-unavailable.radio-toast-visible #radioCard.ux-radio-strip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#radioCard.ux-radio-strip { position: relative; }
#radioCard.ux-radio-strip > .nc-panel-close {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  z-index: 8 !important;
}

.nc-panel-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ux-border, rgba(255,255,255,.16)) 85%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ux-accent, #22b7f3) 88%, #071a32) !important;
  color: var(--ux-on-accent, #07111e) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
  cursor: pointer !important;
}

#botWeatherPanel,
#botZodiacPanel { position: relative; }
#botWeatherPanel > .nc-panel-close,
#botZodiacPanel > .nc-panel-close {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  z-index: 12 !important;
  margin: 0 0 8px 8px !important;
}

.nc-utility-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(3, 8, 20, .66);
  backdrop-filter: blur(7px);
}
.nc-utility-modal.hidden { display: none !important; }
.nc-utility-modal-box {
  width: min(920px, calc(100vw - 28px));
  height: min(780px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ux-border, rgba(255,255,255,.16));
  border-radius: 18px;
  background: var(--ux-panel, var(--panel, #0b1220));
  color: var(--ux-text, var(--text, #fff));
  box-shadow: 0 26px 80px rgba(0,0,0,.46);
}
.nc-utility-modal-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--ux-border, rgba(255,255,255,.13));
}
.nc-utility-modal-head h3 { margin: 0; font-size: 16px; }
.nc-utility-modal-box iframe { width: 100%; height: 100%; border: 0; background: #fff; }

.nc-utility-notice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--newchat-mobile-composer, 90px) + env(safe-area-inset-bottom) + 18px);
  z-index: 2600;
  max-width: min(88vw, 420px);
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 1px solid var(--ux-border, rgba(255,255,255,.16));
  border-radius: 13px;
  background: var(--ux-panel, #0b1220);
  color: var(--ux-text, #fff);
  box-shadow: 0 16px 44px rgba(0,0,0,.36);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}
.nc-utility-notice.hidden { display: none !important; }

/* Avatar selection is visual, neutral by default, and touch-friendly. */
.avatar-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.avatar-choice-btn {
  min-width: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  padding: 5px !important;
  border: 1px solid var(--ux-border, rgba(255,255,255,.16)) !important;
  border-radius: 13px !important;
  background: var(--ux-panel-2, rgba(255,255,255,.06)) !important;
  color: var(--ux-text, #fff) !important;
  font-size: 25px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.avatar-choice-btn:hover,
.avatar-choice-btn:focus-visible,
.avatar-choice-btn.is-selected {
  border-color: var(--ux-accent, #22b7f3) !important;
  background: color-mix(in srgb, var(--ux-accent, #22b7f3) 18%, var(--ux-panel-2, #102c4d)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ux-accent, #22b7f3) 28%, transparent) !important;
}
.guest-avatar-settings {
  margin: 12px 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--ux-accent, #22b7f3) 34%, var(--ux-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--ux-accent, #22b7f3) 7%, var(--ux-panel));
}
.guest-avatar-settings.hidden { display: none !important; }
.guest-avatar-settings-head { display: grid; gap: 3px; }
.guest-avatar-settings-head span { color: var(--ux-muted, #aabbd0); font-size: 12px; }

/* Mobile themes are closed by default and open only from the Themes icon. */
.nc-mobile-theme-panel {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--ux-border, rgba(255,255,255,.13));
  border-radius: 14px;
  background: color-mix(in srgb, var(--ux-panel-2, var(--panel, #0b1220)) 94%, transparent);
}
.nc-mobile-theme-panel.hidden { display: none !important; }
.nc-mobile-theme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.nc-mobile-theme-panel #mobileThemeMenu {
  position: static !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nc-mobile-theme-panel #mobileThemeMenu .theme-choice {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  justify-content: flex-start !important;
  padding: 7px 8px !important;
  border-radius: 11px !important;
}

@media (max-width: 900px) {
  html body .mobile-chat-bar .mobile-theme-wrap,
  html body .mobile-chat-bar #mobileThemeMenuBtn { display: none !important; }

  html body.newchat-ux-rc4 .mobile-drawer-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.newchat-ux-rc4 .mobile-drawer-shortcuts > button {
    min-height: 58px !important;
  }

  .nc-utility-modal {
    align-items: start;
    padding: calc(var(--nc-mobile-bar-h, 56px) + env(safe-area-inset-top) + 8px) 8px
      calc(var(--newchat-mobile-composer, 90px) + env(safe-area-inset-bottom) + 8px);
  }
  .nc-utility-modal-box { width: 100%; height: 100%; max-height: none; border-radius: 16px; }
  #radioCard.ux-radio-strip > .nc-panel-close {
    top: 4px !important;
    right: 4px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 20px !important;
  }

  .avatar-choice-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .avatar-choice-btn { min-width: 42px !important; min-height: 42px !important; font-size: 23px !important; }
}

@media (max-width: 390px) {
  .avatar-choice-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* Mention alert and per-device sound settings. */
.nc-mention-alert {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 2900;
  width: min(390px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ux-accent, #22b7f3) 58%, var(--ux-border, rgba(255,255,255,.16)));
  border-radius: 17px;
  background: color-mix(in srgb, var(--ux-panel, #0b1220) 96%, transparent);
  color: var(--ux-text, #fff);
  box-shadow: 0 24px 72px rgba(0,0,0,.48), 0 0 0 2px color-mix(in srgb, var(--ux-accent, #22b7f3) 16%, transparent);
  backdrop-filter: blur(14px);
  animation: ncMentionIn .2s ease-out both;
}
@keyframes ncMentionIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.nc-mention-close {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
.nc-mention-icon { font-size: 30px; line-height: 1; padding-top: 2px; }
.nc-mention-copy { min-width: 0; display: grid; gap: 4px; padding-right: 24px; }
.nc-mention-copy strong { font-size: 15px; }
.nc-mention-copy span { color: var(--ux-muted, #aabbd0); font-size: 13px; overflow-wrap: anywhere; }
.nc-mention-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.nc-mention-actions button { min-height: 38px !important; padding: 8px 12px !important; }
.nc-mentioned-message .message-bubble {
  outline: 3px solid color-mix(in srgb, var(--ux-accent, #22b7f3) 72%, #fff) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--ux-accent, #22b7f3) 18%, transparent) !important;
}
.nc-mention-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--ux-accent, #22b7f3) 32%, var(--ux-border, rgba(255,255,255,.16)));
  border-radius: 15px;
  background: color-mix(in srgb, var(--ux-accent, #22b7f3) 7%, var(--ux-panel, #0b1220));
}
.nc-mention-settings-head,
.nc-mention-settings > .checkbox-field,
.nc-mention-settings-actions { grid-column: 1 / -1; }
.nc-mention-settings-head { display: grid; gap: 4px; }
.nc-mention-settings-head span,
#ncMentionMutedStatus { color: var(--ux-muted, #aabbd0); font-size: 12px; }
.nc-mention-settings label { min-width: 0; }
.nc-mention-settings select,
.nc-mention-settings input[type="range"] { width: 100%; }
.nc-mention-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .nc-mention-alert {
    left: 10px;
    right: 10px;
    top: calc(var(--nc-mobile-bar-h, 56px) + env(safe-area-inset-top) + 8px);
    bottom: auto;
    width: auto;
  }
  .nc-mention-settings { grid-template-columns: 1fr; }
  .nc-mention-settings > * { grid-column: 1 !important; }
}

/* NEWCHAT_V1175_NAVIGATION_AVATAR_PWA_HF3_END */