:root {
    /* Core colors */
    --bg: #ffffff;
    --text: #1b2c41;
    --muted: #6c757d;

    --accent: #1183d4; /* Base Blue */
    --accent-light: #66aef5; /* Lighter Blue */
    --accent-dark: #0356a7;

    /* UI surfaces */
    --panel: #d6e0f7;
    --border: #d4e8f5;

    /* Components */
    --chip-text: var(--accent);
    --chip-bg: #e9ecef;
    --toast: var(--accent);

    --shimmer-bg: #cfd8eb;
    --shimmer-gradient: rgba(255, 255, 255, 0.5);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#app {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: transparent;
}

.inbox-placeholder img {
    max-width: 120px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    margin: 24px auto;
    display: block;
}

.chat-title {
    font-weight: 600;
    font-size: 18px;
}

/* Day divider */
.day-divider {
    align-self: center;
    font-size: 12px;
    color: #617989;
    padding: 4px 12px;
    font-weight: 500;
    border-radius: 999px;
    background: #e1e3e580;
}

/* Message rows */
.msg-row {
    display: flex;
}

.msg-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.msg-row.human .msg-wrapper {
    align-items: flex-end;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; /* Ensures proper image fitting */
    display: block;
}

.msg-content {
    /* max-width: 70%; */
    display: flex;
    flex-direction: column;
}

.msg-row.human {
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 12px;
}
.msg-row.human.first-human {
    margin-top: 12px;
}

.msg-row.bot {
    justify-content: flex-start;
    margin-top: 12px;
}

/* Bubbles */
.bubble {
    padding: 10px 16px;
    border-radius: 14px;
    word-wrap: break-word;
    white-space: pre-wrap;
    margin-bottom: 4px;
}
.bubble.human {
    background: var(--accent);
    color: #fff;
    border-top-right-radius: 0px;
    font-size: 14px;
    max-width: 320px;
    min-width: 42px;
    margin-right: 4px;
}
.bubble.bot {
    background: #fff;
    border-radius: 0px 16px 16px 16px;
    font-size: 14px;
    color: #111518;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    margin-left: 4px;
}

.bubble.bot.options {
    display: flex;
    flex-direction: column;
    background: none;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.bubble.bot.options .chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Chips */
.chip {
    display: flex;
    align-items: center;
    justify-content: space-between; /* text left, arrow right */
    background: #fff;
    width: 100%;
    padding: 16px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.chip .material-icons {
    font-size: 18px;
    color: #64748b; /* or any color for arrow */
}

.chip:hover {
    background: var(--chip-text);
    color: #fff;
}

.chip:active {
    transform: scale(0.97);
    background: var(--chip-text);
    color: #fff;
}

.chip:focus {
    outline: none;
    box-shadow: none;
    background: var(--chip-text);
    color: #fff;
}

/* Composer */
.composer {
    padding: 24px;
    position: sticky;
    bottom: 0;
    z-index: 5;
}
#composerForm {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Placeholder */
.inbox-placeholder {
    text-align: center;
    padding: 16px;
}
.inbox-placeholder h4 {
    font-size: 24px;
    font-weight: 700;
    color: #424242;
    margin: 30px 0 24px;
}
.inbox-placeholder .placeholder-text {
    padding: 20px;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.inbox-placeholder p {
    font-weight: 500;
    font-size: 15px;
    color: #424242;
}

/* Input */
.input-wrapper {
    flex: 1;
    background: #f6f7f8;
    color: #111518;
    border-radius: 32px;
    padding: 8px 16px;
    display: flex;
    gap: 8px;
    height: 62px;
    align-items: center;
}
.input {
    border: none;
    width: 100%;
    outline: none;
    font-size: 18px;
}
.input:focus {
    box-shadow: none;
}
.input.disabled {
    cursor: default;
}

/* Buttons */
.send-btn {
    background: #fff;
    border: none;
    color: var(--accent);
    font-weight: 700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.send-btn:active {
    filter: brightness(0.9);
}
.send-btn:not(.disabled):hover {
    filter: brightness(1.1);
}

/* Typing */
.typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: var(--muted);
}
.typing .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-light);
    animation: blink 1s infinite ease-in-out;
}
.typing .dot:nth-child(2) {
    background: var(--accent);
    animation-delay: 0.15s;
}
.typing .dot:nth-child(3) {
    background: var(--accent-dark);
    animation-delay: 0.3s;
}
@keyframes blink {
    0%,
    80%,
    100% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
}
.typing-label {
    font-size: 12px;
}

/* Toast + Jump */
.new-toast {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #617989;
    font-weight: 600;
    font-size: 12px;
    border-radius: 24px;
    padding: 8px 20px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.jump-latest {
    position: fixed;
    right: 16px;
    bottom: 96px;
    background: #fff;
    color: #617989;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 6;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Attach */
.attach-btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.attach-icon {
    width: 24px;
    height: 24px;
}
.attach-btn:not(.disabled):hover {
    filter: brightness(1.1);
}
.hidden {
    display: none !important;
}

html,
body {
    margin: 0;
    height: 100%;
    color: #111518;
    background: #f6f7f8;
    font: 14px/1.4 'Poppins', sans-serif;
}
/* Header container */
.header {
    display: flex;
    align-items: center;
    justify-content: center; /* centers the title */
    position: relative; /* so back button can be absolutely positioned */
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'Poppins', sans-serif;
    padding: 16px;
    height: 65px;
}

/* Back button positioned to the left */
.back {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #475569;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.back .arrow {
    font-size: 24px;
}

/* Title stays perfectly centered */
.header .title {
    font-size: 18px;
    font-weight: 600;
    color: #111518;
    margin: 0;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.circle-wrapper {
    position: relative;
    width: 100%;
    height: 364px;
    margin-bottom: 32px;
    border-radius: 50%;
    overflow: visible; /* allow inner circle to be visible */
}

.circle-wrapper::before {
    content: '';
    position: absolute;
    inset: 0; /* cover the wrapper */
    border-radius: 50%;
    background: #1183d41a;
    filter: blur(40px);
    z-index: 0;
}

.circle {
    position: relative;
    width: 192px;
    height: 192px;
    background: #1183d433;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    z-index: 1; /* on top of blurred background */
}
.circle span {
    color: #1183d4;
    font-size: 72px;
}

h2 {
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 24px;
}
p {
    color: #6c757d;
    font-size: 15px;
    margin: 0 auto 32px;
}
.new-btn {
    background: #1183d4;
    color: #fff;
    border: none;
    border-radius: 16px;
    width: 100%;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}
.new-btn:hover {
    background: #0069d9;
}

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 16px;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.chat-header .back {
    font-size: 22px;
    cursor: pointer;
    margin-right: 12px;
}

/* Messages */
.message-pane {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.date-separator {
    align-self: center;
    background: #e9ecef;
    color: #6c757d;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 10px 0;
}

.message {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-end;
}
.message.bot {
    flex-direction: row;
}
.message.human {
    flex-direction: row-reverse;
}
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.bubble .human {
    background: #007bff;
    color: #fff;
    border-top-right-radius: 4px;
}

.time {
    font-size: 12px;
    color: #6c757d;
    margin: 4px;
}

/* Composer */
.composer {
    align-items: center;
    padding: 16px;
    background: #fff;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
}
.composer input {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 24px;
    padding: 8px 12px;
    font-size: 15px;
    outline: none;
    margin-right: 8px;
    color: #111518;
}
.composer button {
    background: #1183d4;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.meta span {
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 16px;
    color: #1183d4;
    align-self: flex-start;
}

.add-photo {
    font-size: 24px;
    color: #617989;
}
.send {
    color: #fff;
    font-size: 24px;
}

.nameTime {
    color: #64748b;
    font-size: 11px;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 8px; /* space between name/time and status */
    font-size: 12px;
    color: var(--muted);
}
.meta-row .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

.msg-row.bot .meta-row {
    margin-left: 4px;
}

.msg-row.human .meta-row {
    margin-right: 4px;
    justify-content: flex-end;
}

/* Shimmer Base */
.shimmer {
    position: relative;
    overflow: hidden;
    background: var(--shimmer-bg);
    border-radius: 16px;
    display: inline-block;
    width: auto; /* auto width */
    height: auto; /* auto height */
}

.avatar.shimmer::after,
.bubble.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        /* stronger highlight */ rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Base shimmer bubble */

.bubble.shimmer {
    position: relative;
    border-radius: 16px;
    margin: 6px 0;
    background: var(--shimmer-bg);
}

.bubble.shimmer.options {
    background: var(--shimmer-bg);
    border-radius: 16px;
    width: 70%;
}

/* Avatar shimmer */
.avatar.shimmer {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--shimmer-bg);
    flex-shrink: 0;
}

.chat-shimmer > .msg-row.human {
    margin-right: 4px;
    justify-content: flex-end;
    flex-direction: column;
}

.chat-shimmer > .msg-row.bot {
    margin-right: 4px;
    justify-content: flex-end;
    flex-direction: column;
}

.msg-row.human .bubble.shimmer {
    border-radius: 16px 0px 16px 16px;
    align-self: flex-end;
    width: 50%;
    height: 32px;
    margin-right: 4px;
}

.msg-row.bot .bubble.shimmer {
    border-radius: 0px 16px 16px 16px;
    align-self: flex-start;
    width: 70%;
    height: 72px;
    margin-left: 4px;
}

.msg-row.bot .bubble.shimmer.options {
    border-radius: 16px;
    align-self: flex-start;
    width: 70%;
    height: 250px;
}

.chips-header {
    padding: 16px;
    background: #d6d8db;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    color: #383d41;
}
.chipWrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid transparent;
    border-bottom-color: #ddd;
}

.leftSlot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.chip-icon {
    margin-right: 8px;
    width: 32px;
    height: 32px;
}
.chip-title {
    text-align: start;
    text-overflow: ellipsis;
    display: block;
    max-width: 185px;
    overflow: hidden;
}
.rightSlot {
    display: flex;
    justify-content: center;
    align-items: center;
}

.defaultBadgeWrapper {
    background-color: #d4e8f5;
    padding: 4px 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.defaultBadge {
    color: #1183d4;
    font-size: 13px;
    font-weight: 500;
}

.successBadgeWrapper {
    background-color: #d9f8e7;
    padding: 4px 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.successBadge {
    color: #00835c;
    font-size: 13px;
    font-weight: 500;
}

.dangerBadgeWrapper {
    background-color: #ffecec;
    padding: 4px 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dangerBadge {
    color: #d21e06;
    font-size: 13px;
    font-weight: 500;
}

.warningBadgeWrapper {
    background-color: #fff2d0;
    padding: 4px 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.warningBadge {
    color: #fd9725;
    font-size: 13px;
    font-weight: 500;
}

.chip .chip-arrow {
    color: #6b7280;
    margin-left: 8px;
}

.chip:hover .chip-arrow,
.chip:active .chip-arrow,
.chip:focus .chip-arrow {
    color: #fff; /* match text color */
}

.disabled {
    opacity: 0.5;
}
.chipContent {
    padding: 16px;
    font-size: 12px;
    color: #383d41;
}

.chips .chipWrapper:last-child {
    border-bottom: none;
}