/* BVPN_AI_UI_V2 — styles for the three Balance AI interfaces (see bvpn-ai-v2.js). */
html.bvpn-ai-v2 {
  --ai-accent: #5b6cff;
  --ai-accent-soft: #ECEEFB;
  --ai-ink: #17162B;
  --ai-muted: #6b6f86;
  --ai-line: #e6e7f0;
  --ai-card: #FFFFFF;
  --ai-bg: #f4f5fb;
}
html.bvpn-ai-v2[data-ai-mode="mini"] {
  --ai-accent: var(--tg-theme-button-color, #4B3BD6);
  --ai-ink: var(--tg-theme-text-color, #17162B);
  --ai-muted: var(--tg-theme-hint-color, #5E5B78);
  --ai-card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #FFFFFF));
  --ai-bg: var(--tg-theme-secondary-bg-color, #F4F3FA);
  --ai-line: color-mix(in srgb, var(--ai-muted) 22%, transparent);
  --ai-accent-soft: color-mix(in srgb, var(--ai-accent) 14%, transparent);
}
html.bvpn-ai-v2 body { background: var(--ai-bg); color: var(--ai-ink); }
html.bvpn-ai-v2 .bvpn-hide { display: none !important; }
html.bvpn-ai-v2 .card { background: var(--ai-card); border: 1px solid var(--ai-line); border-radius: 16px; box-shadow: none; }
html.bvpn-ai-v2 .bvpn-h { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--ai-ink); }

/* Tabs */
#bvpnAiTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 14px;
  background: var(--ai-accent-soft); border-radius: 12px; position: sticky; top: 0; z-index: 20; }
#bvpnAiTabs button { font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ai-muted); cursor: pointer; }
#bvpnAiTabs button.on { background: var(--ai-card); color: var(--ai-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(23, 22, 43, .08); }
#bvpnAiTabs button:focus-visible { outline: 2px solid var(--ai-accent); outline-offset: 1px; }

/* Media tabs live in the tabs now; the chat list shows only on the chat tab. */
html.bvpn-ai-v2:not([data-ai-tab="chat"]) #chatsCard,
html.bvpn-ai-v2:not([data-ai-tab="chat"]) .bvpn-account-card,
html.bvpn-ai-v2:not([data-ai-tab="chat"]) #openMemoryButton { display: none !important; }

/* Model list: name + what it is good for */
#bvpnModels { margin: 0 0 14px; }
html.bvpn-ai-v2 #aiModelSwitcher { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; }
html[data-ai-mode="site"] #aiModelSwitcher { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model], html.bvpn-ai-v2 #aiModelSwitcher [data-video-model] {
  align-items: flex-start !important; text-align: left !important; justify-content: center !important; min-height: 54px !important;
  padding: 10px 14px !important; border-radius: 14px !important; font-size: 15px !important; background: var(--ai-card) !important;
  color: var(--ai-ink) !important; border: 1px solid var(--ai-line) !important; box-shadow: none !important; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model], html.bvpn-ai-v2 #aiModelSwitcher [data-video-model],
html.bvpn-ai-v2 #aiModelSwitcher button[data-model-key] { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; min-height: 54px; padding: 10px 14px; border-radius: 14px; font-size: 15px; font-weight: 700;
  background: var(--ai-card); color: var(--ai-ink); border: 1px solid var(--ai-line); box-shadow: none; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model] small, html.bvpn-ai-v2 #aiModelSwitcher [data-video-model] small { display: none; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model] span, html.bvpn-ai-v2 #aiModelSwitcher [data-video-model] span { font-weight: 700 !important; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model]::after, html.bvpn-ai-v2 #aiModelSwitcher [data-video-model]::after,
html.bvpn-ai-v2 #aiModelSwitcher button[data-model-key]::after { content: attr(data-hint); font-size: 12px; font-weight: 500; color: var(--ai-muted); }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model].primary, html.bvpn-ai-v2 #aiModelSwitcher [data-video-model].primary,
html.bvpn-ai-v2 #aiModelSwitcher button[data-model-key].primary { border: 2px solid var(--ai-accent); background: var(--ai-card); color: var(--ai-ink); }

/* Subscription card */
html.bvpn-ai-v2 .bvpn-account-card { margin-bottom: 14px; }
html.bvpn-ai-v2 .bvpn-account-card .model-icon { display: none; }
html.bvpn-ai-v2 .bvpn-account-card .model h2 { font-size: 18px; margin: 0; }

/* ---- Mini App ---- */
html[data-ai-mode="mini"] #bvpnReturnFromAi { display: none !important; }
html[data-ai-mode="mini"] #mainView .topbar { margin-bottom: 10px; }

/* ---- Inside the apps ---- */
html[data-ai-mode="app"] #bvpnReturnFromAi,
html[data-ai-mode="app"] #mainView .topbar { display: none !important; }
html[data-ai-mode="app"] #mainView .wrap { padding-top: 10px; }

/* ---- Site in a browser ---- */
html[data-ai-mode="site"] #bvpnReturnFromAi { position: static !important; }
#bvpnAiShell { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 20px; box-sizing: border-box; align-items: flex-start; }
#bvpnAiSide { flex: 1 1 260px; max-width: 300px; display: flex; flex-direction: column; gap: 12px; }
#bvpnAiWork { flex: 999 1 560px; min-width: 0; }
#bvpnAiWork .wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }
#bvpnNewChat { font: inherit; font-size: 15px; font-weight: 700; min-height: 46px; border: 0; border-radius: 12px; background: var(--ai-accent); color: #fff; cursor: pointer; }
#bvpnAiSide #bvpnModels { margin: 0; }
#bvpnAiSide .card { margin: 0; }
html[data-ai-mode="site"] #mainView .topbar { margin-bottom: 14px; }
html[data-ai-mode="site"] #chatView { min-height: 70vh; background: var(--ai-card); border: 1px solid var(--ai-line); border-radius: 16px; }
html[data-ai-mode="site"] #chatView .wrap { padding: 0 16px 16px !important; }
@media (max-width: 860px) {
  #bvpnAiSide { max-width: none; }
}

/* Chat list with rename / delete (BVPN_AI_CHAT_ACTIONS_V1) */
html.bvpn-ai-v2 .bvpn-chat { position: relative; display: flex; align-items: stretch; gap: 4px; padding: 0 !important; cursor: default; }
html.bvpn-ai-v2 .bvpn-chat-open { flex: 1; min-width: 0; font: inherit; text-align: left; background: none; border: 0; color: inherit;
  padding: 12px 6px 12px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; border-radius: 14px; }
html.bvpn-ai-v2 .bvpn-chat-open .chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.bvpn-ai-v2 .bvpn-chat-more { flex: none; width: 44px; font: inherit; font-size: 20px; line-height: 1; border: 0; background: none;
  color: var(--ai-muted); border-radius: 12px; cursor: pointer; }
html.bvpn-ai-v2 .bvpn-chat-more:hover, html.bvpn-ai-v2 .bvpn-chat-more[aria-expanded="true"] { background: var(--ai-accent-soft); color: var(--ai-ink); }
html.bvpn-ai-v2 .bvpn-chat-menu { position: absolute; right: 6px; top: calc(100% - 6px); z-index: 30; min-width: 170px; display: flex; flex-direction: column;
  background: var(--ai-card); border: 1px solid var(--ai-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(23, 22, 43, .14); padding: 4px; }
html.bvpn-ai-v2 .bvpn-chat-menu[hidden] { display: none; }
html.bvpn-ai-v2 .bvpn-chat-menu button { font: inherit; font-size: 14px; text-align: left; min-height: 40px; padding: 0 12px; border: 0; background: none;
  color: var(--ai-ink); border-radius: 8px; cursor: pointer; }
html.bvpn-ai-v2 .bvpn-chat-menu button:hover { background: var(--ai-accent-soft); }
html.bvpn-ai-v2 .bvpn-chat-menu button.danger { color: #C0262D; }
html.bvpn-ai-v2 .bvpn-chat-rename { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding: 8px; box-sizing: border-box; }
html.bvpn-ai-v2 .bvpn-chat-rename label { flex: 1 1 140px; display: flex; }
html.bvpn-ai-v2 .bvpn-chat-rename input { flex: 1; min-width: 0; font: inherit; font-size: 15px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--ai-accent); border-radius: 10px; background: var(--ai-card); color: var(--ai-ink); }
html.bvpn-ai-v2 .bvpn-chat-rename button { font: inherit; font-size: 14px; font-weight: 700; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 0; background: var(--ai-accent); color: #fff; cursor: pointer; }
html.bvpn-ai-v2 .bvpn-chat-rename button.ghost { background: none; color: var(--ai-muted); font-weight: 600; }
html.bvpn-ai-v2 .bvpn-sr-only, html.bvpn-ai-v2 .bvpn-chat-rename .bvpn-sr { font-size: 0; }
html.bvpn-ai-v2 .bvpn-chat-rename .bvpn-sr input { font-size: 15px; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model].primary,
html.bvpn-ai-v2 #aiModelSwitcher [data-video-model].primary { border: 2px solid var(--ai-accent) !important; }
#bvpnModels { position: relative; }

/* BVPN_AI_SLIDES_V1: the «Презентации» tile looks like FLUX / Hailuo; while it is open no chat model is highlighted */
html.bvpn-ai-v2 #aiModelSwitcher [data-slides-model] { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center !important;
  gap: 2px; text-align: left !important; min-height: 54px !important; padding: 10px 14px !important; border-radius: 14px !important; font-size: 15px !important;
  font-weight: 700; background: var(--ai-card) !important; color: var(--ai-ink) !important; border: 1px solid var(--ai-line) !important; box-shadow: none !important; cursor: pointer; }
html.bvpn-ai-v2 #aiModelSwitcher [data-slides-model]::after { content: attr(data-hint); font-size: 12px; font-weight: 500; color: var(--ai-muted); }
html.bvpn-ai-v2 #aiModelSwitcher [data-slides-model].primary { border: 2px solid var(--ai-accent) !important; }
html.bvpn-slides-on #aiModelSwitcher button[data-model-key].primary { border: 1px solid var(--ai-line) !important; }
html.bvpn-slides-on #mainView .bvpn-account-card, html.bvpn-slides-on #chatsCard { display: none !important; }
#slidesCard { padding: 0 !important; overflow: hidden; background: var(--ai-card) !important; border: 1px solid var(--ai-line) !important; border-radius: 18px !important; box-shadow: none !important; }

/* BVPN_ANDROID_DARK_TINT_V1: the Android app darkens site pages with an invert filter (neutral grey);
   this tints them to the app's navy so Balance AI matches the VPN and chat tabs */
html:has(#bvpn-dark)::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483647;background:#5b6cff;mix-blend-mode:color;opacity:.35}

/* BVPN_AI_TILES_SAME_V1: every model tile looks the same (the Mac app's built-in style painted chat models grey and the chosen
   one solid purple with unreadable text); the chosen tile only gets the accent border, and while «Презентации» is open no chat model looks chosen */
html.bvpn-ai-v2 #aiModelSwitcher button[data-model-key] { background: var(--ai-card) !important; color: var(--ai-ink) !important; border: 1px solid var(--ai-line) !important; }
html.bvpn-ai-v2 #aiModelSwitcher button[data-model-key].primary { background: var(--ai-card) !important; color: var(--ai-ink) !important; border: 2px solid var(--ai-accent) !important; }
html.bvpn-ai-v2.bvpn-slides-on #aiModelSwitcher button[data-model-key].primary { border: 1px solid var(--ai-line) !important; }
html.bvpn-ai-v2 #aiModelSwitcher [data-images-model], html.bvpn-ai-v2 #aiModelSwitcher [data-video-model], html.bvpn-ai-v2 #aiModelSwitcher [data-slides-model] { background: var(--ai-card) !important; color: var(--ai-ink) !important; }
html.bvpn-ai-v2 #aiModelSwitcher [data-slides-model]:not(.primary) { border: 1px solid var(--ai-line) !important; }

/* BVPN_AI_APP_THEME_V1: native dark theme for the apps and the site (set by bvpnAiTheme(true) → html[data-ai-dark]) */
html.bvpn-ai-v2[data-ai-dark], html.bvpn-ai-v2[data-ai-dark] body { background: var(--ai-bg) !important; color: var(--ai-ink) !important; }
html.bvpn-ai-v2[data-ai-dark] :is(.card, .status, .chat, .dev-model, .memory-item, .composer, .chat-header, .secondary, .back-button,
  .message-row.assistant .bubble, .memory-small-button, .bvpn-chat-open, .bvpn-chat-more, .bvpn-chat-menu button, .bvpn-chat-rename button.ghost, #bvpnWebAiNotice) {
  background: var(--ai-card) !important; color: var(--ai-ink) !important; border-color: var(--ai-line) !important; }
html.bvpn-ai-v2[data-ai-dark] :is(.badge, .dev-badge, .model-icon, .dev-model-icon, #bvpnReturnFromAi, .bubble code) { background: var(--ai-accent-soft) !important; color: var(--ai-ink) !important; }
html.bvpn-ai-v2[data-ai-dark] .composer-wrap { background: linear-gradient(to top, var(--ai-bg) 72%, transparent) !important; }
html.bvpn-ai-v2[data-ai-dark] :is(input, textarea, select) { background: #151517 !important; color: var(--ai-ink) !important; border-color: var(--ai-line) !important; }
html.bvpn-ai-v2[data-ai-dark] .composer textarea { background: transparent !important; }
html.bvpn-ai-v2[data-ai-dark] :is(.secondary, .back-button, .memory-open-button, .dev-model, .memory-item, .message-row.assistant .bubble) :is(span, div, b, strong, p, li, h1, h2, h3, td, th) { color: inherit; }
html.bvpn-ai-v2[data-ai-dark] .memory-delete-button { background: rgba(239,68,68,.16) !important; color: #fca5a5 !important; }
html.bvpn-ai-v2[data-ai-dark] .good { color: #5fd08a !important; }
html.bvpn-ai-v2[data-ai-dark] .bvpn-chat-menu button.danger { color: #ff8a8a !important; }
html.bvpn-ai-v2[data-ai-dark] a:not(.primary) { color: #9aa6ff; }

/* ---- BVPN_AI_V3: calmer layout for the site and the apps ---- */
html.bvpn-ai-v3 #aiModelSwitcher [data-images-model], html.bvpn-ai-v3 #aiModelSwitcher [data-video-model],
html.bvpn-ai-v3 #aiModelSwitcher [data-slides-model] { display: none !important; }
html.bvpn-ai-v3 #aiModelSwitcher { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
html.bvpn-ai-v3 #aiModelSwitcher button[data-model-key] { flex: 0 0 auto; flex-direction: row !important; align-items: center !important;
  min-height: 40px; padding: 8px 16px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; }
html.bvpn-ai-v3 #aiModelSwitcher button[data-model-key]::after { display: none !important; }
html.bvpn-ai-v3 #aiModelSwitcher button[data-model-key].primary { background: var(--ai-accent-soft) !important; border: 1px solid var(--ai-accent) !important; }
html.bvpn-ai-v3:not([data-ai-tab="chat"]) #bvpnModels { display: none; }
html.bvpn-ai-v3 #bvpnModels { margin: 0 0 16px; }
html.bvpn-ai-v3 #bvpnAiTabs { position: static; display: inline-grid; grid-template-columns: repeat(4, auto); margin: 0 0 14px; }
html.bvpn-ai-v3 #bvpnAiTabs button { padding: 0 18px; }
html.bvpn-ai-v3 .bvpn-account-card { border-radius: 18px !important; }
html.bvpn-ai-v3 .bvpn-account-card .status { border-radius: 14px; }
/* two columns */
html.bvpn-ai-shell #mainView .topbar { display: none !important; }
html.bvpn-ai-shell #chatsCard #newChat { display: none !important; }
html.bvpn-ai-shell #chatsCard h2, html.bvpn-ai-shell #chatsCard .card-title { font-size: 15px !important; color: var(--ai-muted); margin: 0 0 8px !important; }
html.bvpn-ai-shell #chatsCard .row, html.bvpn-ai-shell #chatsCard .card-head { margin-bottom: 4px; }
#bvpnAiBrand { font-size: 20px; font-weight: 800; color: var(--ai-ink); padding: 4px 4px 2px; display: flex; gap: 8px; align-items: center; }
html.bvpn-ai-shell #bvpnAiShell { padding-top: 24px; gap: 24px; }
html.bvpn-ai-shell #bvpnAiSide { position: sticky; top: 16px; }
html[data-ai-mode="site"] #bvpnReturnFromAi { background: var(--ai-card) !important; color: var(--ai-accent) !important; border-bottom: 1px solid var(--ai-line) !important;
  padding: 14px 24px !important; }
@media (max-width: 760px) {
  html.bvpn-ai-v3 #bvpnAiTabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  html.bvpn-ai-v3 #bvpnAiTabs button { padding: 0 2px; font-size: 12.5px; letter-spacing: -.1px; }
  html.bvpn-ai-shell #bvpnAiSide { position: static; }
  html.bvpn-ai-v3 #aiModelSwitcher { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}