/*
   ===================================================================
   ||   css/views/view_messages.css                               ||
   ||   Styles for the Messages View (Embedded 1-on-1 Chat)       ||
   ||   & Specific Styles for Group Items in Active Chats Sidebar   ||
   ===================================================================
*/

/* --- Messages View General Layout --- */
#messages-view .view-content { /* This is often .messages-view-flex-container */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Important if embedded chat handles its own scroll */
    /* Padding is optional: 0 if embedded chat fills entirely, or add space around it */
    /* padding: var(--spacing-md, 16px); */
}

/* Placeholder message for when no chat is selected */
#messages-placeholder {
    /* Usually inherits from global .loading-message or .empty-list-msg in shell.css */
    margin: auto; /* Center it if .view-content is flex */
    /* Add specific overrides if needed: */
    /* font-size: 1.1em; */
    /* color: var(--text-color-placeholder, #888); */
}

/* --- Embedded 1-on-1 Chat UI Styling --- */
.embedded-chat-ui { /* Main container for the 1-on-1 chat interface */
    display: flex;
    flex-direction: column; /* Lays out header, log, footer vertically */
    height: 100%;           /* CRUCIAL: Takes full height of its parent */
    overflow: hidden;       /* CRUCIAL: Prevents this whole container from scrolling */
    border-radius: var(--border-radius-md, 6px);
    background-color: var(--bg-chat-embedded-light, #ffffff);
    border: 1px solid var(--border-chat-embedded-light, #dee2e6);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

/* Header for Embedded Chat */
.embedded-chat-main-header {
    flex-shrink: 0; /* CRUCIAL: Prevents the header from shrinking or being scrolled away */
    z-index: 10;
    margin-bottom: 0; /* Override generic .view-header margin */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    border-bottom: 1px solid var(--border-chat-header-light, #e9ecef);
    background-color: var(--bg-chat-header-light, #f8f9fa);
}

.embedded-chat-main-header .partner-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
    min-width: 0; /* Allow text truncation */
}
.embedded-chat-main-header .chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-circle, 50%);
    object-fit: cover;
    border: 1px solid var(--avatar-border-light, #ced4da);
}
.embedded-chat-main-header #embedded-chat-header-name {
    font-size: 1.15em;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-color-strong-light, #212529);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.embedded-chat-main-header #embedded-chat-header-details {
    font-size: 0.8em;
    color: var(--text-color-muted-light, #6c757d);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.embedded-chat-main-header .chat-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}
/* Buttons in .chat-header-actions use global .control-btn styles */

/* Chat Log Area for Embedded Chat */
#embedded-chat-log {
    flex-grow: 1;           /* CRUCIAL: Takes up all available space between header and footer */
    overflow-y: auto;       /* CRUCIAL: Makes ONLY this element scrollable vertically */
    padding: var(--spacing-lg, 16px);
    background-color: var(--bg-chat-log-light, #ffffff);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 10px);
}
/* Optional Activity Area Styling (if used) */
#embedded-message-activity-area {
    border-top: 1px solid var(--border-subtle-light, #e9ecef);
    border-bottom: 1px solid var(--border-subtle-light, #e9ecef);
    background-color: var(--bg-subtle-light, #f8f9fa);
    padding: var(--spacing-md, 12px);
    /* Add more styles if it contains content */
}

/* Footer for Embedded Chat Input */
/* Footer for Embedded Chat Input */
.embedded-chat-footer {
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    border-top: 1px solid var(--border-chat-footer-light, #e9ecef);
    background-color: var(--bg-chat-footer-light, #f8f9fa);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    flex-shrink: 0;
    z-index: 10;
}
/* Input field and action buttons (attach, mic, send) */
#embedded-message-attach-btn,
#embedded-message-mic-btn { /* Assuming a mic button exists */
    /* Uses .control-btn styles from buttons.css */
    margin-right: var(--spacing-xxs, 4px); /* Minor spacing adjustment if needed */
}
#embedded-message-text-input {
    flex-grow: 1;
    /* Uses .chat-input-field styles from components/forms.css or general input styles */
    /* e.g., padding: 10px 12px; border-radius: 20px; */
}


/* --- Dark Mode Adjustments for Embedded Chat UI --- */
body.dark-mode .embedded-chat-ui {
    background-color: var(--bg-chat-embedded-dark, #242526);
    border-color: var(--border-chat-embedded-dark, #393a3b);
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */
}
body.dark-mode .embedded-chat-main-header {
    background-color: var(--bg-chat-header-dark, #1c1e21);
    border-bottom-color: var(--border-chat-header-dark, #303132);
}
body.dark-mode .embedded-chat-main-header .chat-header-avatar {
    border-color: var(--avatar-border-dark, #495057);
}
body.dark-mode .embedded-chat-main-header #embedded-chat-header-name {
    color: var(--text-color-strong-dark, #f8f9fa);
}
body.dark-mode .embedded-chat-main-header #embedded-chat-header-details {
    color: var(--text-color-muted-dark, #adb5bd);
}
body.dark-mode #embedded-chat-log {
    background-color: var(--bg-chat-log-dark, #18191a);
}
body.dark-mode #embedded-message-activity-area {
    border-color: var(--border-subtle-dark, #3e444c);
    background-color: var(--bg-subtle-dark, #343a40);
}
body.dark-mode .embedded-chat-footer {
    background-color: var(--bg-chat-footer-dark, #1c1e21);
    border-top-color: var(--border-chat-footer-dark, #303132);
}
/* Dark mode for input and buttons handled by their respective global/component styles */


/*
   ===================================================================
   || CHAT BUBBLE STYLES (User, Connector, System, Events)        ||
   || IDEALLY, MOVE THIS ENTIRE SECTION TO:                       ||
   ||   css/components/chat_bubbles.css                           ||
   || These styles are used by embedded chat, group chat, and modals. ||
   ===================================================================
*/
.chat-message-wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm, 10px); /* Consistent spacing */
    max-width: 100%;
    position: relative; /* For tooltip */
}
.chat-message-wrapper.user-wrapper {
    margin-left: auto;
    flex-direction: row-reverse;
}
.chat-message-wrapper.connector-wrapper {
    margin-right: auto;
    flex-direction: row;
}
.chat-message-wrapper.system-message-wrapper { /* More specific class for system message wrappers */
    justify-content: center;
    max-width: 100%;
    margin-top: var(--spacing-xs, 6px);
    margin-bottom: var(--spacing-xs, 6px);
}

.chat-bubble-avatar { /* Avatar next to a bubble */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: auto; /* Aligns to bottom of text bubble if text wraps */
    flex-shrink: 0;
    background-color: var(--avatar-bg-fallback-light, #e0e0e0); /* Fallback */
}
.chat-message-wrapper.has-avatar-left .chat-bubble-avatar { margin-right: var(--spacing-xs, 8px); }
.chat-message-wrapper.has-avatar-right .chat-bubble-avatar { margin-left: var(--spacing-xs, 8px); }

.clickable-chat-avatar { /* For avatars that 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.5));
}
body.dark-mode .clickable-chat-avatar:hover {
    box-shadow: 0 0 8px var(--focus-ring-dark, rgba(3,169,244,0.4));
}


.chat-message-ui.user {
    background-color: var(--chat-bubble-user-bg, var(--primary-color, #007bff));
    color: var(--chat-bubble-user-text, #ffffff);
    border-bottom-right-radius: 6px; /* Tail effect */
    margin-left:auto; /* Ensure user bubble aligns right even if wrapper is full width */
}

.chat-message-ui.tutor { /* Special styling for tutor messages */
    background-color: var(--chat-bubble-tutor-bg, var(--info-color-light, #e0f7fa)); /* Example */
    color: var(--chat-bubble-tutor-text, var(--info-color-dark, #006064));
    border: 1px solid var(--info-color, #17a2b8);
}

.chat-message-sender-name { /* Displayed above message text in group chats */
    display: block;
    font-size: 0.8em;
    font-weight: var(--font-weight-semibold, 600);
  margin-bottom: var(--spacing-xxs, 4px);
 
    color: var(--text-color-muted-light, #6c757d); /* Default sender name color */
}
.chat-message-ui.user .chat-message-sender-name { display: none; } /* Don't show for user's own messages */
.chat-message-ui.tutor .chat-message-sender-name {
    color: var(--info-color-dark, #006064); /* Tutor name color */
}


.chat-message-image {
    max-width: 100%;
    max-height: 250px; /* Limit image height */
    border-radius: 10px;
    margin-top: var(--spacing-xs, 6px); /* If there's text above */
    display: block; /* Ensure it behaves as a block */
    cursor: pointer; /* If images are clickable to enlarge */
}

/* System Messages (e.g., "You started a call...", "AI is thinking...") */
.chat-message-ui.system-message {
    background-color: transparent;
    color: var(--text-color-muted-light, #868e96);
    text-align: center;
    font-size: 0.85em;
    padding: var(--spacing-xxs, 4px) var(--spacing-sm, 8px);
    box-shadow: none;
    border-radius: 0;
    width: 100%; /* Span full width within its centered wrapper */
    max-width: 100%;
}
.chat-message-ui.system-message.error {
    color: var(--error-color, #dc3545);
    font-weight: var(--font-weight-medium);
}
.connector-thinking span { /* For "..." animation */
    opacity: 0.7;
    animation: thinkingDots 1.4s infinite;
}
.connector-thinking span:nth-child(2) { animation-delay: 0.2s; }
.connector-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkingDots { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }


/* Call Event Messages */
.system-event-wrapper { /* Wrapper for call event messages */
    display: flex;
    justify-content: center;
    margin: var(--spacing-md, 12px) 0;
    width: 100%;
    padding: 0 var(--spacing-md, 16px);
    box-sizing: border-box;
}
.call-event-message { /* The content block for a call event */
    color: var(--text-color-muted-light, #868e96);
    font-size: 0.8em;
    text-align: center;
    max-width: 90%;
    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; }
.call-event-icon.call-started { color: var(--success-color, #28a745); }
.call-event-icon.call-ended { color: var(--info-color, #17a2b8); }
.call-event-icon.call-missed { color: var(--error-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-xs, 4px); }
.call-event-action-btn {
    padding: 4px 10px;
    font-size: 0.9em; /* Relative to parent .call-event-message */
    background-color: transparent;
    color: 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(--link-hover-color, #0056b3);
    background-color: var(--bg-subtle-hover-light, #e9ecef);
    text-decoration: none;
}

/* Session Timestamp (divider between groups of messages) */
.chat-session-timestamp {
    color: var(--text-color-muted-light, #868e96);
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    margin: var(--spacing-md, 12px) 0;
    padding: 0 var(--spacing-md, 16px);
    box-sizing: border-box;
    line-height: 1.3;
}

/* Custom Tooltip for message timestamps (hover) */
.custom-chat-tooltip {
    display: none; position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background-color: var(--tooltip-bg, #333); color: var(--tooltip-text, white);
    padding: 5px 10px; border-radius: 4px; font-size: 0.75rem;
    white-space: nowrap; z-index: 1000; /* High z-index */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0; transition: opacity 0.15s ease-in-out;
}
.chat-message-wrapper:hover .custom-chat-tooltip {
    display: block; opacity: 1;
}

/* Dark Mode for Chat Bubbles */
body.dark-mode .chat-bubble-avatar { background-color: var(--avatar-bg-fallback-dark, #4f4f4f); }
body.dark-mode .chat-message-ui.connector {
    background-color: var(--chat-bubble-connector-bg-dark, #3a3b3c);
    color: var(--chat-bubble-connector-text-dark, #e4e6eb);
}
body.dark-mode .chat-message-ui.tutor {
    background-color: var(--chat-bubble-tutor-bg-dark, #004c5d);
    color: var(--chat-bubble-tutor-text-dark, #b2ebf2);
    border-color: var(--info-color-dark, #20c997);
}
body.dark-mode .chat-message-sender-name { color: var(--text-color-muted-dark, #adb5bd); }
body.dark-mode .chat-message-ui.tutor .chat-message-sender-name { color: var(--info-color-dark, #20c997); }
body.dark-mode .chat-message-ui.system-message { color: var(--text-color-muted-dark, #adb5bd); }
body.dark-mode .chat-message-ui.system-message.error { color: var(--error-color-dark, #ff6b6b); }
body.dark-mode .call-event-message { color: var(--text-color-muted-dark, #adb5bd); }
body.dark-mode .call-event-icon.call-started { color: var(--success-color-dark, #20c997); }
body.dark-mode .call-event-icon.call-ended { color: var(--info-color-dark, #61dafb); }
body.dark-mode .call-event-icon.call-missed { color: var(--error-color-dark, #ff6b6b); }
body.dark-mode .call-event-action-btn {
    color: var(--link-color-dark, #03a9f4);
}
body.dark-mode .call-event-action-btn:hover {
    color: var(--link-hover-color-dark, #61dafb);
    background-color: var(--bg-subtle-hover-dark, #3a3b3c);
}
body.dark-mode .chat-session-timestamp { color: var(--text-color-muted-dark, #adb5bd); }
/* END OF CHAT BUBBLE STYLES SECTION (TO BE MOVED) */


/*
   ===================================================================
   || Specific Styles for GROUP CHAT ITEMS in the ACTIVE CHATS SIDEBAR ||
   || (#chat-list-ul located in the right sidebar)                  ||
   ===================================================================
*/
/* Base styles from css/components/lists.css apply via .list-item-base, .list-item-avatar, .sidebar-item-info etc. */

#chat-list-ul .list-item-base.group-chat-list-item .list-item-avatar.group-photo {
    border-radius: var(--border-radius-md, 6px); /* Make group photos/flags more square */
    /* background-color: var(--group-card-avatar-placeholder-bg); /* From groups theme, if different fallback needed */
    /* border: 1px solid var(--view-groups-border-light); */
}

#chat-list-ul .list-item-base.group-chat-list-item .list-item-avatar.icon-avatar {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1em;
    border-radius: var(--border-radius-md, 6px);
    background-color: var(--view-groups-accent-primary-hover); /* From groups theme */
    color: var(--view-groups-text-on-accent); /* From groups theme */
    border: none;
}

#chat-list-ul .list-item-base.group-chat-list-item .sidebar-item-name {
    font-weight: var(--font-weight-semibold, 600);
}


body.dark-mode #chat-list-ul .list-item-base.group-chat-list-item .list-item-avatar.icon-avatar {
    background-color: var(--view-groups-accent-primary); /* Dark mode from groups theme */
}

#embedded-chat-log > p {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--view-groups-text-primary);
    font-size: var(--font-size-md);
    padding: var(--spacing-md, 16px);
}
/* ========================================================== */
/* ==   RESPONSIVE & EMPTY STATE FIXES FOR EMBEDDED CHAT   == */
/* ========================================================== */

/* --- On All Screen Sizes: Define a Minimum Height for the Chat Log --- */
/* This is the key fix for the empty chat collapsing issue. */
#embedded-chat-log {
    min-height: 200px; /* Or a value that looks good, e.g., 40vh */
}

/* 
  This rule targets the placeholder paragraph *only when the chat log is empty*.
  It centers the placeholder text within the min-height area.
*/

#embedded-chat-log:empty::before {
    content: "No messages yet. Send one to start the conversation!";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 2rem;
    color: var(--text-color-muted);
    font-size: 0.9em;
    box-sizing: border-box;
}

/* --- On Tablets and Smaller --- */
@media (max-width: 992px) {
    .embedded-chat-main-header,
    .embedded-chat-footer {
        /* Reduce padding slightly on tablets */
        padding: 10px 14px;
    }

    .embedded-chat-main-header #embedded-chat-header-name {
        font-size: 1.05em;
    }

    .embedded-chat-main-header .chat-header-avatar {
        width: 36px;
        height: 36px;
    }
}

/* --- On Mobile Phones (Most significant changes) --- */
@media (max-width: 768px) {
    /* Make the entire chat UI use the full height of its container */
    .embedded-chat-ui {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    
    .embedded-chat-main-header {
        /* Reduce padding and font size for a more compact header */
        padding: 8px 12px;
        height: 55px; /* Give it a fixed height */
    }
    
    .embedded-chat-main-header #embedded-chat-header-name {
        font-size: 1em;
    }
    
    .embedded-chat-footer {
        /* Reduce padding for a more compact footer */
        padding: 8px 12px;
    }

    #embedded-message-text-input {
        /* Slightly smaller text in the input field */
        font-size: 0.95em;
    }
    
}