/* ---------------------------------------------------------------------------------------------------------------
   One look for every menu and dialog (the Translate dialog is the reference): a rounded dark-teal card, large
   title with a close button, outlined fields and rounded pill rows. The colours of these surfaces are FIXED:
   they do not follow the 4 modes (Candidates, Students, Teachers, Professionals / light-dark). Only the page
   background behind them changes with the mode.
--------------------------------------------------------------------------------------------------------------- */
.overlay, .settings-panel, .vkd-back, .vkp-plug, .vkp-sbx, .vk-del-back, .vk-sbx-back, .storage-notice,
.composer-menu, .style-menu, .tag-menu, .camera-menu, .vkv-back, .vk-t-ov, .download-menu, .source-pop, .source-modes, .model-overlay, .vkh{
  --navy-900:#041a20; --navy-800:#062c35; --navy-700:#0b4046; --navy-600:#1a5d5e;
  --teal-400:#d8be84; --teal-300:#ecdca0; --teal-600:#a58c52;
  --foam:#eef3ea; --slate-400:#9db8b3; --slate-500:#7a9995;
  --accent-rgb:216,190,132; --glow-rgb:216,190,132; --sky:#add0cc; --on-accent:#062028; --field-bg:rgba(255,255,255,.03);
  --info-bg:rgba(173,208,204,.10); --info-text:#b7d9d4; --success-bg:rgba(216,190,132,.14); --success-text:#ecdca0;
  --warning-bg:rgba(229,167,90,.14); --warning-text:#e8b978; --danger:#d9704a;
  --line:var(--navy-700); --surface:var(--navy-800); --bg-a:var(--navy-700); --bg-b:var(--navy-800);
  color-scheme:dark; color:var(--foam);
}
.settings-panel{ background:var(--navy-800); }

/* ---- the card (Translate, Choose mode, Forgot, and every new dialog) ---- */
.overlay-panel-center, .vkd-card, .vk-del-box{
  border-radius:28px; padding:22px; background:var(--navy-900); border:1px solid var(--navy-700);
  box-shadow:0 0 70px -22px rgba(216,190,132,.35), 0 30px 60px -30px rgba(0,0,0,.7);
}
.overlay-head strong, .vkd-head strong, .vkp-head strong, .vk-del-box h3{ font-size:20px; font-weight:700; color:var(--foam); }
.overlay-head, .vkd-head{ margin-bottom:4px; }
.translate-search, .vkd-input, .vkp-form input, .vkp-form textarea, .vkp-search, .vk-del-box input{
  width:100%; padding:13px 16px; border-radius:16px; font-size:16px; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-600); outline:none;
}
.translate-search:focus, .vkd-input:focus, .vkp-form input:focus, .vkp-form textarea:focus, .vkp-search:focus{ border-color:var(--teal-400); box-shadow:0 0 0 4px rgba(216,190,132,.14); }
.vkp-search{ width:auto; }

/* ---- pill rows ---- */
.vkp-row{ border-radius:16px; padding:12px 14px; background:var(--navy-800); border:1px solid var(--navy-700); }
.vkp-note{ color:var(--slate-400); }

/* ---- new dialog component ---- */
.vkd-back{ position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(2,12,15,.66); animation:fx-fade .2s ease both; }
.vkd-card{ width:min(420px,100%); max-height:88vh; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px; animation:overlay-pop .18s cubic-bezier(.16,1,.3,1) both; }
.vkd-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vkd-body{ font-size:14.5px; line-height:1.6; color:var(--slate-400); white-space:pre-line; }
.vkd-body strong, .vkd-body b{ color:var(--foam); }
.vkd-body ol, .vkd-body ul{ margin:8px 0 0; padding-inline-start:20px; white-space:normal; }
.vkd-body li{ margin:4px 0; }
.vkd-icon{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--navy-800); border:1px solid var(--navy-600); color:var(--teal-400); }
.vkd-icon .ico{ width:22px; height:22px; }
.vkd-actions{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.vkd-btn{ min-height:48px; padding:12px 18px; border-radius:16px; font:inherit; font-size:15px; color:var(--foam); background:var(--navy-800); border:1px solid var(--navy-700); cursor:pointer; text-align:center; transition:border-color .2s ease, background .2s ease; }
.vkd-btn:hover{ border-color:var(--navy-600); }
.vkd-btn:focus-visible{ outline:2px solid var(--teal-400); outline-offset:2px; }
.vkd-btn.primary{ background:var(--teal-400); color:var(--on-accent); border-color:transparent; font-weight:600; }
.vkd-btn.primary:hover{ background:var(--teal-300); }
.vkd-btn.danger{ border-color:var(--danger); color:#f2a48a; }
.vkd-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- the older "type DELETE" box now matches ---- */
.vk-del-back{ background:rgba(2,12,15,.66); }
.vk-del-box{ width:min(420px,100%); gap:14px; }
.vk-del-actions{ display:flex; flex-direction:column-reverse; gap:8px; }
.vk-del-actions .btn{ min-height:48px; border-radius:16px; }

/* =====================================================================================================
   Every other pop-up follows the same reference (the Translate dialog): dimmed + softly blurred page behind,
   a 28px rounded dark-teal card, large bold title with a round close button, 16px outlined fields and
   rounded rows. Menus (attach, @ and # pickers, download, source) use the same card at a smaller scale.
===================================================================================================== */
.overlay, .vkd-back, .vk-del-back, .vk-t-ov{ background:rgba(2,12,15,.66); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.overlay-panel-left{ border-radius:0 28px 28px 0; }
html[dir="rtl"] .overlay-panel-left{ border-radius:28px 0 0 28px; }
.overlay-head .icon-btn, .vkd-head .icon-btn{ width:40px; height:40px; border-radius:50%; flex:none; }

/* rows inside dialogs: the Translate list look */
.lang-option, .model-option, .name-option{ border-radius:16px; background:var(--navy-800); border:1px solid var(--navy-700); }
.model-option{ padding:13px 16px; }
.model-option.selected, .lang-option[aria-selected="true"], .name-option.selected{ border-color:var(--teal-400); background:rgba(216,190,132,.10); }

/* Choose-mode / Forgot / Translate / Chats headings use the larger title everywhere */
.overlay-note{ color:var(--slate-400); }

/* floating menus */
.camera-menu, .composer-menu, .style-menu, .download-menu, .source-pop{
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:22px;
  box-shadow:0 0 50px -22px rgba(216,190,132,.35), 0 24px 50px -24px rgba(0,0,0,.75);
}
.camera-menu, .style-menu, .download-menu, .source-pop{ padding:8px; gap:6px; }
.composer-menu{ padding:16px; }
.camera-menu-item, .style-option, .download-item, .source-opt{
  border-radius:16px; background:var(--navy-800); border:1px solid var(--navy-700); min-height:44px;
}
.camera-menu-item:hover, .style-option:hover, .style-option.highlighted, .download-item:hover, .download-item:focus-visible, .source-opt:hover{
  background:var(--navy-800); border-color:var(--navy-600); color:var(--teal-300);
}
.style-option.highlighted, .style-option.active{ border-color:var(--teal-400); background:rgba(216,190,132,.10); }
.source-opt[aria-checked="true"]{ border-color:var(--teal-400); background:rgba(216,190,132,.10); }
.style-menu{ gap:6px; }
.composer-menu-row select, .song-search-row input{ border-radius:16px; padding:11px 14px; background:var(--navy-900); border:1px solid var(--navy-600); }

/* Vordenk tools dialog (#detail, Utilities) */
.vkv-back{ background:rgba(2,12,15,.66); }
.vkv-box{ border-radius:28px; background:var(--navy-900); border:1px solid var(--navy-700); box-shadow:0 0 70px -22px rgba(216,190,132,.35), 0 30px 60px -30px rgba(0,0,0,.7); }
.vkv-h{ font-size:20px; font-weight:700; }
.vkv-x{ width:40px; height:40px; }
.vkv-f input, .vkv-f select, .vkv-f textarea, .vkv-search, .vkv-tool textarea{ border-radius:16px; }

/* Candidates test (was a bottom sheet): same centred card */
.vk-t-ov{ align-items:center; justify-content:center; padding:20px; --panel-bg:#041a20; --line:#0b4046; --text:#eef3ea; }
.vk-t-box{ width:min(560px,100%); max-height:88vh; border-radius:28px; background:var(--navy-900); color:var(--foam); border:1px solid var(--navy-700);
  box-shadow:0 0 70px -22px rgba(216,190,132,.35), 0 30px 60px -30px rgba(0,0,0,.7); overflow:hidden; }
.vk-t-head{ padding:18px 22px 12px; }
.vk-t-head strong, .vk-t-head h3{ font-size:20px; font-weight:700; }
.vk-t-body{ padding:14px 22px calc(20px + env(safe-area-inset-bottom,0px)); }
.vk-t-input{ border-radius:16px; padding:11px 14px; border-color:var(--navy-600); }
.vk-t-btn{ border-radius:16px; min-height:44px; }
.vk-t-opt, .vk-t-chap, .vk-t-q{ border-radius:16px; }

/* The generic ".stage > *{position:relative}" rule used to beat the pickers' own position:absolute, which dropped the
   "@" / "#" menus on top of the message box. A more specific rule keeps them floating where app.js places them. */
.stage > .style-menu{ position:absolute; z-index:6; }