/* manrope-regular - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url('../font/manrope-v19-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-700 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    src: url('../font/manrope-v19-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}





/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
    vertical-align: top;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    color: #20272b;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}



:root {
    --var-background-solid: #000;
    --var-background-solid-shade: #20272B;
    --var-background-solid-highlight: #EC3241;
    --var-background-solid-opposite: #fff;
    --var-background-solid-positive: #34ED91;
    --var-background-solid-neutral: #363636;


    --var-color-solid: #fff;
    --var-color-solid-shade: #999;
    --var-color-solid-shade-subtle: #2e2e2e;
    --var-color-solid-shade-soft: rgba(255, 255, 255, .75);
    --var-color-solid-shade-extra-soft: rgba(255, 255, 255, .162);
    --var-color-solid-shade-ultra-soft: rgba(255, 255, 255, .0938);
    --var-color-solid-highlight-shade: #f6bdc1;

    --var-font-size-l: 18px;
    --var-font-size-m: 16px;
    --var-font-size-s: 13px;
    --var-font-size-xs: 11px;
}

html {}

html,
body,
body>div.container,
.webchat {
    height: 100%;
}

body {
    background: var(--var-background-solid);
    color: var(--var-color-solid);
    font-size: var(--var-font-size-m);
    font-family: 'Manrope', sans-serif;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

/*
html.dragging {
    overscroll-behavior:contain;
}
*/

iframe {
    border: none
}

button,
a {
    cursor: pointer;
    touch-action: manipulation
}


.webchat {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-height: 100vh;
}




.chat-messages,
.web,
.onboarding-sim-image {
    transition: scrollbar-color 862ms;
}

.chat-messages:hover,
.web:hover,
.onboarding-sim-image:hover {
    scrollbar-color: rgba(255, 255, 255, .38) transparent;
}


.chat {
    position: relative;
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 540px;
    min-width: 420px;
    border-right: 1px solid rgba(255, 255, 255, 0.162);
    display: flex;
    flex-direction: column;
}

.chat:before {
    content: '';
    background-image: url(../img/voycen-bg.webp);
    background-size: 314px;
    background-position: center center;
    background-attachment: fixed;
    opacity: .1162;
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 19px;
}


.app-header {
    background-color: var(--var-background-solid-shade);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: .62rem 13px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 23px;
    height: 93px;
}

.app-header>* {
    flex: 1 1 auto;
    display: flex;
}

.app-header.web-header>* {
    justify-content: center;
    height: 100%;
    place-items: center;
    flex: 1;
}

.app-header.web-header small {
    color: #fff;
    display: block;
    text-align: center;
    position: relative;

}



.chat-header-contact {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 125%;
    flex: 1 0 auto;
}

.chat-header-contact img {
    border-radius: 50%;
    width: 75px;
    border: 2px solid var(--var-background-solid-opposite);
}

.chat-header-contact-details strong {
    font-size: var(--var-font-size-l);
}

.chat-header-contact-details-status span {
    font-size: var(--var-font-size-s);
    color: var(--var-color-solid-shade-soft);
}

.chat-header-contact-details-status span:before {
    content: '';
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--var-background-solid-positive);
    margin-right: .38em;
    position: relative;
    top: 6.5px;
}


#contactStatusText:after {
    content: attr(data-contact-status-waiting-text);
}

#contactStatusText[data-contact-status="working"]:after {
    content: attr(data-contact-status-working-text);
}

#contactStatusText[data-contact-status="editing"]:after {
    content: attr(data-contact-status-editing-text);
}

.chat-header-add {
    justify-content: end;
}

.chat-header-add-obprogress {
    display: flex;
    gap: 5px;
}


.chat-header-add-obprogress:after {
    content: '';
    display: block;
    width: 21px;
    height: 28px;
    background: url(../img/icon_reward.svg) no-repeat;
    position: relative;
    top: 3px;
    opacity: .75
}

.chat-header-add-obprogress.progress-full:after {
    filter: invert(.5) sepia(1) hue-rotate(305deg) saturate(4.38) drop-shadow(0 -1px 0 black);
}


.chat-header-add-obprogress.progress-full #obprogress+label {
    color: #fff
}

.chat-header-add-obprogress-bar {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: .25em;
    padding: 8px 0 4px 13px;
    border-left: 1px solid rgba(255, 255, 255, .13);
    position: relative;
    margin-top: 6px;
}


#obprogress {
    appearance: none;
    height: 5px;
    width: 100%;
    display: flex;
}


#obprogress::-webkit-progress-bar {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .25), rgba(255, 255, 255, .5));
    border-radius: 13px;
}

#obprogress::-webkit-progress-value {
    background: linear-gradient(to right, rgba(255, 255, 255, .162), rgba(255, 255, 255, 1));
    border-radius: 13px;
    box-shadow: 0 0 13px rgb(135 180 255 / 73%);
    transition: all 380ms ease-out
}


#obprogress+label {
    font-size: var(--var-font-size-s);
    color: var(--var-color-solid-shade-soft);
    padding: 0 1.162em;
}

.chat-messages {
    padding: 1rem;
    position: relative;
    overflow-y: auto;
    height: calc(100% - 175px);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}


/*
 * Define the animation sequence using @keyframes.
 * We are animating from an initial state (0%) to a final state (100%).
 */
@keyframes fadeInFromLeft {
    0% {
        /* Start fully transparent and 20px to the left */
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        /* End fully opaque and in its original position */
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInFromRight {
    0% {
        /* Start fully transparent and 20px to the left */
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        /* End fully opaque and in its original position */
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Apply the animation to the AI message container.
 */
.message-ai.inserted,
.message-system.inserted {
    /* * The 'animation' shorthand property:
   * fadeInFromLeft: the name of our @keyframes animation.
   * 0.5s: the duration of the animation (half a second).
   * ease-out: the timing function, makes the animation slow down at the end.
   */
    animation: fadeInFromLeft 0.5s ease-out;
}

#thinking-indicator.inserted,
#working-indicator.inserted {
    animation: fadeInFromLeft 0.5s normal 1s forwards ease-out;
    height: auto;
    margin-bottom: 75px;
}

#working-indicator>div:before {
    content: none
}


.working-indicator-progress-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    align-items: end;
}

.wi-step {
    font-weight: bold;
    font-size: var(--var-font-size-l);
}

.wi-estimated-time {
    font-size: var(--var-font-size-s);
    display: inline-block;
    position: relative;
    bottom: 2px;
}

.working-indiciator-progressbar {
    height: 6px;
    margin-bottom: 9px
}

#wi-progress {
    width: 100%;
    appearance: none;
    height: 6px;
}

#wi-progress::-webkit-progress-bar {
    background: linear-gradient(to bottom, #585858, #6E6E6E);
    border-radius: 13px;
}

#wi-progress::-webkit-progress-value {
    background: linear-gradient(to right, rgba(255, 255, 255, .162), rgba(255, 255, 255, 1));
    border-radius: 13px;
    box-shadow: 0 0 13px rgb(135 180 255 / 62%);
    transition: all 380ms ease-out
}


.working-indicator-current-task {
    display: flex;
    gap: 5px;
}




.wi-loader {
    position: relative;
    width: 29px;
}

.wi-loader:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.wi-circular {
    -webkit-animation: wi-rotate 2s linear infinite;
    animation: wi-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.wi-path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: wi-dash 1.5s ease-in-out infinite;
    animation: wi-dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #fff;
}

@-webkit-keyframes wi-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes wi-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes wi-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes wi-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}










.wi-avatar {
    height: 16px;
    width: 16px;
    border-radius: 30px;
    display: inline-block;
    background-image: url(../img//alice.jpg);
    background-size: cover;
    position: absolute;
    inset: 23%;
    border: 1px solid #000;
}


.wi-task-name {
    font-size: var(--var-font-size-s);
    opacity: .5;
    display: flex;
    align-items: center;
}


.message-user.inserted,
#thinking-indicator.stt-processing.inserted {
    animation: fadeInFromRight 0.38s ease-in;
}


.message.message-user {
    display: flex;
    float: none;
    flex-flow: row-reverse;
    flex-wrap: wrap;
}





.message>div:first-child {
    border-radius: 5px;
    padding: 1em;
    background: var(--var-background-solid-shade);
    margin-bottom: .2em;
    position: relative;
    max-width: 93.8%;
    display: inline-block;
}

.message-ai>div:first-child,
.message-system>div:first-child {
    border-top-left-radius: 0;
}

.message-user>div:first-child {
    border-top-right-radius: 0;
    float: right;
}

.message>div:first-child:before {
    content: '';
    position: absolute;
    left: -6.5px;
    top: 0;
    display: block;
    width: 7px;
    height: 11px;
    background-image: url(../img/message-tail.svg);
    filter: invert(9%) sepia(9%) saturate(1317%) hue-rotate(158deg) brightness(84%) contrast(86%);
}

.message-user>div:first-child:before {
    transform: scaleX(-1);
    left: auto;
    right: -6.5px;
    filter: invert(35%) sepia(88%) saturate(2984%) hue-rotate(334deg) brightness(90%) contrast(93%);
}



.message.message-user>div:first-child {
    background: var(--var-background-solid-highlight);
}

.message-add {
    margin-top: 3px;
    float: right;
    display: flex;
    gap: 0;
}

.message-add,
.message-add small,
.message-add small:before {
    color: var(--var-color-solid-shade);
    font-size: var(--var-font-size-xs);
}


.message.message-user .message-add,
.message.message-user .message-add small {
    color: var(--var-color-solid-highlight-shade);
}


.message-add>div:before {
    content: '•';
    text-align: center;
    margin: 0 .25em 0 .38em;
}

.message-add>div:first-child:before {
    content: none;
}


.message-user .message-meta {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}



.message-context-menu {
    position: relative;
}



.message-context-menu .message-context-menu-content {
    overflow: hidden;
    height: 0;
    position: absolute;
    left: 0;
    top: 33px;
    transition: all 162ms ease-in-out;
}

.message-user .message-context-menu .message-context-menu-content {
    right: 0;
    left: auto;
}

.message-context-menu.open .message-context-menu-content {
    height: 60px;
    width: 170px;
    padding: .62em 0;
    box-shadow: 0 9px 9px rgba(0, 0, 0, .5);
    z-index: 1;
}

.message-context-menu-content {
    border-radius: 6px;
    border-top-right-radius: 0;
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    background: #454a4e;
}

.message-context-menu-content>div {
    background: #555b61;
    padding: .5em .75em
}

.message-context-menu-content>div:hover {
    background: var(--var-background-solid-highlight)
}

.message-meta {
    display: flex;
}

.meta-btn {
    cursor: pointer;
    transition: all 162ms ease-out;
    text-decoration: underline;
    display: inline-block;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: url(../img/icon_copy.svg) no-repeat center center;
    background-size: 15px;
    opacity: .75;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.message-context-menu.open .meta-btn,
.meta-btn:hover {
    background-color: rgba(255, 255, 255, .162);
    opacity: 1;
}


.meta-btn:active {
    filter: brightness(.75);
    transform: scale(.938);
    transition: none;
}

.meta-btn.message-context-menu-toggle {
    background-image: url(../img/icon_more.svg);
    background-size: 27px;
}

@keyframes copyflash {
    0% {
        background: rgba(255, 255, 255, .84);
        outline: 9px solid rgba(255, 255, 255, .84);
        border-radius: 9px;
    }

    100% {
        background: rgba(255, 255, 255, 0);
        outline: 9px solid rgba(255, 255, 255, 0);
        border-radius: 9px;
    }
}

.message.copied .message-content {
    animation: copyflash 620ms linear 1 alternate;
}

.message {
    /* margin-bottom: 1.38em; */
}

.message>div>*:not(.message-content) {
    user-select: none;
}

.message-content p {
    white-space: break-spaces;
}

.message-content a {
    color: #e8992a;
}

.message-title h1,
.message-example-addition {
    font-weight: bold;
}

.message-title h1 {
    font-size: var(--var-font-size-m);
    margin-bottom: 1em;
}

.message-example-addition p {
    margin-top: 1em;
}





.message-utility-buttons button,
.message-example-buttons button {
    background: var(--var-background-solid-highlight);
    border: none;
    color: var(--var-background-solid-opposite);
    padding: .5em 1em;
    border-radius: 6px;
    font-size: var(--var-font-size-s);
    cursor: pointer;
    transition: all 162ms ease-in-out;
    position: relative;
    /* max-height: 44px; */
    min-height: 44px;
    font-weight: bold;
    text-align: left;
    width: auto;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.message-utility-buttons button:last-child,
.message-example-buttons button:last-child {
    margin-right: 23px;
}

.message-utility-buttons button:hover,
.message-example-buttons button:hover {
    background: var(--var-background-solid-highlight);
    color: var(--var-background-solid-opposite);
    box-shadow: 0 1px 13px rgba(0, 0, 0, .38);
    transform: scale(1.062);
}

.message-utility-buttons button:active,
.message-example-buttons button:active {
    filter: brightness(.84);
    transform: scale(.9962);
    transition-duration: 62ms;
}

.message-utility-buttons button small,
.message-example-buttons button small {
    display: block;
    opacity: .75;
    font-weight: normal
}

#utility-buttons-container {
    max-width: calc(100% - 64px);
    width: 100%;
    position: relative;
    top: 60px;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, .0), rgba(0, 0, 0, 1) 22px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease-in;
}

#utility-buttons-container.disabled button {
    filter: saturate(0);
    pointer-events: none;
    opacity: .84;
}

#utility-buttons-container.active {
    opacity: 1;
    pointer-events: all;
}

#utility-buttons-container .message-utility-buttons>div {
    position: relative;
    max-width: fit-content;
    width: 100%;
    gap: 9px;
    display: flex;
    overflow-x: scroll;
    overflow-y: none;
    justify-content: space-between;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    margin-bottom: 0;
    height: 100%;
    scroll-snap-type: x mandatory;
}

#utility-buttons-container .message-utility-buttons:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    pointer-events: none;
}


.message-utility-buttons {
    display: none;
}

#utility-buttons-container>.message-utility-buttons {
    display: flex;
}





#thinking-indicator,
#working-indicator {
    opacity: 0;
    height: 0;
    margin: 0;
}

#thinking-indicator>div,
#working-indicator>div {
    padding-top: 1.62em;
    padding-bottom: 1.162em;
    width: 74px;
    animation: animloaderflash 3.162s linear infinite alternate;
}

#working-indicator>div {
    width: 100%;
    animation: animloaderflashworking 3s cubic-bezier(.25, .50, .75, .50) infinite;
    background: linear-gradient(to right, #20272b 44%, #3a4447 50%, #20272b 56%);
    background-size: 250%;
    border-radius: 5px;
    padding-top: 1em;
    padding-bottom: .75em;
}

@keyframes animloaderflashworking {
    0% {
        background-position: 100%;
    }

    100% {
        background-position: 0%;
    }
}


.thinking-animation {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    position: relative;
    left: 56px;
    color: #FFF;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
}

@keyframes animloaderflash {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(2);
    }

    100% {
        filter: brightness(1);
    }
}

@keyframes animloader {
    0% {
        box-shadow: -54px -12px rgba(255, 255, 255, 1), -39px 0 rgba(255, 255, 255, .62), -23px 0 rgba(255, 255, 255, .62);
    }

    33% {
        box-shadow: -54px 0px rgba(255, 255, 255, .84), -39px -12px rgba(255, 255, 255, 1), -23px 0 rgba(255, 255, 255, .75);
    }

    66% {
        box-shadow: -54px 0px rgba(255, 255, 255, .75), -39px 0 rgba(255, 255, 255, .62), -23px -12px rgba(255, 255, 255, .84);
    }

    100% {
        box-shadow: -54px 0 rgba(255, 255, 255, .62), -39px 0 rgba(255, 255, 255, .62), -23px 0 rgba(255, 255, 255, 1);
    }
}

@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.upload-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(32, 39, 43, 0.95);
    backdrop-filter: blur(4px);
    z-index: 1000;
    border-radius: 8px;
    padding: 20px;
}

.upload-overlay-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.upload-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.upload-text {
    font-size: 14px;
    font-weight: 500;
}

.chat-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    padding: .25rem .5rem;
    width: 100%;
    pointer-events: none;
}

.chat-footer>* {
    pointer-events: auto;
}

#image-preview-container {
    padding: .25em;
    background: #d2d2d2;
    margin-bottom: 4px;
    border-radius: 5px;
}

.preview-img-wrapper {
    margin-bottom: 0;
}

.prompt-controls {
    display: flex;
    gap: 6px;
    align-items: end;
}


body.visualizerVisible #message-input {
    font-size: 0;
    min-height: 100%;
}

body.visualizerVisible #image-upload-btn {
    pointer-events: none;
    opacity: 0
}

.prompt-controls input,
.prompt-controls button {
    border-radius: 50%;
    height: 54px;
    width: 54px;
}

html .preview-remove-btn {
    left: auto;
    right: -38%;
    top: auto;
    bottom: -11px;
}

.prompt-control-inputs {
    position: relative;
    width: 100%;
}



#message-input {
    /*
    resize: none;
    border-radius: 33px;
    width: 100%;
    vertical-align: top;
    padding: 1em 1.25em;
    height: 54px;
    scrollbar-color:transparent transparent;
    background: var(--var-background-solid-shade);
    border: none;
    color:var(--var-color-solid);
    transition: filter 116ms ease-out;
    outline:none
    */
}

/* width */
#message-input::-webkit-scrollbar {
    width: 0;
}

/* Track */
#message-input::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 transparent;
    border-radius: 0;
}

/* Handle */
#message-input::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
}

/* Handle on hover */
#message-input::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

/* width */
#messages-container::-webkit-scrollbar {
    width: 8px;
}

/* Track */
#messages-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 transparent;
    border-radius: 23px;
}

/* Handle */
#messages-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 23px;
}

/* Handle on hover */
#messages-container:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .38);
}

#message-input:hover,
#message-input:focus {
    filter: brightness(1.162);
}

.prompt-control-input-add {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

#image-upload-btn {
    background: transparent;
    border: none;
    height: 100%;
    border-radius: 33px;
}

.prompt-controls .btn,
.mic-btn {
    min-width: 54px;
    background: var(--var-background-solid-highlight);
    color: var(--var-color-solid);
    border: none;
}

#image-upload-btn,
.prompt-controls .btn,
.mic-btn {
    background: url('../img/icon_mic.svg') no-repeat var(--var-background-solid-highlight) center;
    color: transparent;
    transition: all 162ms ease-in-out;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;

}


.mic-btn {
    font-size: 0;
}


.mic-btn.recording {
    background: url('../img/icon_stop.svg') no-repeat var(--var-background-solid-highlight) center;
    background-size: 79%;
}

.web-header-voice .mic-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
}

.prompt-controls .btn {
    background-image: url('../img/icon_send.svg');
    background-size: 35%;
    background-position-x: 54%;
}

#image-upload-btn {
    background-image: url('../img/icon_cam.svg');
    background-color: transparent;
    opacity: .62;
}

#image-upload-btn:hover {
    opacity: 1;
}

.prompt-controls .btn:hover,
.mic-btn:hover,
#scrollToLatest:hover {
    filter: brightness(1.1138);
}

#image-upload-btn:hover {
    background-color: rgba(255, 255, 255, .062);
    filter: none
}

#image-upload-btn:active,
.prompt-controls .btn:active,
.mic-btn:active,
#scrollToLatest:active {
    transition: all 16ms ease-out;
    filter: brightness(.75);
    transform: scale(.938);
}

#scrollToLatest {
    display: block;
    padding: 10px 15px;
    background-color: rgba(99, 99, 99, .84);
    color: transparent;
    border: none;
    width: 54px;
    cursor: pointer;
    height: 54px;
    align-self: end;
    border-radius: 50%;
    margin-bottom: 9px;
    justify-self: end;
    opacity: 0;
    z-index: 0;
    transform: scale(.9162);
    transition: transform 162ms ease-out, opacity 380ms ease-in-out;
    position: relative;
    margin-left: auto;
    pointer-events: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#scrollToLatest.show {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
    pointer-events: all;

}

#scrollToLatest:before,
.btn.btn-cancel:before {
    content: '';
    background: url(../img/icon_arrow.svg) no-repeat;
    transform: rotate(270deg);
    position: absolute;
    background-size: auto 18px;
    background-position: center center;
}


#scrollToLatest:before {
    inset: 0;
}


.btn.btn-cancel {
    position: relative;
    padding-left: 32px;
}

.btn.btn-cancel:before {
    content: '';
    top: calc(50% - 7px);
    left: 9px;
    width: 19px;
    height: 15px;
    transform: none;
    position: absolute;
}


form *:disabled,
#mic-btn-webheader:disabled {
    pointer-events: none;
    filter: saturate(0) brightness(1.62);
}




.message-files {
    margin-bottom: 1em;
    display: flex;
    gap: .5em;
    flex-direction: column;
}


.message-file {
    border: 2px solid var(--var-background-solid-opposite);
    border-radius: 5px;
    padding: .162em;
    background: var(--var-background-solid);
}


.web {
    flex-grow: 1;
    flex-shrink: 1;
    position: relative;
}

.web-inner {
    background-color: var(--var-background-solid-shade);
    height: 100%;
}

.onboarding-sim {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.onboarding-sim:after {
    content: attr(data-text-preview);
    position: absolute;
    display: block;
    z-index: 2;
    margin: 0 auto;
    top: 50%;
    width: calc(100% - 32px);
    text-align: center;
    padding: 1em 2em;
    color: rgba(255, 255, 255, .84);
    background: rgba(0, 0, 0, .62);
    border-radius: 40px;
    max-width: 560px;
    border: 1px solid rgba(255, 255, 255, .38);
    box-shadow: 0 1px 13px rgba(0, 0, 0, .13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: -38px;
}


.onboarding-sim-image {
    position: relative;
    height: 100%;
    overflow: auto;
}


#web {
    -webkit-user-drag: none;
}



.web-inner-sim img {
    width: 100%;
    pointer-events: none;
}

/* 1. Define the animation steps */
@keyframes flash-effect {
    0% {
        opacity: .75;
    }

    100% {
        opacity: 1;
    }

}

/* 2. Create a class to trigger the animation */
.trigger-flash {
    animation-name: flash-effect;
    animation-duration: 1s;
    /* You can adjust the duration */
    animation-timing-function: ease-in-out;
}





/*
    template selection
*/
.message.message-ai.message-template-select {
    cursor: pointer;
    transition: filter 620ms ease-out;

}

.message.message-ai.message-template-select:hover {
    filter: brightness(1.162);
}

.message.message-ai.message-template-select>div {
    width: 100%;
    max-width: 84%;
}


.template-preview-frame {
    display: none;
    width: 100%;
    height: 100%;
}

.template-preview-frame.active {
    display: block;
}

.message-content .template-chat-preview {
    margin-bottom: .84em;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--var-color-solid);
}

.message-content-wrapper {
    position: relative;
}

.message-content.truncated {
    overflow: hidden;
    position: relative;
}

.message-content.truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--var-background-solid-shade) 100%);
    pointer-events: none;
}

.message-user .message-content.truncated::after {
    background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--var-background-solid-highlight) 100%);
}

.message-read-more {
    display: inline-block;
    color: var(--var-color-solid);
    font-weight: bold;
    cursor: pointer;
    margin-top: 4px;
    padding: 0 8px;
    border-radius: 4px;
    transition: all 162ms ease-out;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.message-read-more:active {
    transform: scale(0.95);
}

.message-content.expanded {
    max-height: none;
}

.message-content.expanded::after {
    display: none;
}

/* Mobile: 2/3 of viewport */
@media(max-width: 1140px) {
    .message-content.truncated {
        max-height: 35vh; /* Mobile: 2/3 of viewport */
    }
}

.template-chat-preview {
    pointer-events: none;
    border-radius: 8px;
    overflow: hidden;
}

.template-chat-preview-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
    object-position: top;
}

.template-chat-preview iframe {
    zoom: 1;
    width: 100%;
    height: 33vh;
}

.message-ai .message-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    max-height: 45vh;
    object-fit: cover;
    object-position: top;
}


.break {
    text-align: center;
    font-weight: bold;
    padding: 1em;
    font-size: var(--var-font-size-s);
    margin-bottom: 1.38em;
    margin-top: 1em;
}

.break span {
    background: var(--var-color-solid-shade-subtle);
    border-radius: 33px;
    display: inline-block;
    padding: .5em 1.38em;
}

.template-info-description {
    display: flex;
    gap: .38em;
    flex-wrap: wrap;
}

.tag {
    border-radius: 23px;
    padding: .5em 1.38em;
    font-size: var(--var-font-size-xs);
    font-weight: bold;
    text-transform: uppercase;
}

.tag-01 {
    background: #540D6E;
    color: #fff;
}

.tag-02 {
    background: #EE4266;
    color: #000;
}

.tag-03 {
    background: #FFD23F;
    color: #000;
}

.tag-04 {
    background: #A1286A;
    color: #fff;
}

.tag-05 {
    background: #F78A53;
    color: #000;
}

#confirmation-modal {
    margin-bottom: 8px;
}

.modal-body {
    text-align: center;
    margin-bottom: 1em;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .162);
    padding: 1em;
    background: #313131;
}

#btn-select-template,
.btn {
    border-radius: 5px;
    width: 100%;
    padding: 1em;
    background: var(--var-background-solid-highlight);
    color: var(--var-background-solid-opposite);
    font-weight: bold;
    border: none;
    min-height: 54px;
    transition: all 162ms ease-in-out;
}

#btn-select-template {
    min-height: 72px;
}

.btn-cancel {
    background: var(--var-background-solid-shade);
    color: var(--var-background-solid-opposite);
}

#btn-select-template:hover,
.btn:hover {
    filter: brightness(1.162);
    transform: scale(1.01162);
}

#btn-select-template:active,
.btn:active {
    filter: brightness(.938);
    transition-duration: 94ms;
    transform: scale(.9962);
}

.modal-actions {
    display: flex;
    gap: 13px
}

.chat-footer-select-template {
    margin-bottom: .5em;
}

.warning {
    color: #FFD23F;
}


body.template-selection-modal-active .chat-footer-select-template {
    display: none;
}

body.template-selection-modal-active .chat-messages,
body.template-selection-modal-active .app-header {
    pointer-events: none;
    filter: brightness(.25);
}

body.template-selection-modal-active .chat:before,
body.template-selection-modal-active .chat-footer:before {
    opacity: .062;
}



/*
regular chat
*/

#project-content-frame {
    width: 100%;
    height: 100%;
}



.project-info-bar {
    display: flex;
    font-size: var(--var-font-size-s);
    color: var(--var-color-solid-shade-soft);
}

.project-info-header h3 {
    font-size: var(--var-font-size-s);
    color: var(--var-color-solid);
    margin-bottom: .162em;
}

.bi-three-dots-vertical {
    transform: scale(.75)
}


.project-details {
    display: inline-flex;
    gap: 6px;
    border-left: 1px solid rgba(255, 255, 255, .13);
    margin-left: 19px;
    padding-left: 6px;
}


.project-details-info {
    position: relative;
    cursor: pointer;
}

.project-details-info>span {
    width: 44px;
    height: 44px;
    display: inline-block;
}

.project-details-info:active>span {
    filter: brightness(.62);
    transform: scale(.938);
}

.project-details-info>div {
    overflow: hidden;
    height: 0;
    position: absolute;
    top: 44px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: var(--var-background-solid-opposite);
    color: var(--var-background-solid);
    padding: 1em;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 3px 13px rgba(0, 0, 0, .38);
    pointer-events: none;
    opacity: 0;
    transition: opacity 162ms ease-in-out, height 62ms ease-out;
    z-index: 1;
}

.project-details-info.open>div {
    height: 302px;
    opacity: 1;
}

.project-details-publiclink a {
    color: var(--var-color-solid-highlight-shade);
}

.project-details-publiclink a svg {
    height: 13px;
    display: inline-block;
    padding-left: 3px;
}

.chat-header-drafts,
.web-header-drafts {
    position: relative;
}

.project-draft {
    display: flex;
    gap: 6px;
    pointer-events: none;
}

.project-draft .btn {
    text-decoration: none;
    text-align: center;
}





.status-badge {
    display: none;
}



.project-draft-dialog.open .btn {
    pointer-events: auto;
}

.project-draft-dialog {
    top: 53px;
    left: calc(-50px - 172px);
    width: 484px;
    pointer-events: none;
}

.project-draft {
    position: relative;
    display: flex;
    gap: 23px;
    flex-direction: column;
    text-align: center;
    padding: 1.62em;
    max-width: 720px;
    background: linear-gradient(to bottom, #6c6c6c, rgba(0, 0, 0, .62) 25%);
    backdrop-filter: blur(18px) brightness(1.62) saturate(2);
    -webkit-backdrop-filter: blur(18px) brightness(1.62) saturate(2);
    border: 1px solid rgba(255, 255, 255, .162);
    border-top: none;
    box-shadow: 0 1px 13px rgba(0, 0, 0, .62);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 32px);
    border-bottom-color: rgba(255, 255, 255, .01162);
    color: #fff;
}


.chat-header-drafts button span:after,
.project-draft:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #6c6c6c;
    position: absolute;
    top: -15px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 1;
    filter: drop-shadow(0px -1px .5px #818181);
}

.chat-header-drafts button span:after {
    opacity: 0;
    transition: opacity 380ms ease-in-out;
    top: 46px;
    pointer-events: none;
    filter: none;
}

.project-draft-header h3 {
    margin-bottom: 1em;
}

.project-draft-actions {
    flex-direction: row;
    display: flex;
    gap: 13px;
}

.project-draft-actions .btn-discard {
    background-color: var(--var-background-solid-opposite);
    color: var(--var-color-solid-shade-subtle);
}


.web-header-drafts .project-draft-dialog {
    top: auto;
    bottom: 53px;
}

.web-header-drafts .project-draft-dialog .project-draft {
    background: linear-gradient(to bottom, #6c6c6c, rgba(0, 0, 0, .62) 25%)
}

.web-header-drafts .project-draft-dialog .project-draft:before {
    top: auto;
    bottom: -15px;
    border-top: 15px solid #6c6c6c;
    border-bottom: none;
    filter: drop-shadow(0px 2px .5px #000);
}


/*
#project-draft-dialog-inner:not(.visible) {
    opacity:0;
}

#project-draft-dialog-inner.inserted {
    animation: fadeInFromLeft 0.5s normal 1s forwards ease-out;
}
*/




/* Notification styles */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.notification {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease-out;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

.notification-info {
    background-color: #17a2b8;
    color: #fff;
}

.notification-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notification span {
    text-align: center;
    display: block;
    width: 100%;
    font-weight: bold;
}


.notification button {
    color: #17a2b8;
    border-radius: 50%;
    display: block;
    border-width: 1px;
    font-size: 36px;
    width: 58px;
    background: #fff;
    border-color: #fff;
    outline: none;
    text-shadow: none;
    box-shadow: none;
    font-weight: bold;
}


.swipe-hint {
    display: none;
}

.web-header {
    display: none;
    bottom: 0;
    top: auto;
    padding: 0;
}


@media(max-width: 1900px) {

    .message-utility-buttons div,
    .message-example-buttons div {
        grid-template-columns: auto;
    }
}



@media(max-width: 1665px) {
    .chat-header-add-obprogress:after {
        content: none
    }
}

.chat-header-web {
    display: none;
}

.header-btn {
    appearance: none;
    background: none;
    outline: none;
    box-shadow: none;
    border: none;
    width: 33px;
    padding: 0;
    height: 33px;
    display: inline-block;
    transition: all 162ms ease-out;
}

.web-header .header-btn {
    appearance: none;
    background: none;
    outline: none;
    box-shadow: none;
    border: none;
    padding: 0;
    transition: all 162ms ease-out;
    display: block;
    text-align: center;
    padding: 13px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    place-items: center;
    place-content: center;
    gap: 4px;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}


.header-btn:active {
    filter: brightness(.62);
    transform: scale(.938);
}


.header-btn svg {
    height: 37px;
}

#chat-header-draft-btn svg {
    width: 44px;
}

.web-header-branding-image img {
    width: 63px;
    height: 63px;
}


.web-header-website img {
    position: relative;
    top: 3px;
    min-height: 23px;
    width: auto;
    display: inline-block;
    height: 37px;
}


#chat-header-draft-btn,
#web-header-draft-btn {
    pointer-events: none;
}


#chat-header-draft-btn,
#web-header-draft-btn,
.header-btn-deactive {
    position: relative;
    opacity: .162;
}

.header-btn-deactive {
    pointer-events: none;
}


#web-header-draft-btn svg {
    min-height: 24px;
    position: relative;
    top: 2px;
}

#chat-header-draft-btn svg {
    min-height: 44px;
}

#chat-header-draft-btn.hasAdraft,
#web-header-draft-btn.hasAdraft {
    opacity: 1;
    pointer-events: auto;
    /*
    filter: drop-shadow(0 0 6px var(--var-background-solid-highlight));
    animation: pulse 2s infinite;
    */
    position: relative;
}

#chat-header-draft-btn span {
    display: none
}

#web-header-chat-btn {
    position: relative;
}

#chat-header-draft-btn.hasAdraft:after,
#web-header-draft-btn.hasAdraft:after,
#web-header-chat-btn small:after {
    content: '1';
    width: 17px;
    height: 18px;
    border-radius: 50%;
    color: var(--var-background-solid-opposite);
    background-color: var(--var-background-solid-highlight);
    text-align: center;
    border: 1px solid var(--var-background-solid-opposite);
    box-shadow: 0 1px 13px rgba(0, 0, 0, .5);
    position: absolute;
    top: -2px;
    font-weight: bold;
    font-size: 11px;
    right: -8px;
    pointer-events: none;
}

#web-header-chat-btn.header-btn-template-view:after {
    content: none
}


#web-header-chat-btn svg {
    min-height: 23px;
    position: relative;
    top: 6px;
}



.showonsmall {
    display: none;
}

.hideonsmall {
    display: block;
}


.project-info-bar-menu {
    gap: 23px;
    align-items: anchor-center;
}

.project-info-bar-menu .project-details {
    margin-left: auto
}

.project-info-bar-menu .header-btn img {
    transform: scale(.962);
    position: relative;
    top: 1px;
}

.project-draft-dialog {
    opacity: 0;
    transition: all 380ms ease-in-out;
    position: absolute;
}

.project-draft-dialog.open {
    opacity: 1;
}



.chat-header {
    position: relative;
}





.project-draft-close {
    width: 33px;
    height: 33px;
    display: inline-block;
    position: absolute;
    line-height: 33px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
    top: 9px;
    right: 28px;
    z-index: 1;
    color: #000;
    text-align: center;
    pointer-events: all;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}

.project-draft-close:active {
    filter: brightness(.84);
    transform: scale(0.9638);
}

.project-draft-dialog.open .project-draft-close {
    pointer-events: all;
}

@keyframes fadeInFromLeftRight {
    0% {
        /* Start fully transparent and 20px to the left */
        opacity: 0;
        transform: translateY(-6px) translateX(-20px);
    }

    40%,
    60% {
        /* End fully opaque and in its original position */
        opacity: 1;
        transform: translateY(-6px) translateX(0);
    }


    100% {
        /* End fully opaque and in its original position */
        opacity: 0;
        transform: translateY(-6px) translateX(20px);
    }
}

@keyframes fadeout {
    0% {
        /* Start fully transparent and 20px to the left */
        opacity: 1;
    }


    100% {
        /* End fully opaque and in its original position */
        opacity: 0;
    }
}

@keyframes fadein {
    0% {
        /* Start fully transparent and 20px to the left */
        opacity: 0;
    }


    100% {
        /* End fully opaque and in its original position */
        opacity: 1;
    }
}

.web-header-branding {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-6px);
    top: 5px;
    opacity: 0;
    animation: fadeInFromLeftRight 1.62s normal .38s forwards ease-in;
}

.firsttime .web-header-branding {
    opacity: 1;
    animation: fadeout 1.62s normal 3s forwards ease-out;
    background: var(--var-background-solid-shade);
    position: fixed;
}

.firsttime #web-inner {
    opacity: 0;
    animation: fadein 1.62s normal 4s forwards ease-in;
}

.firsttime .web-header-branding-image {
    opacity: 0;
    animation: fadeInFromLeftRight 3s normal .38s forwards ease-in;
}

.firsttime .web-header-branding-image img {
    width: 128px;
    height: 128px;
}

.firsttime .web-header-branding-image:after {
    content: attr(data-claim);
    color: var(--var-background-solid-opposite);
    font-size: 14px;
    font-weight: bold;
}


.firsttime .web-header-branding-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}







.app-header.web-header>div:not(.web-header-branding) {
    opacity: 0;
    animation: fadeInFromLeft 0.62s normal 1.62s forwards ease-out;
}

body.visualizerVisible .web-header .web-header-chat {
    opacity: 0.33 !important;

}


.template-preview-container-bar {
    display: none;
    background: var(--var-background-solid-neutral);
    position: fixed;
    top: -62px;
    left: 0;
    width: 100%;
    height: 62px;
    z-index: 3;
}

#close-template-preview {
    display: block;
    width: 62px;
    height: 62px;
    cursor: pointer;
}

#close-template-preview svg {
    width: 33px;
    position: relative;
    top: 15px;
    left: 11px;
}



/* Overlay, das über dem Iframe liegt, wenn der Chat offen ist */
#web-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Muss über dem Iframe, aber unter dem Header sein */
    display: none;
    /* Standardmäßig ausgeblendet */
    cursor: pointer;
    /* Zeigt an, dass man klicken kann */
    max-height: 50vh;
}




/* Zusätzlicher Stil, wenn der Button im "Push-to-Talk"-Modus gehalten wird */
.mic-btn.recording.holding {
    box-shadow: 0 0 15px 5px rgba(220, 53, 69, 0.7);
    /* Leucht-Effekt */
    transform: scale(1.1);
    /* Etwas größer machen */
}





/* NEU: Stil für den Mülleimer-Button */
.stt-cancel-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    padding: 10px;
    transition: opacity 0.2s, transform 0.2s, left 0.2s, right 0.2s, top 0.2s, bottom 0.2s;
    flex-shrink: 0;
    bottom: 9px;
}

.stt-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.stt-cancel-btn svg {
    width: 100%;
    height: 100%;
    color: #fff;
}

body.chatIsOpen #web-header-chat-btn {
    pointer-events: none;

}

@media(max-width: 1140px) {


    .chat-open #web-overlay {
        display: block;
    }


    .message.message-ai.message-template-select>div {
        max-width: 68%;
    }

    .template-chat-preview-image {
        max-height: 40vh;
    }
    
    .template-chat-preview iframe {
        height: 50vh;
    }

    .mobilepreview .template-preview-container-bar {
        display: block;

    }

    #web.mobilepreview {
        z-index: 20;
    }

    #web.mobilepreview .web-header {
        opacity: 0;
    }

    #web.mobilepreview .web-inner {
        transform: scale(1);
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 62px);
    }


    .message-template-select.currently-viewing .template-chat-preview {
        /*
        position: fixed;
        z-index: 4;
        top: 0;
        left: 0;
        height: 100%;
        pointer-events: none;
        */
    }

    .message-template-select.currently-viewing .template-chat-preview iframe {
        /*
        zoom:1
        */
    }

    #utility-buttons-container {
        top: 53px;
    }

    #utility-buttons-container .message-utility-buttons>div {
        padding-bottom: 0;
        scrollbar-width: none;
    }

    .project-draft-close {
        top: 10px;
        right: 41px;
    }

    .draft-open .chat-header-drafts button span:after {
        opacity: 1;
    }

    .draft-open #chat .chat-header-contact,
    .draft-open #chat .project-details,
    .draft-open #chat>* {
        filter: brightness(.33);
        pointer-events: none;
    }

    .draft-open #chat #chatHeader {
        filter: none;
        pointer-events: all;
    }


    .chat-header,
    .chat {
        border-top-right-radius: 19px;
        border-top-left-radius: 19px;
    }

    .chat-header:after {
        content: 'Chat';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 21px;
        text-align: center;
        color: var(--var-background-solid-opposite);
        font-size: var(--var-font-size-s);
        font-weight: bold;
        pointer-events: none;
    }


    .chat-header-contact,
    .chat-header-add .project-details {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 380ms ease-out;
    }

    .chat-header-add .project-details {
        width: 0;
        padding-left: 0;
        border-left-width: 0;
    }

    .js-loading.chat {
        transition: none !important
    }

    .webchat.chat-fullscreen .chat-header-contact,
    .webchat.chat-fullscreen .chat-header-add .project-details {
        height: auto;
        opacity: 1;
    }

    .webchat.chat-fullscreen .chat-header-add .project-details {
        overflow: visible;
        width: auto;
        padding-left: 6px;
        border-left-width: 1px;
    }

    #web {
        background: var(--var-background-solid-neutral);
    }

    .webchat.chat-fullscreen.chat-open .chat {
        max-height: 100%;
        transform: translate(0);
    }

    .webchat.chat-open.chat-fullscreen .web-inner {
        transform: scale(0);
    }

    .webchat.chat-fullscreen.chat-open .chat {
        max-height: 100%;
        transform: translate(0);
    }


    .chat-header {
        height: 70px;
        cursor: move;
        background: transparent;
    }

    .chat-header:before {
        content: '';
        display: block;
        border-radius: 23px;
        background: rgba(255, 255, 255, .62);
        width: 27px;
        height: 2px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 12px;
    }

    .chat-header-add-obprogress-bar {
        border-left: none;
    }

    .chat-header-contact img {
        width: 56px;
        border: 1px solid rgba(255, 255, 255, .62);
        box-shadow: 0 1px 13px rgba(0, 0, 0, .13);
    }

    .chat-header-contact-details strong {
        font-size: var(--var-font-size-m);
    }

    .chat-header-contact-details {
        line-height: 116%;
    }

    .web-inner {
        height: calc(100% - 93px);
        transform-origin: top;
        transition: transform 162ms ease-out;
    }

    .webchat.chat-open .web-inner {
        transform: scale(.5);
        height: 100%;
    }

    .showonsmall {
        display: block;
    }

    .hideonsmall {
        display: none;
    }


    .swipe-hint {
        display: block;
    }

    .webchat {
        overflow: hidden;
    }


    .web-header {
        display: flex;
    }



    .web {
        flex: 1 0 100%;
    }

    .chat {
        order: 1;
        position: absolute;
        z-index: 3;
        transform: none;
        max-width: none;
        height: 100%;
        width: 100vw;
        border: none;
        background: var(--var-background-solid);
        transform: translateY(200%);
        left: 0;
        top: 0;
        min-width: auto;

    }

    .chat-header-add-obprogress:after {
        content: '';
    }

    .chat-header-web {
        display: block;
        max-width: 33px;
    }

    .webchat {
        position: relative;
        overflow: hidden;
        /* Ensure it takes up viewport height if it's the main container */
        height: 100vh;
        height: 100dvh;
        /* Dynamic viewport height for mobile */
    }

    .chat,
    .web {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
        transition: transform 162ms ease-out, opacity 0.3s ease-out;
    }

    .chat {
        /* Start off-screen to the right */
        z-index: 20;
        position: fixed;
        /* Above web view */
        max-height: 50%;
        filter: brightness(0);
        bottom: 0;
        transform-origin: bottom;
        transition: transform 162ms ease-out, filter 0.3s ease-out, max-height 162ms ease-out;
    }

    /* chat in fullscreen only for onboarding, so animation slower */
    #webchatOnboarding .chat,
    #webchatOnboarding .web-inner {
        transition-duration: 338ms;
    }

    /* State when chat is open */
    .webchat.chat-open .chat {
        transform: translateY(100%);
        filter: brightness(1);
    }

    .webchat.chat-open .web {
        /*transform: translateY(100%);*/
    }

    /* Swipe Hint / Teaser */
    .swipe-hint {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        z-index: 15;
        /* Below chat, but above web content */
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border-radius: 20px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    .swipe-hint.visible {
        opacity: 1;
    }

    .swipe-hint.tease-animation {
        animation: hint-tease 2.5s ease-in-out 2s infinite;
    }

    .swipe-hint.hidden {
        display: none;
    }

    .webchat.tease-active .web {
        animation: peek-web-tease 2.5s ease-in-out 2s infinite;
    }

    .webchat.tease-active .chat {
        animation: peek-chat-tease 2.5s ease-in-out 2s infinite;
    }

    @keyframes hint-tease {

        0%,
        100%,
        40%,
        80% {
            transform: translate(0, -50%);
        }

        20%,
        60% {
            transform: translate(calc(-5% - 16px), -50%);
        }
    }

    @keyframes peek-web-tease {

        0%,
        100%,
        40%,
        80% {
            transform: translateX(0);
        }

        20%,
        60% {
            transform: translateX(calc(-5% - 16px));
        }
    }

    @keyframes peek-chat-tease {

        0%,
        100%,
        40%,
        80% {
            transform: translateX(100%);
            opacity: 0;
        }

        20%,
        60% {
            transform: translateX(calc(95% - 16px));
            opacity: .62;
        }
    }

    #chat-header-draft-btn {
        border-radius: 5px;
        background: linear-gradient(to top, #3e6ae1, #4e78ec);
        width: auto;
        padding: 0 1em;
        height: 44px;
        font-weight: bold;
        bottom: 2px;
        -webkit-user-select: none;
        font-size: 11px;
        -webkit-tap-highlight-color: transparent;
    }

    #chat-header-draft-btn:active {
        transform: none;
        filter: none;
        top: 1px;
        background: linear-gradient(to top, #365cc5, #4266ca);
    }

    .chat-header-drafts button:active span:after {
        top: 43px;
    }



    #chat-header-draft-btn svg {
        display: none;
    }

    #chat-header-draft-btn span {
        display: inline;
        color: var(--var-background-solid-opposite);
    }

    #chat-header-draft-btn.hasAdraft:after {
        content: none !important;
    }

    .project-info-bar-menu {
        gap: 13px;
    }

    .webchat.chat-fullscreen .chat-header-add .project-details {
        padding-left: 0;
    }


    .chat-header-drafts,
    #chat-header-draft-btn {
        position: static;
    }

    .project-draft-dialog {
        right: auto;
        left: 13px;
        width: 100%;
        top: 72px;
    }

    .project-draft {
        max-width: none;
        margin: 0;
        max-height: 38vh;
        overflow: scroll;
        pointer-events: none;
    }

    .project-draft-dialog.open .project-draft {
        pointer-events: all;
    }

    .chat-fullscreen .project-draft {
        max-height: 99vh;

    }

    .project-draft:before {
        content: none
    }



}



@media(max-width:640px) {

    .project-draft-actions {
        flex-direction: column;
    }


    .web-header-drafts .project-draft-dialog {
        top: auto;
        bottom: 82px;
    }
}

#web-header-chat-btn small:after {
    bottom: 42px;
    top: auto;
    right: -15px;
}

@media(max-width:560px) {

    /*
    .webchat:not(.chat-fullscreen) .meta-btn {
        background-size: 11px;
        width: 29px;
        height: 29px;
    }

    .webchat:not(.chat-fullscreen) .meta-btn.message-context-menu-toggle {
        background-size: 20px;
    }
    */

    .project-draft-dialog {
        top: 67px;
    }

    .chat-fullscreen .project-info-bar-menu {
        gap: 9px;
    }

    .project-details-info>span {
        width: 33px;
    }

    .bi-three-dots-vertical {
        transform: scale(.84) translateY(4px);
    }

    @keyframes fadeInFromLeftRight {
        0% {
            /* Start fully transparent and 20px to the left */
            opacity: 0;
            transform: translateY(-12px) translateX(-20px);
        }

        40%,
        60% {
            /* End fully opaque and in its original position */
            opacity: 1;
            transform: translateY(-12px) translateX(0);
        }


        100% {
            /* End fully opaque and in its original position */
            opacity: 0;
            transform: translateY(-12px) translateX(20px);
        }
    }

    .web-header-branding {
        transform: translateY(-12px);
        top: 11px;
    }

    .web-header-voice .mic-btn {
        width: 45px;
        height: 45px;
        min-width: 45px;
        position: relative;
        bottom: 2px
    }

    #web-header-chat-btn small:after {
        bottom: 31px;
        top: auto;
        right: -10px;
    }


    .webchat.chat-fullscreen.chat-open .chat {
        max-height: 100%;
        transform: translate(0);
    }




    /*
    :root {
        --var-font-size-l: 16px;
        --var-font-size-m: 14.2px;
        --var-font-size-s: 12px;
        --var-font-size-xs: 11px;
    }
    */



    .app-header {
        height: 62px;
        gap: 13px;
    }

    .web-inner {
        height: calc(100% - 62px);
    }



    .chat-header-template-view {
        padding-right: 0;
    }



    .web-header-branding-image img {
        width: 40px;
        height: 40px;
    }

    .chat-header-add-obprogress-bar {
        padding-bottom: 0;
        margin-top: 1px;
    }

    .chat-header-add-obprogress:after {
        content: none;
    }

    .chat-header-contact img {
        width: 40px;
        border: none;
    }

    .chat-header-contact-details strong {
        font-weight: normal;
    }

    .chat-header-contact-details-status span:before {
        content: none;
    }

    .chat-header-contact-avatar {
        position: relative;
    }

    .chat-header-contact-avatar:after {
        content: '';
        width: 7px;
        height: 7px;
        display: inline-block;
        border-radius: 50%;
        background-color: var(--var-background-solid-positive);
        margin-right: .38em;
        position: absolute;
        bottom: 2px;
        right: -5px;
        outline: var(--var-background-solid-shade) solid 2px;
    }

    #contactStatusText:after {
        content: attr(data-contact-status-waiting-textm);
    }

    .chat-header {
        padding-left: 7px;
    }

    .chat-header-contact {
        gap: 0
    }

    .chat-header-contact-avatar {
        margin-right: 8px;
    }

    .chat-header-contact-details strong {
        margin-top: 2px;
        display: inline-block;
    }

    .chat-messages {
        height: calc(100% - 122px);
    }

    /*
    .webchat.chat-open:not(.chat-fullscreen) .message-content {
        font-size: 11px;
        line-height: 150%
    }
    */

}




.move-active {
    pointer-events: none;
}







.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap>textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    /* overflow:hidden;*/
    overflow-x: hidden;
}

.stt-cancel-btn-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    height: 64px;
    pointer-events: none;
    width: 100%;
    right: auto;
    left: 0;
    max-width: none;
    width: 100%;
}


/* Container für den Waveform-Visualizer */
#stt-visualizer-container {
    position: fixed;
    bottom: 4px;
    left: 8px;
    z-index: 20;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    mix-blend-mode: color-dodge;

}

.stt-cancel-btn {
    opacity: 0;
    z-index: 21;
    transform: translateY(-20px);
    position: absolute;
    pointer-events: none;
    left: auto;
    right: 93px;
}


/* Stil, wenn der Visualizer sichtbar ist */
#stt-visualizer-container.visible,
body.visualizerVisible .stt-cancel-btn {
    opacity: 1;
    transform: translateY(0);
}

body.visualizerVisible .stt-cancel-btn {
    pointer-events: all;
}

/* Sorgt dafür, dass das Canvas den Container ausfüllt */
#stt-visualizer-container canvas {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.grow-wrap>textarea,
.grow-wrap::after,
#stt-visualizer-container {
    resize: none;
    border-radius: 33px;
    width: 100%;
    vertical-align: top;
    padding: 1em 1.25em;
    height: 54px;
    scrollbar-color: transparent transparent;
    background: var(--var-background-solid-shade);
    border: none;
    color: var(--var-color-solid);
    transition: filter 116ms ease-out, height 62ms ease-in;
    outline: none;
    font: inherit;
    grid-area: 1 / 1 / 2 / 2;
    max-width: calc(100vw - 76px);
}

#stt-visualizer-container {
    width: calc(25% - 77px);
    min-width: calc(420px - 77px);
    padding: 0;
}

textarea,
.grow-wrap:after {
    --max-lines: 10;
    max-height: calc(2ex * var(--max-lines));
}

.grow-wrap[data-replicated-value]:not([data-replicated-value=""])>textarea,
.grow-wrap[data-replicated-value]:not([data-replicated-value=""])::after {
    height: auto;
}


.grow-wrap[data-replicated-value]:not([data-replicated-value=""])+div.prompt-control-input-add button#image-upload-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.grow-wrap[data-replicated-value]:not([data-replicated-value=""])>textarea {
    outline: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 13px #000;
}



@media(max-width:1140px) {


    .stt-cancel-btn {
        position: absolute;
        right: calc((((100% - (2 * 23px)) / 3) / 2) + 58px);
        bottom: 25px;
        left: auto;
    }

    body.chatIsOpen .stt-cancel-btn {
        right: 93px;
        bottom: 10px
    }

    body #stt-visualizer-container {
        max-width: calc(100% - 76px);
    }


    #stt-visualizer-container {
        resize: none;
        border-radius: 33px;
        width: 100%;
        vertical-align: top;
        height: 54px;
        scrollbar-color: transparent transparent;
        background: var(--var-background-solid-shade);
        border: none;
        color: var(--var-color-solid);
        transition: filter 116ms ease-out, height 62ms ease-in;
        outline: none;
        font: inherit;
        grid-area: 1 / 1 / 2 / 2;
        max-width: calc(100vw - 76px);
        min-width: 0
    }


    body.visualizerVisible:not(.chatIsOpen) #stt-visualizer-container {
        border-radius: 0;
        left: 0;
        bottom: 0;
        height: 93px;
        width: calc(100%);
        max-width: none;
        min-width: 0;
        pointer-events: none;
        mix-blend-mode: color-dodge;
        padding: 0;
    }
}

@media(max-width:560px) {

    .stt-cancel-btn {
        position: absolute;
        right: calc((((100% - (2 * 23px)) / 3) / 2) + 62px);
        bottom: 11.5px;
    }


    body.visualizerVisible:not(.chatIsOpen) #stt-visualizer-container {
        height: 62px;
    }
}



#shop-unavailable-modal.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    animation: fadeIn 0.3s ease;
}

#shop-unavailable-modal .modal-content {
    background: var(--var-background-solid-shade);
    border-radius: 16px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideUp 0.3s ease;
}

#shop-unavailable-modal .modal-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

#shop-unavailable-modal .modal-content h2 {
    margin: 0 0 15px 0;
    color: var(--var-color-solid);
    font-size: 24px;
}

#shop-unavailable-modal .modal-content > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

#shop-unavailable-modal .modal-content p {
    color: var(--var-color-solid-shade-soft);
    font-size: 16px;
    line-height: 1.6;
}

#shop-unavailable-modal .modal-content a {
    color: #e8992a;
    font-size: 16px;
    line-height: 1.6;
}

#shop-unavailable-modal .modal-button {
    background: var(--var-background-solid-highlight);
    color: var(--var-background-solid-opposite);
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#shop-unavailable-modal .modal-button:hover {
    filter: brightness(1.162);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Container für den Waveform-Visualizer (bereits vorhanden, leicht angepasst) */
#stt-visualizer-container {
    display: flex;
    align-items: center;
}

#stt-visualizer-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Canvas (bereits vorhanden, leicht angepasst) */
#stt-visualizer-container canvas {
    flex-grow: 1;
    /* Nimmt den restlichen Platz ein */
    height: 100%;
}