.rc-feature-preview { margin-top: 64px; }
.rc-feature-tabs { grid-template-columns: 76px repeat(6,minmax(0,1fr)) 26px; }
.rc-feature-tabs button { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 11px 11px 0 0; background: transparent; color: #b9b8c3; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.rc-feature-tabs button[aria-selected="true"] { z-index: 1; background: #29282f; color: #f1f0f5; }
.rc-feature-tabs button[aria-selected="true"]::before,.rc-feature-tabs button[aria-selected="true"]::after { position: absolute; bottom: 0; width: 12px; height: 12px; content: ''; }
.rc-feature-tabs button::before { left: -12px; background: radial-gradient(circle at 0 0,transparent 12px,#29282f 12.5px); }
.rc-feature-tabs button::after { right: -12px; background: radial-gradient(circle at 100% 0,transparent 12px,#29282f 12.5px); }
.rc-feature-tabs button:focus-visible { outline: 2px solid #ba82ed; outline-offset: -3px; }
.rc-feature-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; background: linear-gradient(145deg,#be7aef,#7627b4); box-shadow: inset 0 1px 0 #ffffff4d; }
.rc-feature-icon img { width: 11px; height: 11px; filter: invert(1); }
.rc-icon-reporting { background: linear-gradient(145deg,#6caff0,#3265bb); }
.rc-icon-help { background: linear-gradient(145deg,#58c9a7,#259777); }
.rc-icon-crm { background: linear-gradient(145deg,#f59b6c,#d55e36); }
.rc-icon-integrations { background: linear-gradient(145deg,#66c2e5,#2d8cac); }
.rc-feature-canvas { position: relative; aspect-ratio: 3304 / 1310; overflow: hidden; background: #111; container-type: inline-size; }
.rc-feature-screenshot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rc-feature-playback { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }
.rc-feature-playback button { min-height: 26px; min-width: 26px; padding: 3px 6px; border: 0; border-radius: 5px; background: #ffffff08; color: #c7c3d0; font-size: 11px; }
.rc-feature-playback button:focus-visible { outline: 2px solid #ba82ed; outline-offset: 2px; }
/* Production Base.vue / Text/Index.vue: user slate-4, agent solid-blue, 12px corners and a small lower corner. */
.rc-live-thread { position: absolute; inset: 12.4% 0 0 37.05%; display: flex; flex-direction: column; gap: 1.4cqw; padding: 1.1cqw 2.8cqw 1.6cqw 1cqw; overflow: hidden; background: #111; color: #edeef0; font-size: .86cqw; line-height: 1.5; }
.rc-live-message { flex: none; max-width: 53%; padding: .73cqw .97cqw; border-radius: .73cqw; background: #272a2d; }
.rc-live-user { align-self: flex-start; border-bottom-left-radius: .18cqw; }
.rc-live-agent { align-self: flex-end; border-bottom-right-radius: .18cqw; background: #5b3110; }
.rc-live-message small { display: block; margin-top: .48cqw; color: #b0b4ba; font-size: .72cqw; text-align: right; }
.rc-live-typing { align-self: flex-end; display: flex; align-items: center; gap: .6cqw; color: #b0b4ba; font-size: .75cqw; }
.rc-live-typing span { letter-spacing: .15cqw; }
@media (hover: hover) and (pointer: fine) {
  .rc-feature-tabs button:not([aria-selected="true"]):hover { background: #ffffff0d; }
  .rc-feature-playback button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1100px) {
  .rc-feature-tabs { grid-template-columns: 44px repeat(6,minmax(0,1fr)); gap: 3px; }
  .rc-feature-tabs .lead-browser-new { display: none; }
  .rc-feature-tabs .lead-window-controls { gap: 4px; padding-left: 3px; }
  .rc-feature-tabs .lead-window-controls i { width: 8px; height: 8px; }
  .rc-feature-tabs button { gap: 5px; padding-inline: 7px; font-size: 11px; }
}
@media (max-width: 760px) {
  .rc-feature-preview { margin-top: 36px; }
  .rc-feature-tabs { display: flex; align-items: stretch; gap: 4px; padding: 5px 6px 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #5e526c #1b1b21; }
  .rc-feature-tabs .lead-window-controls { display: none; }
  .rc-feature-tabs button { flex: none; min-height: 36px; padding: 7px 12px; font-size: 11px; }
  .rc-feature-tabs button::before,.rc-feature-tabs button::after { display: none; }
  .rc-feature-playback { gap: 4px; }
  .rc-feature-playback button { min-height: 28px; }
}