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

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #0a0a0a;
    display: flex;
    justify-content: center;
}

.chat-wrapper {
    width: 100%;
    max-width: 500px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.chat-box {
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

/* Header - WhatsApp Style */
.header {
    background: #075e54;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.avatar-container {
    position: relative;
}

.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #25d366;
    border: 2px solid #075e54;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #075e54;
}

.header-info h1 {
    font-size: 16px;
    margin: 0 0 2px 0;
    font-weight: 500;
}

.header-info p {
    font-size: 12px;
    margin: 0;
    opacity: 0.9;
}

/* Notification Banner */
.notification-banner {
    background: #fef7e6;
    border-bottom: 1px solid #f4d090;
    padding: 8px 12px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.notify-btn {
    background: #128c7e;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
    max-width: 350px;
    justify-content: center;
}

.notify-btn:hover {
    background: #0f7569;
}

.notify-btn:active {
    transform: scale(0.98);
}

.notify-btn svg {
    flex-shrink: 0;
}

/* Messages Container */
.messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23e5ddd5" width="100" height="100"/><path fill="%23d9d9d9" opacity="0.06" d="M20 10L30 0M30 10L40 0M40 10L50 0M50 10L60 0M60 10L70 0M70 10L80 0M80 10L90 0M90 10L100 0M0 20L10 10M10 20L20 10M20 20L30 10M30 20L40 10M40 20L50 10M50 20L60 10M60 20L70 10M70 20L80 10M80 20L90 10M90 20L100 10M0 30L10 20M10 30L20 20M20 30L30 20M30 30L40 20M40 30L50 20M50 30L60 20M60 30L70 20M70 30L80 20M80 30L90 20M90 30L100 20M0 40L10 30M10 40L20 30M20 40L30 30M30 40L40 30M40 40L50 30M50 40L60 30M60 40L70 30M70 40L80 30M80 40L90 30M90 40L100 30M0 50L10 40M10 50L20 40M20 50L30 40M30 50L40 40M40 50L50 40M50 50L60 40M60 50L70 40M70 50L80 40M80 50L90 40M90 50L100 40M0 60L10 50M10 60L20 50M20 60L30 50M30 60L40 50M40 60L50 50M50 60L60 50M60 60L70 50M70 60L80 50M80 60L90 50M90 60L100 50M0 70L10 60M10 70L20 60M20 70L30 60M30 70L40 60M40 70L50 60M50 70L60 60M60 70L70 60M70 70L80 60M80 70L90 60M90 70L100 60M0 80L10 70M10 80L20 70M20 80L30 70M30 80L40 70M40 80L50 70M50 80L60 70M60 80L70 70M70 80L80 70M80 80L90 70M90 80L100 70M0 90L10 80M10 90L20 80M20 90L30 80M30 90L40 80M40 90L50 80M50 90L60 80M60 90L70 80M70 90L80 80M80 90L90 80M90 90L100 80M0 100L10 90M10 100L20 90M20 100L30 90M30 100L40 90M40 100L50 90M50 100L60 90M60 100L70 90M70 100L80 90M80 100L90 90M90 100L100 90"/></svg>');
    background-color: #e5ddd5;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    min-height: 0;
}

.welcome-msg {
    text-align: center;
    padding: 16px 12px;
    color: #667;
    font-size: 14px;
}

.msg {
    display: flex;
    margin-bottom: 6px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msg.user {
    justify-content: flex-end;
}

.msg.bot {
    justify-content: flex-start;
}

.msg-bubble {
    max-width: 75%;
    padding: 6px 10px 8px 10px;
    border-radius: 7.5px;
    line-height: 1.35;
    font-size: 14px;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
}

.msg.user .msg-bubble {
    background: #d9fdd3;
    color: #000;
    border-radius: 7.5px;
    border-top-right-radius: 0;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.msg.bot .msg-bubble {
    background: white;
    color: #000;
    border-radius: 7.5px;
    border-top-left-radius: 0;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.msg-bubble a {
    color: #039be5;
    text-decoration: none;
}

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

.chat-image {
    display: block;
    max-width: 100%;
    max-height: 250px;
    border-radius: 6px;
    margin-bottom: 4px;
    object-fit: cover;
}

/* Typing Indicator */
.typing-container {
    padding: 4px 8px;
    background: transparent;
    flex-shrink: 0;
}

.typing-bubble {
    display: inline-flex;
    gap: 3px;
    padding: 8px 12px;
    background: white;
    border-radius: 7.5px;
    border-top-left-radius: 0;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.typing-bubble span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #90949c;
    animation: bounce 1.4s infinite;
}

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

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

@keyframes bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Image Preview */
.image-preview-container {
    padding: 8px;
    background: transparent;
    flex-shrink: 0;
}

.image-preview-wrapper {
    position: relative;
    display: inline-block;
    max-width: 180px;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#imagePreview {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: cover;
}

.remove-image {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.remove-image:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Input Container - WhatsApp Style */
.input-container {
    padding: 5px 8px 8px 8px;
    background: #f0f0f0;
    border-top: 1px solid #dadada;
    flex-shrink: 0;
}

.input-container form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.attach-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.attach-btn:hover:not(:disabled) {
    color: #075e54;
    background: rgba(7, 94, 84, 0.1);
}

.attach-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#messageInput {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 21px;
    font-size: 14.5px;
    outline: none;
    background: white;
    font-family: inherit;
}

#messageInput:focus {
    box-shadow: 0 0 0 2px rgba(7, 94, 84, 0.1);
}

#sendButton {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: none;
    border-radius: 50%;
    background: #075e54;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#sendButton:hover:not(:disabled) {
    background: #128c7e;
    transform: scale(1.05);
}

#sendButton:active:not(:disabled) {
    transform: scale(0.95);
}

#sendButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Scrollbar - WhatsApp Style */
.messages-container::-webkit-scrollbar {
    width: 6px;
}

.messages-container::-webkit-scrollbar-track {
    background: transparent;
}

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

.messages-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Desktop - WhatsApp Style */
@media (min-width: 769px) {
    body {
        background: #0a0a0a;
        padding: 20px;
    }
    
    .chat-wrapper {
        max-width: 500px;
        height: calc(100vh - 40px);
        max-height: 720px;
    }

    .chat-box {
        border-radius: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
}

/* Mobile - Full Screen */
@media (max-width: 768px) {
    .chat-wrapper {
        max-width: 100%;
    }
    
    .chat-box {
        border-radius: 0;
    }
    
    .header {
        padding: 8px 12px;
        padding-top: calc(8px + env(safe-area-inset-top));
    }
    
    .messages-container {
        padding: 6px;
    }
}