/* ==========================================================================
   holaQoQa — interface de l'éditeur (n'affecte jamais l'impression)

   Organisation :
     1. Base et icônes
     2. Structure (volet latéral, zone principale)
     3. Volet latéral et liste des fiches
     4. Boutons, barre d'outils, menu contextuel
     5. Scène et affordances d'édition
     6. Éditeur de scénario
     7. Modales
     8. Adaptation mobile   ← tout le responsive est regroupé ici
   ========================================================================== */

/* ==========================================================================
   1. Base et icônes
   ========================================================================== */

* { box-sizing: border-box; }

/* L'attribut `hidden` doit primer sur les display: flex ci-dessous. */
[hidden] { display: none !important; }

:root {
  --ui-magenta: #c42a76;
  --ui-pink:    #fbdcea;
  --ui-text:    #333;
  --ui-muted:   #8a8a8a;
  --ui-line:    #e6e6e6;
  --ui-bg:      #f4f4f6;
  --side-w:     300px;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ui-text);
  background: var(--ui-bg);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; }

/* Icônes Material Symbols (sprite SVG intégré dans la page) */
.ic {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

/* Bouton-icône : la forme de base de toute l'interface */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5a5a5a;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.iconbtn:hover  { background: rgba(0, 0, 0, .06); color: #222; }
.iconbtn:active { background: rgba(0, 0, 0, .12); }
.iconbtn:focus-visible { outline: 2px solid var(--ui-magenta); outline-offset: 2px; }
.iconbtn:disabled { opacity: .35; cursor: default; }

.iconbtn--primary { background: var(--ui-magenta); color: #fff; }
.iconbtn--primary:hover { background: #ad2166; color: #fff; }
.iconbtn--dark { background: #333; color: #fff; }
.iconbtn--dark:hover { background: #111; color: #fff; }

/* ==========================================================================
   2. Structure
   ========================================================================== */

.app {
  display: flex;
  height: 100%;
  min-height: 0;
}

.side {
  flex: 0 0 var(--side-w);
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--ui-line);
}

.main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Barre supérieure : masquée sur grand écran (le volet est déjà visible) */
.appbar { display: none; }

/* Voile du volet coulissant */
.scrim { display: none; }

/* ==========================================================================
   3. Volet latéral
   ========================================================================== */

.side__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.1rem .8rem;
  font-weight: 800;
  color: var(--ui-magenta);
}
.side__brand img { height: 30px; width: auto; }
.side__brand span { font-size: .95rem; color: #555; flex: 1 1 auto; }
.side__close { display: none; }

.side__tabs {
  display: flex;
  gap: .35rem;
  padding: 0 1.1rem .7rem;
}
.tab {
  flex: 1 1 0;
  border: 0;
  border-radius: 999px;
  padding: .5rem;
  background: #f0f0f3;
  color: #666;
  font-weight: 700;
  cursor: pointer;
}
.tab.is-active { background: var(--ui-pink); color: var(--ui-magenta); }

.side__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 1.1rem 1rem;
}

.side__actions { padding-bottom: .6rem; }
.side__actions .btn { width: 100%; }

.side__searchwrap { position: relative; margin-bottom: .6rem; }
.side__searchicon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--ui-muted);
}
.side__search {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  padding: .5rem .9rem .5rem 2.4rem;
  outline: none;
}
.side__search:focus { border-color: var(--ui-magenta); }
.side__search::-webkit-search-cancel-button { cursor: pointer; }

/* --- Liste des fiches ------------------------------------------------ */

.list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
}

.list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .3rem .35rem .55rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background .12s;
}
.list li:hover { background: #f6f6f8; }
.list li.is-active { background: var(--ui-pink); }
.list li.is-empty { cursor: default; color: #aaa; }

.list li img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
  flex: 0 0 auto;
}
.list li .nm {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list li .sub { font-size: .78rem; color: #999; font-weight: 400; }

/* Le bouton ⋮ reste discret tant qu'on ne survole pas la ligne, mais il est
   toujours visible au doigt (voir la section mobile). */
.list .rowmenu {
  width: 32px; height: 32px;
  opacity: 0;
  transition: opacity .12s, background .12s;
}
.list .rowmenu .ic { width: 20px; height: 20px; }
.list li:hover .rowmenu,
.list li.is-active .rowmenu,
.list .rowmenu:focus-visible { opacity: 1; }

/* ==========================================================================
   4. Boutons, barre d'outils, menu contextuel
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 0;
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  background: #ececf0;
  color: #444;
  white-space: nowrap;
}
.btn .ic { width: 20px; height: 20px; }
.btn:hover { filter: brightness(.96); }
.btn--primary { background: var(--ui-magenta); color: #fff; }
.btn--dark    { background: #333; color: #fff; }
.btn--danger  { background: #fde8e8; color: #c62828; }
.btn:disabled { opacity: .5; cursor: default; }

.toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--ui-line);
  flex: 0 0 auto;
}

.toolbar__name {
  font-weight: 700;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toolbar__spacer { flex: 1 1 auto; }

.toolbar__status,
.appbar__status { font-size: .85rem; color: var(--ui-muted); white-space: nowrap; }
.toolbar__status.is-dirty, .appbar__status.is-dirty { color: #d08600; }
.toolbar__status.is-saved, .appbar__status.is-saved { color: #1a9e5c; }

.zoomgroup {
  display: flex;
  align-items: center;
  gap: .15rem;
  background: #f4f4f6;
  border-radius: 999px;
  padding: 2px 6px;
}
.zoomgroup .iconbtn { width: 34px; height: 34px; }
.zoomgroup .iconbtn .ic { width: 20px; height: 20px; }
.zoomgroup input[type=range] { width: 110px; accent-color: var(--ui-magenta); }

/* --- Menu contextuel d'une fiche -------------------------------------- */

.popmenu {
  position: fixed;
  z-index: 120;
  min-width: 190px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  padding: .35rem;
  display: flex;
  flex-direction: column;
}
.popmenu button {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  border: 0;
  background: none;
  border-radius: 10px;
  padding: .6rem .7rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  text-align: left;
}
.popmenu button:hover { background: #f4f4f6; }
.popmenu button .ic { width: 20px; height: 20px; color: #666; }
.popmenu button.is-danger { color: #c62828; }
.popmenu button.is-danger .ic { color: #c62828; }
.popmenu button.is-danger:hover { background: #fdeded; }

/* ==========================================================================
   5. Scène et affordances d'édition
   ========================================================================== */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  background: #9a9a9e;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.stage__scaler {
  zoom: var(--z, 1);
  flex: 0 0 auto;
}

.stage .hq-sheet { box-shadow: 0 6px 30px rgba(0, 0, 0, .35); }

.empty {
  margin: auto;
  text-align: center;
  color: #fff;
  max-width: 34rem;
  padding: 1rem;
}
.empty h1 { font-family: 'Ottertype', 'Inter', sans-serif; margin: 0 0 .5rem; }
.empty p  { margin: 0 0 1.2rem; opacity: .9; }
.empty .btn { display: inline-flex; }

/* --- Édition dans la fiche -------------------------------------------- */

.hq-sheet.is-editable [contenteditable] {
  border-radius: 1.5mm;
  transition: background .12s, box-shadow .12s;
}
.hq-sheet.is-editable [contenteditable]:hover {
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 .5mm rgba(255, 255, 255, .55);
}
.hq-sheet.is-editable [contenteditable]:focus {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 .5mm var(--ui-magenta);
}

.hq-sheet.is-editable .hq-list.is-empty::before {
  content: attr(data-placeholder);
  color: rgba(0, 0, 0, .28);
  font-style: italic;
  pointer-events: none;
}
.hq-sheet.is-editable .hq-list.is-empty > ul { display: none; }

.hq-sheet.is-editable .hq-circle__text:empty::before {
  content: '…';
  color: rgba(0, 0, 0, .25);
}

/* Avatar cliquable */
.hq-head__avatar.is-clickable { cursor: pointer; }
.hq-head__avatar.is-clickable::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .8mm var(--ui-magenta);
  opacity: 0;
  transition: opacity .15s;
}
.hq-head__avatar.is-clickable:hover::after,
.hq-head__avatar.is-clickable:focus::after { opacity: 1; }

.hq-head__avatar.is-clickable .hq-head__avatar-hint {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(196, 42, 118, .88);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 2.6mm;
  font-weight: 700;
  text-align: center;
  padding: 1mm 0;
  opacity: 0;
  transition: opacity .15s;
}
.hq-head__avatar.is-clickable:hover .hq-head__avatar-hint { opacity: 1; }

/* Bouton « cercle mis en évidence » */
.hq-sheet.is-editable .hq-circle__toggle {
  display: block;
  position: absolute;
  right: 11%;
  bottom: 9%;
  width: 4.6mm;
  height: 4.6mm;
  border-radius: 50%;
  border: .4mm solid var(--ui-magenta);
  background: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  padding: 0;
}
.hq-circle--cercle:hover .hq-circle__toggle { opacity: 1; }
.hq-circle--cercle.is-active .hq-circle__toggle { background: var(--ui-magenta); opacity: 1; }

/* ==========================================================================
   6. Éditeur de scénario
   ========================================================================== */

.scenario-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.6rem 2rem;
  background: var(--ui-bg);
}
.scenario-editor h2 {
  font-family: 'Ottertype', 'Inter', sans-serif;
  color: var(--ui-magenta);
  margin: 0 0 1rem;
}
.sc-field { margin-bottom: 1rem; max-width: 46rem; }
.sc-field label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .9rem; }
.sc-field input, .sc-field textarea, .field {
  width: 100%; border: 1px solid #ddd; border-radius: 12px; padding: .6rem .9rem; outline: none;
}
.sc-field input:focus, .sc-field textarea:focus, .field:focus { border-color: var(--ui-magenta); }
.sc-field textarea { min-height: 5rem; resize: vertical; }

.sc-cols { display: flex; gap: 1.5rem; flex-wrap: wrap; max-width: 60rem; }
.sc-col { flex: 1 1 20rem; min-width: 0; }
.sc-col h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: #999; margin: 0 0 .5rem; }
.sc-box { background: #fff; border: 1px solid var(--ui-line); border-radius: 14px; padding: .5rem; min-height: 6rem; }
.sc-box ul { list-style: none; margin: 0; padding: 0; }
.sc-box li {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .4rem; border-radius: 10px;
}
.sc-box li:hover { background: #f7f7f9; }
.sc-box img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #eee; }
.sc-box .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-box .iconbtn { width: 32px; height: 32px; }
.sc-box .iconbtn .ic { width: 20px; height: 20px; }
.sc-actions { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }

/* ==========================================================================
   7. Modales
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.modal__box {
  position: relative;
  width: min(760px, 92vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.modal__box--sm { width: min(430px, 92vw); }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem .8rem .8rem 1.3rem; border-bottom: 1px solid #eee;
}
.modal__head h2 { margin: 0; font-family: 'Ottertype', 'Inter', sans-serif; color: var(--ui-magenta); font-size: 1.15rem; }
.modal__body { padding: 1.2rem 1.3rem 1.4rem; overflow: auto; }
.modal__hint { margin: 0 0 .8rem; font-size: .88rem; color: var(--ui-muted); }
.modal__text { margin: 0; line-height: 1.5; }
.modal__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* Bouton d'une action destructrice, dans une boîte de confirmation */
.btn--danger-solid { background: #c62828; color: #fff; }
.btn--danger-solid:hover { background: #a81f1f; }

/* --- Voile d'attente (fabrication du PDF) ----------------------------- */

.busy {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.busy__box {
  background: #fff; border-radius: 16px; padding: 1.6rem 2rem;
  text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  min-width: 240px;
}
.busy__box p { margin: .9rem 0 0; font-weight: 600; }
.busy__spinner {
  width: 34px; height: 34px; margin: 0 auto;
  border: 3px solid var(--ui-pink);
  border-top-color: var(--ui-magenta);
  border-radius: 50%;
  animation: hq-spin .8s linear infinite;
}
@keyframes hq-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .busy__spinner { animation-duration: 2.4s; }
}

/* --- Conteneur hors écran pour la capture PDF -------------------------
   La fiche doit être rendue à sa taille réelle pour être capturée avec
   netteté : on la place hors du champ de vision plutôt que de la masquer
   (un élément en display:none n'a pas de dimensions à mesurer). */
.hq-export-host {
  position: fixed;
  left: -20000px;
  top: 0;
  width: 210mm;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* Galerie d'abord, ajout ensuite : on choisit bien plus souvent une image
   existante qu'on n'en téléverse une nouvelle. */
.avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .9rem;
}
.avatars:empty { display: none; }
.av { position: relative; text-align: center; cursor: pointer; }
.av img {
  width: 100%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover;
  background: #f0f0f0; border: 3px solid transparent; transition: border-color .12s;
}
.av:hover img { border-color: #f5b9d5; }
.av.is-current img { border-color: var(--ui-magenta); }
.av .lbl {
  display: block; font-size: .72rem; color: var(--ui-muted); margin-top: .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av .del {
  position: absolute; top: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity .12s;
  display: inline-flex; align-items: center; justify-content: center;
}
.av .del .ic { width: 16px; height: 16px; }
.av:hover .del { opacity: 1; }
.av .del:hover { background: #c62828; }

.avatars__empty { grid-column: 1/-1; color: #aaa; margin: 0; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  border: 2px dashed #e2c3d3; border-radius: 16px;
  padding: 1rem; text-align: center; cursor: pointer; color: var(--ui-muted);
  background: #fdf5f9;
  margin-top: 1.3rem;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--ui-magenta); background: var(--ui-pink); }
.dropzone .ic { color: var(--ui-magenta); }
.dropzone__label { color: var(--ui-magenta); font-weight: 700; }
.dropzone__hint { font-size: .82rem; }

/* --- Notification passagère ------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #333; color: #fff; padding: .6rem 1.2rem; border-radius: 999px;
  font-weight: 600; z-index: 200; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  max-width: 90vw; text-align: center;
}
.toast.is-error { background: #c62828; }

/* --- Bandeau « version en cache » ------------------------------------- */

.stalebar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap;
  background: #8a4b00; color: #fff;
  padding: .7rem 1rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.stalebar button {
  border: 0; border-radius: 999px; padding: .4rem 1.1rem;
  background: #fff; color: #8a4b00; font-weight: 700; cursor: pointer;
}

/* ==========================================================================
   8. Adaptation mobile
   ========================================================================== */

@media (max-width: 860px) {

  /* Le volet devient un tiroir coulissant, hors flux */
  .side {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform .24s ease;
    box-shadow: 4px 0 26px rgba(0, 0, 0, .25);
    border-right: 0;
    padding-top: env(safe-area-inset-top);
  }
  .side.is-open { transform: none; }
  .side__close { display: inline-flex; }

  .scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 80;
    opacity: 0;
    transition: opacity .24s;
  }
  .scrim.is-open { opacity: 1; }

  /* Barre supérieure avec l'icône menu */
  .appbar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .35rem .5rem;
    padding-top: calc(.35rem + env(safe-area-inset-top));
    background: #fff;
    border-bottom: 1px solid var(--ui-line);
  }
  .appbar__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .appbar__status { padding-right: .4rem; }

  /* La barre d'outils passe en bas, à portée de pouce, réduite à
     Zoom / Enregistrer / PDF. */
  .toolbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    justify-content: center;
    gap: .6rem;
    border-bottom: 0;
    border-top: 1px solid var(--ui-line);
    padding: .5rem .7rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
  }
  .toolbar__name,
  .toolbar__status,
  .toolbar__spacer { display: none; }

  .zoomgroup { flex: 1 1 auto; max-width: 200px; justify-content: center; }
  .zoomgroup input[type=range] { flex: 1 1 auto; width: auto; min-width: 40px; }

  .toolbar .iconbtn--primary,
  .toolbar .iconbtn--dark,
  .toolbar #btn-print { width: 46px; height: 46px; }
  .toolbar #btn-print { background: #f0f0f3; }

  /* Place pour la barre du bas */
  .stage { padding: 12px 12px 84px; }
  .scenario-editor { padding: 1.1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }

  /* Au doigt, il n'y a pas de survol : le ⋮ est toujours visible. */
  .list .rowmenu { opacity: 1; }
  .list li { padding: .5rem .3rem .5rem .55rem; }

  /* Cibles tactiles plus généreuses */
  .av .del { opacity: 1; width: 30px; height: 30px; }
  .modal__box { width: 94vw; max-height: 88vh; }
  .sc-cols { gap: 1rem; }
}

/* Écrans très étroits : on laisse le champ de zoom respirer */
@media (max-width: 380px) {
  .zoomgroup input[type=range] { min-width: 40px; }
}

/* Appareil sans survol (tactile) : le ⋮ reste visible quelle que soit la taille */
@media (hover: none) {
  .list .rowmenu { opacity: 1; }
  .av .del { opacity: 1; }
}

/* ==========================================================================
   Impression : seule la fiche subsiste
   ========================================================================== */

@media print {
  .side, .toolbar, .appbar, .scrim, .toast, .modal, .popmenu, .empty,
  .busy, .hq-export-host {
    display: none !important;
  }
  .stage { padding: 0; background: #fff; overflow: visible; }
  .stage__scaler { zoom: 1 !important; }
  .stage .hq-sheet { box-shadow: none; }

  /* La fiche affichée reste éditable : il faut neutraliser tous les repères
     de saisie, sans quoi ils s'imprimeraient — en particulier la pastille
     du cercle mis en évidence, qui est un vrai bouton visible à l'écran. */
  .hq-sheet.is-editable .hq-circle__toggle { display: none !important; }
  .hq-sheet.is-editable [contenteditable],
  .hq-sheet.is-editable [contenteditable]:hover,
  .hq-sheet.is-editable [contenteditable]:focus {
    background: none !important;
    box-shadow: none !important;
  }
  .hq-sheet.is-editable .hq-list.is-empty::before,
  .hq-sheet.is-editable .hq-circle__text:empty::before { content: none !important; }
  .hq-head__avatar.is-clickable::after,
  .hq-head__avatar-hint { display: none !important; }
}