/* style.css - Styles for personal chat website */

body {
    font-family: sans-serif;
    margin: 0; /* Reset default body margin */
    padding: 0;
    background-color: #f4f4f4; /* Light background */
    color: #333; /* Darker text for readability */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure full viewport height */
}

.container {
    width: 80%;
    max-width: 960px; /* Increased max-width for larger screens */
    margin: 20px auto; /* Center container */
    padding: 20px;
    background-color: #fff; /* White container background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    flex-grow: 1; /* Allow container to grow and fill space */
    display: flex;
    flex-direction: column; /* Stack content vertically */
}

h2 {
    color: #007bff; /* Primary color for headings */
    margin-top: 0; /* Remove top margin for headings inside container */
    margin-bottom: 20px;
    text-align: center; /* Center align headings */
}

#messages {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ddd; /* Lighter border */
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #f9f9f9; /* Slightly off-white message area */
    flex-grow: 1; /* Allow messages area to take available space */
}

.message {
    padding: 10px;
    border-bottom: 1px dotted #eee;
    word-wrap: break-word; /* Break long words to prevent overflow */
}

.message:last-child {
    border-bottom: none;
}

.device-Desktop { color: blue; }
.device-Phone { color: green; }
.device-Tablet { color: purple; }

.message-input-area {
    display: flex;
    gap: 10px; /* Spacing between input and button */
}

#message-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    background-color: #007bff; /* Primary button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* Login Page Specific Styles */
.login-container {
    max-width: 400px;
    margin: 100px auto; /* Center login form vertically and horizontally */
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow for login box */
}

.login-container h2 {
    margin-bottom: 30px;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #555; /* Slightly darker label text */
}

.login-container input[type="text"],
.login-container input[type="password"] {
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.login-container input[type="submit"] {
    font-size: 18px;
    padding: 12px 25px;
}

.login-container p.error {
    color: #dc3545; /* Error message color (red) */
    margin-bottom: 15px;
}

/* style.css - Add styles for chat images */
.chat-image {
    max-width: 200px; /* Adjust max width as needed */
    max-height: 200px; /* Adjust max height as needed */
    display: block; /* Make image a block-level element */
    margin-bottom: 10px; /* Add some margin below images */
    border-radius: 5px; /* Optional: Rounded corners for images */
    box-shadow: 2px 2px 5px #ddd; /* Optional: Subtle shadow for images */
}

/* "Show all" link style in chat */
.show-all-link {
    color: #007bff; /* Link color */
    text-decoration: none;
    font-size: 0.9em;
    margin-left: 5px;
}

.show-all-link:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Styles for full_message.php page */
.full-message-container {
    max-width: 800px; /* Adjust max width as needed */
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.full-message-container h2 {
    text-align: left; /* Align heading to the left on full message page */
    margin-bottom: 20px;
}

.full-message-content {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.full-message-text {
    white-space: pre-wrap; /* Preserve line breaks and spaces, wrap text */
    font-family: monospace; /* Optional: Monospace font for full message text */
}

/* style.css - Add styles for message text content to preserve newlines */

.message-text-content {
    white-space: pre-wrap; /* Preserve whitespace and line breaks */
}

/* style.css - Add styles for download icon */

.download-icon {
    cursor: pointer;
    margin-left: 5px;
    font-size: 0.9em;
    color: #777;
    vertical-align: middle;
    text-decoration: none; /* Remove default link underline */
}

.download-icon:hover {
    color: #333;
    text-decoration: underline; /* Add underline on hover for download link */
}

/* style.css - Add styles for file download links */

.file-download-link {
    color: #007bff; /* Link color */
    text-decoration: none;
    font-size: 1em;
    margin-right: 10px; /* Add some spacing between link and icon */
}

.file-download-link:hover {
    text-decoration: underline; /* Underline on hover */
}

/* style.css - Add styles for filename display */

.file-name-display {
    font-size: 1em;
    margin-right: 5px; /* Space between filename and download icon */
    color: #333; /* Darker color for filename */
    vertical-align: middle; /* Align vertically with download icon */
}

/* Responsive Design - Media Queries */

/* For smaller screens (e.g., mobile) */
/* style.css - Inside @media (max-width: 768px) - Mobile styles (Revised Settings Page Fix) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        overflow-x: hidden; /* Prevent horizontal scroll on body */
    }
    .container {
        width: 95%;
        margin: 10px auto;
        padding: 15px;
    }
    h2 {
        font-size: 1.8em;
        margin-bottom: 15px; /* Slightly reduced bottom margin for headings on mobile */
    }
    #messages {
        font-size: 14px;
    }
    #message-input, button {
        font-size: 16px;
        padding: 12px;
    }
    .login-container {
        width: 90%;
        max-width: none;
        margin: 20px auto;
        padding: 20px;
    }
    .login-container input[type="text"],
    .login-container input[type="password"] {
        font-size: 16px;
        padding: 12px;
    }
    .message-input-area {
        flex-direction: column;
    }
    #message-input {
        margin-bottom: 10px;
    }

    /* Settings Page Specific Mobile Styles (Revised) */
    .settings-container {
        width: 100%; /* Take full width on mobile */
        max-width: 100%; /* Ensure it doesn't exceed screen width */
        margin: 0; /* Remove margins, let container take full width */
        padding: 20px 15px; /* Reduce horizontal padding slightly */
        box-sizing: border-box; /* Include padding and border in width calculation - IMPORTANT */
    }

    .settings-container h2 {
        font-size: 2em;
        text-align: left; /* Revert heading text alignment to left for better mobile layout */
        margin-bottom: 15px; /* Adjust bottom margin */
    }

    .settings-container .setting-option {
        padding: 15px; /* Slightly reduce padding inside setting options */
        margin-bottom: 15px;
        box-sizing: border-box; /* Ensure padding is included in width calculation */
    }

    .settings-container .setting-option h3 {
        font-size: 1.4em; /* Slightly smaller setting option titles */
    }

    .settings-container .setting-option p,
    .settings-container .setting-option ul,
    .settings-container .setting-option li {
        font-size: 1em; /* Revert paragraph and list font size to base mobile size */
    }

    .settings-container .setting-option button,
    .secondary-button-link {
        font-size: 1em; /* Revert button and link font size to base mobile size */
        padding: 10px 20px; /* Revert button and link padding to standard size */
    }
}

/* For very small screens (e.g., very narrow phones) */
@media (max-width: 480px) {
    .container {
        padding: 10px; /* Even less padding on very small screens */
    }
    .login-container {
        padding: 15px; /* Adjust login padding on very small screens */
    }
}

/* style.css - Add styles for copy icon (optional) */
.copy-icon {
    cursor: pointer; /* Change cursor to pointer on hover */
    margin-left: 5px; /* Add some spacing between message text and icon */
    font-size: 0.9em; /* Slightly smaller icon size */
    color: #777; /* Gray color for the icon */
    vertical-align: middle; /* Align icon vertically with text */
}

.copy-icon:hover {
    color: #333; /* Darker color on hover */
}

/* style.css - Add button-link class */
.button-link {
    display: inline-block; /* Or block if you want it to take full width like in settings.php */
    padding: 10px 20px;
    background-color: #007bff; /* Primary button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    font-size: inherit; /* Inherit font-size to match surrounding text */
}

.button-link:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* style.css - Add secondary-button-link class */
.secondary-button-link {
    display: inline-block; /* Or block if you want it to take full width like in settings.php */
    padding: 10px 20px;
    background-color: #777; /* Gray background color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    font-size: inherit; /* Inherit font-size to match surrounding text */
}

.secondary-button-link:hover {
    background-color: #555; /* Darker gray on hover */
}

/* Settings Page Styles */
.settings-container {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.settings-container h2 {
    text-align: left; /* Align settings heading to the left */
    margin-bottom: 20px;
}

.settings-container .setting-option {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.settings-container .setting-option h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.settings-container .setting-option p {
    margin-bottom: 15px;
    color: #666;
}

.settings-container .setting-option button {
    background-color: #dc3545; /* Red for delete buttons */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.settings-container .setting-option button:hover {
    background-color: #c82333; /* Darker red on hover */
}