/* TELEGET Support System — Phase 1 public/private UI */
.support-public-page,
.support-private-page { min-height: 100vh; }

.support-main { min-height: calc(100vh - var(--header-h)); }

.support-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.2rem, 2rem + 5vw, 6.5rem) 0 clamp(4rem, 2.6rem + 5vw, 7rem);
  border-bottom: 1px solid var(--c-line);
}

.support-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.support-hero__copy { max-width: 42rem; padding-top: .5rem; }
.support-hero__copy h1 { font-size: clamp(2.35rem, 1.75rem + 2.6vw, 4.1rem); }
.support-hero__copy > p:not(.eyebrow) {
  margin-top: 1.4rem;
  max-width: 39rem;
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

.support-security-note {
  display: grid;
  gap: .35rem;
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(56, 200, 245, .22);
  border-radius: var(--r-md);
  background: rgba(8, 12, 32, .72);
}
.support-security-note strong { color: var(--c-cyan); font-size: .88rem; }
.support-security-note span { color: var(--c-muted); font-size: .82rem; line-height: 1.6; }

.support-form-card {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.7vw, 2rem);
  background: linear-gradient(180deg, rgba(16, 21, 47, .95), rgba(7, 9, 26, .97));
  box-shadow: var(--sh-3);
}

.support-form-heading { margin-bottom: 1.35rem; }
.support-form-heading .eyebrow { margin-bottom: .6rem; }
.support-form-heading h2,
.support-success h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); }
.support-form-heading > p:last-child,
.support-success > p { margin-top: .55rem; color: var(--c-muted); font-size: .9rem; }

.support-form { display: grid; gap: 1rem; }
.support-form-grid { display: grid; gap: 1rem; }
.support-field { display: grid; gap: .45rem; min-width: 0; }
.support-field label { color: #eef3ff; font-size: .82rem; font-weight: 700; }
.support-optional { margin-left: .35rem; color: var(--c-faint); font-size: .72rem; font-weight: 500; }

.support-field input,
.support-field select,
.support-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: rgba(5, 7, 25, .86);
  color: var(--c-ink);
  font: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-fast);
}
.support-field input,
.support-field select { min-height: 48px; padding: 0 .85rem; }
.support-field textarea { min-height: 150px; padding: .8rem .85rem; resize: vertical; line-height: 1.6; }
.support-field input:hover,
.support-field select:hover,
.support-field textarea:hover { border-color: var(--c-line-3); }
.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(56, 200, 245, .12);
}
.support-field [aria-invalid="true"] { border-color: rgba(255, 137, 152, .62); }
.support-field-help,
.support-field-error,
.support-form-privacy { font-size: .74rem; line-height: 1.55; }
.support-field-help,
.support-form-privacy { color: var(--c-faint); }
.support-field-error { color: #ffb5bf; font-weight: 650; }
.support-form-privacy { max-width: 42rem; }
.support-submit { justify-self: start; margin-top: .2rem; }

.support-alert {
  margin-bottom: 1rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  padding: .8rem .9rem;
  font-size: .82rem;
  line-height: 1.55;
}
.support-alert--error {
  border-color: rgba(255, 137, 152, .34);
  background: rgba(138, 35, 54, .16);
  color: #ffc1c8;
}
.support-alert--success {
  border-color: rgba(61, 220, 151, .3);
  background: rgba(61, 220, 151, .08);
  color: #baf2d7;
}

.support-success { display: grid; gap: .35rem; }
.support-success .eyebrow { margin-bottom: .35rem; }
.support-success .btn { justify-self: start; margin-top: 1rem; }

.support-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.support-expectations { background: var(--c-surface); }
.support-step-grid { display: grid; gap: 1rem; }
.support-step-grid article {
  min-width: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1.25rem;
  background: rgba(8, 12, 32, .7);
}
.support-step-grid article > span {
  display: inline-block;
  margin-bottom: .85rem;
  font-family: var(--ff-mono);
  color: var(--c-cyan);
  font-size: .72rem;
  letter-spacing: .12em;
}
.support-step-grid h3 { font-size: 1.05rem; }
.support-step-grid p { margin-top: .55rem; color: var(--c-muted); font-size: .84rem; line-height: 1.65; }

/* Private ticket page ---------------------------------------------------- */
.support-private-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
  background: rgba(5, 7, 25, .96);
}
.support-private-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.support-private-brand img { width: auto; height: 30px; }
.support-private-label {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  padding: .4rem .72rem;
  color: var(--c-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.support-private-main { padding: clamp(2rem, 1.2rem + 4vw, 4.5rem) 0 5rem; }
.support-ticket-shell { display: grid; gap: 1rem; }
.support-ticket-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
}
.support-ticket-heading h1 { font-size: clamp(1.8rem, 1.4rem + 1.7vw, 2.7rem); }
.support-ticket-heading p:not(.eyebrow) { margin-top: .65rem; color: var(--c-muted); }

.support-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(56, 200, 245, .24);
  border-radius: var(--r-pill);
  padding: .3rem .75rem;
  background: rgba(56, 200, 245, .08);
  color: #a7edf7;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.support-status[data-status="awaiting_reply"] { border-color: rgba(244, 200, 74, .3); background: rgba(244, 200, 74, .08); color: #f5db91; }
.support-status[data-status="in_progress"] { border-color: rgba(124, 58, 237, .3); background: rgba(124, 58, 237, .1); color: #c8b5ff; }
.support-status[data-status="resolved"] { border-color: rgba(61, 220, 151, .3); background: rgba(61, 220, 151, .08); color: #baf2d7; }
.support-status[data-status="closed"] { border-color: rgba(154, 166, 197, .28); background: rgba(154, 166, 197, .07); color: #c6cede; }

.support-ticket-meta {
  display: grid;
  gap: .65rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1rem;
  background: rgba(8, 12, 32, .7);
}
.support-ticket-meta div { min-width: 0; }
.support-ticket-meta dt { color: var(--c-faint); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.support-ticket-meta dd { margin: .2rem 0 0; color: var(--c-text); font-size: .84rem; overflow-wrap: anywhere; }

.support-conversation {
  display: grid;
  gap: .8rem;
  margin-top: .5rem;
}
.support-message {
  width: min(100%, 48rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1rem;
  background: rgba(8, 12, 32, .82);
}
.support-message--admin {
  margin-left: auto;
  border-color: rgba(56, 200, 245, .25);
  background: rgba(10, 31, 48, .76);
}
.support-message__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .55rem;
}
.support-message__meta strong { color: var(--c-ink); font-size: .78rem; }
.support-message__meta time { color: var(--c-faint); font-size: .68rem; }
.support-message__body { color: var(--c-text); font-size: .88rem; line-height: 1.7; overflow-wrap: anywhere; white-space: normal; }

.support-reply-card,
.support-access-card {
  margin-top: .5rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: clamp(1rem, .8rem + 1vw, 1.5rem);
  background: rgba(10, 15, 38, .9);
}
.support-reply-card h2,
.support-access-card h1 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.65rem); }
.support-reply-card > p,
.support-access-card > p { margin-top: .45rem; color: var(--c-muted); font-size: .83rem; }
.support-reply-card .support-form { margin-top: 1rem; }

.support-private-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.support-end-session { margin: 0; }
.support-end-session button { font: inherit; }

.support-access-state {
  margin-top: 1rem;
  min-height: 1.4rem;
  color: var(--c-muted);
  font-size: .8rem;
}
.support-access-state[data-state="error"] { color: #ffb5bf; }

@media (min-width: 760px) {
  .support-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .support-ticket-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .support-hero__grid { grid-template-columns: minmax(0, .82fr) minmax(460px, 1fr); }
}

@media (max-width: 640px) {
  .support-hero { padding-top: 2.5rem; }
  .support-form-card { border-radius: var(--r-md); }
  .support-submit,
  .support-success .btn { width: 100%; }
  .support-ticket-heading { flex-direction: column; }
  .support-message { width: 100%; }
  .support-message--admin { margin-left: 0; }
  .support-private-actions .btn { width: 100%; }
}

/* Support Phase 4 — customer-visible predefined resources */
.support-resource-list { display: grid; gap: .55rem; margin-top: .85rem; }
.support-resource-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 26rem;
  padding: .75rem .8rem;
  border: 1px solid rgba(50, 196, 255, .22);
  border-radius: .85rem;
  background: rgba(16, 39, 56, .6);
  text-decoration: none;
}
.support-resource-card:hover { border-color: rgba(50, 196, 255, .42); background: rgba(16, 48, 66, .74); }
.support-resource-card > span:last-child { display: grid; gap: .18rem; min-width: 0; }
.support-resource-card strong { color: #eef9ff; font-size: .8rem; line-height: 1.35; }
.support-resource-card small { color: var(--c-faint); font-size: .68rem; line-height: 1.4; }
.support-resource-icon {
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 2.45rem;
  border-radius: .7rem;
  background: rgba(50, 196, 255, .1);
  color: var(--c-cyan);
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .05em;
}