@scope ([data-ci-screen-mockup]) {
:scope.mockup {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  color: var(--color-text);
}

.mockup p,
.mockup ol,
.mockup ul,
.mockup h4 {
  margin: 0;
  padding: 0;
}

.mockupTitle {
  color: var(--color-text);
  font-size: clamp(0.75rem, 2.812cqi, 1.195rem);
  font-weight: 400;
  line-height: 1.3;
}

.mockupSummary {
  color: #5d616f;
  font-size: clamp(0.55rem, 2.08cqi, 0.884rem);
  font-weight: 400;
  line-height: 1.3;
}

.filter {
  display: inline-flex;
  min-width: 0;
  height: clamp(1.5rem, 5.3cqi, 2.25rem);
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.25rem, 0.9cqi, 0.5rem);
  padding-inline: clamp(0.45rem, 1.7cqi, 0.75rem);
  border: 1px solid var(--color-border-warm);
  border-radius: clamp(0.35rem, 1.13cqi, 0.482rem);
  background: #fff;
  color: #5d616f;
  font-size: clamp(0.5rem, 2.08cqi, 0.884rem);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

.filter img {
  width: clamp(0.55rem, 2.27cqi, 0.964rem);
  height: clamp(0.55rem, 2.27cqi, 0.964rem);
  flex: none;
}

/* Conversation list */

.conversationHeader {
  position: relative;
  height: 17.241%;
  border-bottom: 1px solid var(--color-border-warm);
}

.conversationTitleBlock {
  position: absolute;
  inset-block-start: clamp(0.9rem, 3.844cqi, 1.5856rem);
  inset-inline-start: 3.333%;
}

.conversationTitleRow {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.4rem, 1.212cqi, 0.5rem);
}

.conversationTitleRow > img {
  width: clamp(0.875rem, 3.18cqi, 1.3125rem);
  height: clamp(0.875rem, 3.18cqi, 1.3125rem);
  flex: none;
  margin-block-start: clamp(0.0625rem, 0.247cqi, 0.1019rem);
}

.conversationList .mockupTitle {
  font-size: clamp(0.75rem, 2.897cqi, 1.195rem);
}

.conversationTitleBlock .mockupSummary {
  margin-block-start: clamp(0.3rem, 1.329cqi, 0.5484rem);
  font-size: clamp(0.55rem, 2.143cqi, 0.8839rem);
  white-space: nowrap;
}

.filters {
  position: absolute;
  inset-block-start: clamp(1.35rem, 5.909cqi, 2.4375rem);
  inset-inline-end: 3.095%;
  display: flex;
  gap: clamp(0.35rem, 1.667cqi, 0.6875rem);
}

.conversationHeader .filter {
  height: clamp(1.5rem, 5.455cqi, 2.25rem);
  padding-inline: clamp(0.45rem, 1.755cqi, 0.7238rem)
    clamp(0.4rem, 1.427cqi, 0.5888rem);
  border-width: clamp(1px, 0.195cqi, 1.286px);
  border-radius: clamp(0.35rem, 1.169cqi, 0.4821rem);
  font-size: clamp(0.5rem, 2.143cqi, 0.8839rem);
}

.conversationHeader .filter[data-filter-position="source"] {
  min-width: clamp(5rem, 18.182cqi, 7.5rem);
}

.conversationHeader .filter[data-filter-position="period"] {
  min-width: clamp(5.5rem, 19.481cqi, 8.0357rem);
}

.conversationHeader .filter img {
  width: clamp(0.6rem, 2.338cqi, 0.9643rem);
  height: clamp(0.6rem, 2.338cqi, 0.9643rem);
}

.conversationTableWrap {
  position: absolute;
  inset-block-start: 22.414%;
  inset-inline: 3.333%;
  height: 72.241%;
  overflow: hidden;
  border: 1px solid var(--color-border-warm);
  border-radius: 0.375rem;
}

.conversationTable {
  width: 100%;
  height: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--color-text);
  font-size: clamp(0.5rem, 2.143cqi, 0.8839rem);
  font-weight: 400;
  line-height: 1.3;
}

.conversationTable th,
.conversationTable td {
  padding-inline-start: clamp(0.4rem, 2.58cqi, 1.0625rem);
  padding-inline-end: 0;
  text-align: start;
  vertical-align: top;
}

.conversationTable thead {
  height: 12.649%;
}

.conversationTable tbody {
  height: 87.351%;
}

.conversationTable tbody tr {
  height: 20%;
}

.conversationTable th {
  padding-block-start: clamp(0.5rem, 2.879cqi, 1.1875rem);
  background: #fbf9f4;
  font-weight: 400;
}

.conversationTable td {
  padding-block-start: clamp(0.5rem, 2.879cqi, 1.1875rem);
  border-top: 1px solid var(--color-border-warm);
}

.conversationTable col:nth-child(1) {
  width: 25.728%;
}

.conversationTable col:nth-child(2) {
  width: 26.861%;
}

.conversationTable col:nth-child(3) {
  width: 16.828%;
}

.conversationTable col:nth-child(4) {
  width: 16.828%;
}

.conversationTable col:nth-child(5) {
  width: 13.755%;
}

.conversationList[data-locale="pl"] .conversationTable col:nth-child(1) {
  width: 21.845%;
}

.conversationList[data-locale="pl"] .conversationTable col:nth-child(2) {
  width: 27.346%;
}

.conversationList[data-locale="pl"] .conversationTable col:nth-child(3) {
  width: 16.181%;
}

.conversationList[data-locale="pl"] .conversationTable col:nth-child(4) {
  width: 23.625%;
}

.conversationList[data-locale="pl"] .conversationTable col:nth-child(5) {
  width: 11.003%;
}

.conversationList[data-locale="pl"] .conversationTable th:nth-child(4),
.conversationList[data-locale="pl"] .conversationTable td:nth-child(4) {
  padding-inline-start: clamp(0.125rem, 0.455cqi, 0.1875rem);
}

.conversationList[data-locale="pl"] .conversationTable th:nth-child(5),
.conversationList[data-locale="pl"] .conversationTable td:nth-child(5) {
  padding-inline-start: clamp(0.5rem, 3.03cqi, 1.25rem);
}

.conversationName {
  display: block;
  max-width: 10.375rem;
}

.clientCell,
.sourceCell,
.sentimentCell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(0.3rem, 1.21cqi, 0.5rem);
  color: #5d616f;
}

.clientCell {
  margin-block-start: clamp(-0.1875rem, -0.455cqi, -0.1rem);
}

.sourceCell {
  margin-block-start: clamp(-0.0625rem, -0.152cqi, -0.04rem);
}

.clientCell > span:last-child,
.sourceCell > span:last-child,
.sentimentCell > span:last-child {
  min-width: 0;
}

.clientAvatar {
  display: inline-flex;
  width: clamp(1rem, 3.79cqi, 1.5625rem);
  height: clamp(1rem, 3.79cqi, 1.5625rem);
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9d1e1;
  border-radius: 50%;
  background: var(--color-panel-blue);
  color: var(--color-text);
  font-size: clamp(0.4rem, 1.515cqi, 0.625rem);
  font-weight: 500;
}

.sourceCell {
  color: var(--color-text);
}

.sourceCell img {
  width: clamp(0.75rem, 3.03cqi, 1.25rem);
  height: clamp(0.75rem, 3.03cqi, 1.25rem);
  flex: none;
  object-fit: contain;
}

.sourceCell img[data-ci-source-icon="meet"] {
  height: clamp(0.6rem, 2.424cqi, 1rem);
}

.sentimentDot {
  width: clamp(0.3rem, 1.21cqi, 0.5rem);
  height: clamp(0.3rem, 1.21cqi, 0.5rem);
  flex: none;
  border-radius: 50%;
  background: #c1c1c1;
}

.sentimentDot[data-tone="positive"] {
  background: #20bd70;
}

.sentimentDot[data-tone="negative"] {
  background: #f51b2b;
}

.sentimentDot[data-tone="neutral"] {
  background: #f7a611;
}

.lengthCell {
  color: #5d616f;
}

.mobileConversationMeta {
  display: none;
}

/* Transcript */

.transcriptTitle {
  position: absolute;
  inset-block-start: 4.373%;
  inset-inline-start: 3.333%;
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.212cqi, 0.5rem);
  font-size: clamp(0.75rem, 2.897cqi, 1.195rem);
}

.transcriptTitle img {
  width: clamp(0.875rem, 3.182cqi, 1.3125rem);
  height: clamp(0.875rem, 3.182cqi, 1.3125rem);
  flex: none;
}

.downloadControl {
  position: absolute;
  inset-block-start: 3.448%;
  inset-inline-end: 3.03%;
  display: inline-flex;
  width: 17.88%;
  height: 6.207%;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.06cqi, 0.4375rem);
  border: clamp(1px, 0.195cqi, 1.286px) solid rgb(6 28 90 / 50%);
  border-radius: clamp(0.35rem, 1.13cqi, 0.482rem);
  color: var(--color-text);
  font-size: clamp(0.5rem, 2.143cqi, 0.884rem);
  line-height: 1.3;
}

.downloadControl img {
  width: clamp(0.5rem, 2.27cqi, 0.9375rem);
  height: clamp(0.5rem, 2.27cqi, 0.9375rem);
}

.transcriptSearch {
  position: absolute;
  inset-block-start: 14.655%;
  inset-inline-start: 3.333%;
  inset-inline-end: 3.636%;
  display: grid;
  height: 8.103%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.35rem, 1.364cqi, 0.5625rem);
  padding-inline-start: clamp(0.5rem, 1.818cqi, 0.75rem);
  padding-inline-end: clamp(0.75rem, 3.03cqi, 1.25rem);
  border: clamp(1px, 0.217cqi, 1.429px) solid var(--color-border-warm);
  border-radius: clamp(0.4rem, 1.3cqi, 0.536rem);
  background: #fbf9f4;
  font-size: clamp(0.55rem, 2.381cqi, 0.982rem);
  font-weight: 300;
  line-height: 1.3;
}

.transcriptSearch img {
  width: clamp(0.75rem, 3.33cqi, 1.375rem);
  height: clamp(0.75rem, 3.33cqi, 1.375rem);
}

.transcriptSearch small {
  color: rgb(6 28 90 / 50%);
  font-size: clamp(0.45rem, 1.97cqi, 0.8125rem);
  font-weight: 400;
}

.transcriptLines {
  position: absolute;
  inset-block-start: 29.655%;
  inset-inline-start: 3.333%;
  display: grid;
  width: 91.364%;
  grid-template-rows: 14.091cqi 10.606cqi 7.121cqi 10.909cqi;
  list-style: none;
}

.transcriptLines li {
  display: grid;
  min-height: 0;
  grid-template-columns: 11.364cqi 22.424cqi minmax(0, 57.576cqi);
  align-items: start;
  color: var(--color-text);
  font-size: clamp(0.5rem, 2.273cqi, 0.9375rem);
}

.transcriptLines time,
.transcriptLines strong {
  padding-block-start: clamp(0.0625rem, 0.303cqi, 0.125rem);
  font-weight: 400;
  line-height: 1.3;
}

.transcriptLines time {
  color: rgb(6 28 90 / 50%);
}

.transcriptLines p {
  width: 100%;
  font-weight: 300;
  line-height: 1.6;
}

.transcriptLines li:first-child p {
  max-width: 55.455cqi;
}

:scope.transcript[data-locale="pl"] .transcriptLines {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 3.636cqi, 1.5rem);
}

.transcriptLines mark {
  display: inline-block;
  padding-inline: clamp(0.2rem, 0.758cqi, 0.3125rem);
  border-radius: 0.3125rem;
  background: rgb(247 182 90 / 40%);
  color: inherit;
  font-weight: 500;
  line-height: 1.6;
}

.transcriptTags {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  height: 17.069%;
  align-items: center;
  gap: clamp(0.4rem, 1.818cqi, 0.75rem);
  padding-inline: 3.333%;
  border-top: 1px solid var(--color-border-warm);
}

.transcriptTags span {
  padding: clamp(0.2rem, 1.061cqi, 0.4375rem)
    clamp(0.4rem, 1.82cqi, 0.75rem);
  border: 1px solid rgb(6 28 90 / 20%);
  border-radius: 100px;
  background: var(--color-panel-blue);
  font-size: clamp(0.45rem, 1.97cqi, 0.8125rem);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Patterns dashboard */

.dashboardTitle {
  position: absolute;
  inset-block-start: 4.31%;
  inset-inline-start: 3.636%;
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.21cqi, 0.5rem);
}

.dashboardTitle.mockupTitle {
  font-size: clamp(0.75rem, 2.897cqi, 1.195rem);
}

.dashboardTitle img {
  width: clamp(0.875rem, 3.18cqi, 1.3125rem);
  height: clamp(0.875rem, 3.18cqi, 1.3125rem);
}

.patternMetrics {
  position: absolute;
  inset-block-start: 12.931%;
  inset-inline: 3.636%;
  display: grid;
  height: 15.265%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.68%;
}

.patternMetric {
  min-width: 0;
  padding: clamp(0.35rem, 1.98cqi, 0.8125rem);
  border: 1px solid var(--color-border-warm);
  border-radius: clamp(0.3rem, 1cqi, 0.415rem);
  background: #fbf9f4;
}

.patternMetric > span {
  display: block;
  overflow: hidden;
  font-size: clamp(0.45rem, 2.012cqi, 0.83rem);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patternMetric > div {
  display: flex;
  align-items: baseline;
  gap: clamp(0.15rem, 0.6cqi, 0.25rem);
  margin-block-start: clamp(0.4rem, 2.62cqi, 1.081rem);
  white-space: nowrap;
}

.patternMetric strong {
  font-size: clamp(0.75rem, 3.354cqi, 1.3834rem);
  font-weight: 500;
  line-height: 1.3;
}

.patternMetric b,
.patternMetric small {
  font-size: clamp(0.4rem, 1.8445cqi, 0.7609rem);
  font-weight: 400;
}

.patternMetric b {
  color: #06a64e;
  font-weight: 600;
}

.patternMetric small {
  color: #78819c;
}

.patternChart {
  position: absolute;
  inset-block-start: 31.552%;
  inset-inline: 3.636%;
  height: 63.966%;
  overflow: hidden;
  border: 1px solid var(--color-border-warm);
  border-radius: 0.4375rem;
  background: #fff;
}

.chartHeader {
  display: flex;
  height: 17.822%;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2.45%;
}

.chartHeader > strong {
  font-size: clamp(0.5rem, 2.18cqi, 0.8992rem);
  font-weight: 500;
  line-height: 1.3;
}

.chartHeader .filter {
  height: clamp(1.35rem, 5cqi, 2.125rem);
}

.chartBody {
  display: grid;
  height: 61.895%;
  grid-template-columns: 7% 1fr;
  padding-inline: 2.45%;
}

.chartAxis {
  position: relative;
  color: #78819c;
  font-size: clamp(0.35rem, 1.677cqi, 0.6917rem);
  line-height: 1;
}

.chartAxis span {
  position: absolute;
  inset-block-start: var(--tick-position);
  transform: translateY(-50%);
}

.chartPlot {
  position: relative;
}

.chartPlot > span {
  position: absolute;
  inset-block-start: var(--tick-position);
  inset-inline: 0;
  border-top: 1px solid var(--color-border-warm);
}

.chartBars {
  position: absolute;
  inset-block: 1.6% 0;
  inset-inline: 2% 8.4%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 6.82%;
}

.chartBars i {
  display: block;
  height: var(--source-height);
  border-radius: clamp(0.15rem, 1cqi, 0.415rem)
    clamp(0.15rem, 1cqi, 0.415rem) 0 0;
  background: #f8580e;
}

.chartBars i[data-source="zoom"] {
  background: #2fd6c0;
}

.chartBars i[data-source="slack"] {
  background: #8e3bd6;
}

.chartBars i[data-source="meet"] {
  background: #f7b65a;
}

.chartBars i[data-source="teams"] {
  background: #20bde1;
}

.chartBars i[data-source="phone"] {
  background: #c1c1c1;
}

.chartLegend {
  display: grid;
  height: 20.283%;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  column-gap: 6.82%;
  padding-inline: 10.95% 9.95%;
}

.chartLegend span {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: clamp(0.2rem, 1.06cqi, 0.4375rem);
  font-size: clamp(0.35rem, 1.515cqi, 0.625rem);
  line-height: 1.3;
  white-space: nowrap;
}

.chartLegend img {
  object-fit: contain;
}

.chartLegend span[data-source="zoom"] > img,
.chartLegend span[data-source="phone"] > img {
  width: clamp(0.55rem, 2.576cqi, 1.0625rem);
  height: clamp(0.55rem, 2.576cqi, 1.0625rem);
}

.chartLegend span[data-source="slack"] > img {
  width: clamp(0.55rem, 2.424cqi, 1rem);
  height: clamp(0.55rem, 2.576cqi, 1.0625rem);
}

.chartLegend span[data-source="meet"] > img {
  width: clamp(0.55rem, 2.424cqi, 1rem);
  height: clamp(0.45rem, 1.97cqi, 0.8125rem);
}

.chartLegend span[data-source="teams"] > img {
  width: clamp(0.55rem, 2.727cqi, 1.125rem);
  height: clamp(0.55rem, 2.727cqi, 1.125rem);
}

.uploadedLegendIcon {
  display: inline-flex;
  width: clamp(0.55rem, 2.576cqi, 1.0625rem);
  height: clamp(0.55rem, 2.576cqi, 1.0625rem);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #00ac47;
}

.uploadedLegendIcon img {
  width: 52.941%;
  height: 52.941%;
}

/* Commitments board */

.tasksHeader {
  position: absolute;
  inset-block-start: 4.31%;
  inset-inline: 3.636%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tasksHeader .mockupTitle {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.21cqi, 0.5rem);
  font-size: clamp(0.75rem, 2.897cqi, 1.195rem);
}

.tasksHeader .mockupTitle img {
  width: clamp(0.875rem, 3.18cqi, 1.3125rem);
  height: clamp(0.875rem, 3.18cqi, 1.3125rem);
}

.tasksHeader .mockupSummary {
  margin-block-start: clamp(0.2rem, 1.427cqi, 0.588rem);
  font-size: clamp(0.55rem, 2.143cqi, 0.8839rem);
}

.tasksHeader .filter {
  height: clamp(1.5rem, 5.455cqi, 2.25rem);
  margin-block-start: 0.45rem;
  border-radius: clamp(0.35rem, 1.169cqi, 0.4821rem);
  font-size: clamp(0.5rem, 2.143cqi, 0.8839rem);
}

.taskLanes {
  position: absolute;
  inset-block-start: 17.414%;
  inset-block-end: 4.31%;
  inset-inline: 3.636%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.43%;
}

.taskLane {
  min-width: 0;
  padding: clamp(0.35rem, 1.82cqi, 0.75rem);
  padding-block-start: clamp(0.45rem, 2.625cqi, 1.082rem);
  padding-inline: clamp(0.35rem, 1.717cqi, 0.708rem);
  border: 1px solid var(--color-border-warm);
  border-radius: clamp(0.3rem, 1cqi, 0.415rem);
  background: #fbf9f4;
}

.taskLane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.taskLane h4 {
  overflow: hidden;
  font-size: clamp(0.48rem, 2.273cqi, 0.9375rem);
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taskLane > header > span {
  padding: clamp(0.08rem, 0.45cqi, 0.1875rem)
    clamp(0.2rem, 0.9cqi, 0.375rem);
  border: 1px solid rgb(6 28 90 / 20%);
  border-radius: clamp(0.2rem, 0.9cqi, 0.375rem);
  background: var(--color-panel-blue);
  font-size: clamp(0.42rem, 1.97cqi, 0.8125rem);
  font-weight: 500;
  line-height: 1.3;
}

.taskLane ul {
  display: grid;
  gap: clamp(0.3rem, 1.52cqi, 0.625rem);
  margin-block-start: clamp(0.45rem, 2.273cqi, 0.9375rem);
  list-style: none;
}

.taskCard {
  display: flex;
  min-height: clamp(2.75rem, 14.24cqi, 5.875rem);
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(0.2rem, 0.75cqi, 0.375rem);
  padding: clamp(0.35rem, 2.12cqi, 0.875rem);
  border: 1px solid var(--color-border-warm);
  border-radius: clamp(0.3rem, 1cqi, 0.415rem);
  background: #fff;
  color: #5d616f;
  font-size: clamp(0.42rem, 1.97cqi, 0.8125rem);
  line-height: 1.3;
}

.taskCard[data-layout="compact"] {
  min-height: clamp(2.25rem, 11.667cqi, 4.8125rem);
}

.taskCard div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.taskCard strong {
  color: var(--color-text);
  font-weight: 500;
}

.taskCard strong[data-tone="danger"] {
  color: #d91313;
}

.taskCard strong[data-tone="warning"] {
  color: #dc8700;
}

@container (max-width: 32rem) {
  .conversationHeader {
    height: 24%;
  }

  .conversationTitleBlock {
    inset-block-start: 8%;
    inset-inline-start: 4%;
  }

  .conversationTitleBlock .mockupSummary {
    white-space: normal;
  }

  .filters {
    inset-block: auto 8%;
    inset-inline: 4% auto;
    width: 100%;
    justify-content: flex-start;
  }

  .conversationTableWrap {
    inset-block-start: 29%;
    inset-inline: 4%;
    height: 65%;
  }

  .conversationTable th:not(:first-child),
  .conversationTable td:not(:first-child) {
    display: none;
  }

  .conversationTable th:first-child {
    width: 100%;
  }

  .conversationTable th,
  .conversationTable td {
    padding-inline: 5%;
  }

  .mobileConversationMeta {
    display: block;
    margin-block-start: 0.15rem;
    color: #78819c;
    font-size: 0.92em;
  }

  .downloadControl {
    width: 25%;
  }

  .transcriptLines li {
    grid-template-columns: 12% 19% minmax(0, 1fr);
  }

  .transcriptTags {
    gap: 0.25rem;
  }

  .patternMetric > span,
  .patternMetric small,
  .taskLane h4 {
    white-space: normal;
  }

  .patternMetric > div {
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 0;
  }

  .chartLegend span {
    white-space: normal;
    text-align: center;
  }

  .tasksHeader .mockupSummary {
    max-width: 58cqi;
  }

  .tasksHeader .filter {
    max-width: 38%;
  }

  .taskLane {
    padding-inline: 0.2rem;
  }

  .taskCard {
    padding-inline: 0.25rem;
  }
}
}