/* ==========================================================================
   SENDBAT CONVERSATION DEMO
   Ported from the Sendbat landing page (sendbat_landing). The rules below
   were compiled from their own SCSS source, wrapped in .sbt-demo so the
   generic class names (.msg, .chip, .tool) cannot leak into this site.
   ========================================================================== */
/* Bootstrap Icons, subset to the 28 glyphs this demo uses. The font is
   the copy already in the org's koreco_website project. */
@font-face {
  font-family: "sbt-icons";
  font-display: block;
  src: url("../fonts/bootstrap-icons.woff2") format("woff2");
}
.sbt-demo .bi::before,
.sbt-demo [class^="bi-"]::before,
.sbt-demo [class*=" bi-"]::before {
  display: inline-block;
  font-family: "sbt-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
}
.sbt-demo .bi-arrow-up-right::before { content: "\f144"; }
.sbt-demo .bi-book::before { content: "\f194"; }
.sbt-demo .bi-building::before { content: "\f1dd"; }
.sbt-demo .bi-calendar-event::before { content: "\f1e8"; }
.sbt-demo .bi-card-list::before { content: "\f227"; }
.sbt-demo .bi-chat-dots::before { content: "\f24a"; }
.sbt-demo .bi-check2-square::before { content: "\f271"; }
.sbt-demo .bi-chevron-down::before { content: "\f282"; }
.sbt-demo .bi-clipboard-data::before { content: "\f28c"; }
.sbt-demo .bi-credit-card::before { content: "\f2dc"; }
.sbt-demo .bi-emoji-smile::before { content: "\f327"; }
.sbt-demo .bi-envelope::before { content: "\f32f"; }
.sbt-demo .bi-gear::before { content: "\f3e5"; }
.sbt-demo .bi-gift::before { content: "\f3ec"; }
.sbt-demo .bi-grid-1x2-fill::before { content: "\f3f3"; }
.sbt-demo .bi-link-45deg::before { content: "\f470"; }
.sbt-demo .bi-lock-fill::before { content: "\f47a"; }
.sbt-demo .bi-megaphone::before { content: "\f484"; }
.sbt-demo .bi-paperclip::before { content: "\f4b3"; }
.sbt-demo .bi-pen::before { content: "\f4c8"; }
.sbt-demo .bi-pencil::before { content: "\f4cb"; }
.sbt-demo .bi-people::before { content: "\f4d0"; }
.sbt-demo .bi-person-check::before { content: "\f4d6"; }
.sbt-demo .bi-search::before { content: "\f52a"; }
.sbt-demo .bi-send-fill::before { content: "\f6b9"; }
.sbt-demo .bi-stars::before { content: "\f589"; }
.sbt-demo .bi-telephone::before { content: "\f5c1"; }
.sbt-demo .bi-whatsapp::before { content: "\f618"; }

/* The conversation demo, lifted verbatim from the Sendbat landing SCSS
   (scss/partials/_components.scss) and compiled here so the styling is
   theirs rather than an approximation. Everything is wrapped in
   .sbt-demo: the source uses generic names like .msg and .chip that
   would otherwise collide with this site. */
.sbt-demo .conv-mock,
.sbt-demo .contacts-mock {
  display: grid;
  grid-template-columns: 190px 1fr;
  background: #ffffff;
  border: 1px solid #eaeff4;
  border-radius: 5px;
  overflow: hidden;
  min-height: 640px;
  font-size: 0.82rem;
  color: #2b3a47;
  transform: rotateX(6deg) rotateY(-6deg) rotateZ(-0.5deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  box-shadow: 0 40px 60px -30px rgba(24, 83, 124, 0.35), 0 20px 30px -15px rgba(24, 83, 124, 0.2);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.sbt-demo .conv-mock:hover,
.sbt-demo .contacts-mock:hover {
  transform: rotateX(2deg) rotateY(-2deg) rotateZ(0deg);
}
@media (max-width: 1199.98px) {
  .sbt-demo .conv-mock,
  .sbt-demo .contacts-mock {
    transform: none;
  }
  .sbt-demo .conv-mock:hover,
  .sbt-demo .contacts-mock:hover {
    transform: none;
  }
}
.sbt-demo .conv-mock .conv-side,
.sbt-demo .contacts-mock .conv-side {
  background: #18537c;
  color: rgba(255, 255, 255, 0.82);
  padding: 1rem 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sbt-demo .conv-mock .conv-side .conv-brand,
.sbt-demo .contacts-mock .conv-side .conv-brand {
  padding: 0.25rem 0.25rem 1rem;
}
.sbt-demo .conv-mock .conv-side .conv-brand img,
.sbt-demo .contacts-mock .conv-side .conv-brand img {
  height: 22px;
  filter: brightness(0) invert(1);
}
.sbt-demo .conv-mock .conv-side .cs-section,
.sbt-demo .contacts-mock .conv-side .cs-section {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  margin: 1rem 0.25rem 0.3rem;
}
.sbt-demo .conv-mock .conv-side .cs-nav a,
.sbt-demo .contacts-mock .conv-side .cs-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
}
.sbt-demo .conv-mock .conv-side .cs-nav a.sub,
.sbt-demo .contacts-mock .conv-side .cs-nav a.sub {
  padding-left: 1.95rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}
.sbt-demo .conv-mock .conv-side .cs-nav a.active,
.sbt-demo .contacts-mock .conv-side .cs-nav a.active {
  background: rgba(0, 135, 226, 0.22);
  color: #fff;
  border-left: 3px solid #0087e2;
  padding-left: 0.4rem;
}
.sbt-demo .conv-mock .conv-side .cs-nav a i,
.sbt-demo .contacts-mock .conv-side .cs-nav a i {
  opacity: 0.85;
  font-size: 0.88rem;
}
.sbt-demo .conv-mock .conv-main,
.sbt-demo .contacts-mock .conv-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sbt-demo .conv-mock .conv-top,
.sbt-demo .contacts-mock .conv-top {
  background: #fff;
  border-bottom: 1px solid #eaeff4;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
}
.sbt-demo .conv-mock .conv-top .ct-tabs,
.sbt-demo .contacts-mock .conv-top .ct-tabs {
  display: flex;
  gap: 1.25rem;
}
.sbt-demo .conv-mock .conv-top .ct-tabs a,
.sbt-demo .contacts-mock .conv-top .ct-tabs a {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6a7a88;
  position: relative;
  padding: 0.25rem 0;
  cursor: pointer;
}
.sbt-demo .conv-mock .conv-top .ct-tabs a.active,
.sbt-demo .contacts-mock .conv-top .ct-tabs a.active {
  color: #18537c;
}
.sbt-demo .conv-mock .conv-top .ct-tabs a.active::after,
.sbt-demo .contacts-mock .conv-top .ct-tabs a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.75rem;
  height: 2px;
  background: #0087e2;
  border-radius: 2px;
}
.sbt-demo .conv-mock .conv-top .ct-right,
.sbt-demo .contacts-mock .conv-top .ct-right {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}
.sbt-demo .conv-mock .conv-top .ct-pill,
.sbt-demo .contacts-mock .conv-top .ct-pill {
  font-size: 0.7rem;
  color: #18537c;
  background: #f3f7fa;
  border: 1px solid #e6eef4;
  padding: 0.28rem 0.65rem;
  border-radius: 5px;
}
.sbt-demo .conv-mock .conv-top .ct-pill strong,
.sbt-demo .contacts-mock .conv-top .ct-pill strong {
  color: #0087e2;
}
.sbt-demo .conv-mock .conv-body,
.sbt-demo .contacts-mock .conv-body {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  flex: 1;
  min-height: 0;
}
.sbt-demo .conv-mock .conv-list,
.sbt-demo .contacts-mock .conv-list {
  border-right: 1px solid #eaeff4;
  display: flex;
  flex-direction: column;
  background: #fbfdff;
}
.sbt-demo .conv-mock .conv-list .cl-top,
.sbt-demo .contacts-mock .conv-list .cl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.5rem;
}
.sbt-demo .conv-mock .conv-list .cl-top .cl-title,
.sbt-demo .contacts-mock .conv-list .cl-top .cl-title {
  font-weight: 700;
  color: #18537c;
  font-size: 0.9rem;
}
.sbt-demo .conv-mock .conv-list .cl-top .cl-sub,
.sbt-demo .contacts-mock .conv-list .cl-top .cl-sub {
  font-size: 0.7rem;
  color: #6a7a88;
  background: #f3f7fa;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  border: 1px solid #eaeff4;
}
.sbt-demo .conv-mock .conv-list .cl-search,
.sbt-demo .contacts-mock .conv-list .cl-search {
  margin: 0 1rem 0.5rem;
  background: #fff;
  border: 1px solid #eaeff4;
  padding: 0.4rem 0.7rem;
  border-radius: 5px;
  font-size: 0.74rem;
  color: #8a9aa8;
}
.sbt-demo .conv-mock .conv-list .cl-search i,
.sbt-demo .contacts-mock .conv-list .cl-search i {
  margin-right: 0.4rem;
  color: #0087e2;
}
.sbt-demo .conv-mock .conv-list .cl-items,
.sbt-demo .contacts-mock .conv-list .cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}
.sbt-demo .conv-mock .conv-list .cl-items li,
.sbt-demo .contacts-mock .conv-list .cl-items li {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #f0f4f7;
  cursor: pointer;
}
.sbt-demo .conv-mock .conv-list .cl-items li.active,
.sbt-demo .contacts-mock .conv-list .cl-items li.active {
  background: #eaf4fc;
  border-left: 3px solid #0087e2;
  padding-left: calc(1rem - 3px);
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-ava,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-ava.g,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-ava.g {
  background: #22c55e;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-ava.b,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-ava.b {
  background: #0087e2;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-ava.o,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-ava.o {
  background: #f97316;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-ava.p,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-ava.p {
  background: #a855f7;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-meta,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-meta {
  flex: 1;
  min-width: 0;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-row,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-row strong,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-row strong {
  font-size: 0.78rem;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-row span,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-row span {
  font-size: 0.65rem;
  color: #98a7b3;
}
.sbt-demo .conv-mock .conv-list .cl-items .cl-preview,
.sbt-demo .contacts-mock .conv-list .cl-items .cl-preview {
  font-size: 0.7rem;
  color: #6a7a88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sbt-demo .conv-mock .conv-thread,
.sbt-demo .contacts-mock .conv-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}
.sbt-demo .conv-mock .conv-thread .ct-head,
.sbt-demo .contacts-mock .conv-thread .ct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #eaeff4;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-person,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-ava,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0087e2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-name,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-name {
  font-weight: 700;
  color: #18537c;
  font-size: 0.85rem;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-meta,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-meta {
  font-size: 0.68rem;
  color: #6a7a88;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-actions,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-actions {
  display: flex;
  gap: 0.4rem;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-btn,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-btn.ghost,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-btn.ghost {
  background: #fff;
  border-color: #eaeff4;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-btn.ghost:hover,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-btn.ghost:hover {
  background: #f3f7fa;
}
.sbt-demo .conv-mock .conv-thread .ct-head .cth-btn.primary,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-btn.primary {
  background: #0087e2;
  border-color: #0087e2;
  color: #fff;
}
.sbt-demo .conv-mock .conv-thread .ct-stream,
.sbt-demo .contacts-mock .conv-thread .ct-stream {
  flex: 1;
  padding: 1rem 1.1rem;
  overflow: auto;
  background: #f6fafd;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .ct-day,
.sbt-demo .contacts-mock .conv-thread .ct-stream .ct-day {
  text-align: center;
  font-size: 0.68rem;
  color: #98a7b3;
  background: #fff;
  border: 1px solid #eaeff4;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto 0.75rem;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.55rem;
  max-width: 74%;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg .mtag,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg .mtag {
  font-size: 0.6rem;
  color: #98a7b3;
  margin-bottom: 0.15rem;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg .bubble,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg .bubble {
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  line-height: 1.35;
  border-radius: 5px;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.in,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.in {
  align-items: flex-start;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.in .bubble,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.in .bubble {
  background: #fff;
  border: 1px solid #eaeff4;
  color: #18537c;
  border-top-left-radius: 2px;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.out,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.out {
  align-items: flex-end;
  margin-left: auto;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.out .bubble,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.out .bubble {
  background: #0087e2;
  color: #fff;
  border-top-right-radius: 2px;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.out .mtag,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.out .mtag {
  color: rgba(24, 83, 124, 0.55);
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.out.ai .bubble,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.out.ai .bubble {
  background: linear-gradient(135deg, #0087e2 0%, rgb(0, 92.3495575221, 154.6) 100%);
  position: relative;
  padding-right: 2.2rem;
}
.sbt-demo .conv-mock .conv-thread .ct-stream .msg.out.ai .bubble::after,
.sbt-demo .contacts-mock .conv-thread .ct-stream .msg.out.ai .bubble::after {
  content: "\f5ba";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.18);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: aiBadgePop 0.35s cubic-bezier(0.2, 0.8, 0.25, 1.2) both;
}
.sbt-demo .conv-mock .conv-thread .ct-closed-note,
.sbt-demo .contacts-mock .conv-thread .ct-closed-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #eaeff4;
  background: #f6fafd;
  color: #6a7a88;
  font-size: 0.8rem;
  font-weight: 600;
}
.sbt-demo .conv-mock .conv-thread .ct-closed-note i,
.sbt-demo .contacts-mock .conv-thread .ct-closed-note i {
  color: #0087e2;
  font-size: 0.95rem;
}
.sbt-demo .conv-mock .conv-thread.is-closed .ct-stream,
.sbt-demo .contacts-mock .conv-thread.is-closed .ct-stream {
  opacity: 0.75;
  filter: grayscale(0.15);
}
.sbt-demo .conv-mock .conv-thread .ct-composer,
.sbt-demo .contacts-mock .conv-thread .ct-composer {
  border-top: 1px solid #eaeff4;
  padding: 0.7rem 1rem 1rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-ch,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-ch {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6a7a88;
  background: #f3f7fa;
  border: 1px solid #eaeff4;
  padding: 0.28rem 0.6rem;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-ch:hover,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-ch:hover {
  background: #e9eff4;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-ch.active,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-ch.active {
  background: rgba(0, 135, 226, 0.1);
  color: #0087e2;
  border-color: rgba(0, 135, 226, 0.25);
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-ch i,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-ch i {
  font-size: 0.72rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-spacer,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-spacer {
  flex: 1;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  background: #f3f7fa;
  border: 1px solid #eaeff4;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6a7a88;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select > i,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-select > i {
  font-size: 0.78rem;
  color: #0087e2;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select .caret,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-select .caret {
  font-size: 0.7rem;
  color: #98a7b3;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select select,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-select select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  padding-right: 0.2rem;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  max-width: 140px;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select:hover,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-select:hover {
  background: #e9eff4;
  border-color: #d9e1e8;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select:focus-within,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-select:focus-within {
  border-color: #0087e2;
  box-shadow: 0 0 0 3px rgba(0, 135, 226, 0.18);
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-box,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-box {
  border: 1px solid #eaeff4;
  border-radius: 5px;
  background: #fff;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-input,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-input {
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  color: #18537c;
  min-height: 44px;
  max-height: 140px;
  overflow-y: auto;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-input:empty::before,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-input:empty::before {
  content: attr(data-placeholder);
  color: #98a7b3;
  pointer-events: none;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .msg.typing .bubble,
.sbt-demo .contacts-mock .conv-thread .ct-composer .msg.typing .bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.85rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .msg.typing .bubble .td,
.sbt-demo .contacts-mock .conv-thread .ct-composer .msg.typing .bubble .td {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #98a7b3;
  animation: convTypingBounce 1.1s infinite ease-in-out;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .msg.typing .bubble .td:nth-child(2),
.sbt-demo .contacts-mock .conv-thread .ct-composer .msg.typing .bubble .td:nth-child(2) {
  animation-delay: 0.15s;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .msg.typing .bubble .td:nth-child(3),
.sbt-demo .contacts-mock .conv-thread .ct-composer .msg.typing .bubble .td:nth-child(3) {
  animation-delay: 0.3s;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  border-top: 1px solid #eef2f6;
  padding: 0.3rem 0.5rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.74rem;
  color: #6a7a88;
  cursor: pointer;
  border-radius: 5px;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct:hover,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct:hover {
  background: #f3f7fa;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct i,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct i {
  font-size: 0.78rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct b, .sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct i, .sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct u,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct b,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct i,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct u {
  font-style: normal;
  font-weight: 700;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cct i,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cct i {
  font-style: italic;
  font-weight: 500;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cc-spacer,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cc-spacer {
  flex: 1;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cc-send,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cc-send {
  background: #0087e2;
  color: #fff;
  border: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cc-send i,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cc-send i {
  font-size: 0.72rem;
}
.sbt-demo .conv-mock .conv-details,
.sbt-demo .contacts-mock .conv-details {
  border-left: 1px solid #eaeff4;
  padding: 0.8rem 0.9rem 1.2rem;
  overflow: auto;
  background: #fbfdff;
}
.sbt-demo .conv-mock .conv-details .cd-block,
.sbt-demo .contacts-mock .conv-details .cd-block {
  background: #fff;
  border: 1px solid #eaeff4;
  border-radius: 5px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.7rem;
}
.sbt-demo .conv-mock .conv-details .cd-head,
.sbt-demo .contacts-mock .conv-details .cd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-title,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-edit,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-edit {
  color: #98a7b3;
  font-size: 0.78rem;
  cursor: pointer;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-chip,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-chip {
  font-size: 0.68rem;
  color: #0087e2;
  cursor: pointer;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-toggle,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-toggle {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #0087e2;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, box-shadow 0.3s ease;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-toggle .cdt-dot,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-toggle .cdt-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: right 0.25s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-toggle.off,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-toggle.off {
  background: #d9e1e9;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-toggle.off .cdt-dot,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-toggle.off .cdt-dot {
  right: 16px;
}
.sbt-demo .conv-mock .conv-details .cd-head .cd-toggle.pulsing,
.sbt-demo .contacts-mock .conv-details .cd-head .cd-toggle.pulsing {
  box-shadow: 0 0 0 0 rgba(0, 135, 226, 0.55), 0 0 0 0 rgba(0, 135, 226, 0.35);
  animation: aiTogglePulse 1.6s ease-out infinite;
}
.sbt-demo .conv-mock .conv-details .cd-list,
.sbt-demo .contacts-mock .conv-details .cd-list {
  margin: 0;
  padding: 0;
}
.sbt-demo .conv-mock .conv-details .cd-list > div,
.sbt-demo .contacts-mock .conv-details .cd-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px dashed #eef2f6;
}
.sbt-demo .conv-mock .conv-details .cd-list > div:last-child,
.sbt-demo .contacts-mock .conv-details .cd-list > div:last-child {
  border-bottom: 0;
}
.sbt-demo .conv-mock .conv-details .cd-list dt,
.sbt-demo .contacts-mock .conv-details .cd-list dt {
  font-size: 0.68rem;
  color: #6a7a88;
  font-weight: 500;
  margin: 0;
}
.sbt-demo .conv-mock .conv-details .cd-list dd,
.sbt-demo .contacts-mock .conv-details .cd-list dd {
  font-size: 0.7rem;
  color: #18537c;
  font-weight: 600;
  margin: 0;
  text-align: right;
}
.sbt-demo .conv-mock .conv-details .cd-link,
.sbt-demo .contacts-mock .conv-details .cd-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #0087e2;
  margin-top: 0.5rem;
  cursor: pointer;
}
.sbt-demo .conv-mock .conv-details .cd-copy,
.sbt-demo .contacts-mock .conv-details .cd-copy {
  font-size: 0.68rem;
  color: #6a7a88;
  margin: 0;
  line-height: 1.4;
}
.sbt-demo .conv-mock .conv-details .cd-note,
.sbt-demo .contacts-mock .conv-details .cd-note {
  background: #f6fafd;
  border: 1px solid #eaeff4;
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
  font-size: 0.7rem;
}
.sbt-demo .conv-mock .conv-details .cd-note .cdn-author,
.sbt-demo .contacts-mock .conv-details .cd-note .cdn-author {
  font-weight: 700;
  color: #18537c;
  font-size: 0.7rem;
}
.sbt-demo .conv-mock .conv-details .cd-note p,
.sbt-demo .contacts-mock .conv-details .cd-note p {
  margin: 0.2rem 0;
  color: #3c4a57;
}
.sbt-demo .conv-mock .conv-details .cd-note .cdn-time,
.sbt-demo .contacts-mock .conv-details .cd-note .cdn-time {
  font-size: 0.62rem;
  color: #98a7b3;
}
.sbt-demo .conv-mock .conv-details .ai-status,
.sbt-demo .contacts-mock .conv-details .ai-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  padding: 0.55rem 0.6rem;
  background: linear-gradient(90deg, rgba(0, 135, 226, 0.1), rgba(0, 135, 226, 0.03));
  border: 1px solid rgba(0, 135, 226, 0.28);
  border-radius: 5px;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-orb,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0087e2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  box-shadow: 0 0 0 0 rgba(0, 135, 226, 0.6);
  animation: aiOrbPulse 1.5s ease-out infinite;
  flex-shrink: 0;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-status-body,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-status-body {
  flex: 1;
  min-width: 0;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-label,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0087e2;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-ellipsis,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-ellipsis {
  display: inline-flex;
  margin-left: 0.15rem;
  letter-spacing: 0.1em;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-ellipsis span,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-ellipsis span {
  animation: aiEllipsis 1.2s infinite;
  opacity: 0.25;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-ellipsis span:nth-child(2),
.sbt-demo .contacts-mock .conv-details .ai-status .ai-ellipsis span:nth-child(2) {
  animation-delay: 0.18s;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-ellipsis span:nth-child(3),
.sbt-demo .contacts-mock .conv-details .ai-status .ai-ellipsis span:nth-child(3) {
  animation-delay: 0.36s;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-bar,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-bar {
  margin-top: 0.35rem;
  height: 3px;
  background: rgba(0, 135, 226, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.sbt-demo .conv-mock .conv-details .ai-status .ai-bar > span,
.sbt-demo .contacts-mock .conv-details .ai-status .ai-bar > span {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #0087e2, transparent);
  animation: aiBarShift 1.4s ease-in-out infinite;
}
.sbt-demo .conv-mock .conv-details .cd-status,
.sbt-demo .contacts-mock .conv-details .cd-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.sbt-demo .conv-mock .conv-details .cd-status .cds,
.sbt-demo .contacts-mock .conv-details .cd-status .cds {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  background: #f3f7fa;
  color: #6a7a88;
  border: 1px solid #eaeff4;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sbt-demo .conv-mock .conv-details .cd-status .cds:hover,
.sbt-demo .contacts-mock .conv-details .cd-status .cds:hover {
  background: #e9eff4;
  color: #18537c;
}
.sbt-demo .conv-mock .conv-details .cd-status .cds.lead,
.sbt-demo .contacts-mock .conv-details .cd-status .cds.lead {
  background: rgba(0, 135, 226, 0.12);
  color: #0087e2;
  border-color: rgba(0, 135, 226, 0.3);
}
@media (max-width: 1199.98px) {
  .sbt-demo .conv-mock,
  .sbt-demo .contacts-mock {
    grid-template-columns: 1fr;
  }
  .sbt-demo .conv-mock .conv-side,
  .sbt-demo .contacts-mock .conv-side {
    display: none;
  }
  .sbt-demo .conv-mock .conv-body,
  .sbt-demo .contacts-mock .conv-body {
    grid-template-columns: 260px 1fr;
  }
  .sbt-demo .conv-mock .conv-details,
  .sbt-demo .contacts-mock .conv-details {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .sbt-demo .conv-mock .conv-body,
  .sbt-demo .contacts-mock .conv-body {
    grid-template-columns: 1fr;
  }
  .sbt-demo .conv-mock .conv-list,
  .sbt-demo .contacts-mock .conv-list {
    display: none;
  }
  .sbt-demo .conv-mock .conv-top .ct-right,
  .sbt-demo .contacts-mock .conv-top .ct-right {
    display: none;
  }
}

/* ==========================================================================
   SECTION WRAPPER
   Sendbat's mock is built for a 1760px container and tilts in 3D. Inside our
   1400px page it only needs room and a sane height; the tilt is theirs.
   ========================================================================== */
.sbt-demo {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sbt-demo .conv-mock {
  min-height: 0;
  font-size: 0.78rem;
}

/* The Action button opens a menu on the real product and nothing here, so it
   should not offer a hand. Everything in the demo that does something keeps
   its pointer, which makes the pointer mean something. Written at their own
   depth because their .cth-btn rule sets the pointer from five classes down. */
.sbt-demo .conv-mock .conv-thread .ct-head .cth-btn.is-inert,
.sbt-demo .contacts-mock .conv-thread .ct-head .cth-btn.is-inert {
  cursor: default;
}

/* ---- composer controls on one row ----
   On sendbat.com the thread column is around 900px and the channel chips, the
   template picker and the signature picker sit in a single row. Our frame is
   narrower, so the two pickers were dropping to a second line.

   Two things buy the row back: a little width from the two side columns, and
   tighter padding on the controls themselves. That is enough for one row at
   the frame's full width.

   The controls keep flex-wrap and do not shrink. Letting them shrink did put
   everything on one line at any width, but a <select> squeezed below its
   content clips the label rather than ellipsising it, so "Email template"
   became "Ema" on a narrow window. Folding to a second line is the better
   failure. */
/* Desktop only. Sendbat's own breakpoints drop this grid to two columns below
   1200px and to one below 768px, and because this rule sits later in the file
   at the same specificity it was overriding them: on a phone the mock was
   still trying to lay out 820px of fixed columns inside 331px, which is what
   made the demo look broken rather than narrow. */
@media (min-width: 1200px) {
  .sbt-demo .conv-mock .conv-body,
  .sbt-demo .contacts-mock .conv-body {
    /* was 280px 1fr 340px: the list ellipsises anyway, and the status chips
       need 255px of the details column, so 316 keeps them on one line. */
    grid-template-columns: 252px 1fr 316px;
  }
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels {
  gap: 0.3rem;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-ch {
  padding-inline: 0.5rem;
  white-space: nowrap;
}
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-select {
  padding-inline: 0.4rem;
  gap: 0.25rem;
}

/* Seven format buttons, a spacer and Send are a fixed width, and the thread
   they sit in is not. Wrapping at any width rather than only on phones: the
   row was pushing 74px past the composer on a phone and still 12px past it at
   1200, where the three-column desktop grid leaves the thread at its
   narrowest. It only wraps when it has to. */
.sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools,
.sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ---- phone ----
   Sendbat's own rules already drop the sidebar, the list and the details panel
   below 768px, which leaves the thread on its own with the full width. Two
   things still needed doing at that size. */
@media (max-width: 620px) {
  /* The tab row runs off the edge and clipped "Libraries" mid-word. It scrolls
     instead, which is what a row of tabs does on a phone. */
  .sbt-demo .conv-mock .conv-top,
  .sbt-demo .contacts-mock .conv-top {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sbt-demo .conv-mock .conv-top::-webkit-scrollbar,
  .sbt-demo .contacts-mock .conv-top::-webkit-scrollbar {
    display: none;
  }
  .sbt-demo .conv-mock .conv-top .ct-tabs,
  .sbt-demo .contacts-mock .conv-top .ct-tabs {
    flex: none;
    gap: 1rem;
  }
  .sbt-demo .conv-mock .conv-top .ct-tabs a,
  .sbt-demo .contacts-mock .conv-top .ct-tabs a {
    white-space: nowrap;
  }

  /* The name, the status line and two buttons will not share a row this
     narrow: the meta wrapped to three lines and "Mark as Closed" to three
     more. Stacked, each gets the full width and the header halves in height. */
  .sbt-demo .conv-mock .conv-thread .ct-head,
  .sbt-demo .contacts-mock .conv-thread .ct-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sbt-demo .conv-mock .conv-thread .ct-head .cth-person,
  .sbt-demo .contacts-mock .conv-thread .ct-head .cth-person {
    flex: 1 0 100%;
  }
  .sbt-demo .conv-mock .conv-thread .ct-head .cth-actions,
  .sbt-demo .contacts-mock .conv-thread .ct-head .cth-actions {
    flex: 1 0 100%;
  }
  .sbt-demo .conv-mock .conv-thread .ct-head .cth-btn,
  .sbt-demo .contacts-mock .conv-thread .ct-head .cth-btn {
    white-space: nowrap;
  }

  /* The spacer stops pushing Send off and starts putting it on its own line,
     hard right, where it belongs. */
  .sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cc-spacer,
  .sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cc-spacer {
    flex-basis: 100%;
    height: 0;
  }
  .sbt-demo .conv-mock .conv-thread .ct-composer .cc-tools .cc-send,
  .sbt-demo .contacts-mock .conv-thread .ct-composer .cc-tools .cc-send {
    margin-left: auto;
  }
}

/* Below the width where the frame stops being 1400px the row cannot hold
   everything, and left to itself it broke in an arbitrary place: chips, one
   picker, then the other picker alone on a third line. The spacer already
   sits between the two groups, so giving it a full-width basis turns it into
   the line break and the fold happens where the meaning does: channels above,
   pickers below. */
@media (max-width: 1455px) {
  .sbt-demo .conv-mock .conv-thread .ct-composer .cc-channels .cc-spacer,
  .sbt-demo .contacts-mock .conv-thread .ct-composer .cc-channels .cc-spacer {
    flex-basis: 100%;
    height: 0;
  }
}

/* Flat, not tilted.

   On their own page the mock is a hero flourish: rotateX(6deg) rotateY(-6deg)
   with preserve-3d, easing to a shallower angle on hover. Sitting inside a
   laptop screen it has to be square to the bezel instead, and the tilt was
   also what made the text soft. A rotated element is rasterised flat and then
   resampled by the compositor, and the frame is already scaling it to 0.8, so
   the glyphs were being resampled twice. The hover easing is why it looked
   sharper at some moments than others.

   The hover states are listed too: theirs are more specific than the base
   rule, so leaving them out would put the tilt straight back on mouseover.
   The drop shadow goes with it, since nothing inside a screen casts one. */
.sbt-demo .conv-mock,
.sbt-demo .contacts-mock,
.sbt-demo .conv-mock:hover,
.sbt-demo .contacts-mock:hover {
  transform: none;
  transform-style: flat;
  box-shadow: none;
  transition: none;
  border: 0;
  border-radius: 0;
}
/* Their mock is 680px tall by default, which is right on a laptop. */
@media (max-width: 900px) {
  .sbt-demo .conv-mock {
    min-height: 520px;
  }
}

/* The port switches to its phone layout at 768, which is the width of the
   browser. What matters here is the width of the box, and the site turns that
   into a phone-sized window at 900: between the two the inbox was still
   laying out for a wide screen inside a 330px window, and the usage pills in
   the top bar were clipped off the right edge with no way to reach them. */
@media (max-width: 900px) {
  .sbt-demo .conv-mock .conv-body,
  .sbt-demo .contacts-mock .conv-body {
    grid-template-columns: 1fr;
  }
  .sbt-demo .conv-mock .conv-list,
  .sbt-demo .contacts-mock .conv-list,
  .sbt-demo .conv-mock .conv-top .ct-right,
  .sbt-demo .contacts-mock .conv-top .ct-right {
    display: none;
  }
}

/* Five section tabs on one line is wider than a phone window, and the last two
   were being cut off rather than reached. They scroll instead. */
@media (max-width: 900px) {
  .sbt-demo .conv-mock .conv-top .ct-tabs,
  .sbt-demo .contacts-mock .conv-top .ct-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .sbt-demo .conv-top .ct-tabs::-webkit-scrollbar {
    display: none;
  }
  .sbt-demo .conv-top .ct-tabs a {
    flex: none;
    white-space: nowrap;
  }
}