/* Ergül Keskin · sourced help (Paket3D). A small addition to the 08 dialog layer (.dlg).
   One native modal <dialog>; the launcher is an ordinary link until the script takes it over.
   Without the script it stays in the dock at the end of the page; the script moves it once into the header's reserved slot.
   Both places are in the document flow: it never covers text, tables or actions. */
.ekh-dock {
  box-sizing: content-box; display: flex; justify-content: flex-end; min-height: 44px;
  padding: 0 max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 1rem; background: var(--paper-2);
}
.ekh-open {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: .55rem 1rem; white-space: nowrap;
  background: none; color: var(--navy, #072652); border: 1px solid var(--navy, #072652); border-radius: 2px;
  font-family: inherit; font-weight: 600; font-size: .9375rem; line-height: 1.2; text-decoration: none;
}
.ekh-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.ekh-open:focus-visible { outline: 3px solid var(--navy, #072652); outline-offset: 3px; }
/* In the header: a compact ? with the same accessible name; the words appear where the bar has room. */
.ekh-open--head { justify-content: center; gap: .45rem; padding: 0; width: 44px; height: 44px; border-color: var(--rule, #D6CCB8); }
.ekh-open__mark { font-size: 1.125rem; font-weight: 700; line-height: 1; }
.ekh-open__text { display: none; }
@media (min-width: 1480px) {
  .ekh-open--head { width: auto; padding: 0 .75rem; }
  .ekh-open__text { display: inline; }
}

/* One scroll, the panel's own: the answer takes the room it needs and the other controls follow it. Only the title and close stay in view. */
.ekh { width: min(38rem, calc(100vw - 1rem)); overflow: hidden; }
/* The scroller has no top padding: the head carries it, so nothing can scroll into a strip above the head. The head also carries the gold rule it would otherwise cover. */
.ekh .dlg__inner { --ekh-pad: clamp(1.25rem, 4vw, 2rem); display: flex; flex-direction: column; gap: .75rem; max-height: calc(100svh - 1.5rem); padding: 0 var(--ekh-pad) var(--ekh-pad); overflow: hidden auto; overscroll-behavior: contain; }
.ekh .dlg__inner::before { content: none; }
.ekh .dlg__inner > * { flex: none; min-width: 0; max-width: 100%; }
.ekh .dlg__head { position: sticky; top: 0; z-index: 1; max-width: none; margin-inline: calc(-1 * var(--ekh-pad)); padding: calc(var(--ekh-pad) + .25rem) var(--ekh-pad) .25rem; background: var(--paper-2, #fff); box-shadow: inset 0 3px 0 var(--metal, #DFAB2D); }
.ekh .dlg__close { display: inline-flex; align-items: center; justify-content: center; }
.ekh__intro, .ekh__privacy, .ekh__note { margin: 0; font-size: .9rem; line-height: 1.45; }
.ekh__privacy { color: var(--muted, #4A5568); }
.ekh__log { display: flex; flex-direction: column; gap: .6rem; min-height: 11.25rem; }
.ekh__log:empty { display: none; }
.ekh__turn { padding: .25rem 0 .25rem .75rem; border-left: 2px solid var(--rule, #D6CCB8); scroll-margin-top: 4rem; }
.ekh__turn--you { border-left-color: var(--navy, #072652); }
.ekh__turn p { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.ekh__turn p:last-child { margin-bottom: 0; }
.ekh__who { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.ekh__source { font-size: .875rem; }
.ekh__actions, .ekh__options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.ekh__action, .ekh__option, .ekh__offer, .ekh__topic, .ekh__reset {
  display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: .45rem .8rem; border: 1px solid var(--rule, #B7AD98);
  background: #fff; color: var(--ink, #0D1D3A); border-radius: 2px; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; text-decoration: none;
}
.ekh__action:focus-visible, .ekh__option:focus-visible, .ekh__offer:focus-visible, .ekh__topic:focus-visible, .ekh__reset:focus-visible,
.ekh .dlg__close:focus-visible, .ekh__send:focus-visible, .ekh__source-link:focus-visible, .ekh input:focus-visible, .ekh textarea:focus-visible {
  outline: 3px solid var(--navy, #072652); outline-offset: 2px;
}
/* The one gold element: an action that really moves the visitor forward (the request form). */
.ekh__action--go { border-color: transparent; background: var(--metal, #DFAB2D); color: var(--navy-deep, #04183A); font-weight: 700; }
.ekh__topics ul, .ekh__known ul, .ekh__pro ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
/* Known treatment, course or products: its name, three questions about it, and a separate way to another topic. */
.ekh__about { margin: 0 0 .45rem; font-weight: 700; }
.ekh__change { display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; padding: 0; border: 0; background: none; color: var(--ink, #0D1D3A); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.ekh__change:focus-visible { outline: 3px solid var(--navy, #072652); outline-offset: 2px; }
.ekh__label { display: block; font-weight: 700; margin-bottom: .3rem; }
.ekh__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.ekh__row input { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: .5rem .65rem; font: inherit; border: 1px solid #8E999B; border-radius: 2px; background: #fff; color: var(--ink, #0D1D3A); }
.ekh__send { min-height: 44px; min-width: 44px; }
.ekh__handoff { border-top: 1px solid var(--rule, #D6CCB8); padding-top: .75rem; }
.ekh__handoff h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.ekh__form { display: flex; flex-direction: column; gap: .6rem; }
.ekh__field { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .9rem; }
.ekh__field input, .ekh__field textarea { min-height: 44px; padding: .5rem .65rem; font: inherit; font-weight: 400; border: 1px solid #8E999B; border-radius: 2px; background: #fff; color: var(--ink, #0D1D3A); }
.ekh__branches { border: 1px solid var(--rule, #D6CCB8); padding: .5rem .75rem; margin: 0; }
.ekh__choice, .ekh__ack { display: flex; gap: .55rem; align-items: center; min-height: 44px; font-size: .92rem; }
.ekh__ack input, .ekh__choice input { width: 22px; height: 22px; flex: none; margin: 0; }
.ekh__status:empty { display: none; }
.ekh__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
@media (max-width: 380px) {
  .ekh .dlg__inner { --ekh-pad: 1rem; }
  .ekh .dlg__title { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ekh, .ekh * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
