/*
---------------------------------------------------------------------------
KIRZEN
---------------------------------------------------------------------------
Project      : Kirzen 4.2
Organization : Kirzen
License      : Proprietary
Copyright    : © 2026 Kirzen. All rights reserved.

This source file is proprietary software developed and maintained by
Kirzen as part of the Kirzen 4.2 project.

Unauthorized copying, redistribution, modification, publication,
or reproduction of this file or any portion of its contents is strictly
prohibited without prior written authorization from Kirzen.
---------------------------------------------------------------------------
*/

/* ============================================================================
   SUPPORT DESK
   Help, FAQ and Discord share one floating dock instead of a header strip.
   The Help page reads as a conversation: you write what happened, answers
   come back as you type, and "Open a ticket" carries the same text on into the
   form. The ticket system underneath (form, email, link with a key) is the
   one in support.css and support.js; only the layout and the look live here.
   ============================================================================ */

.support-page {
  max-width: 1040px;

  /* Room for the dock, so it never sits on top of the last line. */
  padding-bottom: 110px;
}

.support-page .hidden {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   Dock
   ---------------------------------------------------------------------------- */

.dock {
  position: fixed;
  z-index: 40;

  bottom: 22px;
  left: 50%;

  display: flex;
  gap: 4px;

  padding: 5px;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);

  background: rgba(17, 17, 19, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);

  transform: translateX(-50%);
}

.dock-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 18px;

  border: 1px solid transparent;
  border-radius: var(--radius-full);

  color: var(--text-secondary);

  font-size: 13px;
  font-weight: 500;
  text-decoration: none;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.dock-item:hover {
  color: var(--text-primary);
}

.dock-item[aria-current="page"] {
  border-color: rgba(88, 101, 242, 0.6);

  background: rgba(88, 101, 242, 0.14);
  color: var(--text-primary);
}

.dock-item:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Help page
   ---------------------------------------------------------------------------- */

.desk {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 48px;

  align-items: start;
}

.desk-eyebrow {
  display: block;

  color: #818cf8;

  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desk-title {
  margin: 8px 0 8px;

  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
}

.desk-sub {
  max-width: 520px;

  margin: 0 0 22px;

  color: var(--text-secondary);

  font-size: 14.5px;
  line-height: 1.65;
}

.composer {
  border: 1px solid var(--border-strong);
  border-radius: 16px;

  background: var(--bg-surface);

  transition: border-color var(--transition-normal);
}

.composer:focus-within {
  border-color: rgba(88, 101, 242, 0.65);
}

.composer-input {
  display: block;

  width: 100%;

  padding: 18px 18px 8px;

  border: 0;

  background: transparent;
  color: var(--text-primary);

  font: inherit;
  font-size: 15.5px;

  outline: none;
}

.composer-input::placeholder {
  color: var(--text-muted);
}

.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 8px 12px 12px 18px;
}

.composer-hint {
  color: var(--text-muted);

  font-size: 12px;
}

.composer-open {
  min-height: 36px;

  padding: 8px 16px;

  font-size: 13px;
}

.support-page .help-results {
  margin-top: 12px;
}

.support-page .support-ticket {
  margin-top: 18px;
}

/* ----------------------------------------------------------------------------
   How a ticket works
   ---------------------------------------------------------------------------- */

.how {
  margin-top: 44px;
}

.how-title {
  margin: 0 0 14px;

  color: var(--text-muted);

  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 0;
  padding: 0;

  list-style: none;
}

.how-steps li {
  padding: 0 18px;

  border-left: 1px solid var(--border-color);
}

.how-steps li:first-child {
  padding-left: 0;

  border-left: 0;
}

.how-n {
  display: block;

  color: #818cf8;

  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
}

.how-steps strong {
  display: block;

  margin-top: 4px;

  font-size: 14px;
  font-weight: 600;
}

.how-steps p {
  margin: 6px 0 0;

  color: var(--text-secondary);

  font-size: 12.5px;
  line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   Side: your tickets
   ---------------------------------------------------------------------------- */

.desk-side {
  padding-left: 28px;

  border-left: 1px solid var(--border-color);
}

.side-title {
  margin: 0 0 14px;

  color: var(--text-muted);

  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desk-side .support-central {
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.central-account {
  margin-top: 16px;
  padding-top: 16px;

  border-top: 1px solid var(--border-color);
}

.central-account-text {
  margin: 0 0 12px;

  color: var(--text-secondary);

  font-size: 12.5px;
  line-height: 1.6;
}

.central-account.is-signed .central-login {
  display: none;
}

.desk-side .support-central-note {
  margin: 14px 0 0;

  color: var(--text-muted);

  font-size: 12px;
  line-height: 1.6;
}

.desk-rules {
  display: flex;
  gap: 10px;

  margin: 26px 0 0;

  color: var(--text-muted);

  font-size: 12.5px;
}

.desk-rules a {
  color: var(--accent-primary);
  text-decoration: none;
}

.desk-rules a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .desk {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .desk-side {
    padding-left: 0;

    border-left: 0;
  }
}

@media (max-width: 640px) {
  .how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .how-steps li,
  .how-steps li:first-child {
    padding: 0 0 0 14px;

    border-left: 1px solid var(--border-color);
  }

  .dock {
    right: 0;
    bottom: 0;
    left: 0;

    justify-content: space-around;

    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));

    border-width: 1px 0 0;
    border-radius: 0;

    transform: none;
  }

  .dock-item {
    flex: 1;
    justify-content: center;

    padding: 10px 8px;
  }
}

/* ----------------------------------------------------------------------------
   FAQ
   The same rows as before, drawn as hairlines instead of cards.
   ---------------------------------------------------------------------------- */

.faq-page .faq-wrap {
  max-width: 760px;

  margin: 0;
}

.faq-page .accordion {
  gap: 0;
}

.faq-page .accordion-item {
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;

  background: transparent;
}

.faq-page .accordion-item:last-child {
  border-bottom: 1px solid var(--border-color);
}

.faq-page .accordion-item.open {
  border-color: var(--border-color);

  background: transparent;
}

.faq-page .accordion-trigger {
  padding-right: 0;
  padding-left: 0;
}

.faq-page .accordion-body {
  padding-left: 0;
}

/* ----------------------------------------------------------------------------
   Discord
   ---------------------------------------------------------------------------- */

.discord-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 560px;

  margin: 40px auto 0;

  text-align: center;
}

.discord-seal {
  margin-bottom: 20px;
}

.discord-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.discord-ticket {
  color: var(--accent-primary);

  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.discord-ticket:hover {
  text-decoration: underline;
}

.discord-note {
  margin: 14px 0 0;

  color: var(--text-muted);

  font-size: 12px;
}

.discord-note + .discord-note {
  margin-top: 4px;
}

.support-page .support-ticket {
  max-width: none;
}