/* Cookie Consent Modal – Dark Mode Kontrast fix */
[data-theme="dark"] #cookieConsentModal .modal-content {
  background: #0f141a;
  color: #e6edf3;
  border: 1px solid #273244;
}
[data-theme="dark"] #cookieConsentModal .modal-header,
[data-theme="dark"] #cookieConsentModal .modal-footer { border-color: #273244; }
[data-theme="dark"] #cookieConsentModal .nav-tabs { border-bottom-color: #273244; }
[data-theme="dark"] #cookieConsentModal .nav-tabs .nav-link { color: #c9d1d9; }
[data-theme="dark"] #cookieConsentModal .nav-tabs .nav-link:hover { color: #ffffff; border-color: transparent; }
[data-theme="dark"] #cookieConsentModal .nav-tabs .nav-link.active {
  color: #ffffff;
  background: transparent;
  border-color: #273244 #273244 transparent;
}
[data-theme="dark"] #cookieConsentModal .border { border-color: #273244 !important; }

/* ---------------- Friends Overlay (Steam-ish) ---------------- */
.vyo-overlay-modal .modal-dialog{
  max-width: min(1280px, calc(100vw - 24px)) !important;
}

#friendsOverlayBody{
  padding: 20px !important;
}

#friendsOverlayModal .vyo-friends-layout{
  gap: 18px;
  min-height: 500px;
}

#friendsOverlayModal .vyo-friends-sidebar{
  width: 440px;
  max-width: 440px;
}

#friendsOverlayModal .vyo-friends-main{
  min-width: 0;
}

.vyo-overlay-content{
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  overflow: hidden;
}

.vyo-overlay-modal .modal-header{
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.0));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* 2-Spalten Layout */
.vyo-friends-layout{
  display:flex;
  gap:16px;
  align-items:stretch;
}

.vyo-friends-sidebar{
  width: 420px;               /* breiter => Tabs/Badges passen */
  max-width: 420px;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.vyo-friends-main{
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 992px){
  .vyo-friends-layout{ flex-direction:column; }
  .vyo-friends-sidebar{ width:100%; max-width:none; }
}

/* Tabs: immer in einer Reihe, Badge “inline” */
.vyo-friends-tabs{
  display:flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.vyo-friends-tabs .nav-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  white-space: nowrap;
  padding: .35rem .55rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.88);
}

.vyo-friends-tabs .nav-link.active{
  background: rgba(59,130,246,0.22);
  color:#fff;
}

.vyo-friends-tabs .badge{
  margin: 0 !important;
}

/* Accordion Darkmode Fix */
.vyo-acc .accordion-button,
.vyo-acc .accordion-button:not(.collapsed){
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow:none !important;
}
.vyo-acc .accordion-button:focus{ box-shadow:none !important; }
.vyo-acc .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow:hidden;
  margin-bottom: .5rem;
}

/* Avatare */
.vyo-avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(59,130,246,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 700;
  flex: 0 0 auto;
  overflow:hidden;
}
.vyo-avatar-xs{ width: 26px; height: 26px; font-size:.85rem; }
.vyo-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay-spezifisch: profile.css setzt .vyo-avatar sonst auf 108px.
   Diese Regeln halten Freunde/Chats kompakt, auch auf Profilseiten. */
#friendsOverlayModal .vyo-friends-shell .vyo-avatar{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
}

#friendsOverlayModal .vyo-friends-shell .vyo-recent-list .vyo-avatar{
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
}

#friendsOverlayModal .vyo-friends-shell .vyo-avatar-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#dmModal .vyo-avatar,
#groupModal .vyo-avatar{
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
}

#dmModal .vyo-avatar-sm,
#groupModal .vyo-avatar-sm{
  width: 34px !important;
  height: 34px !important;
}

/* Typeahead */
.vyo-typeahead-menu{
  max-height: 320px;
  overflow:auto;
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(255,255,255,0.10);
}
.vyo-typeahead-menu .dropdown-item{ color: rgba(255,255,255,0.92); }
.vyo-typeahead-menu .dropdown-item.active{ background: rgba(59,130,246,0.25); }

/* Hover komplett raus (Friend/Group/Recent Rows) */
.vyo-friends-shell .list-group-item-action:hover,
.vyo-friends-shell .list-group-item-action:focus,
.vyo-friends-shell .list-group-item-action:active{
  background-color: transparent !important;
  color: inherit !important;
}

/* Unread Dot */
.vyo-unread-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
  flex: 0 0 auto;
}

/* Presence Dot (Online / DND / Offline) */
.vyo-presence-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  line-height: 1;
  font-size: 12px;
  margin-left: 6px;
}

.vyo-presence-dot--online{ color: var(--bs-success); }
.vyo-presence-dot--dnd{ color: var(--bs-danger); }
.vyo-presence-dot--offline{ color: var(--bs-secondary); opacity: .75; }

/* Buttons: Hover neutralisieren (wie du wolltest) */
.vyo-nohover{
  transition:none !important;
  box-shadow:none !important;
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
  --bs-btn-active-color: var(--bs-btn-color);
}
.vyo-nohover:hover,
.vyo-nohover:focus,
.vyo-nohover:active{
  box-shadow:none !important;
  filter:none !important;
}

/* ===================== CHAT (DM + GROUP) – FINAL ===================== */

/* DM & Group Dialog Breite */
#dmModal .modal-dialog { max-width: 560px !important; }
#groupModal .modal-dialog { max-width: 720px !important; }

@media (max-width: 576px){
  #dmModal .modal-dialog,
  #groupModal .modal-dialog{
    max-width: 95vw !important;
    margin: .75rem auto !important;
  }
}

/* Messages-Scroller (dein Markup nutzt vyo-chat-scroller) */
#dmMessages.vyo-chat-scroller,
#groupMessages.vyo-chat-scroller{
  display: block !important;           /* NICHT flex, sonst Stretch-Bugs */
  min-height: 260px;
  max-height: 55vh;
  overflow: auto;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}

/* Jede Nachricht kompakt, keine “Kacheln” */
#dmMessages.vyo-chat-scroller .vyo-msg,
#groupMessages.vyo-chat-scroller .vyo-msg{
  display: flex;
  flex-direction: column;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 72%;
  margin: 0 0 10px 0;
}

/* links/rechts */
#dmMessages.vyo-chat-scroller .vyo-msg-me,
#groupMessages.vyo-chat-scroller .vyo-msg-me{
  margin-left: auto;
  align-items: flex-end;
}
#dmMessages.vyo-chat-scroller .vyo-msg-them,
#groupMessages.vyo-chat-scroller .vyo-msg-them{
  margin-right: auto;
  align-items: flex-start;
}

/* Bubble: inline-flex => passt sich Inhalt an, keine Riesen-Höhe */
#dmMessages.vyo-chat-scroller .vyo-msg-bubble,
#groupMessages.vyo-chat-scroller .vyo-msg-bubble{
  display: inline-flex !important;
  flex-direction: column;
  gap: 6px;

  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;

  width: auto;
  max-width: 100%;

  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

#dmMessages.vyo-chat-scroller .vyo-msg-me .vyo-msg-bubble,
#groupMessages.vyo-chat-scroller .vyo-msg-me .vyo-msg-bubble{
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.28);
}

#dmMessages.vyo-chat-scroller .vyo-msg-who,
#groupMessages.vyo-chat-scroller .vyo-msg-who{
  font-size: .78rem;
  font-weight: 600;
  opacity: .9;
}

#dmMessages.vyo-chat-scroller .vyo-msg-text,
#groupMessages.vyo-chat-scroller .vyo-msg-text{
  font-size: .95rem;
  line-height: 1.25rem;
  white-space: pre-wrap;
  word-break: break-word;
}

#dmMessages.vyo-chat-scroller .vyo-msg-time,
#groupMessages.vyo-chat-scroller .vyo-msg-time{
  align-self: flex-end;
  font-size: .72rem;
  opacity: .75;
}

/* ===================== Chips Create-Group (zurück) ===================== */
.vyo-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  margin: .15rem .25rem 0 0;
  font-size: .85rem;
}
.vyo-chip-x{
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.75);
  cursor:pointer;
  padding:0 .1rem;
}

/* ================= Friends Overlay: KEIN Lift/Shadow/Hover ================= */
#friendsOverlayModal .vyo-friends-shell .list-group-item,
#friendsOverlayModal .vyo-friends-shell .list-group-item-action,
#friendsOverlayModal .vyo-friends-shell .vyo-friend-row,
#friendsOverlayModal .vyo-friends-shell .vyo-group-row,
#friendsOverlayModal .vyo-friends-shell .vyo-recent-list .list-group-item{
  transition: none !important;
}

#friendsOverlayModal .vyo-friends-shell .list-group-item:hover,
#friendsOverlayModal .vyo-friends-shell .list-group-item:focus,
#friendsOverlayModal .vyo-friends-shell .list-group-item:active,
#friendsOverlayModal .vyo-friends-shell .list-group-item-action:hover,
#friendsOverlayModal .vyo-friends-shell .list-group-item-action:focus,
#friendsOverlayModal .vyo-friends-shell .list-group-item-action:active{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* Auch die Accordion-Header (Online/Offline/Gruppen) */
#friendsOverlayModal .vyo-acc .accordion-button,
#friendsOverlayModal .vyo-acc .accordion-button:hover,
#friendsOverlayModal .vyo-acc .accordion-button:focus{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}

/* QuickAccess Dropdowns dürfen NICHT durch Typeahead-CSS kaputt gemacht werden */
#qaList .dropdown { position: relative; }

/* QuickAccess Dropdown: kompakt */
.vyo-qa-menu{
  --bs-dropdown-min-width: 0;
  min-width: 0 !important;
  width: max-content !important;
  padding: 6px !important;
}

/* Items nur Emoji – keine volle Breite */
.vyo-qa-menu .dropdown-item{
  width: auto !important;
  min-width: 0 !important;
  padding: 6px 8px !important;
  text-align: center;
}

/* Dropdown muss IMMER über den Rows liegen */
.vyo-recent-list,
.vyo-recent-list .list-group-item{
  overflow: visible !important;   /* verhindert clipping */
}

.vyo-recent-list .dropdown{
  position: relative;             /* eigener Stacking-Context */
}

.vyo-recent-list .dropdown-menu{
  z-index: 3000 !important;       /* sicher über allen Rows */
}

/* optional: Dropdown-Button schmaler */
.vyo-qa-ddbtn{
  padding: 2px 8px !important;
}

.vyo-friends-main{
  overflow: visible !important;
}

/* QuickAccess: damit Dropdown nicht hinter anderen Rows verschwindet */
#qaList .list-group-item[data-qa-key]{
  position: relative;     /* z-index wirkt nur bei position != static */
  z-index: 1;
}

/* Wenn Dropdown offen: Row + Menü ganz nach vorne */
#qaList .list-group-item[data-qa-key].vyo-qa-open{
  z-index: 9999;
}

#qaList .list-group-item[data-qa-key].vyo-qa-open .dropdown-menu{
  z-index: 10000 !important;
}

#qaList .dropdown-menu{ position: absolute; }

/* Friends Overlay: kompaktere Tabs, Requests und letzte Chats */
#friendsOverlayModal .vyo-friends-tabs{
  gap: 8px;
}

#friendsOverlayModal .vyo-friends-tabs .nav-link{
  min-height: 36px;
  padding: .36rem .52rem;
  gap: 7px;
  font-size: .94rem;
}

#friendsOverlayModal .vyo-friends-tabs .badge{
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .35rem;
  font-size: .78rem;
  line-height: 1;
}

#friendsOverlayModal #tabRequests .list-group-item{
  padding: 10px 12px;
  gap: 10px !important;
}

#friendsOverlayModal #tabRequests .btn{
  white-space: nowrap;
  min-width: max-content;
}

#friendsOverlayModal #qaList .list-group-item{
  min-height: 82px;
  padding: 10px 14px;
  border-radius: 12px;
}

#friendsOverlayModal #qaList .vyo-qa-snippet{
  line-height: 1.25;
}

/* ================= Emoji Picker Popover (DM + Group) ================= */
#vyoEmojiPopover{
  position: fixed;
  display: none;
  z-index: 20050;     /* über Bootstrap-Modals & Dropdowns */
  width: 360px;
  height: 430px;
}

#vyoEmojiPopover.show{ display: block; }

#vyoEmojiPopover .vyo-emoji-popover-inner{
  width: 100%;
  height: 100%;
  background: var(--bs-body-bg);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  overflow: hidden;
}

/* Web-Component füllt den Container */
#vyoEmojiPopover emoji-picker{
  width: 100%;
  height: 100%;
}

/* ================= GIF Picker Popover ================= */
#vyoGifPopover{
  position: fixed;
  display: none;
  z-index: 20060;
  width: 420px;
  max-width: calc(100vw - 16px);
  height: 520px;
  max-height: calc(100vh - 16px);
}
#vyoGifPopover.show{ display:block; }

#vyoGifPopover .vyo-gif-inner{
  width:100%;
  height:100%;
  background: var(--bs-body-bg);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

#vyoGifPopover .vyo-gif-head{
  padding: 8px;
  display:flex;
  gap:8px;
  align-items:center;
  border-bottom: 1px solid rgba(127,127,127,.18);
}

/* Grid: stabile Abstände */
#vyoGifPopover .vyo-gif-grid{
  padding: 8px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

/* Tile: gilt für beide Klassen (falls dein Button mal vyo-gif-btn heißt) */
#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn){
  border:0;
  padding:0;
  margin:0;
  width:100%;
  display:block;
  background: rgba(127,127,127,.12);
  border-radius: 12px;
  overflow:hidden;
  position: relative;
  line-height: 0;
}

/* Quadrat erzwingen (funktioniert zuverlässig in allen Browsern) */
#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn)::before{
  content:"";
  display:block;
  padding-top:100%;
}

/* WICHTIG: img/video egal ob direktes Kind oder verschachtelt */
#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn) :is(img, video){
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit: cover; /* wenn du NICHT croppen willst: contain */
}

#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn) video{
  background:#000;
}

/* === GIF Picker: hard override (fix overlap + half-height) === */
#vyoGifPopover .vyo-gif-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-content: flex-start !important;
  overflow: auto;
}

/* 3 Spalten: (2 gaps à 10px) => 20px */
#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn){
  flex: 0 0 calc((100% - 20px) / 3) !important;
  width: auto !important;          /* falls vorher width:100% drin war */
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px;
  background: rgba(127,127,127,.12);
  line-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Quadrat reservieren */
#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn)::before{
  content:"";
  display:block;
  padding-top:100%;
}

/* Media immer füllen (egal ob img oder video, egal wie verschachtelt) */
#vyoGifPopover :is(.vyo-gif-tile, .vyo-gif-btn) :is(img, video){
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* wenn du NICHT croppen willst: contain */
  display: block !important;
}

/* falls du das noch nicht global hast */
.min-w-0 { min-width: 0 !important; }

/* Postfach: nix darf horizontal rauslaufen */
#tabInbox .list-group-item{
  overflow: hidden;          /* clippt, falls doch was zu breit wird */
  max-width: 100%;
}

/* Content darf shrinken, Actions nicht */
#tabInbox .vyo-inbox-content{
  min-width: 0;              /* WICHTIG: sonst drückt Text die Buttons raus */
}

#tabInbox .vyo-inbox-actions{
  flex: 0 0 auto;            /* Buttons behalten Größe, bleiben aber IM Row */
}

/* ===================== Settings: Presence Picker ===================== */
#settingsModal .vyo-presence-picker {
  border-radius: 14px;
  overflow: hidden;
}

#settingsModal .vyo-presence-picker .vyo-presence-item {
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

#settingsModal .vyo-presence-picker .vyo-presence-item + .vyo-presence-item {
  margin-top: 8px;            /* Abstand zwischen den Rows */
}

#settingsModal .vyo-presence-picker .vyo-presence-item:hover {
  background: rgba(59,130,246,0.06);
}

[data-theme="dark"] #settingsModal .vyo-presence-picker .vyo-presence-item {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

[data-theme="dark"] #settingsModal .vyo-presence-picker .vyo-presence-item:hover {
  background: rgba(59,130,246,0.14);
}

/* Dot-Icons (wie im Screenshot) */
.vyo-presence-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;            /* optisch auf Titelhöhe */
  flex: 0 0 auto;
}

.vyo-presence-dot.is-online  { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.vyo-presence-dot.is-dnd     { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.vyo-presence-dot.is-offline { background: #9ca3af; box-shadow: 0 0 0 3px rgba(156,163,175,0.18); }

/* ================= OAuth tiles (Login/Register Modals) ================= */
.vyo-oauth-divider{
  display:flex;
  align-items:center;
  gap:10px;
}
.vyo-oauth-divider::before,
.vyo-oauth-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background: rgba(127,127,127,.25);
}
.vyo-oauth-tiles{
  display:flex;
  justify-content:center;
  gap:12px;
}
.vyo-oauth-tile{
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
}
.vyo-oauth-tile:hover{
  background: rgba(255,255,255,0.06);
}
.vyo-oauth-tile svg{
  width: 26px;
  height: 26px;
  display:block;
}

/* Edit-Shop: Owner-Typeahead Dropdown darf niemals "lift" haben */
#shopOwnerBox #ownerUserResults .list-group-item,
#shopOwnerBox #ownerUserResults .list-group-item-action,
#shopOwnerBox #ownerUserResults .list-group-item:hover,
#shopOwnerBox #ownerUserResults .list-group-item:focus,
#shopOwnerBox #ownerUserResults .list-group-item:active,
#shopOwnerBox #ownerUserResults .list-group-item-action:hover,
#shopOwnerBox #ownerUserResults .list-group-item-action:focus,
#shopOwnerBox #ownerUserResults .list-group-item-action:active{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}

/* optional: Hover-Farbe trotzdem leicht sichtbar lassen */
#shopOwnerBox #ownerUserResults .list-group-item-action:hover{
  background: rgba(255,255,255,0.04) !important;
}

/* Badges in Comments: compact chips */
.vyo-badgechip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.12rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.10);
  font-size: .78rem;
  line-height: 1.1;
  white-space: nowrap;
}

.vyo-badgechip .vyo-badge-ico{ font-size: .9rem; line-height: 1; }

.vyo-badges-more-btn{
  padding:.1rem .4rem;
  border-radius: 999px;
  font-size:.78rem;
  line-height: 1.1;
}

/* --- Emoji Badge Pills (Kommentare + Profil) --- */
.vyo-badge-pill{
  --vyo-badge-size: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--vyo-badge-size);
  height: var(--vyo-badge-size);
  border-radius: 999px;

  line-height: 1;
  font-size: calc(var(--vyo-badge-size) * 0.58);

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);

  vertical-align: middle;
  transform: translateY(-1px); /* Baseline-Fix für Emojis */
}

.vyo-badge-pill-lg{ --vyo-badge-size: 28px; }

[data-theme="light"] .vyo-badge-pill{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}

.vyo-badges-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  padding: 0 .4rem;
  margin-left: .25rem;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;

  color: var(--text-muted, #9ca3af);
  font-size: .85rem;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-1px);
}
.vyo-badges-toggle:hover{ text-decoration: underline; }

[data-theme="light"] .vyo-badges-toggle{
  border-color: rgba(0,0,0,0.10);
}

.vyo-badges-extra{
  display: inline-flex;
  align-items: center;
  margin-left: .25rem;
}

/* --- Tooltips im Darkmode überall lesbar (Profil + Kommentare) --- */
.tooltip .tooltip-inner{
  background-color: var(--surface-strong, #111827);
  color: var(--text, #f9fafb);
  border: 1px solid var(--border, rgba(255,255,255,0.18));
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.35);
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before{
  border-top-color: var(--surface-strong, #111827) !important;
  border-bottom-color: var(--surface-strong, #111827) !important;
  border-left-color: var(--surface-strong, #111827) !important;
  border-right-color: var(--surface-strong, #111827) !important;
}


}

/* ===== VYO: Globaler Abstand zur unteren (fixed) Navbar ===== */
:root{
  --vyo-bottombar-h: 0px;     /* wird per JS gesetzt */
  --vyo-bottombar-gap: 14px;  /* “Luft” über der Navbar (anpassbar) */
}

/* sorgt dafür, dass der letzte Inhalt nicht unter der Bottom-Navbar klebt */
body{
  padding-bottom: calc(
    var(--vyo-bottombar-h) + var(--vyo-bottombar-gap) + env(safe-area-inset-bottom)
  );
}

.vyo-page{
  padding-bottom: 18px;
}

/* =========================================================
   Privacy / Legal tables
   ========================================================= */
.vyo-privacy-table-wrap{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

.vyo-privacy-table{
  margin-bottom: 0;
  color: inherit;
}

.vyo-privacy-table thead th{
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.vyo-privacy-table th,
.vyo-privacy-table td{
  vertical-align: top;
  padding: .95rem 1rem;
  border-color: rgba(255,255,255,.10);
}

.vyo-privacy-table tbody tr:last-child td{
  border-bottom: 0;
}

/* Dark mode */
html[data-theme="dark"] .vyo-privacy-table-wrap,
body[data-theme="dark"] .vyo-privacy-table-wrap{
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .vyo-privacy-table,
body[data-theme="dark"] .vyo-privacy-table,
html[data-theme="dark"] .vyo-privacy-table th,
html[data-theme="dark"] .vyo-privacy-table td,
body[data-theme="dark"] .vyo-privacy-table th,
body[data-theme="dark"] .vyo-privacy-table td{
  color: rgba(255,255,255,.92) !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .vyo-privacy-table thead th,
body[data-theme="dark"] .vyo-privacy-table thead th{
  color: #ffffff !important;
  background: rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .vyo-privacy-table tbody tr:hover td,
body[data-theme="dark"] .vyo-privacy-table tbody tr:hover td{
  background: rgba(255,255,255,.025) !important;
}

/* Light mode */
html[data-theme="light"] .vyo-privacy-table-wrap,
body[data-theme="light"] .vyo-privacy-table-wrap{
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
}

html[data-theme="light"] .vyo-privacy-table,
body[data-theme="light"] .vyo-privacy-table,
html[data-theme="light"] .vyo-privacy-table th,
html[data-theme="light"] .vyo-privacy-table td,
body[data-theme="light"] .vyo-privacy-table th,
body[data-theme="light"] .vyo-privacy-table td{
  color: #172033 !important;
  background-color: transparent !important;
  border-color: rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .vyo-privacy-table thead th,
body[data-theme="light"] .vyo-privacy-table thead th{
  background: rgba(15,23,42,.04) !important;
  color: #0f172a !important;
}

/* =========================================================
   VYO Password Toggle
   Auge-Button für Passwortfelder
   ========================================================= */

.vyo-password-group .vyo-password-toggle{
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  user-select: none;
}

.vyo-password-group .vyo-password-toggle.is-visible{
  background: rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.45);
}

.vyo-password-group .form-control{
  min-width: 0;
}

/* =========================================================
   2FA QR Box
   ========================================================= */

.twofa-qr-box{
  width: 176px;
  min-width: 176px;
  text-align: center;
}

.twofa-qr-img{
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(148,163,184,.35);
}

@media (max-width: 575.98px){
  .twofa-qr-box{
    width: 100%;
    min-width: 0;
  }

  .twofa-qr-img{
    width: min(220px, 72vw);
    height: min(220px, 72vw);
  }
}

/* =========================================================
   VYO Confirm Dialog über bestehenden Modals
   z. B. 2FA deaktivieren innerhalb Einstellungen
   ========================================================= */

.modal.vyo-confirm-dialog-modal{
  z-index: 8080 !important;
}

.modal-backdrop.vyo-confirm-backdrop{
  z-index: 8070 !important;
}