/*
   ===================================================================
   ||   css/components/chat_bubbles.css                           ||
   ||   Reusable Styles for All Chat Message Types                ||
   ===================================================================
*/

/* --- Chat Log Area Base (parent of message wrappers) --- */
/* This class can be applied to #group-chat-log, #embedded-chat-log, #message-chat-log etc. */
/* --- Chat Log Area Base (parent of message wrappers) --- */
/* In css/components/chat_bubbles.css */

.chat-log-area {
    display: flex;
    flex-direction: column;
    
    /* VVVV CHANGE THIS VALUE VVVV */
    /* This controls the main vertical space between message wrappers.
       It was 6px, let's try 2px for a tighter look. */
    gap: var(--chat-message-gap, var(--spacing-xs, 2px)); 
    /* ^^^^ CHANGE THIS VALUE ^^^^ */
    
    padding: 60px var(--spacing-md, 16px) 60px var(--spacing-md, 16px);
    overflow-y: auto;
    background-color: var(--chat-log-bg, var(--bg-white, #ffffff));
    scroll-behavior: smooth;
}
/* --- Wrapper for Each Message Unit (Avatar (optional) + Bubble) --- */
/* --- Wrapper for Each Message Unit (Avatar (optional) + Bubble) --- */
.chat-message-wrapper {
    display: flex;
    gap: var(--spacing-xs, 8px);
    max-width: 80%;         
    width: fit-content;     
    position: relative;
    /* ADDED: Gives the wrapper a stacking context so its children can appear on top */
    z-index: 1;
}
/* NEW: Container for all message bubbles from a single speaker turn */
.chat-message-bubble-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Default for connectors */
    gap: 3px; /* The small gap between consecutive bubbles */
}

/* For user messages, align the bubbles to the right within their container */
.user-wrapper .chat-message-bubble-container {
    align-items: flex-end;
}
.chat-message-wrapper.user-wrapper {
    align-self: flex-end; /* Aligns this wrapper to the right of .chat-log-area */
    flex-direction: row-reverse; /* Bubble first, then avatar (if shown) */
}

.chat-message-wrapper.connector-wrapper {
    align-self: flex-start; /* Aligns this wrapper to the left */
    flex-direction: row;
    position: relative; /* New: Needed for absolute positioning of avatar */
    /* New: Creates a permanent gutter for the avatar */
    padding-left: calc(var(--chat-bubble-avatar-size, 30px) + var(--spacing-xs, 8px)); 
}
/* --- Avatar Styling (if shown next to bubbles) --- */
/* HTML: <img class="chat-bubble-avatar" src="..."> */
.chat-bubble-avatar {
    width: var(--chat-bubble-avatar-size, 30px);
    height: var(--chat-bubble-avatar-size, 30px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--avatar-bg-fallback-light, #e0e0e0);
    
    /* --- NEW POSITIONING RULES --- */
    position: absolute;
    left: 0;
    bottom: 0; /* Aligns avatar to the bottom of the wrapper */
}

.chat-message-wrapper.has-avatar-right .chat-bubble-avatar { /* For user avatar if implemented */
    margin-left: var(--spacing-xs, 8px);
}
.clickable-chat-avatar { /* Add to avatar if it should open persona modal */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.clickable-chat-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px var(--focus-ring-light, rgba(0, 123, 255, 0.4));
}

/* --- The Chat Bubble Itself --- */
/* HTML: <div class="chat-message-ui user">...</div> or <div class="chat-message-ui connector">...</div> */
.chat-message-ui {
    padding: var(--chat-bubble-padding-y, 10px) var(--chat-bubble-padding-x, 14px);
    border-radius: 18px; /* Bubbly shape */
    line-height: 1.45;
    word-wrap: break-word;      /* Legacy */
    overflow-wrap: break-word;  /* Standard */
    min-width: 40px;            /* Prevent tiny bubbles for short replies */
    box-shadow: var(--chat-bubble-shadow, var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05)));
    max-width: 100%; /* Takes full width of its .chat-message-wrapper parent */
    box-sizing: border-box;
    position: relative; /* For sender name or other internal absolute elements */
    margin-right: 1rem;
    text-align: left; /* <<< THIS IS THE FIX */
}

/* User's Bubble */
.chat-message-wrapper.user-wrapper .chat-message-ui { /* More specific selector */
    background-color: var(--chat-bubble-user-bg, var(--primary-color, #007bff));
    color: var(--chat-bubble-user-text, var(--text-color-on-primary, white));
    border-bottom-right-radius: 6px; /* Tail effect */
}

/* Connector/AI Bubble (General) */
.chat-message-wrapper.connector-wrapper .chat-message-ui { /* More specific selector */
    background-color: var(--chat-bubble-connector-bg, var(--bg-alt-color, #e9ecef));
    color: var(--chat-bubble-connector-text, var(--text-color-default, #212529));
    border-bottom-left-radius: 6px; /* Tail effect */
    margin-left: 0.6rem;
}

/* Tutor Bubble (Specific style for tutors, e.g., in group chats) */
/* HTML: <div class="chat-message-ui connector tutor">...</div> */
.chat-message-wrapper.connector-wrapper .chat-message-ui.tutor {
    background-color: var(--chat-bubble-tutor-bg, var(--secondary-color-x-light, #e0f2fe));
    color: var(--chat-bubble-tutor-text, var(--secondary-color-dark, #0c5464));
    /* border: 1px solid var(--secondary-color-light, #b6e2f9); */ /* Optional border */
}
.modal-content .chat-message-text{
  align-items: left;

}
/* Sender Name (Primarily for Group Chat AI/Connector bubbles) */
/* HTML: <strong class="chat-message-sender-name">Sender:</strong> <span class="chat-message-text">...</span> */
/* Sender Name (Primarily for Group Chat AI/Connector bubbles) */
/* HTML: <strong class="chat-message-sender-name">Sender:</strong> <br> <span class="chat-message-text">...</span> */
/* NOTE: We now rely on a <br> tag inserted by the JS for line breaks, so we remove display:block and margin-bottom */
.chat-message-sender-name {
    font-weight: var(--font-weight-semibold, 600);
    font-size: 0.8em;
    /* display: block; -- REMOVED */
    /* margin-bottom: var(--spacing-xxs, 4px); -- REMOVED */
    color: var(--chat-sender-name-color, var(--text-color-muted, #6c757d));
}
/* User messages typically don't show sender name */
.chat-message-wrapper.user-wrapper .chat-message-sender-name { display: none; }

.chat-message-wrapper.connector-wrapper .chat-message-sender-name {
    color: var(--chat-sender-name-connector-color, var(--primary-color-dark, #0056b3));
}
.chat-message-wrapper.connector-wrapper .chat-message-ui.tutor .chat-message-sender-name {
    color: var(--chat-sender-name-tutor-color, var(--secondary-color-dark, #0c5464));
}

/* Message Text (actual content) */

.chat-message-text strong { font-weight: var(--font-weight-bold, 700); }
.chat-message-text em { font-style: italic; }


/* "Is Typing..." Bubble Styling */
/* HTML: <div class="chat-message-ui connector connector-thinking">...</div> */
.chat-message-ui.connector-thinking {
    color: var(--chat-typing-indicator-text, var(--text-color-muted, #6c757d));
    font-style: italic;
    background-color: var(--chat-typing-indicator-bg, var(--bg-alt-color-subtle, #f8f9fa));
    padding-top: 8px; padding-bottom: 8px; /* Slightly less vertical padding */
}
.chat-message-ui.connector-thinking::after { /* Animated ellipsis */
    content: '.';
    display: inline-block;
    animation: ellipsis-animation 1.4s infinite steps(3, end);
    position: relative; left: 1px;
}
@keyframes ellipsis-animation { 0% {content: '.';} 33% {content: '..';} 66% {content: '...';} }

/* Image within a chat bubble */
/* HTML: <img class="chat-message-image" src="..."> */
.chat-message-image {
    display: block;
    max-width: 100%;
    max-height: 250px;
    border-radius: 10px; /* Rounded, slightly less than bubble for inset look */
    margin-top: var(--spacing-xs, 6px); /* Space if there's a caption above */
    object-fit: contain; /* Show whole image without cropping, within max dimensions */
    background-color: var(--chat-image-bg-fallback, #f0f0f0); /* Fallback for transparent images */
    cursor: pointer; /* If images are zoomable */
}

/* --- System Messages & Call Events (Centred in chat log) --- */
.chat-message-wrapper.system-message-wrapper,
.system-event-wrapper { /* Shared wrapper for centered messages */
    align-self: center;
    max-width: 90%;
    width: auto; /* Let content decide width up to max-width */
    justify-content: center;
    margin-top: var(--spacing-sm, 10px);    /* More distinct spacing for system/event */
    margin-bottom: var(--spacing-sm, 10px);
}

/* System Messages (e.g., "AI is generating response...") */
/* HTML: <div class="chat-message-ui system-message">...</div> */
.chat-message-ui.system-message {
    background-color: transparent;
    color: var(--chat-system-message-text, var(--text-color-muted, #6c757d));
    text-align: center;
    font-style: italic;
    font-size: 0.85em;
    padding: var(--spacing-xxs, 4px) 0;
    box-shadow: none;
    border-radius: 0; /* Typically no bubble shape */
    width: 100%; /* Span full width of its .system-message-wrapper */
}
.chat-message-ui.system-message.error {
    color: var(--chat-system-error-text, var(--danger-color, #dc3545));
    font-weight: var(--font-weight-medium, 500);
    font-style: normal;
}

/* Call Event Messages */
/* HTML: <div class="call-event-message">...</div> (inside .system-event-wrapper) */
.call-event-message {
    color: var(--chat-call-event-text, var(--text-color-muted, #6c757d));
    font-size: 0.8em;
    text-align: center;
    max-width: 100%; /* Takes width of its wrapper */
    display: flex;
    flex-direction: column; /* Stack main text/details and actions */
    align-items: center;
    gap: var(--spacing-xs, 6px);
}
.call-event-main-text { display: flex; align-items: center; gap: var(--spacing-xs, 5px); }
.call-event-icon { font-size: 0.9em; /* Relative to .call-event-message font-size */ }
.call-event-icon.call-started { color: var(--chat-call-started-icon, var(--success-color, #28a745)); }
.call-event-icon.call-ended { color: var(--chat-call-ended-icon, var(--info-color, #17a2b8)); }
.call-event-icon.call-missed { color: var(--chat-call-missed-icon, var(--danger-color, #dc3545)); }

.call-event-details-container { display: flex; align-items: center; gap: var(--spacing-xs, 8px); opacity: 0.9; }
.call-event-details-container .call-event-detail.duration i { margin-right: 3px; }

.call-event-actions { display: flex; gap: var(--spacing-sm, 10px); margin-top: var(--spacing-xxs, 4px); }
.call-event-action-btn {
    padding: 4px 10px;
    font-size: 0.95em; /* Relative to .call-event-message */
    background-color: transparent;
    color: var(--chat-call-action-btn-text, var(--link-color, #007bff));
    border: 1px solid transparent;
    border-radius: var(--border-radius-button, 4px);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}
.call-event-action-btn:hover {
    color: var(--chat-call-action-btn-hover-text, var(--link-hover-color, #0056b3));
    background-color: var(--chat-call-action-btn-hover-bg, var(--bg-subtle-hover-light, #e9ecef));
    text-decoration: none;
}

/* Session Timestamp (Divider in chat log) */
/* HTML: <div class="chat-session-timestamp">Date/Time</div> */
.chat-session-timestamp {
    color: var(--chat-session-timestamp-text, var(--text-color-muted, #868e96));
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    margin: var(--spacing-md, 12px) 0;
    padding: 0 var(--spacing-md, 16px); /* Consistent horizontal padding */
    box-sizing: border-box;
    line-height: 1.3;
}

/* Custom Tooltip for Message Timestamp (on hover of .chat-message-wrapper) */
/* HTML: <div class="custom-chat-tooltip">Precise Time</div> */
.custom-chat-tooltip {
    display: block; /* Use opacity for show/hide */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px); /* Slightly more gap */
    background-color: var(--tooltip-bg, #212529);
    color: var(--tooltip-text, #f8f9fa);
    padding: var(--spacing-xxs, 5px) var(--spacing-xs, 8px);
    border-radius: var(--border-radius-sm, 4px);
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: var(--z-index-tooltip, 1000);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
    pointer-events: none; /* Tooltip itself shouldn't be interactive */
    transition: opacity 0.15s ease-in-out, visibility 0s 0.15s; /* Delay visibility change */
}
.chat-message-wrapper:hover .custom-chat-tooltip {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s; /* Show immediately on hover */
}

/* --- Dark Mode Adjustments for Chat Bubbles --- */
body.dark-mode .chat-log-area {
    background-color: var(--chat-log-bg-dark, var(--bg-dark-primary, #18191a));
}
body.dark-mode .chat-bubble-avatar {
    background-color: var(--avatar-bg-fallback-dark, #4f4f4f);
    /* border-color: var(--chat-log-bg-dark, var(--bg-dark-primary, #18191a)); */ /* If using cutout effect */
}
body.dark-mode .clickable-chat-avatar:hover {
    box-shadow: 0 0 8px var(--focus-ring-dark, rgba(3,169,244,0.3));
}
body.dark-mode .chat-message-wrapper.user-wrapper .chat-message-ui {
    background-color: var(--chat-bubble-user-bg-dark, var(--primary-color-dark, #0d6efd));
    color: var(--chat-bubble-user-text-dark, var(--text-color-on-primary, white));
}
body.dark-mode .chat-message-wrapper.connector-wrapper .chat-message-ui {
    background-color: var(--chat-bubble-connector-bg-dark, var(--bg-dark-tertiary, #3a3b3c));
    color: var(--chat-bubble-connector-text-dark, var(--text-color-default-dark, #e4e6eb));
}
body.dark-mode .chat-message-wrapper.connector-wrapper .chat-message-ui.tutor {
    background-color: var(--chat-bubble-tutor-bg-dark, var(--secondary-color-darker, #1e4258));
    color: var(--chat-bubble-tutor-text-dark, var(--secondary-color-x-light, #b2ebf2));
    /* border-color: var(--secondary-color-dark, #0c5464); */
}
body.dark-mode .chat-message-sender-name {
    color: var(--chat-sender-name-color-dark, var(--text-color-muted-dark, #adb5bd));
}
body.dark-mode .chat-message-wrapper.connector-wrapper .chat-message-sender-name {
    color: var(--chat-sender-name-connector-color-dark, var(--primary-color-light, #79c0ff));
}
body.dark-mode .chat-message-wrapper.connector-wrapper .chat-message-ui.tutor .chat-message-sender-name {
    color: var(--chat-sender-name-tutor-color-dark, var(--secondary-color-light, #86d0fb));
}
body.dark-mode .chat-message-ui.connector-thinking {
    background-color: var(--chat-typing-indicator-bg-dark, var(--bg-dark-hover, #303132));
    color: var(--chat-typing-indicator-text-dark, var(--text-color-muted-dark, #868e96));
}
body.dark-mode .chat-message-image {
    background-color: var(--chat-image-bg-fallback-dark, #3a3a3a);
}
body.dark-mode .chat-message-ui.system-message {
    color: var(--chat-system-message-text-dark, var(--text-color-muted-dark, #adb5bd));
}
body.dark-mode .chat-message-ui.system-message.error {
    color: var(--chat-system-error-text-dark, var(--danger-color-light, #ff8080));
}
body.dark-mode .call-event-message {
    color: var(--chat-call-event-text-dark, var(--text-color-muted-dark, #adb5bd));
}
body.dark-mode .call-event-icon.call-started { color: var(--chat-call-started-icon-dark, var(--success-color-dark, #20c997)); }
body.dark-mode .call-event-icon.call-ended { color: var(--chat-call-ended-icon-dark, var(--info-color-dark, #61dafb)); }
body.dark-mode .call-event-icon.call-missed { color: var(--chat-call-missed-icon-dark, var(--danger-color-dark, #ff6b6b)); }
body.dark-mode .call-event-action-btn {
    color: var(--chat-call-action-btn-text-dark, var(--link-color-dark, #03a9f4));
}
body.dark-mode .call-event-action-btn:hover {
    color: var(--chat-call-action-btn-hover-text-dark, var(--link-hover-color-dark, #61dafb));
    background-color: var(--chat-call-action-btn-hover-bg-dark, var(--bg-subtle-hover-dark, #3a3b3c));
}
body.dark-mode .chat-session-timestamp {
    color: var(--chat-session-timestamp-text-dark, var(--text-color-muted-dark, #adb5bd));
}
body.dark-mode .custom-chat-tooltip {
    background-color: var(--tooltip-bg-dark, #f8f9fa);
    color: var(--tooltip-text-dark, #212529);
}
/* D:\polyglot_connect\css\components\chat_bubbles.css */

/* Voice Memo Specific Styles */
.chat-message-ui.voice-memo-message {
    padding: 8px 12px; /* Adjust overall padding if needed */
    display: flex; /* Allow transcript to flow below player controls */
    flex-direction: column;
    gap: 4px; /* Space between player and transcript */
}

.voice-memo-player-controls {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px; /* Space between play button and waveform */
}

.voice-memo-play-btn {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.2em; /* Adjust icon size */
    color: var(--voice-memo-play-button-color, #ffffff); /* Default to white, can be overridden */
    width: 30px; /* Fixed width for the button */
    height: 30px; /* Fixed height for the button */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent button from shrinking */
}


.chat-message-ui.connector.voice-memo-message .voice-memo-play-btn {
    color: var(--text-color-primary, #333); /* Color for connector play button icon */
}


.voice-memo-waveform-container {
    flex-grow: 1; /* Allow waveform to take remaining space */
    height: 30px; /* Match WaveSurfer height option */
    min-width: 150px; /* Prevent it from becoming too small */
}

/* WaveSurfer itself often injects a <wave> element inside the container. */
/* You might not need to style #waveform-id directly if WaveSurfer handles it. */
/* Styling the fallback player if WaveSurfer fails */
.chat-audio-player.fallback-player {
    width: 100%;
    height: 38px;
    border-radius: 19px;
}
.chat-message-ui.user.voice-memo-message .fallback-player::-webkit-media-controls-panel {
    background-color: var(--user-message-bg-lighter, rgba(0, 120, 255, 0.7));
    border-radius: 19px;
}
.chat-message-ui.connector.voice-memo-message .fallback-player::-webkit-media-controls-panel {
    background-color: var(--connector-message-bg-lighter, rgba(220, 220, 220, 0.7));
    border-radius: 19px;
}


.voice-memo-transcript { /* New class for transcript */
    font-size: 0.85em; /* Slightly smaller */
    color: var(--voice-memo-transcript-color, #e0e0e0); /* Lighter color for transcript on dark bg */
    font-style: italic;
    margin-top: 2px; /* Small space above transcript */
    padding-left: 5px; /* Align with general text padding if needed */
    word-break: break-word;
}

.chat-message-ui.user.voice-memo-message .voice-memo-transcript {
    color: rgba(255, 255, 255, 0.8); /* Transcript color for user bubble */
}

.chat-message-ui.connector.voice-memo-message .voice-memo-transcript {
    color: var(--text-color-secondary, #555); /* Transcript color for connector bubble */
}
/* Chat Input Area Enhancements */
.chat-input-previews-container {
    display: flex;
    flex-wrap: wrap; /* Allow previews to wrap */
    gap: 8px;
    padding: 0 8px 8px 8px; /* Padding around previews */
    max-height: 120px; /* Limit height, make it scrollable if needed */
    overflow-y: auto;
}

.image-preview-container { /* This is now the inner container for items */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%; /* Take full width of its parent */
}

.image-preview-item {
    position: relative;
    width: 60px; /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color-secondary); /* For placeholder feel */
}

.image-preview-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.remove-preview-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-preview-btn:hover {
    background-color: rgba(255, 0, 0, 0.8);
}

.chat-main-input-area {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 8px; /* Space between buttons and input wrapper */
    padding: 8px; /* Consistent padding with previews */
    width: 100%;
}

.text-input-wrapper {
    flex-grow: 1; /* Allow this to take up available space */
    display: flex;
    flex-direction: column; /* Stack text input and caption input */
    gap: 4px;
}

.chat-input-field,
.image-caption-input {
    width: 100%; /* Make them take full width of their wrapper */
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background-color: var(--input-background-color);
    color: var(--text-color-primary);
    font-size: 1rem;
}

.image-caption-input {
    font-size: 0.9rem; /* Slightly smaller caption input */
    /* display: none; is handled by JS */
}

/* Adjustments for when previews are active */
.embedded-chat-footer,
.messaging-interface-footer,
.group-chat-footer {
    /* Allow footer to grow if needed, or set a max-height and make scrollable */
    /* For simplicity, let's assume it can grow a bit */
    flex-direction: column; /* Stack previews on top of main input area */
}
/* --- CSS for Consecutive Messages --- */

  
  
  /* Hide the sender's name on their consecutive messages in a group chat */
 /* Hide the sender's name on their consecutive messages in a group chat */
.chat-message-wrapper.is-consecutive .chat-message-sender-name {
    display: none;
  }
  
  /* Also hide the <br> tag that immediately follows the hidden sender name */
  .chat-message-wrapper.is-consecutive .chat-message-sender-name + br {
    display: none;
  }
  /* Optional: Adjust bubble corners for a more "merged" look */
  .connector-wrapper:not(.is-consecutive) + .connector-wrapper.is-consecutive .chat-message-ui.connector {
     border-top-left-radius: 4px;
  }
  
  .user-wrapper:not(.is-consecutive) + .user-wrapper.is-consecutive .chat-message-ui.user {
     border-top-right-radius: 4px;
  }
  /* =========================================================
   Group Chat Typing Indicator - Inherited Bubble Style
   ========================================================= */

/* 
 * This is the new, moved element that holds the typing text.
 * We will make it behave and look exactly like a connector's
 * "is typing" bubble from your chat_bubbles.css.
*/
#group-chat-typing-indicator {
    /* --- Core Bubble Shape & Position --- */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the text */
    position: relative; /* Needed for any potential absolute child elements */
    width: fit-content; /* Only be as wide as the text inside */
    max-width: 85%; /* Don't let it get too wide on small screens */
    padding: 10px 18px; /* Standard bubble padding */
    margin: 4px 16px 8px; /* Top, Horizontal, Bottom margin */
    border-radius: 18px; /* Standard bubble radius */
    align-self: flex-start; /* Align to the left, like a connector message */

    /* --- Inherit Colors & Fonts from CSS Variables --- */
    /* This ensures it matches your theme and dark mode automatically */
    color: var(--chat-typing-indicator-text, var(--text-color-muted, #6c757d));
    background-color: var(--chat-typing-indicator-bg, var(--bg-alt-color-subtle, #f8f9fa));
    font-style: italic;
    font-size: 0.9em;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));

    /* --- Animation & Visibility --- */
    /* We use opacity and transform for a smooth "fade-in" effect */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* Can't be clicked */
    visibility: hidden; /* Start completely hidden */
}

/* 
 * The JavaScript will add this class to make the indicator appear.
*/
#group-chat-typing-indicator.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 
 * Inherit the animated ellipsis from your other bubbles.
 * We are re-using the exact same animation you defined.
*/
#group-chat-typing-indicator::after {
    content: '.';
    display: inline-block;
    animation: ellipsis-animation 1.4s infinite steps(3, end);
    position: relative;
    left: 1px;
    margin-left: 5px; /* Add a little space before the dots */
}

/* 
 * Ensure the dark mode styles are also applied.
 * This reuses the variables you already set up for dark mode.
*/
body.dark-mode #group-chat-typing-indicator {
    background-color: var(--chat-typing-indicator-bg-dark, var(--bg-dark-hover, #303132));
    color: var(--chat-typing-indicator-text-dark, var(--text-color-muted-dark, #868e96));
}
/*
   ===================================================================
   ||   NEW: Chat Message Reactions                                 ||
   ===================================================================
*//*
   ===================================================================
   ||   NEW: Chat Message Reactions (V2 - Enhanced)                 ||
   ===================================================================
*//*
   ===================================================================
   ||   NEW: Chat Message Reactions (V3 - Final Positioning)        ||
   ===================================================================
*/

/* --- The Reaction Picker (Appears on Hover/Long-press) --- */
/* --- The Reaction Picker (Appears on Hover/Long-press) --- */
.reaction-picker {
    position: absolute;
    top: 0;
    z-index: 15;

    display: flex;
    align-items: center;
    gap: 6px;

    background-color: var(--chat-reaction-picker-bg, var(--bg-white, #ffffff));
    padding: 6px 8px;
    border-radius: var(--border-radius-pill, 50px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04));
    border: 1px solid var(--chat-reaction-picker-border, var(--border-color-light, #dee2e6));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* === THIS IS THE NEW LOGIC === */
    /* Animate from top-down, starting slightly inside the bubble */
    transform: translateY(calc(-100% + 10px)) scale(0.9);
    transform-origin: bottom center;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s 0.2s;

    /* By default, anchor to the left of the bubble */
    left: 0;
}

/* JS adds this class to show the picker */
.reaction-picker.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Animate up to its final position above the bubble */
    transform: translateY(calc(-100% - 8px)) scale(1);
    transition-delay: 0s, 0s, 0s;
}

/* === THIS IS THE NEW LOGIC FOR USER BUBBLES === */
/* For user (right-aligned) bubbles, anchor the picker to the RIGHT instead of left */
.chat-message-wrapper.user-wrapper .reaction-picker {
    left: auto; /* Unset the left anchor */
    right: 0;   /* Set the right anchor */
}

/* --- Emoji Buttons inside the Picker --- */
.reaction-btn {
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(0.215, 0.610, 0.355, 1);
    filter: grayscale(40%);
    opacity: 0.8;
}

.reaction-btn:hover,
.reaction-btn:focus-visible {
    transform: scale(1.3);
    filter: grayscale(0%);
    opacity: 1;
}

.reaction-btn.selected {
    transform: scale(1.2);
    filter: grayscale(0%);
    opacity: 1;
    background-color: var(--chat-bubble-connector-bg, #e9ecef);
    border-radius: 50%;
}


/* --- Displayed Reactions Container (Below the bubble) --- */
.message-reactions {
    position: absolute;
    bottom: -10px;
    right: var(--spacing-sm, 8px); /* ALWAYS on the right */
    z-index: 5;

    display: flex;
    gap: 4px;
    flex-wrap: wrap;

    cursor: pointer; /* Clickable to re-open the picker */
    transition: transform 0.2s ease;
}

.message-reactions:hover {
    transform: translateY(-2px);
}

/* --- Individual Displayed Reaction Item --- */
.reaction-item {
    display: flex;
    align-items: center;
    gap: 4px;

    background-color: var(--chat-reaction-item-bg, var(--bg-alt-color, #e9ecef));
    color: var(--chat-reaction-item-text, var(--text-color-muted, #6c757d));
    border: 1px solid var(--chat-reaction-item-border, var(--bg-white, #ffffff));
    border-radius: var(--border-radius-pill, 50px);
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium, 500);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));

    animation: reaction-pop-in 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards;
}

.reaction-item .reaction-count {
    font-weight: var(--font-weight-normal, 400);
    color: var(--chat-reaction-count-text, var(--text-color-muted, #6c757d));
}

@keyframes reaction-pop-in {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}


/* --- Dark Mode for Reactions --- */
body.dark-mode .reaction-picker {
    background-color: var(--chat-reaction-picker-bg-dark, var(--bg-dark-tertiary, #3a3b3c));
    border-color: var(--chat-reaction-picker-border-dark, var(--border-color-dark, #495057));
}
body.dark-mode .reaction-btn.selected {
    background-color: var(--bg-dark-secondary, #242526);
}
body.dark-mode .message-reactions .reaction-item {
    background-color: var(--chat-reaction-item-bg-dark, var(--bg-dark-secondary, #242526));
    color: var(--chat-reaction-item-text-dark, var(--text-color-muted-dark, #adb5bd));
    border-color: var(--chat-reaction-item-border-dark, var(--bg-dark-primary, #18191a));
}
body.dark-mode .reaction-item .reaction-count {
    color: var(--chat-reaction-count-text-dark, var(--text-color-muted-dark, #adb5bd));
}
/* ==================================================
   ||   NEW: Placeholder for Expired/Removed Image   ||
   ================================================== */

/* This is the main container for the placeholder text */
.chat-message-expired-image {
    /* --- Inherit from .call-event-message for consistency --- */
    color: var(--chat-call-event-text, var(--text-color-muted, #6c757d));
    font-size: 0.8em;
    text-align: center;
    display: flex; /* Use flex to align icon and text */
    align-items: center;
    justify-content: center; /* Center the content within the bubble */
    gap: var(--spacing-xs, 6px);

    /* --- Unique Styling --- */
    padding: var(--spacing-xs, 6px) var(--spacing-sm, 10px);
    background-color: var(--chat-bubble-connector-bg, var(--bg-alt-color, #e9ecef));
    border: 1px dashed var(--border-color-light, #dee2e6); /* Dashed border to indicate "missing" */
    border-radius: var(--border-radius-md, 6px);
    width: fit-content; /* Be only as wide as its content */
    margin: 0 auto; /* Center itself within the parent bubble */
    font-style: italic;
}

/* The icon for the placeholder */
.chat-message-expired-image i {
    font-size: 1.2em; /* Make the icon slightly larger than the text */
    opacity: 0.7;
}

/* --- Dark Mode Consistency --- */
body.dark-mode .chat-message-expired-image {
    color: var(--chat-call-event-text-dark, var(--text-color-muted-dark, #adb5bd));
    background-color: var(--chat-bubble-connector-bg-dark, var(--bg-dark-tertiary, #3a3b3c));
    border-color: var(--border-color-dark, #495057);
}

/* ===================================================================
   ||   NEW: Mobile-First Chat Layout Experience                    ||
   =================================================================== */

/* This rule applies only to screens 768px wide or less (phones/small tablets) */
@media (max-width: 768px) {
    .chat-log-area {
        /*
         * This is the key change. It reverses the stacking order of messages.
         * New messages added to the DOM will now appear at the bottom,
         * pushing the older messages upwards off-screen.
        */
        flex-direction: column-reverse;
    }
}
/* ========================================================== */
/* ==         MOBILE-ONLY: TIMESTAMP ON CLICK              == */
/* ========================================================== */
/* ========================================================== */
/* ==         MOBILE-ONLY: TIMESTAMP ON CLICK              == */
/* ========================================================== */

/* The hidden timestamp element that lives inside the wrapper.
   It's positioned absolutely relative to the wrapper. */
   .message-timestamp-on-click {
    /* Hide by default using opacity and positioning */
    display: block;
    position: absolute;
    top: -5px; /* Position it just above the bubble */
    left: 0;
    width: 100%;
    text-align: center;
    
    color: var(--text-color-muted, #868e96);
    font-size: 0.75em;
    font-weight: 500;
    
    opacity: 0;
    transform: translateY(5px); /* Start slightly lower for the fade-in-up effect */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none; /* Make sure it can't be clicked itself */
    z-index: 1; /* Keep it below the reaction picker if it were to open */
}

/* On mobile screens, we define the visible state */
@media (max-width: 768px) {
    /* The .chat-message-wrapper needs a position context for its child */
    .chat-message-wrapper {
        position: relative;
        /* Add a little top margin to give the timestamp space to appear */

    }

    /* When the wrapper gets this class via JS, reveal the timestamp */
    .chat-message-wrapper.timestamp-visible .message-timestamp-on-click {
        opacity: 1;
        transform: translateY(0); /* Move it to its final position */
    }
}
/*
   ===================================================================
   ||   NEW: Chat Context Menu (Reactions & Actions)                ||
   ===================================================================
*/

/* This is the main pop-up menu container */
.chat-context-menu {
    position: absolute;
    bottom: calc(100% + 8px); /* Position above the bubble */
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    display: flex;
    flex-direction: column;
    gap: 4px; /* Gap between reaction bar and action bar */
    
    background-color: var(--chat-reaction-picker-bg, var(--bg-white, #ffffff));
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, 0.15));
    border: 1px solid var(--chat-reaction-picker-border, var(--border-color-light, #dee2e6));
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px); /* Start lower */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s 0.2s;
}

/* Right-aligned bubbles need right-aligned menus */
.user-wrapper .chat-context-menu {
    left: auto;
    right: 0;
    transform: translateX(0); /* Reset transform */
}

/* JS adds this class to show the menu */
.chat-context-menu.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s, 0s, 0s;
}
.user-wrapper .chat-context-menu.visible {
    transform: translateX(0) translateY(0);
}


/* Bar for just the emoji reactions */
.reaction-picker-bar {
    display: flex;
    padding: 6px 12px;
    gap: 8px;
}

/* Bar for the action buttons */
.action-bar {
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-top: 1px solid var(--border-color-light, #e9ecef);
}

.action-btn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-color-primary, #212529);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.action-btn-item:hover {
    background-color: var(--bg-subtle-hover-light, #f1f3f5);
}

.action-btn-item i {
    width: 16px; /* Align icons */
    text-align: center;
    color: var(--text-color-muted, #6c757d);
}

.action-btn-item:disabled {
    color: var(--text-color-disabled, #ced4da);
    cursor: not-allowed;
    background-color: transparent;
}
.action-btn-item:disabled i {
    color: var(--text-color-disabled, #ced4da);
}

/* --- Dark Mode for Context Menu --- */
body.dark-mode .chat-context-menu {
    background-color: var(--bg-dark-secondary, #242526);
    border-color: var(--border-color-dark, #495057);
}

body.dark-mode .action-bar {
    border-top-color: var(--border-color-dark, #495057);
}

body.dark-mode .action-btn-item {
    color: var(--text-color-default-dark, #e4e6eb);
}

body.dark-mode .action-btn-item:hover {
    background-color: var(--bg-dark-hover, #3a3b3c);
}

body.dark-mode .action-btn-item i {
    color: var(--text-color-muted-dark, #adb5bd);
}

body.dark-mode .action-btn-item:disabled {
    color: var(--text-color-disabled-dark, #5a5b5c);
}
body.dark-mode .action-btn-item:disabled i {
    color: var(--text-color-disabled-dark, #5a5b5c);
}/*
   ===================================================================
   ||   NEW: Reaction & Action Menu CSS (Your Design)               ||
   ===================================================================
*/

/* Ensure the bubble can be a positioning parent */
.chat-message-ui {
    position: relative;
}

/* The Emoji Picker (appears on hover) */
.reaction-picker {
    position: absolute;
    top: -45px; /* Position above the bubble */
    left: 10px;
    z-index: 20;
    display: flex;
    padding: 8px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(10px);
}
.reaction-picker.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.reaction-picker .reaction-btn {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

/*
   ===================================================================
   ||   Action Menu (Copy, Translate) - CORRECTED                   ||
   ===================================================================
*/

/* The Action Menu (appears on long press/right-click) */
.action-menu {
    position: absolute;
    /* VVVV THIS IS THE FIX VVVV */
    /* 1. Anchor the menu to the BOTTOM of the bubble, pushing it 100% of the way up. */
    bottom: 100%; 
    /* 2. Add a small gap between the bubble and the menu. */
    margin-bottom: 0px; 
    /* ^^^^ END OF FIX ^^^^ */

    left: 10px; /* Default anchor to the left for connector messages */
    z-index: 15;

    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background-color: var(--chat-reaction-picker-bg, var(--bg-white, #ffffff));
    border-radius: var(--border-radius-lg, 10px);
    box-shadow: var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, 0.15));
    border: 1px solid var(--chat-reaction-picker-border, var(--border-color-light, #dee2e6));

    /* Start hidden and slightly scaled down for the transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.95) translateY(5px);
    transform-origin: bottom left; /* Animate from the bottom-left corner */
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s 0.15s;
}

/* For user bubbles (on the right), adjust the alignment */
.user-wrapper .action-menu {
    left: auto; /* Unset the left anchor */
    right: 10px; /* Anchor to the right instead */
    transform-origin: bottom right; /* Animate from the bottom-right corner */
}

/* The state when the menu should be visible */
.action-menu.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0); /* Animate to full size and final position */
    transition-delay: 0s;
}

/* --- (No changes needed below, but kept for completeness) --- */

/* Individual Action Button Styling */
.action-btn-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--text-color-primary, #212529);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    white-space: nowrap; /* Prevent text from wrapping */
}

.action-btn-item:hover {
    background-color: var(--bg-subtle-hover-light, #f1f3f5);
}

.action-btn-item i {
    width: 16px;
    text-align: center;
    color: var(--text-color-muted, #6c757d);
}

.action-btn-item:disabled {
    color: var(--text-color-disabled, #ced4da);
    cursor: not-allowed;
    background-color: transparent;
}
.action-btn-item:disabled i {
    color: var(--text-color-disabled, #ced4da);
}

/* Dark Mode for Action Menu */
body.dark-mode .action-menu {
    background-color: var(--bg-dark-secondary, #242526);
    border-color: var(--border-color-dark, #495057);
}
body.dark-mode .action-btn-item {
    color: var(--text-color-default-dark, #e4e6eb);
}
body.dark-mode .action-btn-item:hover {
    background-color: var(--bg-dark-hover, #3a3b3c);
}
body.dark-mode .action-btn-item i {
    color: var(--text-color-muted-dark, #adb5bd);
}
body.dark-mode .action-btn-item:disabled {
    color: var(--text-color-disabled-dark, #5a5b5c);
}
body.dark-mode .action-btn-item:disabled i {
    color: var(--text-color-disabled-dark, #5a5b5c);
}/* ===================================================================
   ||   NEW: UNIFIED INTERACTION MENU (Mobile Long Press / Desktop Right-Click) ||
   =================================================================== */

/* The main menu container instance - appended to .chat-message-wrapper */
.unified-context-menu-instance {
    position: absolute;
    bottom: calc(100% + 5px); /* Slightly less gap above bubble */
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 50;
    display: flex;
    flex-direction: column; 
    
    /* --- SIZE ADJUSTMENTS --- */
    min-width: 180px; /* Reduce min-width */
    max-width: 240px; /* Reduce max-width */
    /* --- END SIZE ADJUSTMENTS --- */

    background-color: var(--chat-reaction-picker-bg, var(--bg-white, #ffffff));
    border-radius: var(--border-radius-lg, 10px); /* Slightly smaller radius */
    box-shadow: var(--shadow-md, 0 4px 10px rgba(0, 0, 0, 0.12)); /* Softer shadow */
    border: 1px solid var(--chat-reaction-picker-border, var(--border-color-light, #dee2e6));
    padding: 6px; /* Reduce overall padding */
    gap: 6px; /* Reduce gap between reaction bar and action bar */
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(5px); /* Start a bit closer for pop-up */
    transition: opacity 0.1s ease-out, transform 0.1s ease-out, visibility 0s 0.1s;
}

/* Adjust for user messages */
.chat-message-wrapper.user-wrapper .unified-context-menu-instance {
    /* ... (left: auto; right: 0; transform: translateX(0) translateY(5px);) ... */
    left: auto;
    right: 0;
    transform: translateY(5px); /* Only Y transform if anchored to right */
}

.unified-context-menu-instance.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0); 
    transition-delay: 0s;
}
.chat-message-wrapper.user-wrapper .unified-context-menu-instance.visible {
    transform: translateY(0); 
}


/* --- Reaction Bar (Top part of the menu) --- */
.reaction-bar-in-menu {
    display: flex;
    justify-content: space-around; 
    align-items: center;
    padding: 6px 4px; /* Reduce padding */
    border-bottom: 1px solid var(--border-color-x-light, #f1f3f5);
}

.reaction-btn-in-menu {
    font-size: 1.5rem; /* Reduce emoji size */
    background: none;
    border: none;
    cursor: pointer;
  
    border-radius: 50%;
    line-height: 1;
    color: var(--text-color-secondary, #555); 
    transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

.reaction-btn-in-menu:hover {
    transform: scale(1.2);
    background-color: var(--bg-subtle-hover-light, #e9ecef);
}

.reaction-btn-in-menu.selected-reaction {
    background-color: var(--primary-color-x-light, #cfe2ff); /* Highlight for selected reaction */
    transform: scale(1.1);
}


/* --- Action Bar (Bottom part of the menu) --- */


.action-bar-in-menu {
    display: flex;
    flex-direction: column; /* Stack actions vertically */
    padding: 6px; /* Padding around the action buttons */
}

.action-btn-item-in-menu {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    width: 100%;
    padding: 10px 12px; /* Generous padding for touch */
    background: none;
    border: none;
    color: var(--text-color-primary, #212529);
    font-size: 0.95rem; 
    font-weight: 500;
    text-align: left;
    border-radius: var(--border-radius-md, 6px); /* Slightly rounded buttons */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.action-btn-item-in-menu:hover {
    background-color: var(--bg-subtle-hover-light, #f1f3f5);
}

.action-btn-item-in-menu i {
    width: 18px; /* Consistent icon width */
    text-align: center;
    margin-right: 4px; /* Small space after icon */
    color: var(--text-color-muted, #6c757d);
    font-size: 1.1em; /* Make icons slightly larger relative to text */
}

/* Disabled state for action buttons (e.g., during translation) */
.action-btn-item-in-menu:disabled {
    color: var(--text-color-disabled, #adb5bd);
    cursor: not-allowed;
    background-color: transparent !important; /* Override hover */
}
.action-btn-item-in-menu:disabled i {
    color: var(--text-color-disabled, #adb5bd);
}


/* --- Dark Mode for Unified Menu --- */
body.dark-mode .unified-context-menu-instance {
    background-color: var(--bg-dark-secondary, #242526); /* Darker menu background */
    border-color: var(--border-color-dark, #495057);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Stronger shadow for dark mode */
}

body.dark-mode .reaction-bar-in-menu {
    border-bottom-color: var(--border-color-dark, #3a3b3c);
}

body.dark-mode .reaction-btn-in-menu {
    color: var(--text-color-muted-dark, #adb5bd);
}
body.dark-mode .reaction-btn-in-menu:hover {
    background-color: var(--bg-dark-hover, #3a3b3c);
}
body.dark-mode .reaction-btn-in-menu.selected-reaction {
    background-color: var(--primary-color-dark-hover, #0056b3); /* Darker primary for selection */
}

body.dark-mode .action-btn-item-in-menu {
    color: var(--text-color-default-dark, #e4e6eb);
}
body.dark-mode .action-btn-item-in-menu:hover {
    background-color: var(--bg-dark-hover, #3a3b3c);
}
body.dark-mode .action-btn-item-in-menu i {
    color: var(--text-color-muted-dark, #adb5bd);
}
body.dark-mode .action-btn-item-in-menu:disabled {
    color: var(--text-color-disabled-dark, #55595e);
}
body.dark-mode .action-btn-item-in-menu:disabled i {
    color: var(--text-color-disabled-dark, #55595e);
}/* IN: css/components/chat_bubbles.css */
/* ADD THIS ENTIRE BLOCK */

/* ==================================================
   ||   Placeholder for Non-Saved (Free User) Image  ||
   ================================================== */

.chat-message-expired-image {
    /* --- Layout & Sizing --- */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 10px);
    padding: var(--spacing-sm, 10px) var(--spacing-md, 14px);
    width: fit-content;
    min-width: 220px; /* Give it some substance */
    margin: 0 auto; /* Center within the parent bubble */

    /* --- Appearance --- */
    background-color: var(--bg-alt-color, #e9ecef);
    color: var(--text-color-muted, #6c757d);
    border: 1px dashed var(--border-color, #ced4da);
    border-radius: var(--border-radius-lg, 10px);
    font-size: 0.85em;
    font-style: italic;
    text-align: center;
    cursor: pointer; /* To indicate it's clickable */
    transition: background-color 0.2s, border-color 0.2s;
}

.chat-message-expired-image:hover {
    background-color: var(--bg-subtle-hover-light, #e0e7ff);
    border-color: var(--primary-color-light, #a0bffa);
}

.chat-message-expired-image i {
    font-size: 1.2em; /* Make the icon a bit bigger */
    opacity: 0.8;
}

/* --- Dark Mode Styles --- */
body.dark-mode .chat-message-expired-image {
    background-color: var(--bg-dark-tertiary, #3a3b3c);
    color: var(--text-color-muted-dark, #adb5bd);
    border-color: var(--border-color-dark, #495057);
}

body.dark-mode .chat-message-expired-image:hover {
    background-color: var(--primary-color-darker, #1e4258);
    border-color: var(--primary-color-dark, #0d6efd);
}