/* Vordenk — + menu and camera menu, completely compressed: least padding, gaps and row height that still read well.
   Loaded last. Spacing and size only: no colours here. */
.composer-menu{
  margin:0 12px 6px !important; padding:5px 7px !important; gap:3px !important; border-radius:16px !important;
  max-height:min(50vh,290px); box-shadow:0 10px 26px -16px rgba(0,0,0,.7) !important;
}
.composer-menu .composer-menu-row{ padding-top:2px !important; font-size:12.5px; gap:6px; }
.composer-menu .composer-menu-row-column{ gap:3px !important; }
.composer-menu :is(.vk-tools,.vk-menu-section,.vk-chips,.vk-menu-btns){ gap:4px !important; padding-top:3px !important; }
.composer-menu .vk-menu-section{ gap:3px !important; }
.composer-menu .vk-menu-label{ font-size:11px; line-height:1.2; }
.composer-menu .vk-chip, .vk-tools .vk-chip, .vk-menu-btns .vk-chip{
  min-height:26px !important; padding:3px 9px !important; border-radius:13px !important; font-size:12px !important; gap:4px;
}
.composer-menu .vk-chip .ico, .composer-menu .vk-chip svg{ width:13px; height:13px; }
.composer-menu select, .composer-menu input[type="text"], .composer-menu input[type="search"], .song-search-row input{
  padding:4px 10px !important; border-radius:12px !important; min-height:0;
}
.composer-menu .song-search-row{ gap:4px; }
.composer-menu .song-search-row button{ padding:3px 10px !important; min-height:0 !important; border-radius:12px !important; font-size:12px !important; }
.composer-menu .composer-menu-item{ padding:3px 2px; font-size:13px; }

.camera-menu{
  padding:3px !important; gap:2px !important; min-width:0 !important; width:max-content; border-radius:14px !important;
  bottom:calc(100% + 6px) !important; box-shadow:0 10px 26px -16px rgba(0,0,0,.7) !important;
}
.camera-menu-item{
  min-height:30px !important; padding:4px 10px !important; gap:7px !important; border-radius:10px !important; font-size:13px !important; white-space:nowrap;
}
.camera-menu-item .ico, .camera-menu-item svg{ width:15px; height:15px; }

/* ---- the "Type @ … / Type # …" hint with its arrow: hidden while the + menu or camera menu is open ----
   (the + menu takes room from the chat area, which used to push the hint up over the greeting) */
:root[data-menu-open="1"] .at-hint{ display:none !important; }

/* ---- Teachers: Time allowed = hours + minutes boxes ---- */
.mode-time{ display:flex; gap:8px; align-items:center; min-width:0; }
.mode-time-unit{ display:flex; align-items:center; gap:5px; flex:1 1 0; min-width:0; font-size:12.5px; opacity:.95; }
.mode-time-unit .mode-input{ width:100%; min-width:0; text-align:center; }
.mode-time-unit span{ white-space:nowrap; }

/* ---- the @ (answer style) and # (tone) pickers, completely compressed ---- */
.style-menu{
  padding:3px !important; gap:2px !important; border-radius:14px !important;
  max-height:min(170px,30vh) !important;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.7) !important;
}
.style-option{
  min-height:26px !important; padding:3px 10px !important; border-radius:10px !important; font-size:12.5px !important; line-height:1.2 !important;
  grid-template-columns:minmax(6.5em,42%) 1fr 14px !important; column-gap:8px !important;
}
.style-option small, .style-option .style-hint{ font-size:11px !important; }
.style-option .ico{ width:12px; height:12px; }
.style-menu-empty{ padding:5px 8px !important; font-size:12px !important; }

/* ---- Candidates test: typed number of questions ---- */
.vk-t-count{ width:84px; text-align:center; }

/* ---- mode name colours (the name in the subheading; in Professionals it is the mode pill) ----
   Candidates: the blue used in that mode. Teachers: black on the light and blue themes, white on dark.
   Professionals: always its dark-theme look, even when the theme is light. */
:root[data-mode="candidates"] .chat-subheading .mode-titles strong{ color:var(--teal-300); }
:root[data-mode="teachers"] .chat-subheading .mode-titles strong{ color:#fff; }
:root[data-mode="teachers"][data-pro-theme="light"] .chat-subheading .mode-titles strong,
:root[data-mode="teachers"][data-pro-theme="blue"] .chat-subheading .mode-titles strong{ color:#000; }
:root[data-mode="professionals"][data-pro-theme="light"] .mode-head-merged .source-mode-current{
  color:#9ccbff; border-color:#58a6ff; background:#0c1724;
}

/* ---- the greeting hides while the + menu (or camera menu) is open, instead of riding up as the chat area shrinks ---- */
.chat-empty-greeting{ transition:opacity .15s ease, visibility 0s linear 0s; }
:root[data-menu-open="1"] .chat-empty-greeting{ opacity:0; visibility:hidden; transition:opacity .12s ease, visibility 0s linear .12s; }