/* Bundles together all CSS files into a single file */
* {
  box-sizing: border-box;
}

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

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

body {
  font-family: "Inter";
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-synthesis: none;
}

/* Density */
:root {
  --density: 1.3;
  --radius: 1.5em;
}

body {
  font-size: 1em;
  line-height: var(--density);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  flex: 1;
}

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;
  }
}
:root {
  --text-rgb: 60, 60, 60;
  --text-accent-rgb: 20, 20, 50;
  --link-text-rgb: 44, 44, 44;
  --link-hover-text-rgb: 100, 110, 140;
  --audio-player-text-rgb: 255, 255, 255;
  --audio-player-link-rgb: 120, 180, 255;

  --audio-player-background-color: rgba(40, 40, 60, 1);
  --audio-player-accent-color: rgba(20, 20, 50, 1);
  --panel-background-color: rgba(238, 238, 240, 1);
  --background-color: rgba(255, 255, 255, 1);

  --inverted-button-color: rgba(242, 242, 246, 1);
  --inverted-button-hover-color: rgba(90, 120, 180, 1);

  /* Emotion tags colors based on Plutchik's wheel of emotions */
  /* Reference - https://en.wikipedia.org/wiki/Robert_Plutchik#Plutchik's_wheel_of_emotions */
  --emotion-unknown-color: rgba(80, 80, 100, 1);
  --emotion-neutral-color: rgba(80, 80, 100, 1);
  --emotion-calm-color: rgba(80, 80, 100, 1);
  --emotion-confident-color: rgba(80, 80, 100, 1);

  --emotion-affectionate-color: rgba(255, 180, 0, 1);
  --emotion-amused-color: rgba(255, 180, 0, 1);
  --emotion-excited-color: rgba(255, 180, 0, 1);
  --emotion-happy-color: rgba(255, 180, 0, 1);
  --emotion-hopeful-color: rgba(255, 180, 0, 1);
  --emotion-proud-color: rgba(255, 180, 0, 1);
  --emotion-relieved-color: rgba(255, 180, 0, 1);
  --emotion-curious-color: rgba(255, 180, 0, 1);
  --emotion-interested-color: rgba(255, 180, 0, 1);

  --emotion-sad-color: rgba(0, 144, 200, 1);
  --emotion-disappointed-color: rgba(0, 144, 200, 1);
  --emotion-bored-color: rgba(0, 144, 200, 1);
  --emotion-tired-color: rgba(0, 144, 200, 1);

  --emotion-afraid-color: rgba(180, 60, 180, 1);
  --emotion-anxious-color: rgba(180, 60, 180, 1);
  --emotion-stressed-color: rgba(180, 60, 180, 1);
  --emotion-concerned-color: rgba(180, 60, 180, 1);
  --emotion-surprised-color: rgba(180, 60, 180, 1);
  --emotion-confused-color: rgba(180, 60, 180, 1);
  --emotion-ashamed-color: rgba(180, 60, 180, 1);

  --emotion-angry-color: rgba(255, 60, 60, 1);
  --emotion-contemptuous-color: rgba(255, 60, 60, 1);
  --emotion-disgusted-color: rgba(255, 60, 60, 1);
  --emotion-frustrated-color: rgba(255, 60, 60, 1);
}

body {
  color: rgba(var(--text-rgb), 1);
  background-color: var(--background-color);
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* TODO - Check if this is actually still needed or if there is a better version of this somewhere (may be out of date) */

/* 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%;
}

.header {
  padding: 0.5em 0 1em;
  position: relative;
  width: 60%;
  margin: 0 auto;

  & nav {
    font-size: 0.8em;
    font-weight: 480;
    display: flex;
    align-items: baseline;
    gap: 1.8em;
    flex-wrap: wrap;

    & .nav-logo-wordmark {
      font-weight: 650;
    }

    & .nav-link {
      display: flex;
      align-items: baseline;
      gap: 0.3em;
      text-decoration: none;

      &.nav-link-button {
        color: var(--inverted-button-color);
        background-color: rgba(var(--text-accent-rgb), 1);
        padding: 0.5em 1.3em;
        transition: background-color 0.5s ease;
      }

      &.nav-link-button:hover {
        background-color: var(--inverted-button-hover-color);
        transition: background-color 0s ease;
      }
    }

    & .nav-spacer {
      flex: 1;
      flex-grow: 1;
    }
  }
}

.hidden {
  display: none !important;
}

.content {
  position: relative;
  width: 60%;
  margin: 2em auto;

  &.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

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

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

@supports not (corner-shape: squircle) {
  .rounded-corners {
    border-radius: 0;
    border-radius: initial;
    mask:
      url("/images/square-with-curved-top-left-corner.svg") top left / calc(var(--radius) * 100) no-repeat intersect,
      url("/images/square-with-curved-top-right-corner.svg") top right / calc(var(--radius) * 100) no-repeat intersect,
      url("/images/square-with-curved-bottom-right-corner.svg") bottom right / calc(var(--radius) * 100) no-repeat intersect,
      url("/images/square-with-curved-bottom-left-corner.svg") bottom left / calc(var(--radius) * 100) no-repeat intersect;
  }
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;

  & .upload-button {
    display: inline-block;
    text-decoration: none;
    color: rgba(var(--audio-player-text-rgb), 1);
    border: 1px solid rgba(var(--audio-player-text-rgb), 0.5);
    padding: 0.3em 1em;
    margin-top: 0.5em;
    border-radius: 0.5em;
    transition: border 0.2s ease, color 0.2s ease;
    background: var(--audio-player-background-color);
    cursor: pointer;

    &:disabled {
      color: rgba(var(--audio-player-text-rgb), 0.5);
      border: 1px solid rgba(var(--audio-player-text-rgb), 0.25);
      cursor: default;
      pointer-events: none;
    }

    &:hover {
      color: rgba(var(--audio-player-link-rgb), 1);
      border-color: rgba(var(--audio-player-link-rgb), 0.6);
      transition: border 0s ease, color 0s ease;
      cursor: pointer;
    }

    label {
      cursor: pointer;
    }
  }
}

.footer {
  margin-top: 5em;
  padding-top: 2em;
  padding-bottom: 1em;
  text-align: center;
  font-size: 0.8em;
  background-color: var(--panel-background-color);
}
.main {
  & a {
    color: rgba(var(--link-text-rgb), 1);
    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(--link-text-rgb), 0.2);
    transition: color 0.5s ease, text-decoration 0.5s ease, -webkit-text-decoration 0.5s ease;

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

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

    &.caption {
      font-size: 0.8em;
      margin-bottom: 0.4em;
      opacity: 0.5;
    }
  }

  & code {
    font-size: 0.9em;
    letter-spacing: 0.03em;
    font-weight: 450;
    padding: 0.1em 0.25em;
    border-radius: 0.2em;
    color: rgba(var(--audio-player-text-rgb), 1);
    border: 1px solid rgba(var(--audio-player-text-rgb), 0.1);
    background: rgba(var(--audio-player-text-rgb), 0.1);
  }

  & span.caption {
    font-size: 0.8em;
    opacity: 0.5;
  }

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

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

    &.hero {
      font-size: 5.5em;
      line-height: 0.9;
      letter-spacing: -0.01em;
      font-weight: 550;
      color: rgba(var(--text-accent-rgb), 1);
      margin-bottom: 0.25em;
    }

  }

  & 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(--density);
    margin-bottom: 0.5em;
  }

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

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

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

  & ul {
    & li {
      list-style-type: none;
      padding-left: calc(var(--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;

  }

  & 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(--text-rgb), 0.2);
        vertical-align: top;
      }

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

  & hr {
    border-top-color: rgba(var(--text-rgb), 0.2);
    border-bottom: 0;
  }
}
/* Keyframe animation for playing clip background */
@keyframes playing-pulse {
  0%, 100% {
    background-color: rgba(var(--link-hover-text-rgb), 0.2);
  }
  50% {
    background-color: rgba(var(--link-hover-text-rgb), 0.3);
  }
}

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

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

.speaker-details-container {
  width: 98%;
  margin: 1em auto;

  & .speaker-details-table {
    width: 100%;
    border-collapse: collapse;

    & p {
      margin-bottom: 0.2em;
    }

    & thead {
      & th {
        text-align: left;
        padding: 0.7em;
        font-weight: 500;
        font-size: 0.9em;
        border-bottom: 1px solid rgba(var(--text-rgb), 0.2);
        color: rgba(var(--text-rgb), 0.7);
      }
    }

    & tbody {
      & tr {
        border-bottom: 1px solid rgba(var(--link-text-rgb), 0.1);
        transition: background-color 0.2s ease;

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

      & td {
        padding: 0.7em;
        font-size: 0.9em;
      }
    }
  }
}

a.upload-link {
  display: block;
  text-align: center;
  border: 1px solid rgba(var(--link-text-rgb), 0.5);
  padding: 0.3em 0.7em;
  border-radius: 0.3em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 2em;
  text-decoration: none;
  color: rgba(var(--link-text-rgb), 1);
  transition: color 0.5s ease, border-color 0.5s ease;

  &:hover {
    color: rgba(var(--link-hover-text-rgb), 1);
    border-color: rgba(var(--link-hover-text-rgb), 0.5);
    transition: color 0s ease, border-color 0s ease;
  }
}

a.detected-behavior {
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--link-text-rgb), 1);

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

.transcript-container {
  width: 98%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  
  @media (width < 768px) {
    width: 100%;
  }
  
  & .transcript-clip {
    background-color: var(--panel-background-color);
    padding: 0.7em 3.7em 0.7em 0.7em;
    cursor: pointer;
    transition: color 0.5s ease, background-color 0.5s ease;
    --radius: 2em;
    border-radius: var(--radius);
    corner-shape: squircle;

    &.speaker-left {
      margin-right: 3em;
      border-radius:  0 var(--radius) var(--radius) var(--radius);

      @supports not (corner-shape: squircle) {
        --radius: 2.5em;
        border-radius: 0;
        border-radius: initial;
        mask:
          url("/images/square-with-curved-top-right-corner.svg") top right / calc(var(--radius) * 100) no-repeat intersect,
          url("/images/square-with-curved-bottom-right-corner.svg") bottom right / calc(var(--radius) * 100) no-repeat intersect,
          url("/images/square-with-curved-bottom-left-corner.svg") bottom left / calc(var(--radius) * 100) no-repeat intersect;
      }   
    }

    &.speaker-right {
      margin-left: 3em;
      border-radius: var(--radius) 0 var(--radius) var(--radius);

      @supports not (corner-shape: squircle) {
        --radius: 2.5em;
        border-radius: 0;
        border-radius: initial;
        mask:
          url("/images/square-with-curved-top-left-corner.svg") top left / calc(var(--radius) * 100) no-repeat intersect,
          url("/images/square-with-curved-bottom-right-corner.svg") bottom right / calc(var(--radius) * 100) no-repeat intersect,
          url("/images/square-with-curved-bottom-left-corner.svg") bottom left / calc(var(--radius) * 100) no-repeat intersect;
      }
    }
    
    /* Hover styles specific to transcript container */
    &:hover,
    &.hover {
      color: rgba(var(--link-hover-text-rgb), 1);
      background-color: rgba(var(--link-hover-text-rgb), 0.15);
      transition: color 0s ease, background-color 0s ease;

      & .clip-caption {


        & .behavior {
          color: rgba(var(--link-hover-text-rgb), 1);
          text-decoration-color: rgba(var(--link-hover-text-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;        
      }
      & .behavior {
        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;
      }
    }
  }
}

/* Demo recordings table */
.demo-recordings-section {
  margin: 0;

  & .demo-recordings-table {
    width: 100%;
    border-collapse: collapse;

    & thead {
      & th {
        text-align: left;
        padding: 0.7em;
        font-weight: 500;
        font-size: 0.9em;
        border-bottom: 1px solid rgba(var(--text-rgb), 0.2);
        color: rgba(var(--text-rgb), 0.7);
      }
    }

    & tbody {
      & tr {
        border-bottom: 1px solid rgba(var(--link-text-rgb), 0.1);
        transition: background-color 0.2s ease;
        cursor: pointer;

        &:hover {
          color: rgba(var(--link-hover-text-rgb), 1);
        }

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

      & td {
        padding: 0.7em;
        font-size: 0.9em;
      }
    }
  }
}

/* Emotion tags color scheme based on Plutchik's wheel of emotions */
.emotion-tag {  
  border-radius: 0.3em;  

  &.emotion-unknown {
    color: var(--emotion-unknown-color);
  }
  &.emotion-neutral {
    color: var(--emotion-neutral-color);
  }
  &.emotion-calm {
    color: var(--emotion-calm-color);
  }
  &.emotion-confident {
    color: var(--emotion-confident-color);
  }

  &.emotion-affectionate {
    color: var(--emotion-affectionate-color);
  }
  &.emotion-amused {
    color: var(--emotion-amused-color);
  }
  &.emotion-excited {
    color: var(--emotion-excited-color);
  }
  &.emotion-happy {
    color: var(--emotion-happy-color);
  }
  &.emotion-hopeful {
    color: var(--emotion-hopeful-color);
  }
  &.emotion-proud {
    color: var(--emotion-proud-color);
  }
  &.emotion-relieved {
    color: var(--emotion-relieved-color);
  }
  &.emotion-curious {
    color: var(--emotion-curious-color);
  }
  &.emotion-interested {
    color: var(--emotion-interested-color);
  }

  &.emotion-sad {
    color: var(--emotion-sad-color);
  }
  &.emotion-disappointed {
    color: var(--emotion-disappointed-color);
  }
  &.emotion-bored {
    color: var(--emotion-bored-color);
  }
  &.emotion-tired {
    color: var(--emotion-tired-color);
  }

  &.emotion-afraid {
    color: var(--emotion-afraid-color);
  }
  &.emotion-anxious {
    color: var(--emotion-anxious-color);
  }
  &.emotion-stressed {
    color: var(--emotion-stressed-color);
  }
  &.emotion-concerned {
    color: var(--emotion-concerned-color);
  }
  &.emotion-surprised {
    color: var(--emotion-surprised-color);
  }
  &.emotion-confused {
    color: var(--emotion-confused-color);
  }
  &.emotion-ashamed {
    color: var(--emotion-ashamed-color);
  }

  &.emotion-angry {
    color: var(--emotion-angry-color);
  }
  &.emotion-contemptuous {
    color: var(--emotion-contemptuous-color);
  }
  &.emotion-disgusted {
    color: var(--emotion-disgusted-color);
  }
  &.emotion-frustrated {
    color: var(--emotion-frustrated-color);
  }
}

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

/* 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) + 1em);
  z-index: 1;

  & .media-box {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    --speaker-count: 2;
    height: var(--initial-height);
    background-color: var(--audio-player-background-color);
    color: rgba(var(--audio-player-text-rgb), 0.7);
    box-shadow: 0 1em 1em 0 white;
    transition: height 0.2s ease;

    & a {
      color: rgba(var(--audio-player-link-rgb), 1);
      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(--audio-player-link-rgb), 0.2);
      transition: color 0.5s ease, text-decoration 0.5s ease, -webkit-text-decoration 0.5s ease;

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

    &.dropping-state {
      opacity: 0.6;
    }

    & .loading-icon {
      top: 50%;
      position: relative;
      transform: translateY(-50%);
    }

    &[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 {
    & .media-box {
      height: var(--stuck-height);
      transition: height 0.5s ease;
      
      
      & .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;
    }
    & .behavior-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-status-caption {
      top: var(--player-visualization-mobile-height);
      transition: top 0.5s ease;
    }
    
    & .player-position-caption {
      top: var(--player-visualization-mobile-height);
      transition: top 0.5s ease;
    }
  }
}

/* Player visualization timeline */
.player-visualization {
  position: relative;  
  background-color: var(audio-player-background-color);
  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%);
        }
      }
    }

    /* Playing state - highlight currently playing clip */
    & .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: var(--emotion-neutral-color);
      border-color: var(--emotion-neutral-color);
      
      /* ::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;
      }
    }

    /* TODO - The way this is structured, we do not visibly support more than 5 speakers, should adjust this */
    &[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)));
    }

    /* Background colors based on emotion classes with animation using ::after */
    &.emotion-unknown .clip-visualization::after {
      background-color: var(--emotion-unknown-color);
    }
    &.emotion-neutral .clip-visualization::after {
      background-color: var(--emotion-neutral-color);
    }
    &.emotion-calm .clip-visualization::after {
      background-color: var(--emotion-calm-color);
    }
    &.emotion-confident .clip-visualization::after {
      background-color: var(--emotion-confident-color);
    }

    &.emotion-affectionate .clip-visualization::after {
      background-color: var(--emotion-affectionate-color);
    }
    &.emotion-amused .clip-visualization::after {
      background-color: var(--emotion-amused-color);
    }
    &.emotion-excited .clip-visualization::after {
      background-color: var(--emotion-excited-color);
    }
    &.emotion-happy .clip-visualization::after {
      background-color: var(--emotion-happy-color);
    }
    &.emotion-hopeful .clip-visualization::after {
      background-color: var(--emotion-hopeful-color);
    }
    &.emotion-proud .clip-visualization::after {
      background-color: var(--emotion-proud-color);
    }
    &.emotion-relieved .clip-visualization::after {
      background-color: var(--emotion-relieved-color);
    }
    &.emotion-curious .clip-visualization::after {
      background-color: var(--emotion-curious-color);
    }
    &.emotion-interested .clip-visualization::after {
      background-color: var(--emotion-interested-color);
    }

    &.emotion-sad .clip-visualization::after {
      background-color: var(--emotion-sad-color);
    }
    &.emotion-disappointed .clip-visualization::after {
      background-color: var(--emotion-disappointed-color);
    }
    &.emotion-bored .clip-visualization::after {
      background-color: var(--emotion-bored-color);
    }
    &.emotion-tired .clip-visualization::after {
      background-color: var(--emotion-tired-color);
    }

    &.emotion-afraid .clip-visualization::after {
      background-color: var(--emotion-afraid-color);
    }
    &.emotion-anxious .clip-visualization::after {
      background-color: var(--emotion-anxious-color);
    }
    &.emotion-stressed .clip-visualization::after {
      background-color: var(--emotion-stressed-color);
    }
    &.emotion-concerned .clip-visualization::after {
      background-color: var(--emotion-concerned-color);
    }
    &.emotion-surprised .clip-visualization::after {
      background-color: var(--emotion-surprised-color);
    }
    &.emotion-confused .clip-visualization::after {
      background-color: var(--emotion-confused-color);
    }
    &.emotion-ashamed .clip-visualization::after {
      background-color: var(--emotion-ashamed-color);
    }

    &.emotion-angry .clip-visualization::after {
      background-color: var(--emotion-angry-color);
    }
    &.emotion-contemptuous .clip-visualization::after {
      background-color: var(--emotion-contemptuous-color);
    }
    &.emotion-disgusted .clip-visualization::after {
      background-color: var(--emotion-disgusted-color);
    }
    &.emotion-frustrated .clip-visualization::after {
      background-color: var(--emotion-frustrated-color);
    }
    
    & .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: var(--audio-player-background-color);
      padding: 0.1em 0.2em;
      color: rgba(var(--audio-player-text-rgb), 0.5);
    }
  }
}

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

  & .behavior-label {
    position: absolute;
    font-size: 0.8em;
    width: 10em;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.4em;

    & .behavior-icon {
      transform: translateX(-50%);
    }
    
    &[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;
      color: rgba(var(--audio-player-text-rgb), 0.7);

      &:hover {
        color: rgba(var(--link-text-rgb), 1);

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

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

.behavior-icon,
.emotion-icon {
  position: relative;
  display: inline-block;
  top: 0.05em;
  width: 0.8em;
  height: 0.8em;
  margin-right: -0.1em;
}

.loading-icon {
  display: block;
  width: 100%;
  height: 2.5em;
}

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


  & .player-control-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  & .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, img {
      width: 100%;
      height: 100%;
    }

    & svg,
    & img,
    & svg *,
    & img * {
      transition: fill 0.5s ease;
    }

    &:hover {
      & svg,
      & svg * {
        fill: rgba(var(--link-hover-text-rgb), 1);
        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: 0.5em;
  right: 0.5em;

  & .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;
  
  & .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.5em;
    top: var(--player-visualization-height);
    transition: top 0.2s ease;
    font-size: 0.8em;
  }
}