/*
 * Charcoal Spit Roasters contact launcher.
 *
 * Uses the site's own tokens: ash ground, charcoal panel, ember accent, Archivo
 * at expanded width for display and IBM Plex Mono for labels and data only.
 * Square throughout, because the build standards rule out pill geometry and this
 * site has no rounded corners anywhere else.
 *
 * Fonts are referenced by family and never loaded here. Archivo and IBM Plex
 * Mono already arrive on every page, and this site already carries three
 * duplicate Google Fonts links without a fourth being added.
 */

.csr-cw {
  --cw-ash: #c7c2ba;
  --cw-paper: #edeae4;
  --cw-char: #1c1a18;
  --cw-char-2: #2b2825;
  --cw-steel: #6e7378;
  --cw-ember: #c4501b;
  --cw-line: rgba(237, 234, 228, .18);
  --cw-disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cw-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 9999;
  font-family: var(--cw-disp);
}

.csr-cw *, .csr-cw *::before, .csr-cw *::after { box-sizing: border-box; border-radius: 0; }

/* launcher */
.csr-cw-launch {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cw-char); color: var(--cw-paper);
  border: 1px solid var(--cw-char);
  border-bottom: 2px solid var(--cw-ember);
  font-family: var(--cw-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; padding: 14px 20px; cursor: pointer;
  min-height: 48px; box-shadow: 0 10px 28px rgba(28, 26, 24, .32);
}
.csr-cw-launch:hover { background: var(--cw-char-2); color: var(--cw-paper); }
.csr-cw-launch-icon { display: inline-flex; width: 20px; height: 20px; }
.csr-cw-launch-icon svg { width: 100%; height: 100%; }

/* panel */
.csr-cw-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(370px, calc(100vw - 28px));
  background: var(--cw-char); color: var(--cw-paper);
  border: 1px solid var(--cw-char);
  box-shadow: 0 24px 56px rgba(28, 26, 24, .45);
  overflow: hidden;
}

.csr-cw-head {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px; padding: 18px;
  background: var(--cw-char-2); border-bottom: 1px solid var(--cw-line);
}
.csr-cw-mark {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cw-ember); color: #fff;
  font-family: var(--cw-disp); font-variation-settings: "wdth" 118; font-weight: 700;
  font-size: 14px; letter-spacing: .06em;
}
.csr-cw-id strong {
  display: block; font-family: var(--cw-disp); font-variation-settings: "wdth" 118;
  font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.1;
  color: var(--cw-paper);
}
.csr-cw-sub { display: block; font-size: 12.5px; color: var(--cw-steel); margin-top: 4px; line-height: 1.3; }

.csr-cw-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cw-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--cw-line);
  white-space: nowrap;
}
.csr-cw-dot { width: 7px; height: 7px; background: var(--cw-steel); display: inline-block; }
.csr-cw-status.is-online { color: #7fbf83; border-color: rgba(127, 191, 131, .45); }
.csr-cw-status.is-online .csr-cw-dot { background: #7fbf83; }
.csr-cw-status.is-away { color: #d0a33c; border-color: rgba(208, 163, 60, .45); }
.csr-cw-status.is-away .csr-cw-dot { background: #d0a33c; }
.csr-cw-status.is-offline, .csr-cw-status.is-unknown { color: var(--cw-steel); }

.csr-cw-close {
  background: transparent; border: 0; color: var(--cw-steel); cursor: pointer;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.csr-cw-close svg { width: 17px; height: 17px; }
.csr-cw-close:hover { color: var(--cw-paper); background: transparent; }

/* rows */
.csr-cw-list { list-style: none; margin: 0; padding: 14px; display: grid; gap: 10px; }
.csr-cw-list li { margin: 0; }
.csr-cw-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: 100%; text-align: left; padding: 14px;
  background: var(--cw-char-2); border: 1px solid var(--cw-line);
  color: var(--cw-paper); cursor: pointer; text-decoration: none;
  font-family: var(--cw-disp); transition: border-color .15s ease;
}
.csr-cw-row:hover { border-color: var(--cw-ember); color: var(--cw-paper); }
.csr-cw-ico {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(237, 234, 228, .06); color: var(--cw-ember);
}
.csr-cw-ico svg { width: 21px; height: 21px; }
.csr-cw-ico--whatsapp { color: #4bbf62; }
.csr-cw-txt strong {
  display: block; font-family: var(--cw-disp); font-variation-settings: "wdth" 115;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.15; color: var(--cw-paper);
}
.csr-cw-txt span {
  display: block; font-size: 13.5px; color: #c9c4bc; margin-top: 2px; overflow-wrap: anywhere;
}
.csr-cw-go { color: var(--cw-steel); font-size: 20px; line-height: 1; }
.csr-cw-row:hover .csr-cw-go { color: var(--cw-ember); }

/* foot */
.csr-cw-foot {
  margin: 0; padding: 14px 18px; border-top: 1px solid var(--cw-line);
  background: var(--cw-char-2); font-family: var(--cw-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cw-steel); text-align: center;
}
.csr-cw-foot strong { color: var(--cw-ember); font-weight: 500; }
.csr-cw-foot span::before { content: "\00b7"; margin: 0 7px; }

@media (max-width: 520px) {
  .csr-cw-launch-label { display: none; }
  .csr-cw-launch { padding: 14px; min-width: 48px; justify-content: center; }
  .csr-cw-panel { width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .csr-cw-row, .csr-cw-launch { transition: none; }
}