/* Wrapper for messages and the form */
.messages-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 500px;
    border: 2px solid #FF80F4;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px #FF80F4;
    overflow: hidden;
  }
  
  /* Scrollable container for messages */
  .messages-container {
    max-height: 300px; /* Adjust the height as needed */
    overflow-y: scroll; /* Enable vertical scrolling */
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #FF80F4;
    border-radius: 12px;
    box-shadow: 0 0 10px #FF80F4;
  }
  
/* Scrollbar Styling */
.messages-container::-webkit-scrollbar {
    width: 8px;
  }
  
  .messages-container::-webkit-scrollbar-thumb {
    background-color: #FF80F4;
    border-radius: 4px;
  }
  
  .messages-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
  }


  /* Empty state for messages */
  .no-messages {
    text-align: center;
    color: #FFFFFF;
    font-style: italic;
    margin: 1rem 0;
  }
  
  /* Individual message item */
  .message-item {
    position: relative;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid #FF80F4;
    color: #FFFFFF;
  }
  
/* Sender Name Styling */
.message-author {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .message-author.my-message {
    color: #80FFEA; /* Your messages */
  }
  
  .message-author.other-message {
    color: #FF80F4; /* Other people's messages */
  }

  /* Message Content */
.message-content {
    color: #FFFFFF;
    margin-bottom: 0.5rem;
  }
  
  /* Attachments */
  .message-attachment {
    max-width: 100%;
    max-height: 200px;
    margin-top: 0.5rem;
    border: 1px solid #80FFEA;
    border-radius: 4px;
  }
  
  .message-attachment-link {
    color: #80FFEA;
    text-decoration: none;
    margin-top: 0.5rem;
    display: block;
  }
  

  
  .new-message-form .input-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
  }
  
  .new-message-form textarea {
    flex-grow: 1;
    resize: none;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    height: 40px;
  }
  
  .new-message-form textarea::placeholder {
    color: #80FFEA;
    font-size: 0.8em;
  }
  
  .new-message-form .file-upload-label {
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 0.5rem;
    color: #80FFEA;
  }
  
  .new-message-form input[type="file"] {
    display: none;
  }
  
  .new-message-form button {
    margin-left: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    background: #FF80F4;
    color: black;
    font-size: 1em;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .new-message-form button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #FF80F4, 0 0 30px #FF80F4;
  }
  
/* Delete Button as an Icon */
.delete-button {
    position: absolute;
    top: 5px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #FF4F4F;
    transition: transform 0.2s, color 0.2s;
  }
  
  .delete-button:hover {
    color: #FF8080;
    transform: scale(1.2);
  }
  

  /* Wrapper for Messages and Form */
.messages-wrapper {
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid #FF80F4;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px #FF80F4;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 500px;
  }
  

  /* Form Styling */
  .new-message-form {
    display: flex;
    align-items: center;
  }
  
  .new-message-form textarea {
    flex-grow: 1;
    resize: none;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    height: 40px;
    margin-right: 0.5rem;
  }
  
  .new-message-form textarea::placeholder {
    color: #80FFEA;
  }
  
  .new-message-form input[type="file"] {
    display: none;
  }
  
  .new-message-form .file-upload-label {
    cursor: pointer;
    font-size: 1.2rem;
    color: #80FFEA;
    margin-right: 0.5rem;
  }
  
  .new-message-form button {
    background: #FF80F4;
    color: black;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .new-message-form button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #FF80F4;
  }
  
  /* Collapsible Content */
.collapsible-content {
    padding: 1rem;
    border: 2px solid #FF80F4;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px #FF80F4;
  }
  
  /* Wrapper for Messages and Form */
  .messages-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%; /* Matches the width of the collapsible */
    max-height: 500px;
    overflow: hidden; /* Ensures that messages stay within the container */
  }
  
  /* Messages List */
  .messages-container {
    flex-grow: 1;
    overflow-y: scroll;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #FF80F4;
    border-radius: 8px;
  }
  
  /* No Messages Placeholder */
  .no-messages {
    text-align: center;
    color: #FFFFFF;
    font-style: italic;
    margin: 1rem 0;
  }
  
  /* Messages Section */
.messages-container {
    margin-top: 1rem;
  }
  
  /* Individual Message */
  .message-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid #FF80F4;
    color: #FFFFFF;
  }
  
  /* Sender Name */
  .message-author {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .message-author.my-message {
    color: #80FFEA; /* Current guest's messages */
  }
  
  .message-author.other-message {
    color: #FF80F4; /* Other guests' messages */
  }
  
  /* Message Content */
  .message-content {
    color: #FFFFFF;
    margin-bottom: 0.5rem;
  }
  
  /* Message Timestamp */
  .message-timestamp {
    font-size: 0.8rem;
    color: #CCCCCC;
    margin-top: 0.5rem;
  }
  
  /* Attachments */
  .message-attachment {
    max-width: 100%;
    max-height: 200px;
    margin-top: 0.5rem;
    border: 1px solid #80FFEA;
    border-radius: 4px;
  }
  
  .message-attachment-link {
    color: #80FFEA;
    text-decoration: none;
    margin-top: 0.5rem;
    display: block;
  }
  
  /* Form Container */
  .message-form-container {
    border: 2px solid #FF80F4;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  /* Message Form */
  .new-message-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
  }
  
  .new-message-form textarea {
    flex-grow: 1;
    resize: none;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.8);
    height: 40px;
    outline: none;
  }
  
  .new-message-form textarea::placeholder {
    color: #80FFEA;
  }
  
  /* File Upload Button */
  .new-message-form .file-upload-label {
    font-size: 1.5rem;
    cursor: pointer;
    color: #80FFEA;
  }
  
  .new-message-form button {
    background: #FF80F4;
    color: black;
    font-size: 0.9rem;
    font-family: 'Press Start 2P', monospace;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .new-message-form button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #FF80F4;
  }
  
  

  /* Enhanced Message Form */
.enhanced-message-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border: 2px solid #FF80F4;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
  }
  
  /* Input container inside the form */
  .enhanced-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem; /* Adds spacing between elements */
  }
  
  /* Textarea for message content */
  .enhanced-textarea {
    flex-grow: 1; /* Takes up the available space */
    height: 40px;
    padding: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF80F4;
    border-radius: 4px;
    resize: none;
    outline: none;
  }
  
  .enhanced-textarea::placeholder {
    color: #80FFEA;
    font-size: 0.8rem;
  }
  
  /* File upload button */
  .enhanced-file-upload-label {
    font-size: 1.5rem;
    cursor: pointer;
    color: #80FFEA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid #80FFEA;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .enhanced-file-upload-label:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px #80FFEA;
  }
  
  .enhanced-file-input {
    display: none; /* Hide the default file input */
  }
  
  /* Submit button */
  .enhanced-submit-button {
    background: #FF80F4;
    color: black;
    font-size: 0.9rem;
    font-family: 'Press Start 2P', monospace;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .enhanced-submit-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #FF80F4;
  }
  
 /* Improved Form Container */
.improved-message-form {
    width: 100%; /* Ensures the form matches the container's width */
    box-sizing: border-box; /* Includes padding/borders in width calculations */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Adds spacing between elements */
    border: 2px solid #FF80F4;
    border-radius: 8px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden; /* Prevents children from spilling out */
  }
  
  /* Input Container for Textarea, File Upload, and Submit Button */
  .improved-input-container {
    display: flex;
    flex-wrap: wrap; /* Allows elements to wrap if they don’t fit */
    gap: 0.5rem; /* Space between elements */
    justify-content: space-between; /* Distribute elements evenly */
    align-items: center;
    width: 100%; /* Ensures the input container doesn't overflow */
    box-sizing: border-box; /* Include padding/border in width */
  }
  
  /* Textarea Styling */
  .improved-textarea {
    flex-grow: 1; /* Take up available space */
    width: 100%; /* Prevent overflow */
    min-width: 0; /* Prevent unintended stretching */
    height: 40px;
    resize: none; /* Prevent resizing */
    border: 1px solid #FF80F4;
    border-radius: 4px;
    padding: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.8);
    outline: none;
    box-sizing: border-box; /* Ensure proper width calculation */
  }
  
  .improved-textarea::placeholder {
    color: #80FFEA;
    font-size: 0.8rem;
  }
  
  /* File Upload Wrapper */
  .file-upload-wrapper {
    display: flex;
    align-items: center;
  }
  
  .improved-file-upload-label {
    font-size: 1.5rem;
    cursor: pointer;
    color: #80FFEA;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #80FFEA;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    transition: transform 0.3s, box-shadow 0.3s;
    flex-shrink: 0; /* Prevent the label from shrinking */
  }
  
  .improved-file-upload-label:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px #80FFEA;
  }
  
  .improved-file-input {
    display: none; /* Hide the default file input */
  }
  
  /* Submit Button */
  .improved-submit-button {
    background: #FF80F4;
    color: black;
    font-size: 0.9rem;
    font-family: 'Press Start 2P', monospace;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    flex-shrink: 0; /* Prevent shrinking on small screens */
  }
  
  .improved-submit-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #FF80F4;
  }
  
  /* Responsive Design: Mobile Fixes */
  @media (max-width: 768px) {
    .improved-input-container {
      flex-direction: column; /* Stack elements vertically */
      align-items: stretch; /* Make elements fill the container */
      gap: 0.75rem; /* Increase spacing on mobile */
    }
  
    .improved-textarea {
      width: 100%; /* Full width for small screens */
    }
  
    .file-upload-wrapper {
      align-self: flex-start; /* Align file upload button to the left */
    }
  
    .improved-submit-button {
      align-self: flex-end; /* Align submit button to the right */
    }
  }

 /* Optimized Form Container */
.optimized-message-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 2px solid #FF80F4;
    border-radius: 8px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    margin-bottom: 1em;
  }
  
  /* Input Container */
  .optimized-input-container {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    gap: 0.5rem;
    align-items: center;
    width: 100%; /* Ensure it matches the form container */
    box-sizing: border-box;
  }
  
  /* Textarea Styling */
  .optimized-textarea {
    flex-grow: 1; /* Allow the textarea to take up as much space as possible */
    min-width: 0; /* Prevent overflow */
    height: 40px;
    resize: none;
    border: 1px solid #FF80F4;
    border-radius: 4px;
    padding: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.8);
    outline: none;
    box-sizing: border-box; /* Include padding in width calculation */
  }
  
  .optimized-textarea::placeholder {
    color: #80FFEA;
    font-size: 0.8rem;
  }
  
  /* File Upload Wrapper */
  .file-upload-wrapper {
    display: flex;
    align-items: center;
  }
  
  .optimized-file-upload-label {
    font-size: 1.5rem;
    cursor: pointer;
    color: #80FFEA;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #80FFEA;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    transition: transform 0.3s, box-shadow 0.3s;
    flex-shrink: 0; /* Prevent shrinking */
  }
  
  .optimized-file-upload-label:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px #80FFEA;
  }
  
  .optimized-file-input {
    display: none; /* Hide the default file input */
  }
  
  /* Submit Button */
  .optimized-submit-button {
    background: #FF80F4;
    color: black;
    font-size: 0.9rem;
    font-family: 'Press Start 2P', monospace;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    flex-shrink: 0; /* Prevent shrinking on small screens */
  }
  
  .optimized-submit-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #FF80F4;
  }
  
  /* Responsive Design: Mobile Adjustments */
  @media (max-width: 768px) {
    .optimized-input-container {
      flex-direction: column; /* Stack rows vertically */
      gap: 0.75rem;
    }
  
    .optimized-textarea {
      width: 100%; /* Full width for the textarea */
    }
  
    /* Row for the attachment and submit button */
    .file-upload-wrapper,
    .optimized-submit-button {
      display: inline-flex; /* Ensure they are inline in mobile */
      justify-content: center;
      align-items: center;
    }
  
    .file-upload-wrapper {
      margin-right: 1rem; /* Add spacing between attach icon and button */
    }
  
    .optimized-submit-button {
      flex-shrink: 0;
    }
  
    /* Align attachment icon and submit button in a row */
    .file-upload-wrapper + .optimized-submit-button {
      margin-left: 0;
    }
  }
  
  
  .bulk-message-form {
    margin: 20px auto;
    max-width: 800px;
    font-family: 'Press Start 2P', monospace;
  }
  
  .bulk-message-form table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  
  .bulk-message-form th, .bulk-message-form td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  
  .bulk-message-form th {
    background-color: #f4f4f4;
  }
  
  .bulk-message-form input[type="checkbox"] {
    transform: scale(1.5);
    margin: 0;
  }
  
  .bulk-message-form textarea {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-family: inherit;
  }
  
  .bulk-message-form .rsvp-button {
    background-color: #80ffea;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    transition: all 0.3s;
  }
  
  .bulk-message-form .rsvp-button:hover {
    background-color: #ff80f4;
    transform: scale(1.05);
  }
  
  @media (max-width: 600px) {
    .member-row {
      flex-direction: column !important;
      align-items: flex-start !important;
    }
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

*= require_tree