:root,
.light-mode {
  /* TEXT */
  --ids__text-RGB: 30, 30, 35;
  --ids__text-link-RGB: 50, 50, 70;
  --ids__text-hover-RGB: 110, 140, 190;
  --ids__text-caption-RGB: 150, 150, 170;
  --ids__text-inverted-RGB: 242, 242, 246;

  /* BACKGROUND */
  --ids__background-RGB: 255, 255, 255;
  --ids__bg-surface-RGB: 242, 242, 246;
  --ids__bg-accent-RGB: 20, 20, 50;
  --ids__bg-hover-RGB: var(--ids__text-hover-RGB);
  --ids__bg-mark-RGB: 255, 200, 29;

  /* UI */
  --ids__UI-control-RGB: var(--ids__bg-surface-RGB);
  --ids__UI-border-RGB: 220, 220, 230;
  --ids__UI-error-RGB: 255, 53, 84;
  --ids__UI-success-RGB: 21, 207, 135;
}

.dark-mode {
  /* TEXT */
  --ids__text-RGB: 255, 255, 255;
  --ids__text-caption-RGB: 128, 128, 128;
  --ids__text-link-RGB: 255, 255, 255;
  --ids__text-inverted-RGB: 20, 20, 30;
  --ids__text-hover-RGB: 100, 110, 140;

  /* BACKGROUND */
  --ids__background-RGB: 30, 30, 35;
  --ids__bg-surface-RGB: 50, 50, 70;
  --ids__bg-accent-RGB: 20, 20, 50;
  --ids__bg-hover-RGB: 100, 110, 140;
  --ids__bg-mark-RGB: 255, 200, 29;

  /* UI */
  --ids__UI-control-RGB: var(--ids__bg-surface-RGB);
  --ids__UI-border-RGB: var(--ids__bg-surface-RGB);
  --ids__UI-error-RGB: 255, 53, 84;
  --ids__UI-success-RGB: 21, 207, 135;

  color: rgba(var(--ids__text-RGB), 1);
  background-color: rgba(var(--ids__background-RGB), 1);
}

body {
  color: rgba(var(--ids__text-RGB), 1);
  background-color: rgba(var(--ids__background-RGB), 1);
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/**
 * IDS additional resets
 */

*,
*:before,
*:after {
  box-sizing: border-box;

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

img {
  display: block;
  width: 100%;
}

* {
  box-sizing: border-box;
}

/* Fonts */




@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}


:root {
  --sans: "Inter";
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-synthesis: none;
}

/* Density */

:root {
  --ids__density: 1.3;
  --ids__radius: 1.5em;
}

body {
  font-size: 1em;
  line-height: var(--ids__density);

}

html {
  /* Font-size calculation using variables */

  --mobile-font-size-min: 14;
  --mobile-font-size-max: 32;

  --desktop-font-size-min: 9.3;
  --desktop-font-size-max: 20;

  --mobile-viewport-min: 320;
  --mobile-desktop-breakpoint: 768;
  --desktop-viewport-max: 1500;

  font-size: calc(var(--mobile-font-size-min) * 1px);

  @media screen and (min-width: 320px) {
    font-size: calc(var(--mobile-font-size-min) * 1px + (var(--mobile-font-size-max) - var(--mobile-font-size-min)) * ((100vw - var(--mobile-viewport-min) * 1px) / (var(--mobile-desktop-breakpoint) - var(--mobile-viewport-min))));
  }

  @media screen and (min-width: 768px) {
    font-size: calc(var(--desktop-font-size-min) * 1px + (var(--desktop-font-size-max) - var(--desktop-font-size-min)) * ((100vw - var(--mobile-desktop-breakpoint) * 1px) / (var(--desktop-viewport-max) - var(--mobile-desktop-breakpoint))));
  }

  @media screen and (min-width: 1500px) {
    font-size: calc(var(--desktop-font-size-max) * 1px);
  }
}

/* Smooth scroll for anchored links */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.ids__space {
  height: calc(var(--ids__density) * 0.7em);

  &.S {
    height: calc(var(--ids__density) * 0.7em);
  }

  &.M {
    height: calc(var(--ids__density) * 1.4em);
  }

  &.L {
    height: calc(var(--ids__density) * 2.4em);
  }

  &.XL {
    height: calc(var(--ids__density) * 4em);
  }
}

.ids__wrapper {
  position: relative;
  width: 60%;
  max-width: 1000px;
  margin: 0 auto;


  @media (width < 768px) {
    width: 100%;
    padding: 0 calc(var(--ids__density) * 0.4em);
  }

  & .ids__text-width {
    width: 80%;

    @media (width < 768px) {
      width: 100%;
    }
  }
}

.ids__sequence {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--ids__density) * 0.4em);
  --gap: 0em;
  gap: var(--gap);

  &.gap-L {
    --gap: 1.5em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-M {
    --gap: 1em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-S {
    --gap: 0.5em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  .ids__sequence-item {
    --columns: 4;
    width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));

    @media (width < 768px) {
      --columns: 2;
    }
  }

  &.XL {
    .ids__sequence-item {
      --columns: 2;

      @media (width < 768px) {
        --columns: 2;
      }
    }
  }

  &.L {
    .ids__sequence-item {
      --columns: 3;

      @media (width < 768px) {
        --columns: 2;
      }
    }
  }

  &.S {
    .ids__sequence-item {
      --columns: 6;

      @media (width < 768px) {
        --columns: 3;
      }
    }
  }
}

.ids__rounded {
  border-radius: var(--ids__radius);
  corner-shape: squircle;
  overflow: hidden;
}

@supports not (corner-shape: squircle) {
  .ids__rounded {
    border-radius: 0;
    border-radius: initial;
    mask:
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>') top left / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>') top right / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>') bottom right / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>') bottom left / calc(var(--ids__radius) * 100) no-repeat intersect;
  }
}
.ids {
  & a {
    color: rgb(var(--ids__text-link-RGB));
    text-decoration: underline;
    will-change: color;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(var(--ids__text-link-RGB), 0.2);
    transition: color 0.5s ease, text-decoration 0.5s ease,
      -webkit-text-decoration 0.5s ease;

    &:hover {
      color: rgb(var(--ids__text-hover-RGB));
      text-decoration-color: rgba(var(--ids__text-hover-RGB), 0.2);
      transition: color 0s ease, text-decoration 0s ease,
        -webkit-text-decoration 0s ease;
    }
  }

  & p {
    margin-top: 0;
    margin-bottom: calc(var(--ids__density) * 0.4em);

    &.loud {
      font-size: 1.5em;
      line-height: 1.15;
      font-weight: 450;

      & em {
        font-size: 1.02em;
      }

      @media (width < 768px) {
        font-size: 1.35em;
      }

      &.serif {
        font-size: 1.44em;
        line-height: 1.2;
      }

      &.mono {
        font-size: 1.35em;
        line-height: 1.25;

        & em {
          font-size: 1.05em;
        }
      }
    }

    &.caption {
      font-size: 0.8em;
      margin-bottom: 0.4em;
      color: rgba(var(--ids__text-caption-RGB), 1);
    }
  }

  & span.caption {
    font-size: 0.8em;
    color: rgba(var(--ids__text-caption-RGB), 1);
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    margin: 0;
    font-weight: 600;
  }

  & h1 {
    font-size: 1.8em;
    font-weight: 600;
    line-height: calc(var(--ids__density) / 1.3);
    margin-bottom: 0.2em;

    &.L {
      font-size: 3em;
    }
  }

  & h2 {
    font-size: 1.5em;
    font-weight: 550;
    margin-bottom: 0.5em;

    @media (width < 768px) {
      font-size: 1.8em;
    }
  }

  & h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 0.4em;
  }

  & h4 {
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.4em;
  }

  & h5 {
    font-size: 1.08em;
    font-weight: 450;
    line-height: 1.2;
    margin-bottom: 0.5em;
  }

  & h6 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: var(--ids__density);
    margin-bottom: 0.5em;
  }

  & strong,
  & b {
    font-weight: 600;
  }

  & mark {
    color: rgb(var(--ids__text-RGB));
    background-color: rgb(var(--ids__bg-mark-RGB));
  }

  & ul,
  & ol {
    margin: 0 0 calc(var(--ids__density) * 0.75em) 0;
    padding: 0;

    & li {
      position: relative;
      margin-bottom: calc(var(--ids__density) * 0.5em);
    }
  }

  & ul {
    & li {
      list-style-type: none;
      padding-left: calc(var(--ids__density) * 0.75em);

      &:before {
        position: absolute;
        left: 0;
        content: "⋅ ";
      }
    }
  }

  & ol {
    & li {
      list-style: decimal inside none;
    }
  }

  & em {
    font-family: var(--serif);
    font-size: 1.05em;
  }

  & blockquote {
    font-size: 1.4em;
    line-height: var(--ids__density);
    margin: 0;
    padding-left: calc(var(--ids__density) * 0.75em);
    margin-bottom: calc(var(--ids__density) * 1em);
  }

  & aside {
    margin: 0;
    margin-bottom: calc(var(--ids__density) * 0.5em);
    background: rgb(var(--ids__bg-surface-RGB));
    padding-top: calc(var(--ids__density) * 0.4em);
    padding-right: calc(var(--ids__density) * 1.5em);
    padding-bottom: calc(var(--ids__density) * 0.4em);
    padding-left: calc(var(--ids__density) * 0.5em);
    border-radius: 0.2em;

    @media (width < 768px) {
      padding-right: calc(var(--ids__density) * 0.75em);
    }
  }

  & code {
    font-size: 0.9em;
    font-family: var(--mono);
    letter-spacing: 0.02em;
    font-weight: 450;
    padding: 0.1em 0.25em;
    border-radius: 0.2em;
    color: rgba(var(--ids__text-RGB), 1);
    border: 1px solid rgba(var(--ids__text-RGB), 0.1);
    background: rgba(var(--ids__text-RGB), 0.1);
  }

  & figure {
    margin: 0 0 calc(var(--ids__density) * 0.5em) 0;

    &.XXS,
    &.ids__figure__XXS {
      width: 25%;
    }

    &.XS,
    &.ids__figure__XS {
      width: 50%;
    }

    &.S,
    &.ids__figure__S {
      width: 75%;
    }

    & figcaption {
      margin-top: calc(var(--ids__density) * 0.25em);
      font-size: 0.8em;
      line-height: var(--ids__density);
      color: rgba(var(--ids__text-caption-RGB), 1);
    }
  }

  & details {
    padding: 0.5em;
    cursor: pointer;
    border-radius: var(--ids__radius);

    & summary {
      padding-bottom: var(--ids__micro-padding);
    }
  }

  & table {
    border-spacing: 0;

    @media (max-width: 768px) {
      font-size: 0.7em;
    }

    & tr {
      & td {
        padding: 0.3em 1em 0.2em 0;
        border-top: 1px solid rgba(var(--ids__UI-border-RGB), 1);
        vertical-align: top;
      }

      &:last-child {
        & td {
          border-bottom: none;
        }
      }
    }
  }

  & hr {
    border-top-color: rgba(var(--ids__text-RGB), 0.2);
    border-bottom: 0;
  }

  & .promo-link {
    font-family: var(--mono);
    display: inline-block;
    padding: 0.5em 1em;
    background-color: rgb(var(--ids__bg-accent-RGB));
    text-decoration: none;
    color: white;
    border-radius: 0.25em;
    transition: background-color 0.5s ease;

    &:hover {
      background-color: rgb(var(--ids__bg-hover-RGB));
      transition: background-color 0s;
      color: white;
    }
  }
}

.header {
  padding: 0em 0 2em;

  & nav {
    display: flex;
    gap: 0.7em;
    flex-wrap: wrap;

    & a,
    span {
      &:nth-child(2) {
        font-weight: 650;
      }
    }
  }
}

.logo-container {
  width: 1.3em;
  height: 1.3em;
  margin-right: -0.3em;
}

.footer {
  margin-top: 5em;
  padding: 4em;
  text-align: center;
  font-size: 0.8em;
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
}
.nav-container {
  position: relative;
  font-size: 0.8em;
  display: flex;
  gap: 0.5em;

  @media (width < 768px) {
    flex-wrap: wrap;
  }

  & .nav-link {
    background-color: rgba(var(--ids__bg-surface-RGB), 1);
    padding: 0.7em 1em;
    cursor: pointer;
    transition: color 0.5s ease, background-color 0.5s ease;
    text-decoration: none;
    color: inherit;

    @media (width < 768px) {
      &:first-of-type {
        order: 1;
      }
      &:last-of-type {
        order: 2;
      }
    }

    &:hover {
      color: rgb(var(--ids__text-hover-RGB), 1);
      background-color: rgb(var(--ids__bg-hover-RGB), 0.15);
      transition: color 0s ease, background-color 0s ease;
    }
  }

  & .nav-disclaimer {
    background-color: rgba(var(--ids__bg-surface-RGB), 1);
    padding: 0.7em;
    flex: 1;

    @media (width < 768px) {
      flex-basis: 100%;
      order: 4;
    }
  }

  & .share-button-wrapper {
    position: relative;
    
    @media (width < 768px) {
      order: 3;
      flex: 1;
    }
  }

  & .share-button {
    width: 100%;
    padding: 0.7em 1em;
    height: 100%;
    font-size: inherit;
  }
}

.summary-container {
  width: 98%;
  margin: 0.5em auto;

  & .summary-table {
    margin: 1.5em 0;
    width: 100%;

    & thead {
      & th {
        color: rgb(var(--ids__text-RGB));
        font-size: 0.8em;
        font-weight: normal;
        text-align: left;
        vertical-align: top;
        padding-bottom: 0.5em;
      }
    }

    & tr {
      & td {
        padding-bottom: 0.5em;
        padding-right: 0.3em;
        vertical-align: top;
      }

      & .speaker-name-column {
        width: 28%;
      }

      & .speaker-name-input-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
      }

      & .speaker-name-input {
        border: none;
        background-color: transparent;
        border-radius: 0.2em;
        padding: 0.1em 0.2em 0.1em 0;
        margin: 0;
        height: 1.8em;
        line-height: 1.6em;
        font: inherit;
        color: rgba(var(--ids__text-RGB), 1);
        width: 100%;
        outline: none;
        cursor: text;
        box-sizing: border-box;
        transition: color 0.5s ease, background-color 0.5s ease;

        &:hover {
          color: rgba(var(--ids__text-RGB), 0.8);
          transition: color 0s ease, background-color 0s ease;
        }

        &:focus {
          background-color: rgba(var(--ids__bg-hover-RGB), 0.15);
          color: rgba(var(--ids__text-RGB), 1);
        }
      }

      & .speaker-name-input-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 0.8em;
        height: 0.8em;
        margin-left: 0.1em;
        pointer-events: none;
        opacity: 0.8;
        visibility: visible;
        transition: opacity 0.2s ease, left 0.1s ease, visibility 0s ease;
        color: inherit;

        .speaker-name-input-wrapper:hover & {
          opacity: 1;
        }
      }

      &
        .speaker-name-input-wrapper:has(.speaker-name-input:focus)
        .speaker-name-input-icon {
        opacity: 0;
        visibility: hidden;
      }

      & .speaker-info-column {
        width: 33%;
      }

      & .behaviours-column {
        width: 39%;
        padding-right: 0;
      }
    }

    & p {
      margin-bottom: 0.2em;
    }
  }

  & .speaker-fingerprint-wrapper {
    display: flex;
    align-items: center;
    gap: 0.3em;
    margin: 0;
  }

  & .fingerprint-emotion-caption {
    font-size: 0.8em;
    color: rgba(var(--ids__text-caption-RGB), 1);
    margin-top: 0.2em;
    min-height: 1.2em;
  }

  & .speaker-fingerprint {
    height: 1.8em;
    flex-shrink: 0;
    display: flex;
    gap: 0;
    border-radius: 0.2em;
    overflow: hidden;
    align-self: center;
    --base-width: 70%;

    & .speaker-fingerprint-clip {
      min-width: 2px;
      height: 100%;
      cursor: pointer;
      transition: filter 0.2s ease, opacity 0.2s ease;
      /* Default background color - will be overridden by emotion classes */
      background-color: rgba(var(--emotion-neutral-RGB), 1);

      &:hover,
      &.hover {
        filter: brightness(140%) saturate(115%);
        transition: filter 0s ease, opacity 0s ease;
      }
    }
  }

  & .speaker-time-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex-shrink: 0;
  }

  & .speaker-time-percent {
    font-size: 1em;
    font-weight: normal;
    padding: 0.1em 0;
    margin: 0;
    height: 1.8em;
    line-height: 1.6em;
    display: flex;
    align-items: center;
  }

  & .speaker-time-label {
    font-size: 0.8em;
    opacity: 0.7;
  }
}

a.detected-behaviour {
  font-weight: 700;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(var(--ids__text-link-RGB), 1);

  &:hover {
    text-decoration-color: rgba(var(--ids__text-hover-RGB), 1);
  }
}

/* Keyframe animation for playing clip background */
@keyframes playing-pulse {
  0%, 100% {
    background-color: rgb(var(--ids__bg-hover-RGB), 0.2);
  }
  50% {
    background-color: rgb(var(--ids__bg-hover-RGB), 0.3);
  }
}

.transcript-container {
  width: 98%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  /* margin-bottom: -8em; */
  
  @media (width < 768px) {
    width: 100%;
  }
  
  & .transcript-clip {
    background-color: rgba(var(--ids__bg-surface-RGB), 1);
    padding: 0.7em 3.7em 0.7em 0.7em;
    cursor: pointer;
    transition: color 0.5s ease, background-color 0.5s ease;
    --ids__radius: 2em;

    & .clip-visualization {
      display: none;
    }

    border-radius: var(--ids__radius);
    corner-shape: squircle;

    &[data-speaker-index="1"] {
      margin-right: 3em;
      border-radius:  0 var(--ids__radius) var(--ids__radius) var(--ids__radius);

      @supports not (corner-shape: squircle) {
        --ids__radius: 2.5em;
        border-radius: 0;
        border-radius: initial;
        mask:
          
          url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>') top right / calc(var(--ids__radius) * 100) no-repeat intersect,
          url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>') bottom right / calc(var(--ids__radius) * 100) no-repeat intersect,
          url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>') bottom left / calc(var(--ids__radius) * 100) no-repeat intersect;
      }
    
        
    }
    &[data-speaker-index="2"] {
      margin-left: 3em;
      border-radius: var(--ids__radius) 0 var(--ids__radius) var(--ids__radius);

      @supports not (corner-shape: squircle) {
        --ids__radius: 2.5em;
        border-radius: 0;
        border-radius: initial;
        mask:
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>') top left / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>') bottom right / calc(var(--ids__radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>') bottom left / calc(var(--ids__radius) * 100) no-repeat intersect;
      }
    }
    
    /* Hover styles specific to transcript container */
    &:hover,
    &.hover {
      color: rgb(var(--ids__text-hover-RGB), 1);
      background-color: rgb(var(--ids__bg-hover-RGB), 0.15);
      transition: color 0s ease, background-color 0s ease;

      & .clip-caption {


        & .behaviour {
          color: rgb(var(--ids__text-hover-RGB));
          text-decoration-color: rgba(var(--ids__text-hover-RGB), 1);
          transition: color 0s ease, text-decoration 0s ease;
        }
      }

      


    }

    /* Playing state - highlight currently playing clip */
    &.playing {
      animation: playing-pulse 1s ease-in-out infinite;
    }

    & .clip-caption {
      font-size: 0.8em;
      display: flex;
      gap: 0.5em;
      margin-bottom: 0.4em;
      
      & .time {
        opacity: 0.5;        
      }
      & .duration {
        display: none;
        opacity: 0.5;        
      }
      & .name {
        opacity: 0.5;        
      }
      & .behaviour {
        font-weight: 600;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.2em;
        text-decoration-skip-ink: none;
        transition: color 0.5s ease, text-decoration 0.5s ease;
      }
      & .language {
        display: none;
        opacity: 0.5;        
      }
    }

    &.evidence {
      & .clip-text {
        font-size: 1.5em;
      }
    }

  }
}


/* Next clip container styles */
.next-clip-wrapper {
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0.5em;
  left: 0;
  width: 100%;
  z-index: 2000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(100%);
  opacity: 0;

  &.visible {
    transform: translateY(0);
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 1;
  }

  & .next-clip-container {
    margin: 0 auto;
    display: flex;
    background-color: rgba(var(--ids__background-RGB), 1);
    border: 1px solid rgba(var(--ids__text-RGB), 0.2);
    box-shadow: 0 1em 1em 0 rgba(var(--ids__text-RGB), 0.1);
    overflow: hidden;
    border-radius: 1.3em;

    & .clip-link:nth-child(1) {
      & a {
        
        padding-right: 0.4em; 
      }
    }
    & .clip-link:nth-child(2) {
      & a {
        border-left: 1px solid rgba(var(--ids__text-RGB), 0.2);
        padding-left: 0.4em; 
      }
    }

    & .clip-link {
      transition: opacity 0.3s ease;

      &.disabled {
        cursor: not-allowed;
      }
    }

    & a {
      display: block;
      text-decoration: none;
      
      padding: 0.4em 0.6em;      
      transition: background-color 0.5s ease, opacity 0.3s ease;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;

      &:hover:not(.disabled) {
        background-color: rgba(var(--ids__bg-hover-RGB), 0.1);
        transition: background-color 0s ease;
      }
    }
  }
}

:root {
  /* Emotion group colors - base values */
  --emotion-attack-rejection-group-RGB: 255, 53, 84;
  --emotion-threat-uncertainty-group-RGB: 180, 100, 200;
  --emotion-excited-engaged-group-RGB: 255, 120, 80;
  --emotion-low-energy-negative-group-RGB: 0, 120, 200;
  --emotion-calm-grounded-group-RGB: 110, 140, 190;
  --emotion-neutral-group-RGB: 90, 90, 110;

  /* Individual emotion variables - map to group variables */
  /* attack / rejection */
  --emotion-angry-RGB: var(--emotion-attack-rejection-group-RGB);
  --emotion-contemptuous-RGB: var(--emotion-attack-rejection-group-RGB);
  --emotion-disgusted-RGB: var(--emotion-attack-rejection-group-RGB);

  /* threat / uncertainty */
  --emotion-afraid-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-anxious-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-stressed-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-surprised-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-ashamed-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-frustrated-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-fear-RGB: var(--emotion-threat-uncertainty-group-RGB);

  /* excited / engaged */
  --emotion-affectionate-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-amused-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-excited-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-happy-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-hopeful-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-proud-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-relieved-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-curious-RGB: var(--emotion-excited-engaged-group-RGB);

  /* low energy, negative */
  --emotion-disappointed-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-bored-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-tired-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-concerned-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-confused-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-sad-RGB: var(--emotion-low-energy-negative-group-RGB);

  /* calm / grounded */
  --emotion-calm-RGB: var(--emotion-calm-grounded-group-RGB);
  --emotion-confident-RGB: var(--emotion-calm-grounded-group-RGB);
  --emotion-interested-RGB: var(--emotion-calm-grounded-group-RGB);

  /* no strong signal */
  --emotion-neutral-RGB: var(--emotion-neutral-group-RGB);
  --emotion-unknown-RGB: var(--emotion-neutral-group-RGB);
}

/* Emotion colors for speaker-fingerprint clips */
/* Need higher specificity to override summary.css styles */
/* Using same nested structure as summary.css for proper specificity */
.summary-container {
  & .speaker-fingerprint {
    & .speaker-fingerprint-clip {
      /* Emotion colors - using individual emotion variables */

      /* no strong signal */
      &.emotion-neutral {
        background-color: rgba(var(--emotion-neutral-RGB), 1);
      }
      &.emotion-unknown {
        background-color: rgba(var(--emotion-unknown-RGB), 1);
      }

      /* attack / rejection */
      &.emotion-angry {
        background-color: rgba(var(--emotion-angry-RGB), 1);
      }
      &.emotion-contemptuous {
        background-color: rgba(var(--emotion-contemptuous-RGB), 1);
      }
      &.emotion-disgusted {
        background-color: rgba(var(--emotion-disgusted-RGB), 1);
      }

      /* threat / uncertainty */
      &.emotion-afraid {
        background-color: rgba(var(--emotion-afraid-RGB), 1);
      }
      &.emotion-anxious {
        background-color: rgba(var(--emotion-anxious-RGB), 1);
      }
      &.emotion-stressed {
        background-color: rgba(var(--emotion-stressed-RGB), 1);
      }
      &.emotion-surprised {
        background-color: rgba(var(--emotion-surprised-RGB), 1);
      }
      &.emotion-ashamed {
        background-color: rgba(var(--emotion-ashamed-RGB), 1);
      }
      &.emotion-frustrated {
        background-color: rgba(var(--emotion-frustrated-RGB), 1);
      }

      /* calm / grounded */
      &.emotion-calm {
        background-color: rgba(var(--emotion-calm-RGB), 1);
      }
      &.emotion-confident {
        background-color: rgba(var(--emotion-confident-RGB), 1);
      }
      &.emotion-interested {
        background-color: rgba(var(--emotion-interested-RGB), 1);
      }

      /* excited / engaged */
      &.emotion-affectionate {
        background-color: rgba(var(--emotion-affectionate-RGB), 1);
      }
      &.emotion-amused {
        background-color: rgba(var(--emotion-amused-RGB), 1);
      }
      &.emotion-excited {
        background-color: rgba(var(--emotion-excited-RGB), 1);
      }
      &.emotion-happy {
        background-color: rgba(var(--emotion-happy-RGB), 1);
      }
      &.emotion-hopeful {
        background-color: rgba(var(--emotion-hopeful-RGB), 1);
      }
      &.emotion-proud {
        background-color: rgba(var(--emotion-proud-RGB), 1);
      }
      &.emotion-relieved {
        background-color: rgba(var(--emotion-relieved-RGB), 1);
      }
      &.emotion-curious {
        background-color: rgba(var(--emotion-curious-RGB), 1);
      }

      /* low energy, negative */
      &.emotion-sad {
        background-color: rgba(var(--emotion-sad-RGB), 1);
      }
      &.emotion-disappointed {
        background-color: rgba(var(--emotion-disappointed-RGB), 1);
      }
      &.emotion-bored {
        background-color: rgba(var(--emotion-bored-RGB), 1);
      }
      &.emotion-tired {
        background-color: rgba(var(--emotion-tired-RGB), 1);
      }
      &.emotion-concerned {
        background-color: rgba(var(--emotion-concerned-RGB), 1);
      }
      &.emotion-confused {
        background-color: rgba(var(--emotion-confused-RGB), 1);
      }
    }
  }
}

/* Emotion colors for player visualization clips */
.player-visualization .transcript-clip,
.transcript-visualization .transcript-clip {
  /* Background colors based on emotion classes with animation using ::after - using individual emotion variables */
  /* no strong signal */
  &.emotion-neutral .clip-visualization::after {
    /* No overlay needed - already neutral color */
    animation: none;
  }
  &.emotion-unknown .clip-visualization::after {
    background-color: rgba(var(--emotion-unknown-RGB), 1);
    opacity: 1;
  }

  /* attack / rejection */
  &.emotion-angry .clip-visualization::after {
    background-color: rgba(var(--emotion-angry-RGB), 1);
    opacity: 1;
  }
  &.emotion-contemptuous .clip-visualization::after {
    background-color: rgba(var(--emotion-contemptuous-RGB), 1);
    opacity: 1;
  }
  &.emotion-disgusted .clip-visualization::after {
    background-color: rgba(var(--emotion-disgusted-RGB), 1);
    opacity: 1;
  }

  /* threat / uncertainty */
  &.emotion-afraid .clip-visualization::after {
    background-color: rgba(var(--emotion-afraid-RGB), 1);
    opacity: 1;
  }
  &.emotion-anxious .clip-visualization::after {
    background-color: rgba(var(--emotion-anxious-RGB), 1);
    opacity: 1;
  }
  &.emotion-stressed .clip-visualization::after {
    background-color: rgba(var(--emotion-stressed-RGB), 1);
    opacity: 1;
  }
  &.emotion-surprised .clip-visualization::after {
    background-color: rgba(var(--emotion-surprised-RGB), 1);
    opacity: 1;
  }
  &.emotion-ashamed .clip-visualization::after {
    background-color: rgba(var(--emotion-ashamed-RGB), 1);
    opacity: 1;
  }
  &.emotion-frustrated .clip-visualization::after {
    background-color: rgba(var(--emotion-frustrated-RGB), 1);
    opacity: 1;
  }

  /* calm / grounded */
  &.emotion-calm .clip-visualization::after {
    background-color: rgba(var(--emotion-calm-RGB), 1);
    opacity: 1;
  }
  &.emotion-confident .clip-visualization::after {
    background-color: rgba(var(--emotion-confident-RGB), 1);
    opacity: 1;
  }
  &.emotion-interested .clip-visualization::after {
    background-color: rgba(var(--emotion-interested-RGB), 1);
    opacity: 1;
  }

  /* excited / engaged */
  &.emotion-affectionate .clip-visualization::after {
    background-color: rgba(var(--emotion-affectionate-RGB), 1);
    opacity: 1;
  }
  &.emotion-amused .clip-visualization::after {
    background-color: rgba(var(--emotion-amused-RGB), 1);
    opacity: 1;
  }
  &.emotion-excited .clip-visualization::after {
    background-color: rgba(var(--emotion-excited-RGB), 1);
    opacity: 1;
  }
  &.emotion-happy .clip-visualization::after {
    background-color: rgba(var(--emotion-happy-RGB), 1);
    opacity: 1;
  }
  &.emotion-hopeful .clip-visualization::after {
    background-color: rgba(var(--emotion-hopeful-RGB), 1);
    opacity: 1;
  }
  &.emotion-proud .clip-visualization::after {
    background-color: rgba(var(--emotion-proud-RGB), 1);
    opacity: 1;
  }
  &.emotion-relieved .clip-visualization::after {
    background-color: rgba(var(--emotion-relieved-RGB), 1);
    opacity: 1;
  }
  &.emotion-curious .clip-visualization::after {
    background-color: rgba(var(--emotion-curious-RGB), 1);
    opacity: 1;
  }

  /* low energy, negative */
  &.emotion-sad .clip-visualization::after {
    background-color: rgba(var(--emotion-sad-RGB), 1);
    opacity: 1;
  }
  &.emotion-disappointed .clip-visualization::after {
    background-color: rgba(var(--emotion-disappointed-RGB), 1);
    opacity: 1;
  }
  &.emotion-bored .clip-visualization::after {
    background-color: rgba(var(--emotion-bored-RGB), 1);
    opacity: 1;
  }
  &.emotion-tired .clip-visualization::after {
    background-color: rgba(var(--emotion-tired-RGB), 1);
    opacity: 1;
  }
  &.emotion-concerned .clip-visualization::after {
    background-color: rgba(var(--emotion-concerned-RGB), 1);
    opacity: 1;
  }
  &.emotion-confused .clip-visualization::after {
    background-color: rgba(var(--emotion-confused-RGB), 1);
    opacity: 1;
  }
}

/* Emotion tags color scheme - using individual emotion variables */
.emotion-tag {
  border-radius: 0.3em;

  /* no strong signal */
  &.emotion-neutral {
    color: rgba(var(--emotion-neutral-RGB), 1);
  }
  &.emotion-unknown {
    color: rgba(var(--emotion-unknown-RGB), 1);
  }

  /* attack / rejection */
  &.emotion-angry {
    color: rgba(var(--emotion-angry-RGB), 1);
  }
  &.emotion-contemptuous {
    color: rgba(var(--emotion-contemptuous-RGB), 1);
  }
  &.emotion-disgusted {
    color: rgba(var(--emotion-disgusted-RGB), 1);
  }

  /* threat / uncertainty */
  &.emotion-afraid {
    color: rgba(var(--emotion-afraid-RGB), 1);
  }
  &.emotion-anxious {
    color: rgba(var(--emotion-anxious-RGB), 1);
  }
  &.emotion-stressed {
    color: rgba(var(--emotion-stressed-RGB), 1);
  }
  &.emotion-surprised {
    color: rgba(var(--emotion-surprised-RGB), 1);
  }
  &.emotion-ashamed {
    color: rgba(var(--emotion-ashamed-RGB), 1);
  }
  &.emotion-frustrated {
    color: rgba(var(--emotion-frustrated-RGB), 1);
  }

  /* calm / grounded */
  &.emotion-calm {
    color: rgba(var(--emotion-calm-RGB), 1);
  }
  &.emotion-confident {
    color: rgba(var(--emotion-confident-RGB), 1);
  }
  &.emotion-interested {
    color: rgba(var(--emotion-interested-RGB), 1);
  }

  /* excited / engaged */
  &.emotion-affectionate {
    color: rgba(var(--emotion-affectionate-RGB), 1);
  }
  &.emotion-amused {
    color: rgba(var(--emotion-amused-RGB), 1);
  }
  &.emotion-excited {
    color: rgba(var(--emotion-excited-RGB), 1);
  }
  &.emotion-happy {
    color: rgba(var(--emotion-happy-RGB), 1);
  }
  &.emotion-hopeful {
    color: rgba(var(--emotion-hopeful-RGB), 1);
  }
  &.emotion-proud {
    color: rgba(var(--emotion-proud-RGB), 1);
  }
  &.emotion-relieved {
    color: rgba(var(--emotion-relieved-RGB), 1);
  }
  &.emotion-curious {
    color: rgba(var(--emotion-curious-RGB), 1);
  }

  /* low energy, negative */
  &.emotion-sad {
    color: rgba(var(--emotion-sad-RGB), 1);
  }
  &.emotion-disappointed {
    color: rgba(var(--emotion-disappointed-RGB), 1);
  }
  &.emotion-bored {
    color: rgba(var(--emotion-bored-RGB), 1);
  }
  &.emotion-tired {
    color: rgba(var(--emotion-tired-RGB), 1);
  }
  &.emotion-concerned {
    color: rgba(var(--emotion-concerned-RGB), 1);
  }
  &.emotion-confused {
    color: rgba(var(--emotion-confused-RGB), 1);
  }
}

/* Emotion colors showcase */
.emotion-colors-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.2em;
  margin-bottom: 2em;
}

.emotion-group {
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
  padding: 0.8em 2em 2em 1em;
  &.emotion-group-header {
    margin-bottom: 0.6em;

    & h3 {
      margin: 0;
      font-weight: 500;
      color: rgba(var(--ids__text-RGB), 0.7);
    }
  }

  & .emotion-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1em;

    & .emotion-color-sample {
      padding: 0.3em 0.6em;
      color: white;
    }
  }
}

/* Share button styles */

.share-button {
  height: 2em;
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
  color: rgb(var(--ids__text-RGB));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0 0.6em;
  font-size: 1em;
  font-family: inherit;
  transition: color 0.5s ease, background-color 0.5s ease;

  &:hover {
    color: rgb(var(--ids__text-hover-RGB), 1);
    background-color: rgb(var(--ids__bg-hover-RGB), 0.15);
    transition: color 0s ease, background-color 0s ease;
  }

  & .share-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  & .share-text {
    font-size: 1em;
    line-height: 1;
  }
}

.share-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  & .share-button-wrapper {
    position: relative;
  }
}

/* Share popover styles */
.share-popover {
  position: absolute;
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
  padding: 1em;
  display: none;
  z-index: 1000;
  box-shadow: 0 0 1em 0 white;

  &.visible {
    display: block;
  }

  & p {
    margin: 0 0 0.5em 0;
    font-size: 0.9em;
    line-height: 1.4;

    &:last-child {
      margin-bottom: 0;
    }
  }

  & .share-download-links {
    display: flex;
    gap: 1em;
  }

  & .share-download-link {
    color: rgb(var(--ids__text-link-RGB));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(var(--ids__text-link-RGB), 0.2);
    transition: color 0.5s ease, text-decoration 0.5s ease;

    &:hover {
      color: rgb(var(--ids__text-hover-RGB));
      text-decoration-color: rgba(var(--ids__text-hover-RGB), 0.2);
      transition: color 0s ease, text-decoration 0s ease;
    }
  }
}

/* Popover in nav-container (first share button) */
.nav-container {
  
  & .share-popover {
    width: 26em;    

    top: -0.3em;
    right: -0.3em;
    

    @media (width < 768px) {      
      top: 0;
      width: 100%;
      left: 0;
      
    }
  }
}

/* Popover in share-container (second share button) */
.share-container {
  & .share-button-wrapper .share-popover {
    width: 26em;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    @media (width < 768px) {
      font-size: 0.8em;
      top: 0;
      width: 100%;
      left: 0;
      transform: none
    }
  }
}

.cta {
  display: flex;
  --gap: 0.5em;
  gap: var(--gap);

  @media (width < 768px) {
    flex-direction: column;
  }

  & .cta-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap);    

    &:first-child {
      width: 70%;
      @media (width < 768px) {
        width: 100%;
      }
    }
    &:last-child {
      width: 30%;
      @media (width < 768px) {
        width: 100%;
      }
    }

  }
}

.cta-section {
  
  background-color: rgba(var(--ids__bg-accent-RGB), 0.1);
  /* height: 100%; */
  padding: 1em 1em 1em 1em;

  &.form {
    background-color: rgba(var(--ids__bg-surface-RGB), 1);
    padding: 1em 3em 2em 1em;
  }
}

.schedule-form {
  display: flex;
  gap: 0.5em;
  margin-top: 1em;

  & .schedule-form-input {
    flex: 1;
    padding: 0.4em 0.6em;
    border: 0px solid rgba(var(--ids__text-RGB), 0.2);
    border-radius: 0.1em;
    font-family: var(--sans);
    font-size: 1em;
    background-color: rgba(var(--ids__background-RGB), 1);
    color: rgb(var(--ids__text-RGB));
    transition: border-color 0.3s ease;

    &:focus {
      outline: none;
      border-color: rgba(var(--ids__text-link-RGB), 0.5);
    }

    &::placeholder {
      color: rgba(var(--ids__text-RGB), 0.5);
    }
  }

  & .schedule-form-button {
    padding: 0.5em 1.5em;
    background-color: rgb(var(--ids__text-link-RGB));
    color: rgb(var(--ids__background-RGB));
    border: none;
    font-family: var(--sans);
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: rgb(var(--ids__bg-hover-RGB));
      transition: background-color 0s ease;
    }

    &:active {
      background-color: rgb(var(--ids__bg-accent-RGB));
    }
  }
}

:root {
  --initial-height: 14em;
  --stuck-height: 9em;
  --player-visualization-height: 75%;
  --player-visualization-mobile-height: 65%;
  
  /* Emotion color animation timing */
  --emotion-color-delay: 0s;
  --emotion-color-duration: 0.2s;
}

/* Keyframe animation for emotion color fade-in */
@keyframes emotion-color-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.media-container {
  position: sticky;
  top: 0;
  height: calc(var(--initial-height) + 0.5em);
  z-index: 1;


  & .media-space {
    background-color: rgba(var(--ids__background-RGB), 1);
    height: 5em;
    margin-bottom: -4.5em;

    @media (width < 768px) {
      margin-bottom: -4.5em;
    }
  }


  & .media-box {
    position: relative;
    display: flex;
    flex-direction: column;
    --padding: 0.5em;
    --speaker-count: 2;

    height: var(--initial-height);
    background-color: rgba(var(--ids__bg-accent-RGB), 1);
    box-shadow: 0 0.5em 0.5em 0 white;
    transition: height 0.2s ease;

    &[data-speaker-count="1"] {
      --speaker-count: 1;
    }
    &[data-speaker-count="2"] {
      --speaker-count: 2;
    }
    &[data-speaker-count="3"] {
      --speaker-count: 3;
    }
    &[data-speaker-count="4"] {
      --speaker-count: 4;
    }
    &[data-speaker-count="5"] {
      --speaker-count: 5;
    }
  }

  &.stuck {
    pointer-events: none;
    
    & .media-box {
      height: var(--stuck-height);
      transition: height 0.5s ease;
      pointer-events: auto;
      
      
      & .player-visualization {
        height: var(--player-visualization-mobile-height);
        transition: height 0.5s ease;
      }
    }

    & .speaker-labels {
      height: var(--player-visualization-mobile-height);
      transition: height 0.5s ease;
    }
    & .behaviour-labels {
      height: var(--player-visualization-mobile-height);
      transition: height 0.5s ease;
    }

    & .player-controls {
      height: calc(100% - var(--player-visualization-mobile-height));
      transition: height 0.5s ease;
    }

    & .player-icon {
      transform: scale(0.8);
      transition: transform 0.5s ease;
    }

    & .player-controls .player-control-center:hover .player-icon {
      transform: scale(0.9);
      transition: transform 0s ease;
    }

    & .player-controls .player-control-center:hover .player-icon:hover {
      & svg,
      & svg * {
        fill: white;
        transition: fill 0s ease;
      }
    }

    & .player-status-caption {
      top: var(--player-visualization-mobile-height);
      transition: top 0.5s ease;
    }
    & .player-position-indicator {

      & .player-position-caption {
        top: var(--player-visualization-mobile-height);
        transition: top 0.5s ease;
      }
    }

    & .player-hover-position-indicator {

      & .player-hover-position-caption {
        top: var(--player-visualization-mobile-height);
        transition: top 0.5s ease;
      }
    }    
  }
}

/* Base transcript visualization styles - global */
.transcript-visualization {
  position: relative;  
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
  height: var(--player-visualization-height);
  transition: height 0.2s ease;

  & .transcript-clip {
    position: absolute;
    height: 100%;
    top: 0;

    /* Hover styles specific to visualization */
    &:hover,
    &.hover {
      & .clip-visualization {
        filter: brightness(140%) saturate(115%);
        transition: filter 0s ease;
        
        &::after {
          filter: brightness(140%) saturate(115%);
        }
      }
    }

    & .clip-visualization {
      position: absolute;
      left: 0;
      right: 0;
      height: calc(100% / var(--speaker-count));
      transition: filter 0.1s ease;
      /* Initial neutral color for all clips */
      background-color: rgba(var(--emotion-neutral-RGB), 1);
      border-color: rgba(var(--emotion-neutral-RGB), 1);
      
      /* ::after pseudo-element for emotion color overlay */
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        pointer-events: none;
        /* Animation applied to all emotion colors except neutral */
        animation: emotion-color-fade-in var(--emotion-color-duration) ease-in var(--emotion-color-delay) forwards;
      }
    }

    &[data-speaker-index="1"] .clip-visualization {
      top: calc((1 - 1) * (100% / var(--speaker-count)));
    }
    &[data-speaker-index="2"] .clip-visualization {
      top: calc((2 - 1) * (100% / var(--speaker-count)));
    }
    &[data-speaker-index="3"] .clip-visualization {
      top: calc((3 - 1) * (100% / var(--speaker-count)));
    }
    &[data-speaker-index="4"] .clip-visualization {
      top: calc((4 - 1) * (100% / var(--speaker-count)));
    }
    &[data-speaker-index="5"] .clip-visualization {
      top: calc((5 - 1) * (100% / var(--speaker-count)));
    }

    & .clip-caption,
    & .clip-text {
      display: none;
    }
  }

  /* Static version - no pointer cursor, no interactivity */
  &--static {
    & .transcript-clip {
      cursor: default;
    }
  }
}

.media-container {
  /* Player visualization timeline - extends base transcript visualization */
  & .player-visualization {
    position: relative;  
    background-color: rgba(var(--ids__bg-surface-RGB), 1);
    height: var(--player-visualization-height);
    transition: height 0.2s ease;

    & .transcript-clip {
      position: absolute;
      height: 100%;
      top: 0;
      cursor: pointer;

      /* Hover styles specific to visualization */
      &:hover,
      &.hover {
        & .clip-visualization {
          filter: brightness(140%) saturate(115%);
          transition: filter 0s ease;
          
          &::after {
            filter: brightness(140%) saturate(115%);
          }
        }
      }

      & .clip-visualization {
        position: absolute;
        left: 0;
        right: 0;
        height: calc(100% / var(--speaker-count));
        transition: filter 0.1s ease;
        /* Initial neutral color for all clips */
        background-color: rgba(var(--emotion-neutral-RGB), 1);
        border-color: rgba(var(--emotion-neutral-RGB), 1);
        
        /* ::after pseudo-element for emotion color overlay */
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          pointer-events: none;
          /* Animation applied to all emotion colors except neutral */
          animation: emotion-color-fade-in var(--emotion-color-duration) ease-in var(--emotion-color-delay) forwards;
        }
      }

      &[data-speaker-index="1"] .clip-visualization {
        top: calc((1 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="2"] .clip-visualization {
        top: calc((2 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="3"] .clip-visualization {
        top: calc((3 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="4"] .clip-visualization {
        top: calc((4 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="5"] .clip-visualization {
        top: calc((5 - 1) * (100% / var(--speaker-count)));
      }

      & .clip-caption,
      & .clip-text {
        display: none;
      }
    }
  }

  & .speaker-labels {
    position: absolute;
    width: 100%;
    height: var(--player-visualization-height);
    transition: height 0.2s ease;
    pointer-events: none;
    font-size: 0.8em;

    & .speaker-label {
      position: absolute;
      display: flex;
      align-items: flex-end;
      padding-left: 0.1em;
      height: calc(100% / var(--speaker-count));

      &[data-speaker-index="1"] {
        top: calc((1 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="2"] {
        top: calc((2 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="3"] {
        top: calc((3 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="4"] {
        top: calc((4 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="5"] {
        top: calc((5 - 1) * (100% / var(--speaker-count)));
      }

      & span {
        
        
        background-color: rgba(var(--ids__bg-surface-RGB), 1);
        padding: 0.1em 0.2em 0 0;
        color: rgba(var(--ids__text-RGB), 0.3);

        
      }
    }
  }

  & .behaviour-labels {
    position: absolute;
    width: 100%;
    height: var(--player-visualization-height);
    transition: height 0.2s ease;
    pointer-events: none;
    z-index: 1;
    

    & .behaviour-label {
      position: absolute;
      font-size: 0.8em;
      line-height: 1.1;
      width: 10em;
      display: flex;
      align-items: flex-end;
      padding-bottom: 0.4em;
      height: calc(100% / var(--speaker-count));
      /* border-left: 2px solid white; */

      &:after {
        content: '';
        position: absolute;
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        background-color: white;
        bottom: -0.2em;
        left: 0;
      }
      
      
      &[data-speaker-index="1"] {
        top: calc((1 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="2"] {
        top: calc((2 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="3"] {
        top: calc((3 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="4"] {
        top: calc((4 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="5"] {
        top: calc((5 - 1) * (100% / var(--speaker-count)));
      }

      & a {
        pointer-events: auto;      
        text-decoration: none;
        display: block;

        &:hover {
          color: rgba(var(--ids__text-link-RGB), 1);

          & span {
            
            
            transform: translateX(0.2em);
            transition: transform 0s ease;
          }
        }      

        & span {
          display: inline-block;          
          font-weight: 600;
          transition: transform 0.5s ease;
        }
      }
    }
  }

  & .player-controls {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(100% - var(--player-visualization-height));
    transition: height 0.2s ease;
    
    
    padding-top: 1em;


    & .player-control-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0em;
      bottom: 0;
      padding-top: 0.8em;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    & .player-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5em;
      height: 1.5em;
      cursor: pointer;
      transition: transform 0.2s ease;

      & svg {
        width: 100%;
        height: 100%;
      }

      & svg,
      & svg * {
        fill: rgba(var(--ids__text-hover-RGB), 1);
        transition: fill 0.5s ease;
      }
    }

    & .player-control-center:hover {
      background-color: rgba(var(--ids__bg-surface-RGB), 0.3);
      filter: brightness(125%) saturate(125%);
      transition: background-color 0s ease;

      & .player-icon {
        transform: scale(1.1);
        transition: transform 0s ease;
      }
    }

    & .player-control-center:hover .player-icon:hover {
      & svg,
      & svg * {
        fill: white;
        transition: fill 0s ease;
      }
    }
  }

  & .player-status-caption {
    display: flex;
    gap: 0.5em;
    position: absolute;
    top: var(--player-visualization-height);
    transition: top 0.2s ease;
    bottom: var(--padding);
    right: var(--padding);
    pointer-events: none;

    & .emotion-caption {
      font-size: 0.8em;
      opacity: 0;
      transition: opacity 0.5s ease;
      
      &.visible {
        opacity: 1;
        transition: opacity 0s ease;
      }
    }
    & .total-time {
      opacity: 0.5;
      font-size: 0.8em;
    }

  }

  & .player-position-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    
    & .player-position-line {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;  
      border-left: 1px solid rgba(255,255,255,0.5);
    }

    & .player-position-caption {
      position: absolute;
      left: 0.1em;
      top: var(--player-visualization-height);
      transition: top 0.2s ease;
      font-size: 0.8em;
      background-color: rgba(var(--ids__bg-accent-RGB), 1);
            
    }

  }

  /* Hide caption when hover indicator is active */
  & .media-box:has(.player-hover-position-indicator.active) .player-position-indicator .player-position-caption,
  .media-box.has-hover-indicator .player-position-indicator .player-position-caption {
    opacity: 0;
    visibility: hidden;
  }

  & .player-hover-position-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    
    &.active {
      opacity: 1;
      visibility: visible;
    }
    
    & .player-hover-position-line {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;  
      border-left: 1px solid rgba(255,255,255,0.25);
    }

    & .player-hover-position-caption {
      position: absolute;
      left: 0.1em;
      top: var(--player-visualization-height);
      transition: top 0.2s ease;
      font-size: 0.8em;
      background-color: rgba(var(--ids__bg-accent-RGB), 1);

    }
  }
}

/* Static fingerprint visualization styles */
.fingerprint-visualization-container {
  margin: 1em 0;
  --visualization-height: 83%;
  
  & .fingerprint-visualization-box {
    position: relative;
    display: flex;
    flex-direction: column;
    --padding: 0.5em;
    --speaker-count: 2;
    height: 7em;
    background-color: rgba(var(--ids__bg-accent-RGB), 1);
    overflow: hidden;

    &[data-speaker-count="1"] {
      --speaker-count: 1;
    }
    &[data-speaker-count="2"] {
      --speaker-count: 2;
    }
    &[data-speaker-count="3"] {
      --speaker-count: 3;
    }
    &[data-speaker-count="4"] {
      --speaker-count: 4;
    }
    &[data-speaker-count="5"] {
      --speaker-count: 5;
    }

    & .transcript-visualization {
      height: var(--visualization-height);
    }

    & .speaker-labels {
      position: absolute;
      width: 100%;
      height: var(--visualization-height);
      transition: height 0.2s ease;
      pointer-events: none;
      font-size: 0.8em;

      & .speaker-label {
        position: absolute;
        display: flex;
        align-items: flex-end;
        padding-left: 0.1em;
        height: calc(100% / var(--speaker-count));

        &[data-speaker-index="1"] {
          top: calc((1 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="2"] {
          top: calc((2 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="3"] {
          top: calc((3 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="4"] {
          top: calc((4 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="5"] {
          top: calc((5 - 1) * (100% / var(--speaker-count)));
        }

        & span {
          background-color: rgba(var(--ids__bg-surface-RGB), 1);
          padding: 0.1em 0.2em 0 0;
          color: rgba(var(--ids__text-RGB), 0.3);
        }
      }
    }

    & .behaviour-labels {
      position: absolute;
      width: 100%;
      height: var(--visualization-height);
      transition: height 0.2s ease;
      pointer-events: none;
      z-index: 1;

      & .behaviour-label {
        position: absolute;
        font-size: 0.8em;
        line-height: 1.1;
        width: 10em;
        display: flex;
        align-items: flex-end;
        padding-bottom: 0.4em;
        height: calc(100% / var(--speaker-count));

        &:after {
          content: '';
          position: absolute;
          width: 0.4em;
          height: 0.4em;
          border-radius: 50%;
          background-color: white;
          bottom: -0.2em;
          left: 0;
        }

        &[data-speaker-index="1"] {
          top: calc((1 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="2"] {
          top: calc((2 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="3"] {
          top: calc((3 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="4"] {
          top: calc((4 - 1) * (100% / var(--speaker-count)));
        }
        &[data-speaker-index="5"] {
          top: calc((5 - 1) * (100% / var(--speaker-count)));
        }

        & a {
          pointer-events: none;
          text-decoration: none;
          display: block;
          cursor: default;

          & span {
            display: inline-block;
            font-weight: 600;
            transition: transform 0.5s ease;
          }
        }
      }
    }

    & .fingerprint-status-caption {
      display: flex;
      gap: 0.5em;
      position: absolute;
      top: var(--visualization-height);
      transition: top 0.2s ease;
      bottom: var(--padding);
      right: var(--padding);
      pointer-events: none;

      & .emotion-caption {
        font-size: 0.8em;
        opacity: 0;
        transition: opacity 0.5s ease;
        
        &.visible {
          opacity: 1;
          transition: opacity 0s ease;
        }
      }
    }
  }
}
/* Progress indicator skeleton */
.skeleton-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9em;
}



.upload-area-container {
  /* Контейнер для зоны загрузки без sticky поведения */
}

.upload-area-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 10em;
  gap: 1em;
  color: rgba(var(--ids__text-RGB), 1);
  text-align: center;
  padding: 2em;

  & .upload-text {
    font-size: 1em;
  }

  & .upload-button {
    display: inline-block;
    text-decoration: none;
    color: rgba(var(--ids__text-link-RGB), 1);
    
    &:hover {
      color: rgba(var(--ids__text-hover-RGB), 1);
    }
  }
}


/* Demo recordings table styles */

.demo-recordings-section {
  margin: 2em 0;

  & h2 {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 1em;
  }

  & .demo-recordings-table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(var(--ids__bg-surface-RGB), 1);

    & thead {
      & th {
        font-size: 0.8em;
        font-weight: 400;
        text-align: left;
        padding: 0.7em 0.3em 0.5em 0.5em;
      }
    }

    & tbody {
      & tr {
        background-color: rgba(var(--ids__bg-surface-RGB), 1);
        cursor: pointer;
        transition: color 0.3s ease, background-color 0.3s ease;

        &:hover {
          color: rgb(var(--ids__text-hover-RGB), 1);
          background-color: rgba(var(--ids__bg-hover-RGB), 0.075);
          transition: color 0s ease, background-color 0s ease;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      & td {
        padding: 0.5em 0.3em 0.5em 0.5em;
        vertical-align: top;
        font-size: 0.8em;
        cursor: pointer;
      }

      & td:first-child {
        width: 20%;
      }

      & td:nth-child(2) {
        width: 44%;
        font-size: 1em;
        padding: 0.22em 0.3em 0.7em 0.5em;
      }

      & td:nth-child(3) {
        width: 15%;
      }

      & td:nth-child(4) {
        width: 18%;
      }
    }
  }
}

/* Table fingerprint diagrams */

.table-fingerprint-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.3em;
}

.table-fingerprint {
  position: relative;
  height: 1.35em;
  background-color: rgba(var(--ids__bg-surface-RGB), 1);
  border-radius: 0.2em;
  overflow: hidden;
  flex-shrink: 1;
}

.table-fingerprint-clip {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  pointer-events: none;
  cursor: default;
}

.table-fingerprint-visualization {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(100% / var(--speaker-count));
  background-color: rgba(var(--emotion-neutral-RGB), 1);
  pointer-events: none;
}

.table-fingerprint-clip[data-speaker-index="1"]
  .table-fingerprint-visualization {
  top: calc((1 - 1) * (100% / var(--speaker-count)));
}

.table-fingerprint-clip[data-speaker-index="2"]
  .table-fingerprint-visualization {
  top: calc((2 - 1) * (100% / var(--speaker-count)));
}

.table-fingerprint-clip[data-speaker-index="3"]
  .table-fingerprint-visualization {
  top: calc((3 - 1) * (100% / var(--speaker-count)));
}

.table-fingerprint-clip[data-speaker-index="4"]
  .table-fingerprint-visualization {
  top: calc((4 - 1) * (100% / var(--speaker-count)));
}

/* Emotion colors for table fingerprint visualizations */
.table-fingerprint-clip.emotion-neutral .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-neutral-RGB), 1);
}

.table-fingerprint-clip.emotion-angry .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-angry-RGB), 1);
}

.table-fingerprint-clip.emotion-contemptuous .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-contemptuous-RGB), 1);
}

.table-fingerprint-clip.emotion-disgusted .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-disgusted-RGB), 1);
}

.table-fingerprint-clip.emotion-afraid .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-afraid-RGB), 1);
}

.table-fingerprint-clip.emotion-anxious .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-anxious-RGB), 1);
}

.table-fingerprint-clip.emotion-stressed .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-stressed-RGB), 1);
}

.table-fingerprint-clip.emotion-surprised .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-surprised-RGB), 1);
}

.table-fingerprint-clip.emotion-ashamed .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-ashamed-RGB), 1);
}

.table-fingerprint-clip.emotion-frustrated .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-frustrated-RGB), 1);
}

.table-fingerprint-clip.emotion-calm .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-calm-RGB), 1);
}

.table-fingerprint-clip.emotion-confident .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-confident-RGB), 1);
}

.table-fingerprint-clip.emotion-interested .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-interested-RGB), 1);
}

.table-fingerprint-clip.emotion-affectionate .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-affectionate-RGB), 1);
}

.table-fingerprint-clip.emotion-amused .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-amused-RGB), 1);
}

.table-fingerprint-clip.emotion-excited .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-excited-RGB), 1);
}

.table-fingerprint-clip.emotion-happy .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-happy-RGB), 1);
}

.table-fingerprint-clip.emotion-hopeful .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-hopeful-RGB), 1);
}

.table-fingerprint-clip.emotion-proud .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-proud-RGB), 1);
}

.table-fingerprint-clip.emotion-relieved .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-relieved-RGB), 1);
}

.table-fingerprint-clip.emotion-curious .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-curious-RGB), 1);
}

.table-fingerprint-clip.emotion-sad .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-sad-RGB), 1);
}

.table-fingerprint-clip.emotion-disappointed .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-disappointed-RGB), 1);
}

.table-fingerprint-clip.emotion-bored .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-bored-RGB), 1);
}

.table-fingerprint-clip.emotion-tired .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-tired-RGB), 1);
}

.table-fingerprint-clip.emotion-concerned .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-concerned-RGB), 1);
}

.table-fingerprint-clip.emotion-confused .table-fingerprint-visualization {
  background-color: rgba(var(--emotion-confused-RGB), 1);
}

.table-fingerprint-time {
  white-space: nowrap;
}

.companies-list-container {
  max-height: 25em;
  column-count: 5;
  column-gap: 1em;
  font-size: 0.85em;
  line-height: 1.3;

  & h2 {
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
    font-size: 1em;
  }

  & .company-item {
    margin: 0;
    padding: 0;
    margin-bottom: 0.2em;
  }
}

.companies-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.company-card {
  width: 20em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid rgba(var(--ids__text-RGB), 0.2);
  border-radius: var(--ids__radius);

  & .company-name {
    font-size: 1em;
    font-weight: 500;
  }

  & .brand-kit-link {
    font-size: 0.9em;
    color: rgba(var(--ids__text-link-RGB), 1);

    &:hover {
      color: rgba(var(--ids__text-hover-RGB), 1);
    }
  }

  & .brand-kit-unavailable {
    font-size: 0.85em;
    color: rgba(var(--ids__text-RGB), 0.6);
    font-style: italic;
  }

  & .logo-section,
  & .symbol-section,
  & .wordmark-section {
    margin-top: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;

    & .logo-label,
    & .symbol-label,
    & .wordmark-label {
      font-size: 0.75em;
      color: rgba(var(--ids__text-RGB), 0.7);
      text-transform: uppercase;
      font-weight: 500;
    }

    & .logo-image,
    & .symbol-image,
    & .wordmark-image {
      max-width: 100%;
      height: auto;
      border: 1px solid rgba(var(--ids__text-RGB), 0.1);
      border-radius: 0.2em;
      background: rgba(var(--ids__bg-surface-RGB), 1);
      padding: 0.5em;
    }

    & .symbol-image {
      max-width: 80px;
      max-height: 80px;
      object-fit: contain;
    }

    & .not-found {
      font-size: 0.8em;
      color: rgba(var(--ids__text-RGB), 0.5);
      font-style: italic;
    }
  }
}

.guide-color-plate {
  padding: 0.5em 0.5em 2.36em 0.5em;
  font-size: 0.7em;
  line-height: 1;
}

/* Скрыть RGB значения на странице visual-identity */
.interface-color-palette .guide-color-plate p:last-child {
  display: none;
}

/* Скрыть лейблы в fingerprint visualization на странице visual-identity */
.fingerprint-visualization-wrapper {
  & .fingerprint-visualization-container {
    margin: 0.5em 0 0;
  }
}
.fingerprint-visualization-wrapper .speaker-labels,
.fingerprint-visualization-wrapper .behaviour-labels {
  display: none;
}

/* Emotions color palette - inline flex layout */
.emotions-color-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1em;

  & .emotion-color-sample {
    font-size: 0.7em;
    padding: 0.3em 1em 1em 0.4em;
    color: white;
    border-radius: 0.4em;
  }
}