/* Triton Technical — 24/7/365 Client Support modal
   Brand-aligned dialog opened by [data-tt-support-modal] triggers.
   Relies on inline page-level CSS vars (--tt-blue, --tt-navy, etc.); literals fallback. */

#tt-support-modal {
  --sm-blue: var(--tt-blue, #10427A);
  --sm-blue-dark: var(--tt-blue-dark, #0A3260);
  --sm-blue-deep: var(--tt-blue-deep, #072548);
  --sm-brass: var(--tt-brass, #C9A663);
  --sm-navy: var(--tt-navy, #0A1628);
  --sm-navy-2: var(--tt-navy-2, #0F1F35);
  --sm-ink: var(--tt-ink, #0F1A2A);
  --sm-ink-3: var(--tt-ink-3, #3A475A);
  --sm-paper: var(--tt-paper, #FFFFFF);
  --sm-paper-3: var(--tt-paper-3, #F2F4F7);
  --sm-line: var(--tt-gray-line, rgba(105, 101, 102, .18));

  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 22, 40, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#tt-support-modal.visible {
  display: flex;
  opacity: 1;
}

#tt-support-modal *,
#tt-support-modal *::before,
#tt-support-modal *::after { box-sizing: border-box; }

.tt-support-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background: var(--sm-paper);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35), 0 0 0 1px rgba(15, 26, 42, .04);
  transform: translateY(16px) scale(.985);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

#tt-support-modal.visible .tt-support-card {
  transform: translateY(0) scale(1);
}

.tt-support-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  z-index: 2;
}

.tt-support-close:hover,
.tt-support-close:focus-visible {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  outline: none;
}

.tt-support-close svg,
.tt-support-close i { width: 1rem; height: 1rem; }

.tt-support-header {
  background: linear-gradient(135deg, var(--sm-navy) 0%, var(--sm-blue-deep) 55%, var(--sm-blue-dark) 100%);
  color: #fff;
  padding: 1.75rem 1.75rem 1.5rem;
  position: relative;
}

.tt-support-header::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--sm-brass);
  border-radius: 2px;
}

.tt-support-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-brass);
  margin: 0 0 .55rem;
}

.tt-support-title {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.012em;
  color: #fff;
  margin: 0 0 .5rem;
}

.tt-support-sub {
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  margin: 0;
  max-width: 22rem;
}

.tt-support-body {
  padding: 1.25rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.tt-support-channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--sm-line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--sm-ink);
  background: var(--sm-paper);
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tt-support-channel:hover,
.tt-support-channel:focus-visible {
  border-color: var(--sm-blue);
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 66, 122, .08), 0 8px 20px rgba(16, 66, 122, .06);
  outline: none;
  transform: translateY(-1px);
}

.tt-support-channel-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 66, 122, .08);
  color: var(--sm-blue);
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}

.tt-support-channel:hover .tt-support-channel-icon,
.tt-support-channel:focus-visible .tt-support-channel-icon {
  background: var(--sm-blue);
  color: #fff;
}

.tt-support-channel-icon svg,
.tt-support-channel-icon i { width: 1.1rem; height: 1.1rem; }

.tt-support-channel-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.tt-support-channel-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-ink-3);
}

.tt-support-channel-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sm-ink);
  letter-spacing: -.005em;
  word-break: break-word;
}

.tt-support-channel:hover .tt-support-channel-value,
.tt-support-channel:focus-visible .tt-support-channel-value {
  color: var(--sm-blue);
}

.tt-support-footer {
  padding: 1rem 1.75rem 1.5rem;
  border-top: 1px solid var(--sm-line);
  background: var(--sm-paper-3);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--sm-ink-3);
  text-align: center;
}

.tt-support-footer strong { color: var(--sm-ink); font-weight: 600; }

@media (max-width: 520px) {
  #tt-support-modal { padding: .75rem; }
  .tt-support-header { padding: 1.5rem 1.25rem 1.25rem; }
  .tt-support-header::after { left: 1.25rem; }
  .tt-support-title { font-size: 1.3125rem; }
  .tt-support-body { padding: 1rem 1.25rem 1.25rem; }
  .tt-support-footer { padding: .9rem 1.25rem 1.25rem; }
  .tt-support-channel-value { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  #tt-support-modal,
  #tt-support-modal .tt-support-card,
  .tt-support-channel { transition: none; }
}