/**
 * Ghost Chat Mobile Styles
 */

/* Mobile optimizations */
@media only screen and (max-width: 768px) {
    /* Chat container */
    .ghost-chat-container {
        width: 100%;
        max-width: 100%;
        height: 80vh;
        bottom: 0;
        right: 0;
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
    }
    
    /* Chat trigger button */
    .ghost-chat-trigger {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    
    /* Enhance tap targets */
    .ghost-chat-trigger svg,
    .ghost-chat-close,
    .ghost-chat-clear,
    #ghost-chat-send {
        transform: scale(1.2);
    }
    
    /* Input area */
    .ghost-chat-input {
        padding: 15px;
    }
    
    #ghost-chat-input {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px 15px;
    }
    
    /* Messages */
    .ghost-message {
        max-width: 85%;
        margin-bottom: 12px;
    }
    
    /* Active state for better touch feedback */
    .mobile-touch-active {
        transform: scale(0.95);
        opacity: 0.9;
    }
    
    /* Improve scroll behavior */
    .ghost-chat-messages {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Full screen when open */
    .ghost-chat-container.is-open {
        height: 100vh;
        border-radius: 0;
    }
    
    /* Adjust header for mobile */
    .ghost-chat-header {
        padding: 15px;
    }
    
    /* Typing indicator */
    .ghost-typing {
        margin-bottom: 15px;
    }
}