.conversation-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
    max-width: 560px;
    padding: 8px;
}

.conversation-hero-card {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: 50px minmax(0, 1fr);
}

.conversation-hero-icon {
    margin-top: 0;
}

.conversation-hero-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.conversation-hero-card h1,
.conversation-scenario-card h2,
.conversation-chat-head h1,
.conversation-report-card h1 {
    color: #8d50f8;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 900;
    line-height: 1.12;
    margin: 0;
}

.conversation-hero-card p,
.conversation-scenario-card p,
.conversation-chat-head p,
.conversation-report-card p,
.conversation-report-feedback p {
    color: #2f5d6b;
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 700;
    line-height: 1.28;
    margin: 0;
}

.conversation-hero-card form {
    grid-column: 2;
}

.conversation-start-button,
.conversation-send-button,
.conversation-finish-button,
.conversation-mic-button {
    -webkit-tap-highlight-color: transparent;
    background: #20c91c;
    border: 2px solid rgb(255 255 255 / 74%);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgb(0 118 44 / 24%), inset 0 1px 0 rgb(255 255 255 / 30%);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    align-items: center;
    display: inline-flex;
    font: inherit;
    font-size: clamp(12px, 3.5vw, 14px);
    font-weight: 900;
    justify-content: center;
    letter-spacing: 1px;
    min-height: 23px;
    padding: 8px 16px;
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.08s ease, filter 0.08s ease;
    white-space: nowrap;
}

.conversation-start-button:active,
.conversation-send-button:active,
.conversation-finish-button:active,
.conversation-mic-button:active,
.conversation-card-button:active {
    filter: brightness(0.96);
    transform: translateY(1px) scale(0.98);
}

.conversation-start-button {
    border-color: #fff;
    box-shadow: none;
}

.conversation-scenario-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conversation-level-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conversation-level-title {
    align-self: flex-start;
    background: rgb(255 203 5 / 90%);
    border: 2px solid #fff;
    border-radius: 999px;
    box-sizing: border-box;
    color: #174ea6;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    margin: 4px 0 0;
    padding: 7px 14px;
}

.conversation-scenario-card {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conversation-scenario-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.conversation-scenario-bottom {
    align-items: flex-end;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: auto;
}

.conversation-scenario-badges {
    align-items: center;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.conversation-scenario-level,
.conversation-scenario-premium {
    align-items: center;
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-flex;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    padding: 6px 9px;
    width: max-content;
}

.conversation-scenario-level {
    background: rgb(255 203 5 / 82%);
    border: 1px solid rgb(255 255 255 / 62%);
    color: #174ea6;
}

.conversation-scenario-premium {
    background: rgb(178 238 109 / 82%);
    border: 1px solid rgb(112 204 58 / 48%);
    color: #174ea6;
}

.conversation-card-button {
    min-width: 108px;
}

.conversation-card-button--continue {
    background: #ff9b2f;
}

.conversation-chat-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 65px);
    height: calc(100svh - 65px);
    margin: 0 auto;
    max-width: 560px;
    padding: 8px;
}

.conversation-chat-head {
    flex: 0 0 auto;
}

.conversation-chat-title {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
}

.conversation-chat-title .conversation-scenario-level {
    margin-top: -2px;
}

.conversation-chat-head h1 {
    flex: 1 1 180px;
    margin-top: 0;
    min-width: 0;
}

.conversation-chat-head p {
    margin-top: 5px;
}

.conversation-message-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 0;
    scroll-behavior: smooth;
}

@media (hover: hover) and (pointer: fine) {
    .conversation-message-list {
        scrollbar-color: rgb(19 174 231 / 82%) transparent;
        scrollbar-width: thin;
    }

    .conversation-message-list::-webkit-scrollbar {
        width: 8px;
    }

    .conversation-message-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .conversation-message-list::-webkit-scrollbar-thumb {
        background: rgb(19 174 231 / 76%);
        border: 2px solid rgb(66 189 234 / 72%);
        border-radius: 999px;
    }

    .conversation-message-list::-webkit-scrollbar-thumb:hover {
        background: #0fa6df;
    }

    .conversation-message-list::-webkit-scrollbar-button {
        display: none;
        height: 0;
        width: 0;
    }

    .conversation-message-list::-webkit-scrollbar-corner {
        background: transparent;
    }
}

.conversation-message {
    border: 1px solid rgb(182 213 255 / 72%);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 16%);
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-bottom: 16px;
    max-width: 88%;
    min-width: 132px;
    min-height: 52px;
    padding: 10px 12px 22px;
    position: relative;
}

.conversation-message p {
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
    padding-bottom: 4px;
    white-space: pre-line;
}

.conversation-message--assistant {
    align-self: flex-start;
    background: rgb(220 244 255 / 88%);
    color: #174ea6;
}

.conversation-message--user {
    align-self: flex-end;
    background: rgb(178 238 109 / 88%);
    color: #17456f;
}

.conversation-message--loading {
    opacity: 0.72;
}

.conversation-message-actions {
    bottom: -11px;
    display: flex;
    gap: 5px;
    left: 10px;
    position: absolute;
}

.conversation-message--user .conversation-message-actions {
    left: auto;
    right: 10px;
}

.conversation-message-action {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: rgb(238 250 255 / 92%);
    border: 1px solid rgb(182 213 255 / 78%);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 31px;
    justify-content: center;
    padding: 0;
    transition: transform 0.08s ease, filter 0.08s ease;
    width: 31px;
}

.conversation-message-action img {
    display: block;
    height: 18px;
    width: 18px;
}

.conversation-message-action:active {
    filter: brightness(0.97);
    transform: translateY(1px) scale(0.97);
}

.conversation-message-action--active {
    background: #fff6a5;
    border-color: #ffcb05;
}

.conversation-message-action--speaking {
    animation: conversation-sound-pulse 0.9s ease-in-out infinite;
    background: #ff7d73;
}

.conversation-message-action:disabled {
    cursor: default;
    opacity: 0.58;
    transform: none;
}

.conversation-message-translation {
    border-top: 1px solid rgb(119 199 255 / 42%);
    color: #2f5d6b;
    display: block;
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 700;
    line-height: 1.25;
    margin: 18px 0 0;
    padding-bottom: 0;
    padding-top: 4px;
    white-space: pre-line;
}

.conversation-word--active {
    background: rgb(255 238 92 / 78%);
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgb(255 238 92 / 28%);
}

.conversation-input-panel {
    align-items: stretch;
    background: rgb(238 250 255 / 88%);
    border: 1px solid rgb(182 213 255 / 78%);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 9px rgb(0 75 110 / 16%);
    box-sizing: border-box;
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) clamp(44px, 12vw, 50px);
    margin: auto -8px -8px;
    min-height: 112px;
    padding: 8px;
}

.conversation-input-panel textarea {
    background: rgb(255 255 255 / 86%);
    border: 2px solid rgb(119 199 255 / 72%);
    border-radius: 14px;
    box-sizing: border-box;
    color: #17456f;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    grid-row: span 2;
    line-height: 1.25;
    min-height: 84px;
    outline: none;
    padding: 10px;
    resize: none;
}

.conversation-input-panel textarea:focus {
    border-color: #174ea6;
}

html[lang="ka"] .conversation-message p,
html[lang="ka"] .conversation-input-panel textarea {
    font-family: "Nunito", Arial, sans-serif;
    font-weight: 700 !important;
    letter-spacing: 0;
}

.conversation-send-button,
.conversation-mic-button {
    align-items: center;
    align-self: center;
    border-radius: 14px;
    display: flex;
    height: clamp(44px, 12vw, 50px);
    justify-content: center;
    min-height: 0;
    padding: 0;
    width: clamp(44px, 12vw, 50px);
}

.conversation-send-button:disabled,
.conversation-finish-button:disabled,
.conversation-mic-button:disabled,
.conversation-message-action:disabled {
    background: #d9e1e7;
    cursor: default;
    filter: none;
    transform: none;
}

.conversation-finish-button {
    background: #13aee7;
}

.conversation-mic-button {
    background: #13aee7;
}

.conversation-mic-button--active {
    animation: conversation-mic-pulse 0.9s ease-in-out infinite;
    background: #ff7d73;
}

.conversation-send-button img,
.conversation-mic-button img {
    display: block;
    height: 22px;
    width: 22px;
}

.conversation-send-button img {
    transform: translate(-1px, 1px);
}

@keyframes conversation-mic-pulse {
    0%,
    100% {
        filter: brightness(0.96);
    }

    50% {
        filter: brightness(1.14);
    }
}

@keyframes conversation-sound-pulse {
    0%,
    100% {
        filter: brightness(0.96);
    }

    50% {
        filter: brightness(1.12);
    }
}

.conversation-report-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
    max-width: 560px;
    padding: 8px;
}

.conversation-report-card {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 50px minmax(0, 1fr);
}

.conversation-report-icon img {
    filter: none;
}

.conversation-report-stats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.conversation-report-stats div {
    background: rgb(220 244 255 / 72%);
    border: 1px solid rgb(119 199 255 / 42%);
    border-radius: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    text-align: center;
}

.conversation-report-stats span,
.conversation-report-feedback h2 {
    color: #174ea6;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
}

.conversation-report-stats strong {
    color: #c12ada;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.conversation-report-feedback {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conversation-report-feedback h2 {
    margin: 0;
}

.conversation-correction-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.conversation-correction {
    background: rgb(255 255 255 / 66%);
    border: 1px solid rgb(119 199 255 / 34%);
    border-radius: 12px;
    color: #2f5d6b;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 800;
    gap: 3px;
    padding: 8px;
}

.conversation-correction span {
    color: tomato;
}

.conversation-correction strong {
    color: #20a822;
}

.conversation-report-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.conversation-report-actions form {
    display: flex;
}

.conversation-report-actions .modal-action-button {
    width: 100%;
}

@media (min-width: 760px) {
    .conversation-page {
        max-width: 760px;
    }
}