/* Specific component styles for WinaltChat */
/* Reviewer note: component rules here are narrowly scoped to avoid coupling
 * with viewport-specific behavior handled in chat-responsive.css.
 */

/* Amazon Button Component */
.ai-amazon-btn {
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ai-amazon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Launcher Button Component */
.ai-btn {
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Header Component */
.ai-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

/* Action Button Component */
.ai-action-btn { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
}

/* Messages Area Component */
.ai-messages { 
    background: var(--ai-background); 
}

/* Input Wrapper Component */
.ai-input-wrapper { 
    display: flex; 
    gap: 8px; 
    align-items: flex-end; 
}

.ai-input-wrapper textarea { 
    flex: 1;
    resize: none;
    overflow-y: auto;
    max-height: 120px;
    min-height: 40px;
    line-height: 1.4;
}

.ai-input-wrapper button { 
    border: none; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0;
}

/* Portal Button Component */
.portal-btn { 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0;
}