@scope ([data-vera-inside-product-mockup]) {
  :scope.mockup {
    --vera-navy: #061c5a;
    --vera-muted: #78819c;
    --vera-warm: #f8f6f3;
    --vera-border: #e6e2d9;
    --vera-orange: #ff6600;
    --vera-submit: #f0ece2;
    --vera-execute-orange: #f8580e;
    --vera-execute-card: #fbf9f4;
    --vera-execute-meta: #5d616f;

    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    color: var(--vera-navy);
  }

  .mockup p {
    margin: 0;
  }

  .mockup img {
    display: block;
    max-width: none;
  }

  .sidebar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    box-sizing: border-box;
    width: 26.5152cqi;
    border-inline-end: max(1px, 0.1515cqi) solid var(--vera-border);
    background: #fff;
  }

  .newTask {
    position: absolute;
    inset-block-start: 2.4242cqi;
    inset-inline-start: 2.4242cqi;
    display: flex;
    width: 21.5152cqi;
    height: 4.5455cqi;
    align-items: center;
    justify-content: center;
    gap: 0.6061cqi;
    border-radius: 0.9091cqi;
    background: var(--vera-orange);
    color: #fff;
    font-size: 1.7782cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .newTaskIcon {
    width: 2.1212cqi;
    height: 2.1212cqi;
    flex: none;
  }

  .newTask > span {
    display: block;
  }

  .dayBand {
    position: absolute;
    inset-inline: 0;
    height: 4.2424cqi;
  }

  .dayBand::before {
    position: absolute;
    inset: 0;
    background: var(--vera-warm);
    content: "";
    opacity: 0.5;
  }

  .dayBand[data-day="today"] {
    inset-block-start: 9.5455cqi;
  }

  .dayBand[data-day="yesterday"] {
    inset-block-start: 38.4848cqi;
  }

  .dayLabel {
    position: absolute;
    inset-block-start: 1.2121cqi;
    inset-inline-start: 2.4242cqi;
    color: var(--vera-muted);
    font-size: 1.5152cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .dayBand[data-day="yesterday"] .dayLabel {
    inset-block-start: 1.0606cqi;
  }

  .separator {
    position: absolute;
    inset-inline: 0;
    z-index: 1;
    border-block-start: max(1px, 0.1515cqi) solid var(--vera-border);
  }

  .separator[data-separator-position="63"] {
    inset-block-start: 9.5455cqi;
  }

  .separator[data-separator-position="92"] {
    inset-block-start: 13.9394cqi;
  }

  .separator[data-separator-position="146"] {
    inset-block-start: 22.1212cqi;
  }

  .separator[data-separator-position="200"] {
    inset-block-start: 30.303cqi;
  }

  .separator[data-separator-position="254"] {
    inset-block-start: 38.4848cqi;
  }

  .separator[data-separator-position="283"] {
    inset-block-start: 42.8788cqi;
  }

  .separator[data-separator-position="337"] {
    inset-block-start: 51.0606cqi;
  }

  .separator[data-separator-position="391"] {
    inset-block-start: 59.2424cqi;
  }

  .historyItem {
    position: absolute;
    inset-inline-start: 2.4242cqi;
    width: 21.2121cqi;
    overflow-wrap: break-word;
    color: var(--vera-navy);
    font-size: 1.7782cqi;
    font-weight: 400;
    line-height: 1.3;
  }

  .historyItem[data-history-item="renewal"] {
    inset-block-start: 15.7576cqi;
  }

  .historyItem[data-history-item="stalledDeal"] {
    inset-block-start: 23.9394cqi;
  }

  .historyItem[data-history-item="handover"] {
    inset-block-start: 32.1212cqi;
  }

  .historyItem[data-history-item="quietAccounts"] {
    inset-block-start: 44.697cqi;
  }

  .historyItem[data-history-item="emmaFollowUp"] {
    inset-block-start: 52.8788cqi;
  }

  .workspace {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 26.5152cqi;
    width: 73.4848cqi;
    overflow: hidden;
    background: var(--vera-warm);
  }

  .texture {
    position: absolute;
    inset: 0;
    background-image: url("/images/products/vera/dot-grid.png");
    background-position: left top;
    background-size: 16.9697cqi 16.9697cqi;
    content: "";
    opacity: 0.15;
  }

  .assistant {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  .greeting {
    position: absolute;
    inset-block-start: 21.0606cqi;
    inset-inline: 0;
    font-size: 3.6364cqi;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  .introduction {
    position: absolute;
    inset-block-start: 26.8182cqi;
    inset-inline-start: 8.4848cqi;
    color: var(--vera-muted);
    font-size: 1.9697cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .composer {
    position: absolute;
    inset-block-start: 33.9394cqi;
    inset-inline-start: 6.5152cqi;
    box-sizing: border-box;
    width: 60.6061cqi;
    height: 5.6061cqi;
    border: max(1px, 0.1515cqi) solid var(--vera-border);
    border-radius: 0.9091cqi;
    background: #fff;
  }

  .placeholder {
    position: absolute;
    inset-block-start: 1.6667cqi;
    inset-inline-start: 1.5152cqi;
    color: var(--vera-muted);
    font-size: 1.8182cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .submit {
    position: absolute;
    inset-block-start: 0.7576cqi;
    inset-inline-start: 55.7576cqi;
    display: grid;
    width: 4.0909cqi;
    height: 4.0909cqi;
    place-items: center;
    border-radius: 0.6061cqi;
    background: var(--vera-submit);
  }

  .submit img {
    width: 1.9697cqi;
    height: 1.9697cqi;
  }

  .meta {
    position: absolute;
    inset-block-start: 41.0606cqi;
    inset-inline-start: 8.0303cqi;
    display: flex;
    height: 2.1212cqi;
    align-items: flex-start;
    gap: 1.2121cqi;
  }

  .meta img {
    width: 2.1212cqi;
    height: 2.1212cqi;
    flex: none;
  }

  .version {
    margin-inline-start: 0.1818cqi;
    padding-block-start: 0.1515cqi;
    color: var(--vera-muted);
    font-size: 1.5152cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .suggestions {
    position: absolute;
    inset-block-start: 47.1212cqi;
    inset-inline-start: 6.5152cqi;
    display: grid;
    justify-items: start;
    gap: 1.1879cqi;
  }

  .suggestions > span {
    display: inline-flex;
    box-sizing: border-box;
    height: 4.5936cqi;
    align-items: center;
    padding-inline: 2.0742cqi;
    border: max(1px, 0.1482cqi) solid var(--vera-border);
    border-radius: 14.8182cqi;
    background: #fff;
    color: var(--vera-navy);
    font-size: 1.7782cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .insideHeader {
    position: absolute;
    inset-block-start: 3.6364cqi;
    inset-inline: 3.3333cqi 3.3333cqi;
    height: 8.0303cqi;
  }

  .insideHeaderMark {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    width: 3.7879cqi;
    height: 3.7879cqi;
    place-items: center;
    border-radius: 0.7576cqi;
    background: var(--vera-execute-orange);
  }

  .insideHeaderMarkIcon {
    width: 2.8539cqi;
    height: 2.4948cqi;
  }

  .insideHeaderTitle {
    position: absolute;
    inset-block-start: 0.1515cqi;
    inset-inline-start: 5.4545cqi;
    color: var(--vera-navy);
    font-size: 2.897cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .insideHeaderMeta {
    position: absolute;
    inset-block-start: 5.303cqi;
    inset-inline-start: 0;
    color: var(--vera-execute-meta);
    font-size: 2.1429cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .executeStepsCard {
    position: absolute;
    inset-block-start: 16.3636cqi;
    inset-inline-start: 3.3333cqi;
    box-sizing: border-box;
    width: 93.0303cqi;
    height: 65cqi;
    overflow: hidden;
    border: max(1px, 0.2165cqi) solid var(--vera-border);
    border-radius: 1.2986cqi;
    background: var(--vera-execute-card);
  }

  .executeCardHeader {
    position: absolute;
    inset-block-start: 3.0303cqi;
    inset-inline-start: 2.5758cqi;
    color: var(--vera-navy);
    font-size: 2.897cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .executeSystemCount {
    position: absolute;
    inset-block-start: 2.4242cqi;
    inset-inline-end: 2.4242cqi;
    display: inline-flex;
    box-sizing: border-box;
    min-width: 13.3333cqi;
    height: 5.1515cqi;
    align-items: center;
    justify-content: center;
    padding-inline: 1.6667cqi;
    border: max(1px, 0.1838cqi) solid var(--vera-border);
    border-radius: 1.1029cqi;
    background: #fff;
    color: var(--vera-navy);
    font-size: 2.022cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .executeSteps {
    position: absolute;
    inset-block-start: 9.8485cqi;
    inset-inline: 0;
    display: grid;
    height: 55.1515cqi;
    grid-template-rows: 9.0909cqi 9.0909cqi repeat(4, 9.2424cqi);
  }

  .executeStepRow {
    display: grid;
    box-sizing: border-box;
    min-width: 0;
    align-items: center;
    grid-template-columns: 3.3333cqi minmax(0, 1fr) auto;
    column-gap: 2.1212cqi;
    padding-inline: 2.5758cqi 2.4242cqi;
    border-block-start: max(1px, 0.1515cqi) solid var(--vera-border);
  }

  .executeStatus {
    width: 3.3333cqi;
    height: 3.3333cqi;
  }

  .executeStepText {
    min-width: 0;
    color: var(--vera-navy);
    font-size: 2.2591cqi;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  :lang(en) .executeStepText {
    white-space: nowrap;
  }

  :lang(pl) .executeStepText {
    overflow-wrap: normal;
    white-space: normal;
  }

  .executeSystemBadge {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 6.6667cqi;
    height: 6.6667cqi;
    place-items: center;
    border: max(1px, 0.1838cqi) solid var(--vera-border);
    border-radius: 1.1029cqi;
    background: #fff;
  }

  .executeSystemBadge[data-vera-execute-system="vera"] img {
    width: 3.5938cqi;
    height: 3.1415cqi;
  }

  .executeSystemBadge[data-vera-execute-system="jira"] img {
    width: 4.0909cqi;
    height: 4.2424cqi;
  }

  .executeSystemBadge[data-vera-execute-system="hubspot"] img {
    width: 3.9394cqi;
    height: 3.9394cqi;
  }

  .executeSystemBadge[data-vera-execute-system="googleDrive"] img {
    width: 3.7879cqi;
    height: 3.0303cqi;
  }

  .executeVoiceLabMark {
    position: absolute;
    inset-block-start: 1.4609cqi;
    inset-inline-start: 1.1646cqi;
    width: 3.6991cqi;
    height: 3.6508cqi;
  }

  .executeVoiceLabPhone {
    position: absolute;
    inset-block-start: 2.5624cqi;
    inset-inline-start: 2.3481cqi;
    width: 1.3191cqi;
    height: 1.4091cqi;
  }

  .executeApproval {
    display: inline-flex;
    box-sizing: border-box;
    min-width: 18.1818cqi;
    height: 4.2424cqi;
    align-items: center;
    justify-content: center;
    padding-inline: 1.5152cqi;
    border-radius: 0.7576cqi;
    background: rgb(249 121 60 / 20%);
    color: #d85700;
    font-size: 2.022cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .automateControls {
    position: absolute;
    inset-block-start: 5.9091cqi;
    inset-inline-end: 3.3333cqi;
    display: flex;
    align-items: center;
    gap: 1.5152cqi;
  }

  .automateOwnerFilter,
  .automateNewRoutine {
    display: inline-flex;
    box-sizing: border-box;
    height: 5.4545cqi;
    align-items: center;
    justify-content: center;
    border-radius: 1.1688cqi;
    font-size: 2.1429cqi;
    line-height: 1.3;
    white-space: nowrap;
  }

  .automateOwnerFilter {
    min-width: 17.5758cqi;
    gap: 1.5152cqi;
    padding-inline: 1.7545cqi 1.45cqi;
    border: max(1px, 0.1948cqi) solid var(--vera-border);
    background: #fff;
    color: var(--vera-execute-meta);
    font-weight: 400;
  }

  .automateOwnerFilter img {
    width: 2.3377cqi;
    height: 2.3377cqi;
    flex: none;
  }

  .automateNewRoutine {
    min-width: 16.9697cqi;
    padding-inline: 1.7545cqi;
    background: var(--vera-orange);
    color: #fff;
    font-weight: 500;
  }

  .automateHeaderDivider {
    position: absolute;
    inset-block-start: 15.1515cqi;
    inset-inline: 0;
    border-block-start: max(1px, 0.1515cqi) solid var(--vera-border);
  }

  .automateTable {
    position: absolute;
    inset-block-start: 19.5455cqi;
    inset-inline-start: 3.0303cqi;
    box-sizing: border-box;
    width: 93.6364cqi;
    height: 63.4848cqi;
    overflow: hidden;
    border: max(1px, 0.1515cqi) solid var(--vera-border);
    border-radius: 0.9091cqi;
    background: #fff;
  }

  .automateTableHeader,
  .automateRow {
    display: grid;
    grid-template-columns: 27.4242cqi 24.0909cqi 23.4848cqi 18.6364cqi;
  }

  .automateTableHeader {
    box-sizing: border-box;
    height: 8.0303cqi;
    align-items: start;
    border-block-end: max(1px, 0.1515cqi) solid var(--vera-border);
    background: var(--vera-execute-card);
  }

  .automateTableHeader > span {
    padding-block-start: 2.8788cqi;
    padding-inline-start: 2.5758cqi;
    color: var(--vera-navy);
    font-size: 2.1429cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .automateRows {
    display: grid;
    height: 55.303cqi;
    grid-template-rows: repeat(4, 11.0606cqi) 11.2121cqi;
  }

  .automateRow {
    position: relative;
    min-width: 0;
    border-block-end: max(1px, 0.1515cqi) solid var(--vera-border);
  }

  .automateRow:last-child {
    border-block-end: 0;
  }

  .automateRoutineLabel,
  .automateSchedule {
    min-width: 0;
    padding-block-start: 2.8788cqi;
    padding-inline: 2.5758cqi 1.5152cqi;
    font-size: 2.1429cqi;
    font-weight: 400;
    line-height: 1.3;
  }

  .automateRoutineLabel {
    color: var(--vera-navy);
  }

  .automateSchedule {
    color: var(--vera-execute-meta);
  }

  .automateOwner {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 1.2121cqi;
    padding-block-start: 2.4242cqi;
    padding-inline-start: 2.5758cqi;
    color: var(--vera-execute-meta);
    font-size: 2.1429cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .automateOwner > span:last-child {
    padding-block-start: 0.4545cqi;
  }

  .automateAvatar {
    display: grid;
    box-sizing: border-box;
    width: 3.7879cqi;
    height: 3.7879cqi;
    flex: none;
    place-items: center;
    border: max(1px, 0.1515cqi) solid rgb(6 28 90 / 20%);
    border-radius: 50%;
    background: #eaf5fb;
    color: var(--vera-navy);
    font-size: 1.5152cqi;
    font-weight: 500;
    line-height: 1.3;
  }

  .automateLastRun {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 1.2121cqi;
    padding-block-start: 2.8788cqi;
    padding-inline-start: 2.5758cqi;
    color: var(--vera-execute-meta);
    font-size: 2.1429cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .automateStatusDot {
    width: 1.2121cqi;
    height: 1.2121cqi;
    flex: none;
    margin-block-start: 0.7576cqi;
    border-radius: 50%;
  }

  .automateLastRun[data-vera-automate-status="success"]
    .automateStatusDot {
    background: #0fc963;
  }

  .automateLastRun[data-vera-automate-status="warning"]
    .automateStatusDot {
    background: #fb9f0c;
  }

  .automateLastRun[data-vera-automate-status="paused"]
    .automateStatusDot {
    background: #bbb;
  }

  .channelsChannelName {
    position: absolute;
    inset-block-start: 3.7879cqi;
    inset-inline-start: 3.1818cqi;
    color: var(--vera-navy);
    font-size: 2.897cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .channelsPlatform {
    position: absolute;
    inset-block-start: 3.6364cqi;
    inset-inline-start: 85cqi;
    display: flex;
    align-items: flex-start;
    gap: 1.3636cqi;
    color: var(--vera-navy);
    font-size: 2.1429cqi;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .channelsPlatformLogo {
    width: 3.9394cqi;
    height: 3.9394cqi;
    flex: none;
  }

  .channelsPlatform > span {
    padding-block-start: 0.9091cqi;
  }

  .channelsDivider {
    position: absolute;
    inset-block-start: 10.9091cqi;
    inset-inline: 0;
    border-block-start: max(1px, 0.1515cqi) solid var(--vera-border);
  }

  .channelsMessage {
    position: absolute;
    inset-inline-start: 3.1818cqi;
    width: 93.4848cqi;
  }

  .channelsMessage[data-vera-channels-message="deliveryQuestion"] {
    inset-block-start: 15.7576cqi;
  }

  .channelsMessage[data-vera-channels-message="deliveryHistory"] {
    inset-block-start: 33.7879cqi;
  }

  .channelsMessage[data-vera-channels-message="serviceNote"] {
    inset-block-start: 53.4848cqi;
  }

  .channelsMessage[data-vera-channels-message="draftConfirmation"] {
    inset-block-start: 67.7273cqi;
  }

  .channelsAvatar {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    width: 7.2727cqi;
    height: 7.2727cqi;
    overflow: hidden;
    place-items: center;
  }

  .channelsSalesAvatar {
    border-radius: 1.0606cqi;
  }

  .channelsSalesAvatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .channelsVeraAvatar {
    border-radius: 0.9917cqi;
    background: var(--vera-execute-orange);
  }

  .channelsVeraMark {
    width: 4.9355cqi;
    height: 4.3142cqi;
  }

  .channelsAuthor {
    position: absolute;
    color: var(--vera-navy);
    font-size: 2.2727cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .channelsMessage[data-vera-channels-author="sales"] .channelsAuthor {
    inset-block-start: 0;
    inset-inline-start: 9.5455cqi;
  }

  .channelsMessage[data-vera-channels-author="vera"] .channelsAuthor {
    inset-block-start: -0.1515cqi;
    inset-inline-start: 9.3939cqi;
  }

  .channelsTime {
    position: absolute;
    inset-block-start: 0.303cqi;
    color: var(--vera-navy);
    font-size: 1.9697cqi;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.4;
    white-space: nowrap;
  }

  .channelsMessage[data-vera-channels-author="sales"] .channelsTime {
    inset-inline-start: 24.8485cqi;
  }

  .channelsMessage[data-vera-channels-author="vera"] .channelsTime {
    inset-block-start: 0.1515cqi;
    inset-inline-start: 21.9697cqi;
  }

  .channelsAppBadge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 15.7576cqi;
    display: grid;
    width: 5.1515cqi;
    height: 2.7273cqi;
    place-items: center;
    border-radius: 0.6061cqi;
    background: #e7e7e7;
    color: rgb(82 82 82 / 50%);
    font-size: 1.6667cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .channelsBody {
    min-width: 0;
    color: var(--vera-navy);
    font-size: 2.2727cqi;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: normal;
  }

  .channelsMessage[data-vera-channels-author="sales"]
    > .channelsBody {
    position: absolute;
    inset-block-start: 3.7879cqi;
    inset-inline-start: 9.5455cqi;
    width: 66.0606cqi;
  }

  .channelsMessage[data-vera-channels-author="vera"] .channelsBody {
    position: absolute;
    inset-block-start: 3.9394cqi;
    inset-inline-start: 9.3939cqi;
    width: 81.8182cqi;
  }

  .channelsMentionRow {
    position: absolute;
    inset-block-start: 4.697cqi;
    inset-inline-start: 9.5455cqi;
    display: grid;
    min-width: 0;
    grid-template-columns: 9.2424cqi 66.0606cqi;
    gap: 0.9091cqi;
  }

  .channelsMention {
    display: grid;
    width: 9.2424cqi;
    height: 3.9394cqi;
    place-items: center;
    border-radius: 0.6061cqi;
    background: rgb(250 202 197 / 50%);
    color: var(--vera-execute-orange);
    font-size: 2.2727cqi;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .channelsMentionRow .channelsBody {
    position: static;
    width: 66.0606cqi;
    padding-block-start: 0.1515cqi;
  }
}