@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
}

button {
    border: none;
    outline: none;
    background: inherit;
    font: inherit;
}


:root {
    --color-gray: #d2d2d1;
    --color-gray-10: #d2d2d1;
    --color-dark: #5A3A2E;
    --color-accent: #cd4937; 
    --color-light: #d2d2d1;
    --color-bottom: #b9b9b9;
    --color-top: #ffffff;
    --color-middle: var(--color-gray-10);
    --shadow-size: 10px;
}

.container {
    display: grid;
    place-content: center;
    /*min-height: 100vh;*/
}

.chat {
    width: 500px;
    height: 100vh;
    
    overflow-y: auto;
    scrollbar-color: var(--color-accent) var(--color-middle);
    scrollbar-width: thin;

    background-color: transparent;
    color: #5A5A5A;

    padding: 5px;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
    row-gap: 15px;

    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/*.wrapper--left {
    align-self: end;
}
*/

/* .border {
    border-top: 2px solid #d6d6d6;
    border-bottom: 2px solid #757575;
} */

.message {
    padding: 20px;
    border-radius: 15px 15px 0 0;
    display: inline-block;
}

.shadow-background {
    background-image: linear-gradient(
        to top,
        var(--color-bottom) 0%,
        var(--color-middle) var(--shadow-size),
        var(--color-middle) calc(100% - var(--shadow-size)),
        var(--color-top) 100% 
    );
}

.message--incoming {   
    border-bottom-right-radius: 15px;
}

.message--outgoing {
    --color-bottom: #3a302d;
    --color-top: #8f746f;
    --color-middle: var(--color-dark);

    color: var(--color-light);
    border-bottom-left-radius: 15px;
}

.wrapper--right {
    align-self: end;
}

.chat__buttons {
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: 5px;
    row-gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.button {
    cursor: pointer;
    /*padding: 6px 8px;*/
}

.button--alt {
    background-color: var(--color-accent);
    color: var(--color-light);
}

.button:hover, .button-alt:hover {
    filter: brightness(1.2);
}

.button__text {
    --color-bottom: #b8493c;
    --color-top: #ea5f4f;
    --color-middle: var(--color-accent);
    --shadow-size: 5px;
    border-radius: 5px;
    padding: 16px 20px;
    color: var(--color-light);
}

.list-wrapper {
    padding: 25px 15px 25px 25px;
    width: 490px;
    display: block;
    box-sizing: border-box;
    align-self: stretch;
    margin-top: 5px;
    transition: padding 0.3s ease;
}

/* When scrollbar is present */
.list-wrapper--with-scrollbar {
    padding: 25px 15px 25px 25px; /* Reduced right padding to compensate for scrollbar */
}

/* When no scrollbar */
.list-wrapper--no-scrollbar {
    padding: 25px 25px 25px 25px; /* Normal padding */
}

.wrapper__inner {
    --color-middle: #F1F1F1;
    --color-bottom: #D0D0D0;
    --color-top: #F8F8F8;
    padding: 16px 14px;
    max-height: 230px;
    overflow-y: auto;
    scrollbar-color: var(--color-accent) var(--color-middle);
    scrollbar-width: thin;
    background: #FFFFFF;
    cursor: grab;
    user-select: none;
    transition: cursor 0.1s ease;
}

.wrapper__inner:active {
    cursor: grabbing;
}

.list {
    list-style-type: none;
    display: grid;
    row-gap: 20px;
    
}

.list__item {
    display: inline-flex;
    align-items: center;
    column-gap: 15px;
    min-height: 27px;
    position: relative;
}

.list__item::before {
    --color-middle: #E8E8E8;
    --color-bottom: #b1b0b0;
    --color-top: #F8F8F8;
    --size: 27px;
    content: "";
    width: var(--size);
    height: var(--size);
    border-radius: 5px;
    flex-shrink: 0;
    
    background-image: linear-gradient(
        to top,
        var(--color-bottom) 0%,
        var(--color-middle) 5px,
        var(--color-middle) calc(100% - 5px),
        var(--color-top) 100% 
    );
}

.expandable-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.expandable-image__image {
    width: 50px;
    height: 80px;
    object-fit: fill;
}
.expandable-image__image img {
    width: 100%;
    height: 100%;
}
.expandable-image__image.is-expanded {
    width: auto;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.expandable-image__button {
    display: none;
}

.expandable-image__image.is-expanded .expandable-image__button {
    display: block;
    position: absolute;
    top: 10px;
    right: 24px;

    cursor: pointer;
}

.button:has(.button__icon) {
    display: grid;
    place-content: center;
    aspect-ratio: 1;
}

/* Loading message styles */
.message--loading {
    --color-bottom: #E8E8E8;
    --color-top: #F8F8F8;
    --color-middle: #F1F1F1;
    
    color: #5A5A5A;
    border-bottom-right-radius: 15px;
    position: relative;
}

.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 20px;
    line-height: 1;
}

.loading-dots::before {
    content: "●";
    animation: loadingDot1 1.4s ease-in-out infinite;
}

.loading-dots::after {
    content: "● ●";
    animation: loadingDot2 1.4s ease-in-out infinite;
}

@keyframes loadingDot1 {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

@keyframes loadingDot2 {
    0%, 20%, 100% { opacity: 0.3; }
    60% { opacity: 1; }
}

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

.wrapper--loading {
    animation: fadeInLeft 0.3s ease-out;
}

/* Animation for hiding elements */
.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.button__icon {
    width: 15px;
    height: 15px;
}
.chat-input {
    max-width: 100%;
    display: grid;
    place-content: center;
}
.status-text {
    width: 300px !important;
    font-size: 15px;
    color: #5A5A5A;
    text-align: left;
    height: 60px;
    padding: 10px 15px;
    word-wrap: break-word;
    text-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5px;
    cursor: text; /* Курсор как в текстовом поле */
}