/**
 * Chat Widget Mode Overrides
 * Applied when chat page is loaded in widget iframe
 * v20251229a
 */

/* Widget mode: Hide standalone elements */
body.widget-mode .chat-header {
    display: none !important;
}

body.widget-mode .claim-banner {
    display: none !important;
}

body.widget-mode .header-btn {
    display: none !important;
}

body.widget-mode .viva-login-btn {
    display: none !important;
}

/* Widget mode: Adjust chat area to fill iframe */
body.widget-mode {
    background: white;
    height: 100%;
    overflow: hidden;
}

body.widget-mode .chat-area {
    padding-top: 0;
    height: 100%;
}

body.widget-mode .messages-container {
    padding-top: 16px;
}

/* Widget mode: Input area fills width */
body.widget-mode .input-area {
    border-radius: 0;
    margin: 0;
    padding-bottom: calc(12px + var(--safe-area-bottom));
}

/* Widget mode: Hide powered by Viva badge in input area */
body.widget-mode .powered-by-viva {
    display: none !important;
}

/* Widget mode: Add subtle header with minimize/fullscreen controls */
body.widget-mode .widget-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--theme-gradient, linear-gradient(90deg, #E7000B 0%, #C10007 100%));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

body.widget-mode .widget-controls-business {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    min-width: 0;
}

body.widget-mode .widget-controls-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

body.widget-mode .widget-controls-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.widget-mode .widget-controls-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.widget-mode .widget-controls-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

body.widget-mode .widget-control-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s;
}

body.widget-mode .widget-control-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

body.widget-mode .widget-control-btn svg {
    width: 18px;
    height: 18px;
}

/* Widget mode: Welcome bubble adjustments */
body.widget-mode .welcome-bubble-container {
    padding-top: 8px;
}

/* Widget mode: Feedback panel adjustments */
body.widget-mode .feedback-panel {
    bottom: 0;
    border-radius: 16px 16px 0 0;
}

/* Widget mode: Lead panel adjustments */
body.widget-mode .lead-panel {
    bottom: 0;
    border-radius: 16px 16px 0 0;
}

/* Hide widget controls when NOT in widget mode */
body:not(.widget-mode) .widget-controls {
    display: none !important;
}