/* Light Theme for Video Watch Earning Support */
:root {
    --wa-teal: #008069;
    --wa-teal-dark: #075e54;
    --wa-teal-light: #128c7e;
    --wa-green: #25d366;
    --wa-bg-light: #efeae2;
    --wa-panel-header: #008069;
    --wa-outgoing-light: #d9fdd3;
    --wa-incoming-light: #ffffff;
    --wa-text-primary: #111b21;
    --wa-text-secondary: #667781;
    --wa-border: #e2e8f0;
    --wa-blue-tick: #53bdeb;
    --wa-verified-blue: #1d9bf0;
}

html, body {
    background-color: #e5ddd5 !important;
    color: #111b21 !important;
}

.chat-app-container {
    background: #efeae2 !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.15) !important;
    border: 1px solid #d1d7db !important;
}

/* Header */
.chat-header {
    background-color: #008069 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

.chat-header .agent-title {
    color: #ffffff !important;
}

.chat-header .agent-status-text {
    color: rgba(255, 255, 255, 0.88) !important;
}

.chat-header .agent-status-text.typing {
    color: #d9fdd3 !important;
    font-weight: 600 !important;
}

.chat-header .verified-badge {
    color: #ffd279 !important;
}

.chat-header .btn-icon {
    color: #ffffff !important;
}

.chat-header .btn-icon:hover {
    background: rgba(255,255,255,0.18) !important;
}

.status-dot {
    border-color: #008069 !important;
}

/* Notification & PWA Install Banner */
#clientNotifBanner, #pwaInstallBanner {
    background: #e7f8f5 !important;
    border-bottom: 1px solid #bfece4 !important;
    color: #005c4b !important;
}

#btnAllowClientNotif, #btnTriggerInstall {
    background: #008069 !important;
    color: #ffffff !important;
}

/* Messages Area */
.chat-messages {
    background-color: #efeae2 !important;
    background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 0) !important;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2) !important;
}

.date-divider {
    background: #ffffff !important;
    color: #54656f !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

.security-badge {
    background: #ffeecd !important;
    color: #54656f !important;
    border: 1px solid #fae29f !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* Message Bubbles */
.bubble {
    box-shadow: 0 1px 1px rgba(0,0,0,0.12) !important;
}

.message-row.outgoing .bubble {
    background-color: #d9fdd3 !important;
    color: #111b21 !important;
}

.message-row.incoming .bubble {
    background-color: #ffffff !important;
    color: #111b21 !important;
    border: 1px solid #e9edef !important;
}

.bubble-meta {
    color: #667781 !important;
}

.tick-icon {
    color: #8696a0 !important;
}

.tick-icon.seen {
    color: #53bdeb !important;
}

/* Typing Indicator */
.typing-bubble {
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    border: 1px solid #e9edef !important;
}

.typing-dot {
    background: #8696a0 !important;
}

/* Input Bar */
.chat-input-bar {
    background-color: #f0f2f5 !important;
    border-top: 1px solid #e2e8f0 !important;
}

.input-box-wrapper {
    background-color: #ffffff !important;
    border: 1px solid #d1d7db !important;
}

.chat-textarea {
    color: #111b21 !important;
}

.chat-textarea::placeholder {
    color: #8696a0 !important;
}

.chat-input-bar .btn-icon {
    color: #54656f !important;
}

.action-btn-circle {
    background-color: #008069 !important;
    color: #ffffff !important;
}

.recording-bar {
    background: #f0f2f5 !important;
}

.btn-cancel-rec {
    color: #54656f !important;
}

/* Attachments */
.file-bubble-content {
    background: rgba(0,0,0,0.04) !important;
    color: #111b21 !important;
}

.file-title {
    color: #111b21 !important;
}

.file-size {
    color: #667781 !important;
}

.voice-slider {
    background: rgba(0,0,0,0.15) !important;
}

.voice-time-text {
    color: #667781 !important;
}

/* PWA Header Install Button */
.btn-install-pwa {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-install-pwa:hover {
    background: rgba(255,255,255,0.3);
}