/* Call/Text Settings, the Calling page's fourth tab. */

/* icon() emits an SVG with no width or height and there is a global 16px
   default, so anything here that draws one sets its own size. */
.cs-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 20px 0 8px;
}

/* The money marker. Small, quiet, and hoverable: the rate lives in its title
   rather than in body copy nobody reads twice. */
.cs-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fef3c7;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 800;
  cursor: help;
  vertical-align: middle;
}

.cs-hooks { margin-bottom: 4px; }

.cs-url {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}
.cs-url span { color: var(--muted); font-size: 12px; font-weight: 700; }
/* Grid children default to min-width:auto, so a long URL would push the card
   sideways instead of wrapping. */
.cs-url code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  background: var(--bg);
  border-radius: 5px;
  padding: 2px 6px;
}

.cs-num { margin-bottom: 10px; }
.cs-num .card-head h3 { flex: none; }

.cs-hooktable { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-hooktable td { padding: 5px 8px 5px 0; vertical-align: middle; }
.cs-hooktable td:first-child { width: 130px; color: var(--muted); font-weight: 600; }
.cs-hooktable td:nth-child(2) { width: 130px; }
.cs-was {
  color: var(--muted);
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cs-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.cs-avail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.cs-avail:last-child { border-bottom: none; }

.cs-routing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.cs-hr { border: none; border-top: 1px solid var(--border); margin: 16px 0 12px; }

/* styles.css has warn, bad, good and plain pills but no informational one, and
   it is not this feature's file to edit. Defined here to match .banner.info,
   which does exist, so the two read as the same colour. */
.pill.info { background: #eff6ff; color: #1d4ed8; }

/* The three sending numbers: mine, the voicebot's, the automated one. Each is
   its own block with its own Save, because saving one must not look like it
   saved the other two. */
.cs-sending { margin-bottom: 12px; }

.cs-role { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cs-role:first-child { padding-top: 0; }
.cs-role:last-child { border-bottom: none; padding-bottom: 0; }
.cs-rolehead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-role p { margin: 3px 0 7px; max-width: 640px; }

.cs-rolerow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
/* Grid and flex children default to min-width:auto, so a long "name · number ·
   carrier" option would stretch the select past the card. */
.cs-rolerow select { flex: 1; min-width: 200px; max-width: 460px; }
.cs-rolelabel { width: 130px; font-weight: 600; font-size: 13px; }

.cs-addother { margin-top: 10px; }

/* The scope switch on the five sections moved here from Settings. */
.vb-cfgbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.vb-cfglabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.vb-scope { margin-bottom: 12px; align-items: center; }
.vb-scope .muted { margin-left: 4px; }

.cs-addlist { margin-top: 12px; max-height: 40vh; overflow: auto; }

@media (max-width: 860px) {
  .cs-routing-grid { grid-template-columns: 1fr; }
  .cs-hooktable td:first-child, .cs-hooktable td:nth-child(2) { width: auto; }
  .cs-rolelabel { width: auto; }
}