/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #d1d7db;
    /* Desktop background color */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* App Container - Mobile Frame on Desktop */
.app-container {
    width: 100%;
    height: 100%;
    background-color: #efeae2;
    /* WhatsApp default bg color */
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    /* Subtle pattern */
    background-repeat: repeat;
    background-size: 400px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Desktop Constraints */
@media (min-width: 900px) {
    .app-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 127px;
        background-color: #00a884;
        /* WhatsApp Web green top strip */
        z-index: -1;
    }

    .app-container {
        width: 100%;
        max-width: 1600px;
        /* Full desktop width */
        height: 95vh;
        /* Almost full height */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        top: 19px;
        /* Slight offset from top */
    }
}

/* Header */
.chat-header {
    background-color: #008069;
    color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.back-icon {
    font-size: 18px;
    margin-right: 5px;
}

.profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

display: flex;
flex-direction: column;
overflow: hidden;
/* Contain long text */

font-weight: 500;
font-size: 16px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
/* Prevent overlap with icons */

.user-status {
    font-size: 12px;
    opacity: 0.8;
}

.header-right {
    display: flex;
    gap: 20px;
    font-size: 18px;
}

.header-right i {
    cursor: pointer;
}

/* Chat Body */
.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 5%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Scrollbar styling */
.chat-body::-webkit-scrollbar {
    width: 6px;
}

.chat-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Date Divider */
.date-divider {
    text-align: center;
    margin: 10px 0;
}

.date-divider span {
    background-color: #e6f2f2;
    /* Light blueish tint */
    color: #5e6c75;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Messages */
.message {
    max-width: 80%;
    /* Max width of bubble */
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 0;
    /* Spacing handled by gap */
}

.message-content {
    padding: 6px 7px 22px 9px;
    /* Space for time at bottom right */
    border-radius: 7.5px;
    font-size: 14.2px;
    line-height: 19px;
    color: #111b21;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    word-wrap: break-word;
}

.received {
    align-self: flex-start;
}

.received .message-content {
    background-color: #ffffff;
    border-top-left-radius: 0;
}

.sent {
    align-self: flex-end;
}

.sent .message-content {
    background-color: #d9fdd3;
    border-top-right-radius: 0;
}

/* Message Meta (Time & Checks) */
.message-info {
    position: absolute;
    bottom: 3px;
    right: 4px;
    /* Tucked in corner */
    display: flex;
    align-items: center;
    gap: 3px;
    height: 15px;
    margin: 0;
}

.message-time,
.message-meta {
    font-size: 11px;
    color: #8696a0;
    /* Lighter gray */
    display: flex;
    align-items: center;
    gap: 3px;
    position: absolute;
    bottom: 3px;
    right: 4px;
    /* Universal alignment */
}

.read-receipt,
.message-meta i,
.fa-check-double {
    font-size: 11px;
    color: #53bdeb;
    /* Blue ticks */
}

/* Footer */
.chat-footer {
    background-color: #f0f2f5;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    z-index: 10;
}

.icon-btn {
    font-size: 20px;
    color: #54656f;
    cursor: pointer;
    padding: 5px;
}

.input-box {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
}

.input-box input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
}

.mic-btn {
    background-color: #00a884;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mic-btn i {
    font-size: 18px;
}

/* Animations */
@keyframes fadeText {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes typingDots {
    0% {
        opacity: 0.2;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }

    100% {
        opacity: 0.2;
        transform: translateY(0);
    }
}

/* Header Dynamic Styles */
.user-status.animating {
    animation: fadeText 1.5s infinite ease-in-out;
    color: #00a884;
    font-weight: 500;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Temporary Status Bubbles (Chat Area) */
.temp-status {
    width: fit-content;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 20px;
    border-top-left-radius: 0;
    margin: 5px 0;
    /* Remove extra left margin */
    align-self: flex-start;
    /* Align left like received messages */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 60px;
    height: 38px;
    position: relative;
    /* For potential tail */
}

/* Add tail to temp status to match messages */
.temp-status::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom: 0;
    margin-top: 0px;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    border: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z' fill='white'/%3E%3C/svg%3E");
    width: 8px;
    height: 13px;
}

.temp-status .fa-microphone {
    color: #00a884;
    font-size: 16px;
    animation: fadeText 1s infinite;
}

/* Audio Player Custom Styles */
.audio-message {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    /* Slightly wider for the profile pic */
    padding-right: 15px;
    position: relative;
}

.audio-ctrl {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.audio-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: opacity 0.2s;
}

.play-pause-btn {
    font-size: 24px;
    color: #667781;
    z-index: 3;
    /* Higher than profile pic (2) */
}

/* Hide profile pic when playing - REMOVED per user request */
/* .audio-ctrl.playing .audio-profile-pic {
    opacity: 0;
    pointer-events: none;
} */

.audio-wave {
    position: relative;
    overflow: hidden;
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Progress Bar Removed */

.bar {
    z-index: 2;
    background-color: #b4b4b4;
    width: 3px;
    border-radius: 2px;
}

.bar:nth-child(odd) {
    height: 12px;
}

.bar:nth-child(even) {
    height: 18px;
}

/* Option Buttons */
.chat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    /* Spacing handled by gap */
    justify-content: flex-start;
    max-width: 85%;
}

.option-btn {
    background-color: white;
    border: 1px solid #e9edef;
    color: #00a884;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
    flex: 1 1 45%;
    /* Force 2 per row */
    text-align: center;
    min-width: 120px;
}

.option-btn:hover {
    background-color: #f0f2f5;
}

.option-btn.selected {
    background-color: #00a884;
    color: white;
}

/* Message Tails */
.message.received::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom: 0;
    margin-top: 0;
    /* Spacing handled by gap */
    /* Adjusting to look like WhatsApp tail */
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    /* Simple triangle */
    /* Better shape: */
    border: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z' fill='white'/%3E%3C/svg%3E");
    width: 8px;
    height: 13px;
    left: -8px;
    top: 0;
}

/* Audio Player Adjustments */
/* Audio Player Adjustments */
.audio-message {
    display: flex;
    /* Critical for layout */
    align-items: center;
    /* Vertically center */
    min-width: 310px;
    padding: 10px 5px 10px 12px;
    gap: 8px;
    justify-content: space-between;
}

.audio-info {
    position: absolute;
    bottom: 3px;
    right: 4px;
    /* Universal alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    /* Let clicks pass through if needed */
    z-index: 5;
}

.audio-duration {
    display: none;
    /* Hide duration per user request */
}

.audio-ctrl {
    width: 40px;
    /* Separate button container */
    height: 50px;
    /* Match height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.audio-photo-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: block;
    /* Ensure visible */
}

.audio-profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.audio-mic-overlay {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    /* White background */
    border-radius: 50%;
    border: 2px solid #ffffff;
    /* Border */
    color: #53bdeb;
    /* Blue mic */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.play-pause-btn {
    font-size: 28px;
    color: #999999;
    /* Grey icon */
    z-index: 1;
}

/* Remove overlay styles */
.image-container,
.play-overlay {
    display: none;
}

/* Waveform Tweaks */
.audio-waves {
    height: 32px;
    /* Taller container */
    gap: 2px;
    /* Tighter gap to fit more bars */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Distribute bars evenly */
    flex: 1;
    /* Fill remaining space */
    margin: 0 15px 0 10px;
    /* Clean spacing: 10px left, 15px right */
    overflow: hidden;
    /* Prevent overflow */
}

.bar {
    width: 4px;
    /* Wider bars */
    border-radius: 2px;
    background-color: #999999;
    /* Default Gray */
    transition: background-color 0.1s ease;
    /* Smooth transition */
    flex-shrink: 0;
    /* Prevent shrinking */
}

.bar.played {
    background-color: #25D366 !important;
    /* WhatsApp Green */
}

.bar:nth-child(1) {
    height: 8px;
}

.bar:nth-child(2) {
    height: 14px;
}

.bar:nth-child(3) {
    height: 10px;
}

.bar:nth-child(4) {
    height: 18px;
}

.bar:nth-child(5) {
    height: 12px;
}

.bar:nth-child(6) {
    height: 6px;
}

.bar:nth-child(7) {
    height: 16px;
}

.bar:nth-child(8) {
    height: 10px;
}

.bar:nth-child(9) {
    height: 20px;
}

.bar:nth-child(10) {
    height: 12px;
}

.bar:nth-child(11) {
    height: 8px;
}

.bar:nth-child(12) {
    height: 14px;
}

.bar:nth-child(13) {
    height: 10px;
}

.bar:nth-child(14) {
    height: 16px;
}

.bar:nth-child(15) {
    height: 8px;
}

.bar:nth-child(16) {
    height: 12px;
}

.bar:nth-child(17) {
    height: 6px;
}

.bar:nth-child(18) {
    height: 14px;
}

.bar:nth-child(19) {
    height: 10px;
}

.bar:nth-child(20) {
    height: 18px;
}

.bar:nth-child(21) {
    height: 12px;
}

.bar:nth-child(22) {
    height: 22px;
}

.bar:nth-child(23) {
    height: 8px;
}

.bar:nth-child(24) {
    height: 16px;
}

.bar:nth-child(25) {
    height: 10px;
}

.bar:nth-child(26) {
    height: 20px;
}

.bar:nth-child(27) {
    height: 14px;
}

.bar:nth-child(28) {
    height: 6px;
}

.bar:nth-child(29) {
    height: 18px;
}

.bar:nth-child(30) {
    height: 12px;
}

.bar:nth-child(31) {
    height: 24px;
}

.bar:nth-child(32) {
    height: 8px;
}

.bar:nth-child(33) {
    height: 16px;
}

.bar:nth-child(34) {
    height: 10px;
}

.bar:nth-child(35) {
    height: 22px;
}

.bar:nth-child(36) {
    height: 14px;
}

.bar:nth-child(37) {
    height: 6px;
}

.bar:nth-child(38) {
    height: 18px;
}

.bar:nth-child(39) {
    height: 12px;
}

.bar:nth-child(40) {
    height: 20px;
}

.bar:nth-child(41) {
    height: 10px;
}

.bar:nth-child(42) {
    height: 16px;
}

.bar:nth-child(43) {
    height: 8px;
}

.bar:nth-child(44) {
    height: 22px;
}

.bar:nth-child(45) {
    height: 12px;
}

.bar:nth-child(46) {
    height: 18px;
}

.bar:nth-child(47) {
    height: 6px;
}

.bar:nth-child(48) {
    height: 14px;
}

.bar:nth-child(49) {
    height: 20px;
}

.bar:nth-child(50) {
    height: 10px;
}

.bar:nth-child(51) {
    height: 16px;
}

.bar:nth-child(52) {
    height: 8px;
}

.bar:nth-child(53) {
    height: 24px;
}

.bar:nth-child(54) {
    height: 12px;
}

.bar:nth-child(55) {
    height: 18px;
}

.bar:nth-child(56) {
    height: 6px;
}

.bar:nth-child(57) {
    height: 14px;
}

.bar:nth-child(58) {
    height: 20px;
}

.bar:nth-child(59) {
    height: 10px;
}

.bar:nth-child(60) {
    height: 16px;
}

/* Options Alignment */
.chat-options {
    justify-content: flex-end;
    /* Align right */
    max-width: 100%;
    margin-left: auto;
    /* Push to right */
    padding-right: 5%;
    /* Match chat body padding */
}

.option-btn {
    background-color: #d9fdd3;
    /* Greenish like sent message */
    color: #111b21;
    border: none;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    border-radius: 7.5px;
    border-top-right-radius: 0;
    /* Tail simulation for sent? Or just rounded */
    /* User said "como botões alinhados à direita, mantendo o estilo de bolha WhatsApp" */
    /* Usually buttons are full width or separate. I'll make them look like sent bubbles. */
    border-radius: 12px;
    /* More rounded */
    text-align: left;
    min-width: 140px;
    /* Wider */
    padding: 16px 20px 28px 20px;
    /* Larger padding */
    font-size: 16px;
    /* Larger font */
    font-weight: 500;
}

.option-btn:hover {
    background-color: #c8e6c9;
}

/* Message Tails */
/* Message Tails - Grouping Logic */
.message.received {
    border-radius: 7.5px;
    /* Default rounded */
}

.message.received.tail {
    border-bottom-left-radius: 0;
}

.message.received::before {
    display: none;
    /* Hide by default */
}

.message.received.tail::before {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    /* Align to bottom */
    left: -8px;
    width: 8px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z' fill='white'/%3E%3C/svg%3E");
    transform: scaleY(-1);
    /* Flip vertically for bottom-left */
    top: auto;
    /* Override top */
}

/* Option Buttons (Sent Style) */
.option-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #d9fdd3;
    border-left-color: #d9fdd3;
    border-bottom: 0;
    margin-top: 0px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.467 3.568L0 12.193V1h5.188c1.77 0 2.338 1.156 1.279 2.568z' fill='%23d9fdd3'/%3E%3C/svg%3E");
    width: 8px;
    height: 13px;
    right: -8px;
    top: 0;
    display: none;
    /* Only show on the last one or specific ones if needed, but for grid buttons usually no tail or just the last one. I'll hide for now to avoid clutter or show on all? "Adicionar a pontinha... direita para mensagens do usuário". Since options are buttons, maybe just rounded is better, but I'll add the tail class if I want to simulate a message. */
}

/* Removed duplicate audio/wave styles */
.bar:nth-child(1) {
    height: 12px;
}

.bar:nth-child(2) {
    height: 20px;
}

.bar:nth-child(3) {
    height: 16px;
}

.bar:nth-child(4) {
    height: 28px;
}

.bar:nth-child(5) {
    height: 18px;
}

.bar:nth-child(6) {
    height: 10px;
}

.bar:nth-child(7) {
    height: 24px;
}

.bar:nth-child(8) {
    height: 16px;
}

.bar:nth-child(9) {
    height: 32px;
}

.bar:nth-child(10) {
    height: 18px;
}

.bar:nth-child(11) {
    height: 12px;
}

.bar:nth-child(12) {
    height: 22px;
}

.bar:nth-child(13) {
    height: 16px;
}

.bar:nth-child(14) {
    height: 26px;
}

.bar:nth-child(15) {
    height: 12px;
}

.bar:nth-child(16) {
    height: 18px;
}

.bar:nth-child(17) {
    height: 10px;
}

.bar:nth-child(18) {
    height: 22px;
}

.bar:nth-child(19) {
    height: 16px;
}

.bar:nth-child(20) {
    height: 28px;
}

/* Options Layout */
.chat-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-content: flex-end;
    max-width: 100%;
    margin-left: auto;
    padding-right: 5%;
}

.option-btn {
    background-color: #d9fdd3;
    color: #111b21;
    border: none;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    border-radius: 7.5px;
    text-align: left;
    padding: 10px 15px;
    font-size: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    /* To allow time at bottom */
}

.option-btn:hover {
    background-color: #c8e6c9;
}

/* Recording Bubble Size */
.temp-status {
    min-width: 80px;
    height: 50px;
    justify-content: center;
}

.temp-status .fa-microphone {
    font-size: 20px;
}

/* Message Meta in Options */
.option-btn .message-info {
    align-self: flex-end;
    margin-top: 2px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #b4b4b4;
    border-radius: 50%;
    animation: typingDots 1.5s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Larger Header Status */
.user-status {
    font-size: 14px !important;
}

/* Message Tails */
.message.received::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom: 0;
    margin-top: 0px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z' fill='white'/%3E%3C/svg%3E");
    width: 8px;
    height: 13px;
    left: -8px;
    top: 0;
}

/* Option Buttons (Sent Style) */
.option-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #d9fdd3;
    border-left-color: #d9fdd3;
    border-bottom: 0;
    margin-top: 0px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.467 3.568L0 12.193V1h5.188c1.77 0 2.338 1.156 1.279 2.568z' fill='%23d9fdd3'/%3E%3C/svg%3E");
    width: 8px;
    height: 13px;
    right: -8px;
    top: 0;
    display: none;
}

/* Audio Player Adjustments */
.audio-message {
    min-width: 310px;
    padding: 10px 15px 10px 12px;
    /* Added left padding to move pic right */
    gap: 12px;
    /* Reduced gap slightly */
}

.audio-ctrl {
    width: 44px;
    /* Reduced size */
    height: 44px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.audio-profile-pic {
    width: 44px;
    /* Reduced size */
    height: 44px;
}

.play-pause-btn {
    font-size: 26px;
    /* Adjusted icon size */
    color: #667781;
    z-index: 3;
}

/* Waveform Tweaks */
.audio-wave {
    height: 28px;
    /* Taller wave */
    gap: 4px;
}

.bar {
    width: 4px;
    /* Thicker bars */
    border-radius: 2px;
    background-color: #999999;
}

/* Varied heights */
.bar:nth-child(1) {
    height: 10px;
}

.bar:nth-child(2) {
    height: 16px;
}

.bar:nth-child(3) {
    height: 12px;
}

.bar:nth-child(4) {
    height: 22px;
}

.bar:nth-child(5) {
    height: 14px;
}

.bar:nth-child(6) {
    height: 8px;
}

.bar:nth-child(7) {
    height: 18px;
}

.bar:nth-child(8) {
    height: 12px;
}

.bar:nth-child(9) {
    height: 24px;
}

.bar:nth-child(10) {
    height: 14px;
}

.bar:nth-child(11) {
    height: 10px;
}

.bar:nth-child(12) {
    height: 16px;
}

.bar:nth-child(13) {
    height: 12px;
}

.bar:nth-child(14) {
    height: 20px;
}

.bar:nth-child(15) {
    height: 10px;
}

.bar:nth-child(16) {
    height: 14px;
}

.bar:nth-child(17) {
    height: 8px;
}

.bar:nth-child(18) {
    height: 16px;
}

.bar:nth-child(19) {
    height: 12px;
}

.bar:nth-child(20) {
    height: 22px;
}

/* Options Layout */
.chat-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* Increased gap */
    justify-content: flex-end;
    max-width: 100%;
    margin-left: auto;
    padding-right: 5%;
}

.option-btn {
    background-color: #d9fdd3;
    color: #111b21;
    border: none;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    border-radius: 10px;
    /* Slightly more rounded */
    text-align: left;
    padding: 14px 18px 25px 18px;
    /* Increased bottom padding */
    font-size: 15px;
    /* Larger font */
    position: relative;
    display: flex;
    flex-direction: column;
}

.option-btn:hover {
    background-color: #c8e6c9;
}

/* Recording Bubble Size */
.temp-status {
    min-width: 90px;
    height: 55px;
    justify-content: center;
}

.temp-status .fa-microphone {
    font-size: 24px;
}

/* Message Meta in Options */
.option-btn .message-info {
    align-self: flex-end;
    margin-top: 4px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}

.typing-dot {
    width: 8px;
    /* Larger dots */
    height: 8px;
    background-color: #b4b4b4;
    border-radius: 50%;
    animation: typingDots 1.5s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Footer States */
.footer-state {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s ease;
}

.footer-state.active {
    display: flex !important;
    opacity: 1;
}

/* Recording State Styles */
.recording-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 10px;
}

.rec-mic-icon {
    color: #ff3b30;
    /* Red color for recording */
    animation: pulseMic 1.5s infinite;
}

.rec-timer {
    font-size: 16px;
    color: #111b21;
    font-weight: 500;
    min-width: 40px;
}

.rec-text {
    color: #667781;
    font-size: 14px;
    animation: slideText 2s infinite linear;
}

@keyframes pulseMic {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideText {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(-5px);
        opacity: 0.5;
    }
}

/* Refined Message Bubble Tails (High Fidelity) */
.message.received::before {
    /* Overwrite previous tail style for better fidelity */
    background-image: none !important;
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom: 0;
    margin-top: 0;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* Ensure footer has correct height and positioning */
.chat-footer {
    min-height: 62px;
    padding: 5px 10px;
}

/* Video Message Styles */
.video-message {
    padding: 5px 5px 25px 5px !important;
    /* Minimal padding, space for time */
    max-width: 350px;
    /* Increased visibility */
}

.chat-video {
    width: 100%;
    border-radius: 8px;
    display: block;
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 5px;
    /* Match padding */
    right: 5px;
    bottom: 25px;
    /* Match padding bottom */
    bottom: 25px;
    /* Match padding bottom */
    background-color: transparent;
    /* No gray screen */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.play-icon-circle {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 2px solid white;
}

.play-icon-circle i {
    color: white;
    font-size: 20px;
    margin-left: 3px;
    /* Optical center */
}

.overlay-text {
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}