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

@font-face {
    font-family: "CoFo Gothic Medium";
    font-style: normal;
    font-display: fallback;
    font-weight: 500;
    src: url("/fonts/CoFoGothic-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "CoFo Gothic Medium";
    font-style: bold;
    font-display: fallback;
    font-weight: 700;
    src: url("/fonts/CoFoGothic-Bold.woff2") format("woff2");
}

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: 30, 30, 35;
    --text-accent-rgb: 20, 20, 50;

    --link-text-rgb: 50, 50, 70;
    --link-hover-text-rgb: 40, 95, 235;

    --background-color: rgba(255, 255, 255, 1);
    --panel-background-color: rgba(238, 238, 240, 1);

    --audio-player-text-rgb: 255, 255, 255;
    --audio-player-link-rgb: 120, 180, 255;
    --audio-player-background-color: rgba(50, 50, 85, 1);
    --audio-player-accent-color: rgba(20, 20, 50, 1);
    --audio-player-position-color: rgba(255, 255, 255, 0.5);

    --contact-form-background-color: rgba(50, 50, 85, 1);
    --contact-form-text-color: rgba(255, 255, 255, 1);

    --inverted-button-color: rgba(242, 242, 246, 1);
    --inverted-button-hover-color: rgba(40, 95, 235, 1);

    --modal-background-color: rgba(255, 255, 255, 1);
    --modal-icon-border-color: rgba(30, 30, 35, 0.1);
    --modal-overlay-color: rgba(30, 30, 35, 0.1);

    --behavior-navigator-background-color: rgba(30, 30, 35, 1);
    --behavior-navigator-disabled-background-color: rgba(225, 225, 225, 0.5);
    --behavior-navigator-separator: rgba(128, 128, 128, 1);

    /* Emotion tags colors based on Plutchik's wheel of emotions */
    /* Each emotion is split up into groups for easier maintenance */
    /* Reference - https://en.wikipedia.org/wiki/Robert_Plutchik#Plutchik's_wheel_of_emotions */
    --emotion-group-neutral: rgba(90, 90, 110, 1);
    --emotion-group-calm-grounded: rgba(110, 140, 190, 1);
    --emotion-group-excited-engaged: rgba(255, 120, 80, 1);
    --emotion-group-low-energy-negative: rgba(0, 120, 200, 1);
    --emotion-group-threat-uncertainty: rgba(180, 100, 200);
    --emotion-group-attack-rejection: rgba(255, 53, 84, 1);

    /* Emotion Group: Neutral */
    --emotion-unknown-color: var(--emotion-group-neutral);
    --emotion-neutral-color: var(--emotion-group-neutral);

    /* Emotion Group: Calm / Grounded */
    --emotion-calm-color: var(--emotion-group-calm-grounded);
    --emotion-confident-color: var(--emotion-group-calm-grounded);
    --emotion-interested-color: var(--emotion-group-calm-grounded);

    /* Emotion Group: Excited / Engaged */
    --emotion-affectionate-color: var(--emotion-group-excited-engaged);
    --emotion-amused-color: var(--emotion-group-excited-engaged);
    --emotion-excited-color: var(--emotion-group-excited-engaged);
    --emotion-happy-color: var(--emotion-group-excited-engaged);
    --emotion-hopeful-color: var(--emotion-group-excited-engaged);
    --emotion-proud-color: var(--emotion-group-excited-engaged);
    --emotion-relieved-color: var(--emotion-group-excited-engaged);
    --emotion-curious-color: var(--emotion-group-excited-engaged);

    /* Emotion Group: Low Energy / Negative */
    --emotion-disappointed-color: var(--emotion-group-low-energy-negative);
    --emotion-bored-color: var(--emotion-group-low-energy-negative);
    --emotion-tired-color: var(--emotion-group-low-energy-negative);
    --emotion-concerned-color: var(--emotion-group-low-energy-negative);
    --emotion-confused-color: var(--emotion-group-low-energy-negative);
    --emotion-sad-color: var(--emotion-group-low-energy-negative);

    /* Emotion Group: Threat / Uncertainty */
    --emotion-afraid-color: var(--emotion-group-threat-uncertainty);
    --emotion-anxious-color: var(--emotion-group-threat-uncertainty);
    --emotion-stressed-color: var(--emotion-group-threat-uncertainty);
    --emotion-surprised-color: var(--emotion-group-threat-uncertainty);
    --emotion-ashamed-color: var(--emotion-group-threat-uncertainty);
    --emotion-frustrated-color: var(--emotion-group-threat-uncertainty);
    --emotion-fear-color: var(--emotion-group-threat-uncertainty);

    /* Emotion Group: Attack / Rejection */
    --emotion-angry-color: var(--emotion-group-attack-rejection);
    --emotion-contemptuous-color: var(--emotion-group-attack-rejection);
    --emotion-disgusted-color: var(--emotion-group-attack-rejection);
}

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;

    @media (width < 768px) {
        width: auto;
        margin-left: 0.5em;
    }

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

        @media (width < 768px) {
            gap: 1em;
            flex-wrap: nowrap;

            & .nav-link-mobile-hidden {
                display: none !important;
            }

            & .nav-logo-modulate {
                display: none !important;
            }
        }

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

            &.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;
            }

            &:hover {
                & img {
                    filter: brightness(0) saturate(100%) invert(22%) sepia(43%)
                        saturate(5098%) hue-rotate(221deg) brightness(108%)
                        contrast(85%);
                }
            }
        }

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

.nav-logo-container {
    display: flex;

    & img {
        height: 1.9em;
        padding-bottom: 0.4em;
        margin-top: -0.25em;
        width: auto;
    }

    & span {
        margin-left: 0.15em;
        align-self: baseline;
    }
}

.hidden {
    display: none !important;
}
.no-line-break {
    white-space: nowrap;
}

.content {
    position: relative;
    width: 60%;
    margin: 2em auto;
    overflow-x: clip;

    &.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(var(--audio-player-text-rgb), 1);
    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;
        }
    }

    & .confirmation-clause {
        display: flex;
        width: 75%;
        text-align: left;
    }

    & .confirmation-label {
        margin-left: 0.5em;
    }
}

.footer {
    margin-top: 5em;
    padding: 2em 4em 2em 2em;
    text-align: left;
    font-size: 0.8em;
    background-color: var(--panel-background-color);

    @media (width < 768px) {
        padding: 1em 2em 1.5em 1em;
        font-size: 0.75em;
    }

    .footer-logo {
        width: 8em;
        margin-bottom: 1em;
    }

    .footer-columns {
        display: flex;
        justify-content: space-between;
        gap: 28%;

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

    .text-block {
        margin-bottom: 10em;
        @media (width < 768px) {
            margin-bottom: 5em;
        }
    }

    b {
        font-weight: 600 !important;
    }

    p :not(:first-child) {
        margin-left: 1em;
    }
}

.contact-form {
    background-color: var(--contact-form-background-color);
    margin-top: 1em;
    padding: 0 1em 1em 0;

    & .contact-form-text-wrapper {
        padding: 40px 40px 0 40px;
        color: var(--contact-form-text-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);
    }

    & 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.7;
    }

    & h1,
    & h2 {
        margin: 0;
    }

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

        &.hero {
            font-family: "CoFo Gothic Medium";
            font-size: 3.8em;
            line-height: 0.9;
            letter-spacing: -0.01em;
            color: rgba(var(--text-accent-rgb), 1);
            margin-top: 0.4em;

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

        &.page-title {
            display: inline;
            font-size: 2.8em;
            line-height: 1.05;
            letter-spacing: -0.01em;
            font-weight: 700;
            color: rgba(var(--text-accent-rgb), 1);
        }

        &.page-title-light {
            display: inline;
            font-size: 2.8em;
            margin-left: 0.1em;
            line-height: 1.05;
            letter-spacing: -0.01em;
            font-weight: 500;
            color: rgba(var(--text-accent-rgb), 0.5);
        }
    }

    & h2 {
        font-size: 1.5em;
        margin-bottom: 0.5em;
        line-height: 1.2;
        font-weight: 450;

        &.hero {
            font-family: "CoFo Gothic Medium";
            font-size: 1.4em;
            line-height: 1.1;
            color: rgba(var(--text-accent-rgb), 1);
            @media (width < 768px) {
                font-size: 1.35em;
            }
        }

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

    & strong,
    & b {
        font-weight: 700;
        line-height: 1.1;
        margin: 0;
        padding: 0;
    }

    & 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;
    }
}

.text-block {
    margin-top: 1em;
    margin-bottom: 2em;
    color: rgba(var(--text-accent-rgb), 1);
    &.double-margin {
        margin-top: 2em;
        margin-bottom: 4em;
    }
}

.all-caps {
    text-transform: uppercase;
}

.table-data-subtitle {
    font-size: 0.65em;
    letter-spacing: 0.1em;
    margin-top: 0.2em !important;
    opacity: 0.7;
}

.comma-separated:not(:empty) ~ .comma-separated:not(:empty):before {
    content: ", ";
    margin-left: -0.3em;
}

.page-title-container {
    margin-bottom: 1em;
}

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

.share-button {
    display: block;
    text-align: center;
    border: 1px solid rgba(var(--link-text-rgb), 0.5);
    padding: 0.4em;
    border-radius: 0.3em;
    font-weight: 600;
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 1em;
    text-decoration: none;
    color: rgba(var(--link-text-rgb), 1);
    cursor: pointer;
    background-color: var(--background-color);
    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;
    }
}

.conversations-button {
    display: block;
    text-align: center;
    border: 1px solid rgba(var(--link-text-rgb), 0.5);
    padding: 0.4em;
    margin-top: 0.5em;
    border-radius: 0.3em;
    font-weight: 600;
    width: 100%;
    text-decoration: none !important;
    color: rgba(var(--link-text-rgb), 1);
    cursor: pointer;
    background-color: var(--background-color);
    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;
    }
}

.anchor-link {
    text-decoration: none !important;
}

.anchor-button {
    display: block;
    text-align: center;
    border: 1px solid rgba(var(--link-text-rgb), 0.5);
    padding: 0.4em;
    border-radius: 0.3em;
    font-weight: 600;
    width: 100%;
    margin-bottom: 1.5em;
    text-decoration: none !important;
    color: rgba(var(--link-text-rgb), 1);
    cursor: pointer;
    background-color: var(--background-color);
    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;
    }
}

.analysis-container {
    margin: 0em 0.4em;
}

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

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

.audio-details {
    width: 100%;
    margin: 0em auto;

    & .audio-details-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8em;

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

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

        & tbody {
            & tr {
                transition: background-color 0.2s ease;

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

            & td {
                padding: 0.7em;
                padding-left: 0;
                &.grouped-column {
                    border-top: none;
                }
            }
        }
    }
}

.speaker-details-table {
    & .role-column {
        width: 18%;
    }
    & .emotion-column {
        width: 36%;
    }
    & .percentage-column {
        width: 14%;
    }
    & .language-column {
        width: 32%;
    }
}

.behavior-details-table {
    & .role-column {
        width: 18%;
    }
    & .behavior-column {
        width: 30%;
        font-size: 1.2em !important;
        span {
            border-bottom: 3px solid currentColor;
        }
    }
    & .description-column {
        width: 40%;
    }
    & .confidence-column {
        width: 12%;
    }
}

.placeholder-cell {
    font-size: 12px;
    background-color: rgba(30, 30, 35, 0.13);
    height: 1em;
    width: 100%;
    max-width: 35em;
    display: block;
    margin-bottom: 0.2em;
    border-radius: 0.2em;
    animation: progress-pulse 1.5s ease-in-out infinite alternate;
}

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;
    }
}

.detected-behavior {
    font-weight: 700;
}

.behavior-link {
    cursor: pointer;
    text-decoration: none;

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

.transcript-header-container {
    display: flex;

    & button {
        display: block;
        font-size: 0.8em;
        height: 1.55em;
        margin-left: 10px;
        margin-top: 0.38em;
        background-color: var(--background-color);
        color: rgba(var(--link-text-rgb), 0.7);
        border: 1px rgba(var(--link-text-rgb), 0.7) solid;
        border-radius: 0.3em;
        padding: 0.1em 0.3em;
        cursor: pointer;

        &:hover {
            color: rgba(var(--link-text-rgb), 1);
            transition:
                border-color 0.5s ease,
                color 0.5s ease;
        }
    }
}
.transcript-container {
    width: 98%;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;

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

    & .transcript-clip {
        background-color: var(--panel-background-color);
        padding: 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;

            @supports not (corner-shape: squircle) {
                --radius: 1.1em;
                border-radius: 0 var(--radius) var(--radius) var(--radius);
            }
        }

        &.speaker-right {
            margin-left: 3em;

            @supports not (corner-shape: squircle) {
                --radius: 1.1em;
                border-radius: 0 var(--radius) var(--radius) var(--radius);
            }
        }

        /* 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;
            flex-wrap: wrap;
            gap: 0.5em;
            margin-bottom: 0.4em;

            & .time {
                opacity: 0.8;
            }
            & .duration {
                display: none;
            }
            & .name {
                opacity: 0.8;
            }
            & .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;
                white-space: nowrap;
            }
            & .language {
                display: none;
                opacity: 0.5;
            }
        }

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

/* Demo recordings table */
.demo-recordings-section {
    margin-bottom: 2em;

    & .demo-recordings-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1.5em;

        & thead {
            & th {
                text-align: left;
                padding: 0.7em 0.3em 0.5em 0;
                font-weight: 400;
                font-size: 0.8em;
                color: rgba(var(--text-accent-rgb), 1);
            }
        }

        & 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 {
                font-size: 1em;

                & .detected-behavior {
                    font-size: 0.8em;
                    border-bottom: 3px solid currentColor;
                }
                & .behavior-count-bold {
                    font-size: 0.6em;
                    font-weight: 700;
                }

                &.category-column {
                    font-size: 0.8em;
                }

                &.industry-column {
                    font-size: 0.8em;
                }
            }
        }
    }
}

.emotion-pattern-column {
    white-space: nowrap;

    & .fingerprint {
        display: inline-block;
        width: 80%;
        margin-top: 0.15em;
        height: 2.4em;
    }

    & .time {
        display: inline-block;
        color: rgba(150, 150, 170, 1);
        font-size: 0.8em;
        vertical-align: top;
        padding-top: 0.15em;
    }
}

.three-column {
    & .title-column {
        width: 45%;
    }
    & .emotion-pattern-column {
        width: 25%;
    }
    & .behavior-column {
        width: 30%;
        padding-top: 0;
    }
}

.four-column {
    & .title-column {
        width: 51%;
    }
    & .emotion-pattern-column {
        width: 23%;
        & .fingerprint {
            margin-top: 0;
            height: 1.35em;
        }
    }
    & .industry-column {
        width: 14%;
    }

    & .category-column {
        width: 12%;
    }
}

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

dialog.share-modal-box {
    border: none;
    border-radius: 1em;
    font-size: 16px;
    min-width: 200px; /* Set in case we only show copy link as a share option*/
}

#close-modal {
    float: right;
    border: none;
    background-color: var(--modal-background-color);
}

.share-option-list {
    display: flex;
    justify-content: space-evenly;
}
.share-icon-circle {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-bottom: 1em;
    border: 1px var(--modal-icon-border-color) solid;
    background-color: var(--modal-background-color);

    &:active {
        background-color: var(--modal-overlay-color);
    }

    &:hover {
        transform: scale(1.05);
        color: rgba(var(--link-hover-text-rgb), 1);
        /* Using https://cssfilterconverter.com/ to convert the color of svg, typically would inherit the color but now that its an img src it doesn't*/
        & img {
            filter: brightness(0) saturate(100%) invert(35%) sepia(47%)
                saturate(2126%) hue-rotate(202deg) brightness(90%)
                contrast(102%);
        }
    }

    & svg {
        /* This block exists just to center the svg, can delete if parent div can do it */
        position: relative;
        top: 2px;
    }
}

.share-option {
    text-align: center;
    font-size: 0.7em;
    padding: 0.5em 0.5em;
}

#behavior-navigator {
    border-radius: 5em;
    background-color: var(--behavior-navigator-background-color);
    width: fit-content;
    position: fixed;
    bottom: 10px;
    transform: translateX(-50%);
    left: calc(50%);
    margin: 0;
    white-space: nowrap;

    & button {
        background-color: var(--behavior-navigator-background-color);
        border: none;
        color: var(--inverted-button-color);
        padding: 0.6em;
        cursor: pointer;

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

        &:disabled {
            background-color: var(
                --behavior-navigator-disabled-background-color
            );
            cursor: not-allowed;
        }

        &:disabled:hover {
            background-color: var(
                --behavior-navigator-disabled-background-color
            );
            color: var(--inverted-button-color);
        }
    }

    & #prev-behavior-button {
        border-right: 1px solid var(--behavior-navigator-separator);
        border-radius: 5em 0px 0px 5em;
    }

    & #next-behavior-button {
        border-radius: 0px 5em 5em 0px;
    }
}

/* Keyframe animation for emotion color fade-in */
@keyframes progress-pulse {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 0.8;
    }
}

.status-element {
    padding: 0.6em 0.7em;
    white-space: nowrap;
    & .check-icon {
        width: 1em;
        opacity: 1;
        transition: width 0.5s ease;
        display: inline-flex;
        bottom: -0.1em;
        align-items: baseline;
        & svg {
            width: 1em;
            height: 1em;
            & polyline {
                stroke-dashoffset: 0;
                transition: stroke-dashoffset 0.7s ease;
            }
        }
    }

    &.in-progress {
        animation: progress-pulse 0.8s ease-in-out infinite alternate;

        .check-icon {
            width: 0;
            opacity: 0;
        }
    }
}

#progress-bar {
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(242, 242, 246, 1);
    font-size: 0.8em;
    color: rgba(30, 30, 35, 0.7);
    border-radius: 0.3em;
    padding-left: 0.1em;
    margin-bottom: 1.5em;
    max-height: 100px;
    &.hiding {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.8s ease;
    }
}

: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;
    }
}

.sticky {
    position: sticky;
}

.media-container {
    top: 0px;
    padding-top: 10px;
    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);
        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 {
        pointer-events: none;

        & .media-box {
            height: var(--stuck-height);
            transition: height 0.5s ease;
            pointer-events: all;

            & .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;
            & .total-time {
                margin-top: 0;
            }
        }
        & #current-transcript-caption {
            top: var(--player-visualization-mobile-height);
            transition: top 0.5s ease;
            padding: 0.1em;
            padding-left: 0.3em;
        }
    }
}

/* 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,
    .emotion-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);

            &.emotion-visualization {
                height: 100%;
            }

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

.emotion-bar {
    border-radius: 0.2em;
    background-color: var(--background-color);
    overflow: hidden;
    width: 100%;
    height: 2.5em;
    @media (width < 768px) {
        height: 2em;
    }
}

.emotion-bar-caption {
    width: 100%;
    margin: 0.2em 0 0.5em 0;
}

.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;
        margin-left: 0.5em;
        @media (width < 768px) {
            margin-left: 0.45em;
        }

        & .behavior-icon {
            pointer-events: auto;
            transform: translateX(-50%);
            height: 1em;
            width: 1em;
            margin-bottom: -0.1em;
            @media (width < 768px) {
                height: 0.9em;
                width: 0.9em;
            }
        }

        /* include both ways of showing behavior popup for case where clip is too short to easily hover over */
        &:hover .behaviors-pop-up {
            opacity: 1;
        }

        &.visible .behaviors-pop-up {
            opacity: 1;
        }

        & .behaviors-pop-up {
            opacity: 0;
            position: absolute;
            z-index: 1;
            color: rgba(225, 225, 225, 1);
            background-color: var(--audio-player-background-color);
            bottom: 0;
            line-height: 1.4;
            list-style-type: none;
            padding-left: 0.5em;
            padding-right: 0.3em;
            padding-top: 0.1em;
            white-space: nowrap;
        }

        & .behavior-count-bold {
            font-size: 0.85em;
        }
        & .show-left {
            li {
                display: flex;
                flex-direction: row-reverse;
                gap: 0.7em;
                margin-right: -0.2em;

                img {
                    margin-top: 0.1em;
                }
            }
            transform: translateX(-100%);
            left: 0.7em;
            padding-right: 0;
        }
        & .show-right {
            left: -0.5em;
            span {
                margin-left: -0.5em;
                margin-right: 0.25em;
                span {
                    margin: 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;
            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 {
    position: relative;
    display: inline-block;
    top: 0.13em;
    width: 0.85em;
    height: 0.85em;
    margin-right: -0.15em;
    margin-left: 0;
}

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

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

.dark-loading-icon {
    filter: brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(897%)
        hue-rotate(33deg) brightness(91%) contrast(91%);
}

.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-error-message {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8em;
    }

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

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

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

        &.disabled {
            cursor: not-allowed;
            /* Using https://cssfilterconverter.com/ to convert the color of svg */
            & img {
                filter: brightness(0) saturate(100%) invert(59%) sepia(0%)
                    saturate(897%) hue-rotate(33deg) brightness(91%)
                    contrast(91%);
            }
        }

        &:hover:not(.disabled) {
            /* Using https://cssfilterconverter.com/ to convert the color of svg */
            & img {
                filter: brightness(0) saturate(100%) invert(58%) sepia(77%)
                    saturate(346%) hue-rotate(180deg) brightness(101%)
                    contrast(100%);
            }
        }
    }
}

.player-status-caption {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    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;
        margin-top: 0.3em;
    }
}

.player-seek-caption {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    top: var(--player-visualization-height);
    transition: top 0.2s ease;
    bottom: 0.65em;
    left: 0.5em;
    opacity: 0.5;
    font-size: 0.8em;
    pointer-events: none;
}

.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 var(--audio-player-position-color);
    }
}

#current-transcript-caption {
    display: inline-block;
    position: absolute;
    font-size: 0.8em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 85%;
    padding: 0.2em;
    padding-left: 0.5em;
    opacity: 0.5;
    top: var(--player-visualization-height);
    transition: top 0.2s ease;
}

.fingerprint {
    border-radius: 0.3em;
    filter: brightness(110%);
}