/* WhatsApp-style Chat CSS for Template Documentation
 * Use this to display sample dialogs that demonstrate how templates work
 */

/* Chat Container */
.wa-chat {
    background-color: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l9.9-9.9h-2.83zM32 0l-3.486 3.485-1.414-1.414L30.172 0H32zM0 5.373l.828-.83 1.415 1.415L0 8.2V5.374zm0 5.656l.828-.829 5.657 5.657-1.414 1.414L0 11.03v2.828zm0 5.656l.828-.828 8.485 8.485-1.414 1.414L0 16.686v2.83zm0 5.657l.828-.828 11.314 11.314-1.414 1.414L0 22.343v2.83zM0 32l.828-.828 14.142 14.142-1.414 1.414L0 32.172V32z' fill='%23c5c5c5' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    border-radius: 8px;
    padding: 20px 15px;
    margin: 20px 0;
    max-width: 600px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

/* Dark theme support */
.coal .wa-chat,
.navy .wa-chat,
.ayu .wa-chat,
.dark .wa-chat {
    background-color: #0b141a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l9.9-9.9h-2.83zM32 0l-3.486 3.485-1.414-1.414L30.172 0H32zM0 5.373l.828-.83 1.415 1.415L0 8.2V5.374zm0 5.656l.828-.829 5.657 5.657-1.414 1.414L0 11.03v2.828zm0 5.656l.828-.828 8.485 8.485-1.414 1.414L0 16.686v2.83zm0 5.657l.828-.828 11.314 11.314-1.414 1.414L0 22.343v2.83zM0 32l.828-.828 14.142 14.142-1.414 1.414L0 32.172V32z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Message Bubbles Base */
.wa-message {
    clear: both;
    margin-bottom: 10px;
    max-width: 85%;
    position: relative;
}

/* User Messages (Right side, light gray) */
.wa-message.user {
    float: right;
}

.wa-message.user .wa-bubble {
    background-color: #dcf8c6;
    border-radius: 8px 0 8px 8px;
    margin-left: 40px;
    position: relative;
}

.wa-message.user .wa-bubble::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    border: 8px solid transparent;
    border-left-color: #dcf8c6;
    border-top-color: #dcf8c6;
}

/* Dark theme user messages */
.coal .wa-message.user .wa-bubble,
.navy .wa-message.user .wa-bubble,
.ayu .wa-message.user .wa-bubble,
.dark .wa-message.user .wa-bubble {
    background-color: #005c4b;
}

.coal .wa-message.user .wa-bubble::after,
.navy .wa-message.user .wa-bubble::after,
.ayu .wa-message.user .wa-bubble::after,
.dark .wa-message.user .wa-bubble::after {
    border-left-color: #005c4b;
    border-top-color: #005c4b;
}

/* Bot Messages (Left side, white) */
.wa-message.bot {
    float: left;
}

.wa-message.bot .wa-bubble {
    background-color: #ffffff;
    border-radius: 0 8px 8px 8px;
    margin-right: 40px;
    position: relative;
}

.wa-message.bot .wa-bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    border: 8px solid transparent;
    border-right-color: #ffffff;
    border-top-color: #ffffff;
}

/* Dark theme bot messages */
.coal .wa-message.bot .wa-bubble,
.navy .wa-message.bot .wa-bubble,
.ayu .wa-message.bot .wa-bubble,
.dark .wa-message.bot .wa-bubble {
    background-color: #202c33;
}

.coal .wa-message.bot .wa-bubble::before,
.navy .wa-message.bot .wa-bubble::before,
.ayu .wa-message.bot .wa-bubble::before,
.dark .wa-message.bot .wa-bubble::before {
    border-right-color: #202c33;
    border-top-color: #202c33;
}

/* Bubble Content */
.wa-bubble {
    padding: 8px 12px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.wa-bubble p {
    margin: 0;
    line-height: 1.4;
    color: #303030;
    word-wrap: break-word;
}

/* Dark theme text */
.coal .wa-bubble p,
.navy .wa-bubble p,
.ayu .wa-bubble p,
.dark .wa-bubble p {
    color: #e9edef;
}

/* Timestamp */
.wa-time {
    font-size: 11px;
    color: #8696a0;
    text-align: right;
    margin-top: 4px;
}

.wa-message.user .wa-time {
    color: #61a05e;
}

.coal .wa-message.user .wa-time,
.navy .wa-message.user .wa-time,
.ayu .wa-message.user .wa-time,
.dark .wa-message.user .wa-time {
    color: #8eb589;
}

/* Sender Name (for bot) */
.wa-sender {
    font-size: 12px;
    font-weight: 600;
    color: #06cf9c;
    margin-bottom: 2px;
}

/* Checkmarks for sent/delivered/read */
.wa-status {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
}

.wa-status.sent::after {
    content: '✓';
    color: #8696a0;
}

.wa-status.delivered::after {
    content: '✓✓';
    color: #8696a0;
}

.wa-status.read::after {
    content: '✓✓';
    color: #53bdeb;
}

/* System Messages */
.wa-system {
    text-align: center;
    margin: 15px 0;
    clear: both;
}

.wa-system span {
    background-color: #e1f2fb;
    color: #54656f;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.coal .wa-system span,
.navy .wa-system span,
.ayu .wa-system span,
.dark .wa-system span {
    background-color: #182229;
    color: #8696a0;
}

/* Date Separator */
.wa-date {
    text-align: center;
    margin: 15px 0;
    clear: both;
}

.wa-date span {
    background-color: #ffffff;
    color: #54656f;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.coal .wa-date span,
.navy .wa-date span,
.ayu .wa-date span,
.dark .wa-date span {
    background-color: #182229;
    color: #8696a0;
}

/* Typing Indicator */
.wa-typing {
    float: left;
    clear: both;
}

.wa-typing .wa-bubble {
    background-color: #ffffff;
    border-radius: 0 8px 8px 8px;
    padding: 12px 16px;
}

.coal .wa-typing .wa-bubble,
.navy .wa-typing .wa-bubble,
.ayu .wa-typing .wa-bubble,
.dark .wa-typing .wa-bubble {
    background-color: #202c33;
}

.wa-typing-dots {
    display: flex;
    gap: 4px;
}

.wa-typing-dots span {
    width: 8px;
    height: 8px;
    background-color: #8696a0;
    border-radius: 50%;
    animation: wa-typing 1.4s infinite ease-in-out;
}

.wa-typing-dots span:nth-child(1) { animation-delay: 0s; }
.wa-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.wa-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wa-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Clear float */
.wa-chat::after {
    content: '';
    display: table;
    clear: both;
}

/* Chat Header (optional) */
.wa-header {
    background-color: #075e54;
    color: white;
    padding: 10px 15px;
    margin: -20px -15px 15px -15px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.coal .wa-header,
.navy .wa-header,
.ayu .wa-header,
.dark .wa-header {
    background-color: #202c33;
}

.wa-header-avatar {
    width: 40px;
    height: 40px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.wa-header-info {
    flex: 1;
}

.wa-header-name {
    font-weight: 600;
    font-size: 16px;
}

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

/* Input Area (for visual reference) */
.wa-input {
    background-color: #f0f2f5;
    margin: 15px -15px -20px -15px;
    padding: 10px 15px;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.coal .wa-input,
.navy .wa-input,
.ayu .wa-input,
.dark .wa-input {
    background-color: #202c33;
}

.wa-input-field {
    flex: 1;
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 14px;
    color: #3b4a54;
}

.coal .wa-input-field,
.navy .wa-input-field,
.ayu .wa-input-field,
.dark .wa-input-field {
    background-color: #2a3942;
    color: #e9edef;
}

/* Code in messages */
.wa-bubble code {
    background-color: rgba(0, 0, 0, 0.08);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
}

.coal .wa-bubble code,
.navy .wa-bubble code,
.ayu .wa-bubble code,
.dark .wa-bubble code {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Links in messages */
.wa-bubble a {
    color: #027eb5;
    text-decoration: none;
}

.wa-bubble a:hover {
    text-decoration: underline;
}

.coal .wa-bubble a,
.navy .wa-bubble a,
.ayu .wa-bubble a,
.dark .wa-bubble a {
    color: #53bdeb;
}

/* Emoji sizing */
.wa-bubble .emoji {
    font-size: 20px;
}

/* Media messages placeholder */
.wa-media {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 40px 60px;
    text-align: center;
    color: #8696a0;
    font-size: 12px;
    margin-bottom: 4px;
}

.wa-media::before {
    content: '📷';
    display: block;
    font-size: 24px;
    margin-bottom: 4px;
}

/* Reply/Quote */
.wa-reply {
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 4px solid #06cf9c;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 13px;
}

.wa-reply-name {
    color: #06cf9c;
    font-weight: 600;
    font-size: 12px;
}

.wa-reply-text {
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coal .wa-reply,
.navy .wa-reply,
.ayu .wa-reply,
.dark .wa-reply {
    background-color: rgba(255, 255, 255, 0.05);
}

.coal .wa-reply-text,
.navy .wa-reply-text,
.ayu .wa-reply-text,
.dark .wa-reply-text {
    color: #8696a0;
}