/* ═══════════════════════════════════════════════════════════════════════════
   mg-help.css — hjälpsystemet, delat av alla moduler.

   Ersätter tre copy-pastade uppsättningar som glidit isär:
     .ph-help  låg i mg-text.css, mg-sociala-medier.css OCH inline i
               broschyr.html — med olika bakgrund, ram och marginal.
     .acc-help låg i mg-brand.css med avvikande storlek (.7rem/600 mot
               .82rem/800), vilket gjorde textmodulens dragspel visuellt
               annorlunda än dess egna panelrubriker.
     .help-icon/.help-wrap i mg-text.css användes aldrig alls.

   Använder bara variabler ur mg-tokens.css, som varje sida laddar — därför
   fungerar filen även i planritningar, juridik och hem, som saknar egen
   modul-CSS för hjälp.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Frågetecknet ────────────────────────────────────────────────────────
   En enda definition. .ph-help sitter i panelrubriker (marginal åt vänster,
   direkt efter titeln). .acc-help sitter i dragspelsrader före chevronen
   och behöver därför marginalen åt höger i stället — enda skillnaden.     */
.ph-help,
.acc-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--p);
  border-radius: 50%;
  background: rgba(13, 38, 63, .10);
  color: var(--text);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: all .18s;
  /* I inline-sammanhang (rubriker som inte är flexrader) hänger en inline-flex
     annars på sin baslinje och hamnar för lågt — tydligast i stora
     display-rubriker. Ignoreras i flexrader, där align-items styr. */
  vertical-align: middle;
}

.ph-help { margin-left: .45rem; }
.acc-help { flex: 0 0 22px; margin-right: .35rem; }

/* Frågetecken i en liten etikett — skyltpanelens fältetiketter är .72rem
   versaler, och 22 px bredvid dem läser som en knapp i stället för en symbol
   och trycker dessutom isär raden. Samma cirkel, nedskalad. */
.ph-help--sm {
  width: 17px;
  height: 17px;
  margin-left: .35rem;
  font-size: .66rem;
}

/* ─── Linjering i panelrubriker ───────────────────────────────────────────
   Sitter frågetecknet direkt efter rubriktexten hamnar det på olika ställen
   i varje rad, eftersom rubrikerna är olika långa. Här skjuts det i stället
   till högerkanten så att alla hamnar i samma kolumn.

   Pilen måste sluta konkurrera: två syskon med margin-left:auto DELAR på det
   lediga utrymmet i stället för att det första tar allt, och då blir raderna
   nästan — men inte riktigt — linjerade. Mätt i broschyren: spridningen gick
   från 191 px till 98 px med bara den första regeln, och till 0 px med båda. */
.ph > .ph-help { margin-left: auto; }
.ph > .ph-help ~ .ph-arrow { margin-left: .5rem; }

.ph-help:hover,
.acc-help:hover {
  background: var(--mg-navy);
  color: #fff;
  border-color: var(--mg-navy);
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(13, 38, 63, .35);
}

.ph-help:focus-visible,
.acc-help:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

/* ─── Frågetecken inuti en actionknapp ────────────────────────────────────
   HTML tillåter inte <button> inuti <button>. För att ändå få symbolen att
   ligga INNE i knappen byggs paret som en delad knapp: omslaget bär formen
   och färgen, de två knapparna inuti är genomskinliga syskon med ett
   hårstreck emellan.                                                       */
.mg-splitbtn {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: var(--mg-navy);
  color: #fff;
}

.mg-splitbtn > .mg-splitbtn__main {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}

/* Frågetecknet behåller sin cirkel — samma form som överallt annars, bara
   inverterad så den läser mot navyn. Ett avdelarstreck i stället för cirkel
   gjorde att symbolen inte längre kändes igen som samma element. */
.mg-splitbtn > .mg-splitbtn__help {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0 10px 0 2px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
}

.mg-splitbtn > .mg-splitbtn__help:hover {
  background: #fff;
  border-color: #fff;
  color: var(--mg-navy);
  transform: scale(1.12);
  box-shadow: none;
}

.mg-splitbtn:hover { filter: brightness(1.12); }
.mg-splitbtn:has(> .mg-splitbtn__help:hover) { filter: none; }

/* ─── Sidopanelen ────────────────────────────────────────────────────────
   Baslinje. Text-, broschyr- och sociala medier-modulerna laddar sin egen
   CSS EFTER den här filen och kan fortsätta överstyra utseendet; för
   planritningar, juridik och hem är det här allt som finns.

   Z-INDEX: hjälpen ligger ÖVER allt annat, med flit. Frågetecken sitter inte
   bara i sidan utan också inne i modaler — dikteringen (#mgdOverlay, 950) är
   den tydligaste. Med gamla 490/500 öppnades panelen bakom modalen som just
   bett om hjälp, alltså osynlig. Värdena här ligger över appens högsta
   överlägg (annonsvakten 10000, publiceringsflödet och toasts 9999) så att
   samma sak inte kan hända igen när ett frågetecken sätts i en ny modal.  */
#helpOverlay {
  position: fixed;
  inset: 0;
  z-index: 10490;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
#helpOverlay.is-open { opacity: 1; pointer-events: all; }

#helpPanel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -6px 0 32px rgba(13, 38, 63, .18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
#helpPanel.open,
#helpPanel.is-open { transform: translateX(0); }

#helpPanel .hp-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-shrink: 0;
  padding: 1.15rem 1.3rem;
  background: linear-gradient(135deg, var(--mg-navy) 0%, var(--mg-navy-2) 100%);
  border-bottom: 3px solid var(--a);
  color: #fff;
}
#helpPanel .hp-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(168, 119, 66, .25);
  font-size: 1.15rem;
}
#helpPanel .hp-header-title {
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
}
#helpPanel .hp-header-sub { margin-top: 2px; font-size: .76rem; opacity: .7; }
#helpPanel .hp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s;
}
#helpPanel .hp-close:hover { background: rgba(168, 119, 66, .4); }

#helpPanel .hp-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.3rem;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: .92rem;
  line-height: 1.7;
}
#helpPanel .hp-body h4 {
  margin: 1.05rem 0 .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
  color: var(--a);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#helpPanel .hp-body h4:first-child { margin-top: 0; }
#helpPanel .hp-body p { margin-bottom: .6rem; color: var(--text); }
#helpPanel .hp-body ul { margin-bottom: .6rem; padding-left: 1.2rem; }
#helpPanel .hp-body li { margin-bottom: .3rem; color: var(--text); }
#helpPanel .hp-body .hp-tip,
#helpPanel .hp-body .hp-warn {
  margin: .7rem 0;
  padding: .65rem .85rem;
  border-radius: 0 8px 8px 0;
  font-size: .86rem;
  color: var(--text);
}
#helpPanel .hp-body .hp-tip {
  border-left: 3px solid var(--a);
  background: linear-gradient(135deg, rgba(168, 119, 66, .10) 0%, rgba(168, 119, 66, .04) 100%);
}
#helpPanel .hp-body .hp-warn {
  border-left: 3px solid var(--g);
  background: linear-gradient(135deg, rgba(168, 119, 66, .14) 0%, rgba(168, 119, 66, .05) 100%);
}
#helpPanel .hp-body code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--card-stat);
  color: var(--text);
  font-size: .85rem;
}

#helpPanel .hp-divider {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  padding: .55rem 1.1rem;
  border-top: 1px solid var(--line);
}
#helpPanel .hp-divider::before,
#helpPanel .hp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
#helpPanel .hp-divider span {
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

#helpPanel .hp-chat-area {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  max-height: 280px;
  border-top: 1px solid var(--line);
  background: var(--mg-surface);
}
#helpPanel .hp-messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .45rem;
  overflow-y: auto;
  padding: .65rem .8rem;
}
#helpPanel .hp-messages::-webkit-scrollbar { width: 3px; }
#helpPanel .hp-messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
#helpPanel .hp-msg {
  max-width: 88%;
  padding: .45rem .65rem;
  border-radius: 10px;
  font-family: var(--font);
  font-size: .8rem;
  line-height: 1.5;
  animation: mgHelpMsgIn .18s ease;
}
@keyframes mgHelpMsgIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
#helpPanel .hp-msg.bot {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
  background: #fff;
  color: var(--text);
}
#helpPanel .hp-msg.user {
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  background: var(--mg-navy);
  color: #fff;
}
#helpPanel .hp-msg.typing {
  align-self: flex-start;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-soft);
  font-size: .78rem;
  font-style: italic;
}

#helpPanel .hp-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .35rem .8rem 0;
}
#helpPanel .hp-sugg,
#helpPanel .hp-suggestion {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
#helpPanel .hp-sugg:hover,
#helpPanel .hp-suggestion:hover {
  background: var(--mg-navy);
  border-color: var(--mg-navy);
  color: #fff;
}

#helpPanel .hp-input-row {
  display: flex;
  gap: .4rem;
  padding: .55rem .8rem;
  border-top: 1px solid var(--line);
}
#helpPanel .hp-input-row input {
  flex: 1;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  outline: none;
  background: #fff;
  font-family: var(--font);
  font-size: .82rem;
  transition: border-color .15s;
}
#helpPanel .hp-input-row input:focus { border-color: var(--g); }
#helpPanel .hp-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--mg-navy);
  color: #fff;
  cursor: pointer;
}
#helpPanel .hp-send:hover { filter: brightness(1.1); }
#helpPanel .hp-send svg { display: block; width: 17px; height: 17px; fill: currentColor; }

/* ─── Mörkt tema ───────────────────────────────────────────────────────
   Frågetecknets mörka läge ligger kvar i mg-dark.css, som är temalagret och
   sätter sina regler med !important. Att upprepa dem här hade bara skapat en
   ny dubblett — exakt problemet filen finns för att lösa. */
body[data-theme="dark"] #helpPanel,
body[data-theme="dark"] #helpPanel .hp-body,
body[data-theme="dark"] #helpPanel .hp-msg.bot,
body[data-theme="dark"] #helpPanel .hp-msg.typing,
body[data-theme="dark"] #helpPanel .hp-sugg,
body[data-theme="dark"] #helpPanel .hp-suggestion,
body[data-theme="dark"] #helpPanel .hp-input-row input {
  background: var(--mg-surface);
  color: var(--text);
}