:root {
    color-scheme: light;
    --ink: #162033;
    --muted: #667085;
    --line: #d9e0ea;
    --surface: #ffffff;
    --soft: #f4f7fb;
    --brand: var(--third-color);
    --brand-dark: #249cb4;
    --accent: #e11d48;
    --admin: #2563eb;
    --shadow: 0 18px 50px rgba(22, 32, 51, 0.16);
}

.chat-widget, .chat-workspace, .admin-wrapper, .welcome, .modal__dialog {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chat-widget *, .chat-workspace *, .admin-wrapper *, .welcome *, .modal__dialog * {
    box-sizing: border-box;
}

body.chat-body-active {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--soft);
}

.admin-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.top-navbar {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 50;
}

.top-navbar__logo {
    display: flex;
    align-items: center;
}

.admin-app {
    flex: 1;
    min-height: 0; /* needed for nested scrolling */
    display: grid;
    grid-template-columns: 320px 1fr;
}

.chat-widget button, .chat-widget input, .chat-widget select, .chat-widget textarea,
.chat-workspace button, .chat-workspace input, .chat-workspace select, .chat-workspace textarea,
.admin-wrapper button, .admin-wrapper input, .admin-wrapper select, .admin-wrapper textarea,
.welcome button, .welcome input, .welcome select, .welcome textarea,
.modal__dialog button, .modal__dialog input, .modal__dialog select, .modal__dialog textarea {
    font: inherit;
}

.chat-widget button, .chat-workspace button, .admin-wrapper button, .welcome button, .modal__dialog button {
    cursor: pointer;
}

.site-shell {
    background:
        linear-gradient(135deg, rgba(40, 178, 205, 0.12), transparent 38%),
        linear-gradient(315deg, rgba(225, 29, 72, 0.10), transparent 42%),
        var(--soft);
}

.welcome {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 40px 24px;
}

.welcome__content {
    width: min(720px, 100%);
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.chat-widget h1, .chat-widget h2, .chat-widget p,
.chat-workspace h1, .chat-workspace h2, .chat-workspace p,
.admin-wrapper h1, .admin-wrapper h2, .admin-wrapper p,
.welcome h1, .welcome h2, .welcome p,
.modal__dialog h1, .modal__dialog h2, .modal__dialog p {
    margin-top: 0;
}

.welcome h1 {
    max-width: 620px;
    margin-bottom: 14px;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.welcome__content > p:not(.eyebrow) {
    max-width: 560px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.6;
}

.login-card {
    width: min(440px, 100%);
    display: grid;
    gap: 14px;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin-bottom: 4px;
    font-size: 1.7rem;
}

.chat-widget label,
.chat-workspace label,
.admin-wrapper label,
.welcome label,
.modal__dialog label {
    display: grid;
    gap: 7px;
    color: #344054;
    font-size: 0.92rem;
    font-weight: 700;
}

.chat-widget input,
.chat-widget select,
.chat-widget textarea,
.chat-workspace input,
.chat-workspace select,
.chat-workspace textarea,
.admin-wrapper input,
.admin-wrapper select,
.admin-wrapper textarea,
.welcome input,
.welcome select,
.welcome textarea,
.modal__dialog input,
.modal__dialog select,
.modal__dialog textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-widget input, .chat-workspace input, .admin-wrapper input, .welcome input, .modal__dialog input {
    min-height: 46px;
    padding: 0 13px;
}

.chat-widget select, .chat-workspace select, .admin-wrapper select, .welcome select, .modal__dialog select {
    min-height: 46px;
    padding: 0 13px;
}

.chat-widget textarea, .chat-workspace textarea, .admin-wrapper textarea, .welcome textarea, .modal__dialog textarea {
    min-height: 44px;
    max-height: 130px;
    resize: vertical;
    padding: 11px 12px;
}

.chat-widget input:focus,
.chat-widget select:focus,
.chat-widget textarea:focus,
.chat-workspace input:focus,
.chat-workspace select:focus,
.chat-workspace textarea:focus,
.admin-wrapper input:focus,
.admin-wrapper select:focus,
.admin-wrapper textarea:focus,
.welcome input:focus,
.welcome select:focus,
.welcome textarea:focus,
.modal__dialog input:focus,
.modal__dialog select:focus,
.modal__dialog textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(40, 178, 205, 0.13);
}

.chat-widget button,
.chat-workspace button,
.admin-wrapper button,
.welcome button,
.modal__dialog button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    background: var(--brand);
    font-weight: 800;
}

.chat-widget button:hover,
.chat-workspace button:hover,
.admin-wrapper button:hover,
.welcome button:hover,
.modal__dialog button:hover {
    background: var(--brand-dark);
}

.chat-widget button:disabled,
.chat-workspace button:disabled,
.admin-wrapper button:disabled,
.welcome button:disabled,
.modal__dialog button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.ghost-button {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
}

.ghost-button:hover {
    background: var(--soft);
}

.logout-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.logout-button__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
}

.logout-button__icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.form-message {
    min-height: 20px;
    margin: 0;
    color: var(--accent);
    font-size: 0.9rem;
}

.chat-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483646;
    visibility: hidden; /* hide initially to prevent flash */
}

.chat-widget.is-initialized {
    visibility: visible !important;
}

.chat-widget button.chat-widget__launcher {
    width: 56px;
    height: 56px;
    min-height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 15px rgba(39, 44, 51, 0.3);
    font-size: 22px;
    padding: 0;
    background: var(--primary-color);
    color: var(--secondary-text) !important;
    transition: opacity 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

.chat-widget button.chat-widget__launcher:hover {
    background: var(--hover-color);
    transform: scale(1.05);
}

.chat-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 360px;
    max-width: calc(100vw - 28px);
    height: 520px; /* Increased to 520px to prevent button/message cutoff */
    display: none; /* hide initially to prevent flash */
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 110px);
    transform: translateY(0);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                right 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease,
                opacity 0.3s ease, 
                visibility 0.3s, 
                transform 0.3s ease;
    pointer-events: none;
}

#chatAuthSection, #chatConversationSection {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-widget.is-open .chat-panel {
    display: grid; /* show when open */
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.chat-widget.is-open .chat-panel.is-chatting {
    height: 600px; 
    max-height: calc(100vh - 110px);
}

.chat-widget.is-open .chat-panel.is-expanded {
    width: 500px;
    max-width: 100vw;
    height: 100vh !important;
    max-height: 100vh !important;
    bottom: -22px;
    right: -22px;
    border-radius: 0;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
}

.chat-widget.is-closing .chat-panel {
    opacity: 0 !important;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Ensure the conversation section takes up available space when chatting */
.chat-panel.is-chatting #chatConversationSection {
    height: calc(100% - 130px); /* Total - header(130) */
}

.chat-panel__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    height: 130px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.admin-chat__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    height: 85px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.chat-panel__header span,
.admin-chat__header span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.82rem;
}

.chat-panel__header button {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    font-size: 1.35rem;
}

.messages {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
}

.message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 90%;
    align-self: flex-start;
}

.message-content {
    display: flex;
    flex-direction: column;
}

.message--user .message-content,
.messages--admin .message--admin .message-content {
    align-items: flex-end;
}

.message--admin .message-content,
.messages--admin .message--user .message-content {
    align-items: flex-start;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    white-space: nowrap;
}

.message p {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    line-height: 1.42;
    overflow-wrap: anywhere;
    font-size: 15px;
}

.message-text span {
    font-size: 14px;
}

.message time {
    color: var(--muted);
    font-size: 0.74rem;
}

.message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message--user p {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.message--admin {
    align-self: flex-start;
}

.messages--admin .message--admin {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.messages--admin .message--admin p {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.message--system {
    max-width: 100% !important;
    width: 100% !important;
    align-self: center !important;
    justify-content: center !important;
    display: flex !important;
}

.messages--admin .message--user {
    align-self: flex-start;
    flex-direction: row;
}

.messages--admin .message--user p {
    color: var(--ink);
    border-color: var(--line);
    background: #fff;
    font-size: 15px;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.message-avatar--user {
    background: #e2e8f0;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
}

.message--user time,
.messages--admin .message--admin time {
    text-align: right;
}

.composer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.composer button {
    align-self: end;
}

.admin-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admin-app {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
}

.inbox {
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--line);
    background: #fff;
    display: flex;
    flex-direction: column;
}

.inbox__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 20px 0 30px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.inbox__title {
    width: 100%;
}

.inbox__header h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.12;
}

.admin-create {
    display: grid;
    gap: 10px;
}

.admin-create input {
    min-height: 40px;
}

.admin-create button {
    min-height: 40px;
}

.admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.icon-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--brand);
    background: #fff;
    font-size: 1.4rem;
    line-height: 1;
}

.icon-button:hover {
    color: #fff;
    background: var(--brand);
}

.status-switch {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    white-space: nowrap;
}

.status-switch input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.status-switch__track {
    width: 48px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.status-switch__thumb {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(22, 32, 51, 0.25);
    transition: transform 0.18s ease;
}

.status-switch input:checked + .status-switch__track {
    border-color: var(--brand);
    background: var(--brand);
}

.status-switch input:checked + .status-switch__track .status-switch__thumb {
    transform: translateX(20px);
}

.status-switch__text {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.9rem;
}

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 32, 51, 0.42);
}

.modal__dialog {
    position: relative;
    width: min(390px, 100%);
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.modal__header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.modal__close {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    font-size: 1.45rem;
}

.modal__close:hover {
    color: var(--ink);
    background: var(--soft);
}

.conversation-list {
    min-height: 0;
    display: grid;
    align-content: start;
    flex-grow: 1;
    overflow-y: auto;
}

.conversation,
.empty-state {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    background: #fff;
    text-align: left;
}

.conversation {
    padding: 14px 20px 14px 30px;
}

.conversation:hover,
.conversation.is-active {
    background: #eef7f6;
}

.conversation__main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.conversation strong,
.conversation small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message.is-deleted {
    opacity: 0.65;
}

.message.is-deleted .message-content {
    background: rgba(0,0,0,0.03) !important;
    border: 1px dashed var(--line) !important;
    color: var(--muted) !important;
}

.message.is-deleted p {
    font-style: italic;
}

.conversation small,
.empty-state {
    color: var(--muted);
}

.chat-workspace .delete-conversation,
.chat-workspace .transfer-conversation {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 0; /* Reset global button min-height */
    flex-shrink: 0;
    padding: 0; /* Reset global button padding */
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--brand);
    font-size: 1.05rem;
    font-weight: 100 !important; /* Extremely thin weight */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-workspace .delete-conversation i,
.chat-workspace .transfer-conversation i {
    font-weight: 100 !important;
}

.chat-workspace .delete-conversation:hover,
.chat-workspace .transfer-conversation:hover {
    background: var(--brand);
    color: #fff;
}

#btnTransfer {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 0;
    padding: 0 !important; /* Override inline padding */
    border: none;
    background: transparent !important; /* Override inline background */
    border-radius: 50%;
    color: var(--brand) !important; /* Override inline color */
    font-size: 1.05rem !important; /* Override inline font-size to match sidebar */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

#btnTransfer:hover {
    background: var(--brand) !important;
    color: #fff !important;
}

#btnTransfer,
#btnTransfer i {
    font-weight: 100 !important;
}

.badge {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
}

.badge[hidden] {
    display: none;
}

.admin-chat {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #f8fafc;
}

.admin-chat__header h2 {
    margin: 0;
    font-size: 1.2rem;
}

@media (max-width: 767px) {
    .admin-app {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(220px, 38vh) 1fr;
    }

    .inbox {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow-y: auto;
    }
}

.admin-profile-menu {
    position: relative;
    display: inline-block;
}

.profile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

.profile-greeting {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink);
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    vertical-align: middle;
    cursor: pointer;
}

.profile-avatar:hover {
    border-color: var(--brand);
}

.profile-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-width: 215px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
}

.profile-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 16px;
}

.dropdown-actions-row:hover {
    background: transparent !important;
}

.dropdown-divider {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--ink);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s;
}

.profile-dropdown .dropdown-item:hover {
    background: var(--soft);
}

.profile-dropdown .dropdown-item i {
    color: var(--brand);
    width: 16px;
    text-align: center;
}

@media (max-width: 767px) {
    .chat-widget {
        position: fixed !important;
        right: 14px !important;
        bottom: 14px !important;
        left: auto !important;
        top: auto !important;
        width: 56px !important;
        height: 56px !important;
        z-index: 2147483646 !important;
        background: transparent !important;
        display: block !important;
    }

    .chat-widget__launcher {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Base state for mobile panel - already positioned but hidden for a clean fade-in */
    .chat-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(10px) !important; /* Subtle lift */
        transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease !important;
        z-index: 2 !important;
    }

    /* Open state on mobile - simply fade in */
    .chat-widget.is-open .chat-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
        transform: translateY(0) !important;
    }

    #chatExpand {
        display: none !important;
    }

    .chat-widget.is-open .chat-panel.is-chatting #chatConversationSection {
        height: auto !important;
    }
    
    .chat-widget.is-open .chat-panel #chatAuthSection {
        height: calc(100dvh - 85px) !important;
        justify-content: center !important;
    }

    .chat-widget.is-closing .chat-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        opacity: 0 !important;
        transform: none !important;
        transition: opacity 0.3s ease !important;
    }
}

/* Typing Animation Dots */
.typing-indicator-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.typing-indicator-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--brand);
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-indicator-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1.2); opacity: 1; }
}

@keyframes typingFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}