/* sections.css — unified collapsible "panel-section" component used by
   Integrations, Settings, and Server tabs. One vocabulary for all three so
   they look and feel the same.

   Anatomy:
     <details class="panel-section">                ← outer card
       <summary class="panel-section-head">         ← header bar (clickable)
         <span class="panel-section-title">…</span>
         <span class="panel-section-chevron">▾</span>
       </summary>
       <div class="panel-section-body">             ← inner padding container
         <p class="section-intro">…</p>             ← short copy at top
         …content…                                   ← whatever the section needs
         <div class="section-foot">…</div>          ← footer row, right-aligned
       </div>
     </details>

   Sub-components used inside bodies:
     .subpanel / .subpanel-title  — labelled sub-card (no border, just padding+title)
     .field / .row.tight          — form layouts shared with settings.css
*/

/* The panel-stack lets every view consistently flow its sections with a
   single gap setting, regardless of what each section contains. Sections
   are full-width by default but can opt into half-width via [data-half]
   so two cards sit side-by-side on wider screens. */
.panel-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.panel-stack > .panel-section {
  flex: 1 1 100%;
  min-width: 0;
}

/* Wider screens: stretch up to a comfortable read length but keep the gutter. */
@media (min-width: 1100px) {
  .panel-stack { max-width: 980px }
}

/* Two-column lane: opted-in sections sit at 50% width when the panel is
   wide enough that two cards still breathe. Below the breakpoint they
   fall back to full width and stack naturally. */
@media (min-width: 760px) {
  .panel-stack > .panel-section[data-half] {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}

/* ── Outer section card ─────────────────────────────────────────── */
details.panel-section {
  /* Override the bare `details` rule from settings.css. */
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  padding: 0;
  transition: border-color .18s ease, background .18s ease;
}
details.panel-section[open] {
  border-color: var(--border2);
}
/* Cards JS hides outright (the Install-an-extension card while the extensions
   switch is off) — explicit so no later display rule can undo the attribute. */
details.panel-section[hidden] { display: none }

/* Header bar */
.panel-section > summary.panel-section-head {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .9rem 1.15rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  transition: background .15s ease;
}
.panel-section > summary.panel-section-head::-webkit-details-marker { display: none }
.panel-section > summary.panel-section-head::before { content: none }  /* nuke base chevron */
.panel-section > summary.panel-section-head:hover {
  background: var(--surface-hover);
}
.panel-section > summary.panel-section-head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus-outline);
}
.panel-section[open] > summary.panel-section-head {
  border-bottom: 1px solid var(--border);
}

.panel-section-title {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.panel-section-emoji {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  width: 1.1em;
  text-align: center;
}
.panel-section-chevron {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease;
}
.panel-section[open] > summary .panel-section-chevron { transform: rotate(180deg) }

/* Body container — consistent inner padding + vertical rhythm. */
.panel-section-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.panel-section-body > p { margin: 0 }
.panel-section-body > .row { margin: 0 }
/* Drop empty status/thanks slots out of the flex flow so the section
   doesn't carry a phantom gap below the last visible action. */
.panel-section-body > .hint:empty { display: none }

/* The first short paragraph in a body — slightly muted intro copy. */
.section-intro {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Footer row — actions sit right-aligned at the bottom. */
.section-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin: 0;
}
.section-foot--center { justify-content: center }

/* ── Sub-panels (a labelled chunk inside a body) ────────────────── */
.subpanel {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .9rem 1rem;
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  background: var(--surface-subtle);
}
.subpanel-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Messaging section: Telegram + Other apps stack centered. The Telegram
   subpanel hosts a 2-column layout (Mintbot bot vs custom bot), so it
   gets a wider lane than the LLM provider list above. */
.panel-section[data-section="messaging"] .subpanel {
  max-width: 680px;
  width: 100%;
  margin-inline: auto;
}

.list-heading {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 600;
}

/* ── Field-style form layout (mirrors feedback-card .field) ─────── */
.panel-section-body .field {
  display: block;
}
.panel-section-body .field label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: .25rem;
}
.panel-section-body .field + .field { margin-top: .15rem }

/* Tight row — single-line input + button, smaller gap than the default .row. */
.row.tight { gap: .4rem }

/* On narrow screens .row collapses each child to full width so the input
   and its button stack instead of cramming into the same line. */
@media (max-width: 520px) {
  .panel-section-body .row {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-section-body .row > button { width: 100% }
}