/* ==========================================================================
    1. General Page & Typography Styles
    ========================================================================== */

  body.has-modal-open {
    overflow: hidden;
  }

  /* --- ▼▼▼ CRITICAL FIX 1 ▼▼▼ --- */
  /* Make the .mediation-container the full-height flex parent for the chat view ONLY. */
  .mediation-container.chat-page {
    display: flex;
    flex-direction: column;
    height: var(--mediation-container-height, 100vh);
    max-height: var(--mediation-container-max-height, var(--mediation-container-height, 100vh));
    min-height: 0;
    overflow: hidden;
  }

  .mediation-container.chat-page h1 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.3rem);
    color: #102a4d;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevents header from shrinking */
    padding: 0 clamp(1rem, 2.5vw, 2rem);
  }

  .mediation-container.chat-page p {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: #0b172d;
    flex-shrink: 0; /* Prevents paragraph from shrinking */
  }

  /* ==========================================================================
    2. Main Layout Containers
    ========================================================================== */

  /* --- ▼▼▼ CRITICAL FIX 2 ▼▼▼ --- */
  /* This wrapper must now grow to fill the space left by the header.
    It also needs to be a flex container for its children. */
  .chat-page-wrapper {
    max-width: 1800px;
    margin: 0 auto;
    /* Top padding gives the toolbar's hover-lift (translateY(-2px)) and shadow
       room to render. Note: overflow-x: hidden below forces overflow-y to
       compute to `auto`, making this a clipping container, so a 0 top padding
       would clip the lifted buttons' top border. */
    padding: 0.75rem 1rem clamp(1.25rem, 2vw, 2rem);
    width: 100%;
    box-sizing: border-box;

    /* Add these properties */
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: clamp(3rem, 6vw, 4.5rem);
    gap: clamp(0.65rem, 1.2vw, 1.1rem);
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* --- ▼▼▼ CRITICAL FIX 3 ▼▼▼ --- */
  /* This container also needs to grow to fill its parent, the chat-page-wrapper. */
  .message-page-container.chat-layout {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 2vw, 2.5rem);
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .chat-panel-wrapper {
    min-width: 0;
    width: 100%;
    contain: layout;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Top toolbar: Conversation details + mediation actions on one row */
  .conversation-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 0.85rem);
    width: 100%;
    box-sizing: border-box;
    /* Never shrink: as a flex child of the height-bounded .chat-page-wrapper,
       the toolbar must always reserve its full (possibly wrapped) height so the
       chat panel fills only the remainder. Without this the growing chat panel
       squeezes the toolbar and overlaps it when vertical space is tight — e.g.
       on a zoomed-in window. The stacked breakpoints set flex: 0 0 auto, which
       already includes this; here it protects the desktop inline row. */
    flex-shrink: 0;
  }

  .conversation-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 0.85rem);
    margin-left: auto;
  }

  /* Buttons sit inline and size to content inside the toolbar */
  .conversation-toolbar .conversation-cta {
    width: auto;
    flex: 0 1 auto;
    gap: 0.55rem;
    padding: clamp(0.5rem, 0.8vw, 0.7rem) clamp(0.95rem, 1.5vw, 1.3rem);
    border-radius: 14px;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(16, 42, 77, 0.08);
  }

  .conversation-toolbar .conversation-cta__label {
    flex: 0 0 auto;
    text-align: center;
  }

  /* Inline status indicator that replaces the request button once requested */
  .conversation-status-pill-wrap {
    display: inline-flex;
    align-items: center;
  }

  .conversation-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(0.5rem, 0.8vw, 0.7rem) clamp(0.85rem, 1.4vw, 1.15rem);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
  }

  .conversation-status-pill i {
    font-size: 1rem;
  }

  .conversation-status-pill--info {
    background: #eaf2ff;
    border-color: rgba(26, 117, 255, 0.25);
    color: #1e3a8a;
  }

  .conversation-status-pill--info i {
    color: #1a75ff;
  }

  .conversation-status-pill--success {
    background: #e6fcf5;
    border-color: rgba(16, 185, 129, 0.25);
    color: #065f46;
  }

  .conversation-status-pill--success i {
    color: #059669;
  }


  /* ==========================================================================
    3. Conversation Details & Info Panel
    ========================================================================== */

  .conversation-info-panel {
    position: fixed;
    inset: 0;
    background: rgba(16, 42, 77, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
    backdrop-filter: blur(4px);
    z-index: 2000;
    overflow-y: auto;
  }

  .conversation-info-panel[hidden] {
    display: none;
  }

  .conversation-info-panel.is-open .conversation-info-card {
    animation: slideDown 220ms ease;
  }

  .conversation-info-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(16, 42, 77, 0.18);
    width: min(520px, 92vw);
    border: 1px solid rgba(16, 42, 77, 0.05);
    max-height: min(80vh, 680px);
    min-height: min(320px, 70vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  .conversation-info-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(16, 42, 77, 0.06);
  }

  .conversation-info-card__header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #102a4d;
  }

  .conversation-info-card__body {
    padding: 1.25rem 1.75rem 1.75rem;
    overflow-y: auto;
  }

  .info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
  }

  .info-table th,
  .info-table td {
    text-align: left;
    padding: 0.65rem 0;
    font-size: 0.95rem;
  }

  .info-table th {
    font-weight: 600;
    color: #102a4d;
    width: 40%;
  }

  .info-table tr+tr th,
  .info-table tr+tr td {
    border-top: 1px solid rgba(16, 42, 77, 0.08);
  }

  .info-close-btn {
    border: none;
    background: transparent;
    color: #0b172d;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 999px;
    transition: background 0.2s ease;
  }

  .info-close-btn:hover {
    background: rgba(16, 42, 77, 0.08);
  }

  /* Info Box Styles */
  .info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.25rem;
  }

  .info-box h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: #102a4d;
    font-weight: 600;
  }

  .info-box p {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
  }

  .info-box--mediator {
    background: #f0fdf4;
    border-color: #bbf7d0;
  }

  .info-box--mediator h4 {
    color: #166534;
  }

  .info-box--mediator p {
    color: #15803d;
  }

  .info-box--info {
    background: #eff6ff;
    border-color: #bfdbfe;
  }

  .info-box--info h4 {
    color: #1e40af;
  }

  .info-box--info p {
    color: #1d4ed8;
  }

  .info-box--disclaimer {
    background: #f8f9fa;
    border-color: #dee2e6;
  }

  .info-box--disclaimer h4 {
    color: #495057;
  }

  .info-box--disclaimer p {
    color: #6c757d;
    font-size: 0.9rem;
  }

  /* ==========================================================================
    4. Chat Panel & Message List
    ========================================================================== */

  .chat-panel {
    display: flex;
    flex-direction: column;
    background: #f7f9fc;
    border-radius: 20px;
    border: 1px solid rgba(16, 42, 77, 0.06);
    box-shadow: 0 14px 30px rgba(16, 42, 77, 0.08);
    overflow: hidden;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* REMOVED fixed min-height and max-height to let flexbox control the size */
  }

  .chat-panel.mediator-chat-box {
    min-height: clamp(400px, 65vh, 680px);
  }

  .message-list-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(1rem, 2vw, 1.5rem);
    scroll-behavior: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 249, 252, 0.85) 70%, rgba(247, 249, 252, 1) 100%);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .message-list-container.use-smooth-scroll {
    scroll-behavior: smooth;
  }

  .message-list-container:hover,
  .message-list-container:focus,
  .message-list-container:active,
  .message-list-container:focus-within {
    scrollbar-color: rgba(16, 42, 77, 0.35) rgba(16, 42, 77, 0.08);
  }

  .message-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 100%;
  }

  .no-messages {
    text-align: center;
    color: rgba(16, 42, 77, 0.6);
    font-style: italic;
    padding: 2rem 0;
  }

  .date-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
    user-select: none;
  }

  .date-separator::before,
  .date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(16, 42, 77, 0.1);
  }

  .date-separator__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(16, 42, 77, 0.4);
    white-space: nowrap;
  }

  /* Marks where the user left off when reopening a thread with unread messages */
  .unread-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
    user-select: none;
  }

  .unread-divider::before,
  .unread-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(217, 45, 32, 0.35);
  }

  .unread-divider__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #d92d20;
    white-space: nowrap;
  }

  /* Floating "jump to latest" button shown when scrolled away from the newest
     message. Hidden by default; JS toggles the `is-visible` class. Visibility is
     class-driven (not the [hidden] attribute) so a class selector can't override
     it and stale/orphaned buttons can't get stuck on screen. */
  .chat-jump-latest {
    position: absolute;
    left: 50%;
    bottom: 84px; /* overridden inline so it clears the composer */
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    background: #ffffff;
    color: #102a4d;
    border: 1px solid rgba(16, 42, 77, 0.12);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(16, 42, 77, 0.18);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .chat-jump-latest.is-visible {
    display: inline-flex;
  }

  .chat-jump-latest:hover {
    border-color: rgba(16, 42, 77, 0.25);
    box-shadow: 0 10px 24px rgba(16, 42, 77, 0.24);
    transform: translateX(-50%) translateY(-1px);
  }

  .chat-jump-latest .fa-arrow-down {
    font-size: 0.72rem;
  }

  .chat-jump-latest__count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #d92d20;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .chat-jump-latest__count.is-visible {
    display: inline-flex;
  }

  /* Scrollbar Styles */
  .message-list-container::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }

  .message-list-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    transition: background 0.25s ease;
  }

  .message-list-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background-color 0.25s ease;
  }

  .message-list-container:hover::-webkit-scrollbar-track,
  .message-list-container:focus-within::-webkit-scrollbar-track,
  .message-list-container:active::-webkit-scrollbar-track {
    background: rgba(16, 42, 77, 0.04);
  }

  .message-list-container:hover::-webkit-scrollbar-thumb,
  .message-list-container:focus-within::-webkit-scrollbar-thumb,
  .message-list-container:active::-webkit-scrollbar-thumb {
    background: rgba(16, 42, 77, 0.2);
  }

  .message-list-container:hover::-webkit-scrollbar-thumb:hover,
  .message-list-container:focus-within::-webkit-scrollbar-thumb:hover,
  .message-list-container:active::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 42, 77, 0.3);
  }

  /* ==========================================================================
    5. Individual Chat Messages
    ========================================================================== */

  .chat-message {
    max-width: 76%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .chat-message.sent {
    align-self: flex-end;
  }

  .chat-message.received {
    align-self: flex-start;
  }

  .message-bubble {
    padding: 0.75rem 1rem 0.65rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(16, 42, 77, 0.08);
    box-shadow: 0 10px 18px rgba(16, 42, 77, 0.08);
    color: #0b172d;
  }

  .message-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
  }

  .message-author {
    font-weight: 600;
  }

  .message-role {
    background: rgba(255, 255, 255, 0.28);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  .message-content {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap; /* preserve the sender's spaces, indentation and line breaks */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  .message-timestamp {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    color: rgba(16, 42, 77, 0.45);
    text-align: right;
  }

  /* Grouped messages: hide author header and reduce vertical gap */
  .chat-message[data-grouped="true"] .message-meta {
    display: none;
  }

  .chat-message[data-grouped="true"] {
    margin-top: -0.6rem;
  }

  /* Message Role Variants */
  .chat-message[data-sender-role="Tenant"] .message-bubble {
    background: linear-gradient(135deg, #0b5ed7 0%, #1a75ff 100%);
    color: #ffffff;
    border: none;
  }

  .chat-message[data-sender-role="Tenant"] .message-meta,
  .chat-message[data-sender-role="Tenant"] .message-author,
  .chat-message[data-sender-role="Tenant"] .message-content {
    color: rgba(255, 255, 255, 0.95);
  }

  .chat-message[data-sender-role="Tenant"] .message-timestamp {
    color: rgba(255, 255, 255, 0.8);
  }

  .chat-message[data-sender-role="Landlord"] .message-bubble {
    background: #ffffff;
    border: 1px solid rgba(16, 42, 77, 0.12);
    color: #0b172d;
  }

  .chat-message[data-sender-role="Landlord"] .message-role {
    background: rgba(16, 42, 77, 0.08);
    color: #102a4d;
    border: none;
  }

  .chat-message[data-sender-role="Mediator"] .message-bubble {
    background: linear-gradient(135deg, #0f9d58 0%, #34c07a 100%);
    color: #ffffff;
    border: none;
  }

  .chat-message[data-sender-role="Mediator"] .message-meta,
  .chat-message[data-sender-role="Mediator"] .message-author,
  .chat-message[data-sender-role="Mediator"] .message-content {
    color: rgba(255, 255, 255, 0.95);
  }

  .chat-message[data-sender-role="Mediator"] .message-timestamp {
    color: rgba(255, 255, 255, 0.8);
  }

  .chat-message.is-entering {
    animation: messageEnter 220ms ease-out;
  }


  /* ==========================================================================
    6. System Messages
    ========================================================================== */

  .system-message {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    max-width: 80%;
    text-align: center;
  }

  .system-message__text {
    display: inline-block;
    background: rgba(16, 42, 77, 0.10);
    border: 1px solid rgba(16, 42, 77, 0.20);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    color: rgba(16, 42, 77, 0.85);
    font-weight: 600;
    line-height: 1.4;
  }

  .system-message__attachments {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .system-message__attachments .message-attachment {
    background: rgba(16, 42, 77, 0.04);
    border-color: rgba(16, 42, 77, 0.1);
    text-align: left;
  }

  /* ==========================================================================
    7. Message Attachments
    ========================================================================== */

  .message-attachments {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.65rem;
  }

  .message-attachment {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgba(16, 42, 77, 0.05);
    border: 1px solid rgba(16, 42, 77, 0.08);
  }

  .attachment-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(16, 42, 77, 0.1);
    color: #0b5ed7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }

  .attachment-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .attachment-name {
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-word;
  }

  .attachment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
  }

  .attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #102a4d;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .attachment-link:hover {
    text-decoration: underline;
  }

  .attachment-link--primary {
    color: #0f9d58;
  }

  .attachment-dot {
    color: rgba(16, 42, 77, 0.35);
  }

  /* Attachment Role Variants */
  .chat-message[data-sender-role="Tenant"] .message-attachment {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
  }

  .chat-message[data-sender-role="Tenant"] .attachment-icon {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
  }

  .chat-message[data-sender-role="Tenant"] .attachment-dot {
    color: rgba(255, 255, 255, 0.7);
  }

  .chat-message[data-sender-role="Tenant"] .attachment-link {
    color: rgba(255, 255, 255, 0.95);
  }

  .chat-message[data-sender-role="Tenant"] .attachment-link--primary {
    color: #fffbe6;
  }

  .chat-message[data-sender-role="Mediator"] .message-attachment {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.42);
  }

  .chat-message[data-sender-role="Mediator"] .attachment-icon {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
  }

  .chat-message[data-sender-role="Mediator"] .attachment-dot {
    color: rgba(255, 255, 255, 0.7);
  }

  .chat-message[data-sender-role="Mediator"] .attachment-link {
    color: rgba(255, 255, 255, 0.95);
  }

  .chat-message[data-sender-role="Mediator"] .attachment-link--primary {
    color: #fffbe6;
  }


  /* ==========================================================================
    8. Message Composer
    ========================================================================== */

  .message-composer {
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(16, 42, 77, 0.08);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .composer-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .composer-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: clamp(2.75rem, 5vw, 3.4rem);
  }

  /* In Section 7 */
.message-textarea {
	width: 100%;
	height: 38px; /* Set a fixed initial height for one line of text */
	max-height: 160px; /* Set a max height (e.g., ~6-7 lines of text) */
	border-radius: 14px;
	border: 1px solid #c5d4ec;
	padding: 0.5rem 0.85rem; /* Adjusted for single line height */
	font-size: 1rem;
	line-height: 1.45;
	resize: none; /* Disable manual resize handle */
	box-shadow: inset 0 2px 6px rgba(16, 42, 77, 0.05);
	transition: border 0.2s ease, box-shadow 0.2s ease, height 0.15s ease;
	box-sizing: border-box;
	overflow-y: auto; /* Show scrollbar when max-height is reached */
}

  .message-textarea:focus {
    outline: none;
    border-color: #1a75ff;
    box-shadow: 0 0 0 4px rgba(26, 117, 255, 0.15);
  }

  .composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .composer-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    border: 1px solid #c5d4ec;
    background: #f4f7fb;
    color: #102a4d;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .composer-action:hover,
  .composer-action:focus {
    background: #e6eefb;
    transform: translateY(-1px);
  }

  .composer-action[aria-expanded="true"] {
    background: #1a75ff;
    color: #ffffff;
    border-color: #1a75ff;
  }

  .composer-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 14px;
    border: 1px solid #c5d4ec;
    background: #f4f7fb;
    color: #102a4d;
    font-weight: 600;
    padding: 0 clamp(0.85rem, 2vw, 1.1rem);
    min-width: 3rem;
    min-height: clamp(2.75rem, 5vw, 3.4rem);
    transition: background 0.2s ease, transform 0.2s ease;
    min-height: 38px;
  }

  .composer-attach-btn:hover,
  .composer-attach-btn:focus {
    background: #e6eefb;
    transform: translateY(-1px);
  }

  .composer-attach-label {
    display: inline-block;
    font-size: 0.85rem;
  }

  .send-msg-btn {
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f9d58 0%, #34c07a 100%);
    color: #ffffff;
    padding: 0.35rem clamp(1.25rem, 2.4vw, 1.65rem);
    min-width: 120px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 38px; /* Match the textarea height */
  }

  .send-msg-btn.is-ready {
    box-shadow: 0 12px 24px rgba(15, 157, 88, 0.2);
  }

  .send-msg-btn:hover,
  .send-msg-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 157, 88, 0.25);
  }

  .send-msg-btn:disabled,
  .send-msg-btn[disabled] {
    background: linear-gradient(135deg, #c5d1e3 0%, #dce3ef 100%);
    color: rgba(16, 42, 77, 0.55);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.95;
  }

  .send-msg-btn:disabled:hover,
  .send-msg-btn:disabled:focus {
    box-shadow: none;
    transform: none;
  }

  /* Composer Attachments Dropdown */
  .composer-attachments {
    background: #fff;
    border: 1px solid rgba(16, 42, 77, 0.08);
    border-radius: 16px;
    padding: 1rem;
    margin-top: 0.25rem;
    box-shadow: 0 16px 30px rgba(16, 42, 77, 0.12);
  }

  .composer-attachments[hidden] {
    display: none;
  }

  .file-dropdown-wrapper {
    margin-bottom: 0.85rem;
  }

  .file-label {
    font-weight: 600;
    color: #102a4d;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    display: inline-block;
  }

  .custom-select-wrapper {
    position: relative;
  }

  .custom-select-wrapper select {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #c5d4ec;
    font-size: 0.95rem;
    appearance: none;
    background: #f9fbff;
    color: #0b172d;
  }

  .custom-select-wrapper select:focus {
    outline: none;
    border-color: #1a75ff;
    box-shadow: 0 0 0 3px rgba(26, 117, 255, 0.15);
  }

  .custom-select-wrapper .arrow.down {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border: solid #4c5d7a;
    border-width: 0 2px 2px 0;
    pointer-events: none;
  }

  .composer-attachment-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }


  /* ==========================================================================
    8. CTAs, Action Buttons & Cards
    ========================================================================== */

  .conversation-cta,
  .conversation-action {
    display: flex; /* Changed from inline-flex */
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box; /* Match <button> UA default so <a> CTAs size identically */
    border-radius: 20px;
    padding: clamp(0.85rem, 1vw + 0.5rem, 1.25rem) clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 8px 16px rgba(16, 42, 77, 0.08);
    background: #ffffff;
    color: #0f2142;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }

  .conversation-cta:hover,
  .conversation-cta:focus,
  .conversation-action:hover,
  .conversation-action:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(16, 42, 77, 0.18);
  }

  .conversation-cta__icon {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
  }

  .conversation-cta__label {
    flex: 1 1 auto;
    text-align: left;
  }

  .conversation-cta__chevron {
    font-size: 0.85rem;
    opacity: 0.65;
  }

  /* Button Variants */
  .conversation-cta--info {
    background: #ffffff;
    border-color: rgba(16, 42, 77, 0.12);
  }

  .conversation-cta--primary,
  .conversation-action--primary {
    background: linear-gradient(135deg, #1a75ff 0%, #4b90ff 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(16, 42, 77, 0.12);
  }

  .conversation-cta--danger,
  .conversation-action--danger {
    background: linear-gradient(135deg, #c62828 0%, #f44336 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(16, 42, 77, 0.12);
  }

  .conversation-cta--ghost,
  .conversation-action--ghost {
    background: rgba(16, 42, 77, 0.06);
    color: #0f2142;
    border-color: rgba(16, 42, 77, 0.18);
    box-shadow: none;
  }

  .conversation-cta--ghost:hover,
  .conversation-action--ghost:hover {
    background: rgba(16, 42, 77, 0.1);
    transform: translateY(-1px);
  }

  .conversation-cta.is-disabled,
  .conversation-cta[disabled],
  .conversation-action.is-disabled,
  .conversation-action[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    pointer-events: none;
  }

  /* Chat Disclaimer */
  .chat-disclaimer {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #495057;
  }

  .chat-disclaimer p {
    margin: 0.5rem 0;
  }

  .chat-disclaimer p:first-child {
    margin-top: 0;
  }

  .chat-disclaimer p:last-child {
    margin-bottom: 0;
  }

  .chat-disclaimer-modal[open] .conversation-modal__content {
    animation: slideDown 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (max-width: 900px) {
    .chat-layout {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 520px) {
    .mediator-card__header {
      align-items: flex-start;
    }

    .mediator-card__icon {
      border-radius: 12px;
    }
  }

  .mediator-inline-details {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: rgba(11, 47, 29, 0.95);
    font-size: 0.98rem;
  }

  .mediator-inline-details__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: rgba(11, 47, 29, 0.65);
  }

  .mediator-inline-details__value {
    overflow-wrap: anywhere;
  }

  @media (max-width: 640px) {
    .mediator-inline-details {
      flex-wrap: wrap;
      gap: 0.25rem;
    }
  }

  .conversation-action__icon {
    font-size: 1.1rem;
  }

  /* Other Links & Buttons */
  .chatview-link {
    color: #102a4d;
    font-weight: 600;
    text-decoration: none;
  }

  .chatview-link:hover {
    text-decoration: underline;
  }

  .sign-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: #0b5ed7;
    color: #fff;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 0.6rem;
  }

  .sign-btn:hover {
    background: #094fb3;
  }

  /* ==========================================================================
    9. Status & Alerts
    ========================================================================== */

  .conversation-alert {
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(16, 42, 77, 0.12);
  }

  .conversation-alert h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: #0f2142;
  }

  .conversation-link {
    color: #1a75ff;
    font-weight: 600;
    text-decoration: underline;
  }

  /* ==========================================================================
    10. Modals & Overlays
    ========================================================================== */

  .conversation-modal {
    position: fixed;
    inset: 0;
    background: rgba(16, 42, 77, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 2500;
    backdrop-filter: blur(3px);
  }

  .conversation-modal[hidden] {
    display: none;
  }

  /* The terms-of-use and chat-terms modals are native <dialog> elements opened
     with showModal() so the browser enforces a focus trap. Reset the dialog UA
     box defaults and let the shared .conversation-modal overlay styles drive the
     appearance. */
  dialog.conversation-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    color: inherit;
    outline: none;
  }

  dialog.conversation-modal:focus,
  dialog.conversation-modal:focus-visible {
    outline: none !important;
  }

  dialog.conversation-modal:not([open]) {
    display: none;
  }

  dialog.conversation-modal::backdrop {
    background: transparent;
  }

  .conversation-modal__content {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(16, 42, 77, 0.2);
    width: min(480px, 92vw);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .terms-body-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .terms-scroll-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .terms-scroll-hint i {
    color: #102a4d;
    font-size: 1rem;
  }

  .conversation-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .conversation-modal__header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #102a4d;
  }

  .conversation-modal__close {
    border: none;
    background: transparent;
    color: #0b172d;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 999px;
    transition: background 0.2s ease;
  }

  .conversation-modal__close:hover {
    background: rgba(16, 42, 77, 0.08);
  }

  .conversation-modal__body {
    font-size: 0.95rem;
    color: #0b172d;
    line-height: 1.5;
  }

  .conversation-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
  }

  .conversation-modal__actions .conversation-cta,
  .conversation-modal__actions .conversation-action {
    width: auto;
    min-width: 140px;
    justify-content: center;
  }

  /* Mediation outcome — inline display shown above the card action buttons and
     on the summary page. In the card it sits at the top of the actions column
     with a divider separating it from the buttons below. */
  .mediation-outcome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #334155;
  }

  .mediation-outcome__label {
    font-weight: 600;
    color: #475569;
  }

  .mediation-outcome__value {
    color: #0b172d;
  }

  .mediation-outcome__form {
    margin: 0;
  }

  /* Inline dropdown that saves the outcome immediately on change. */
  .mediation-outcome__select {
    padding: 0.25rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #0b172d;
    background: #fff;
    cursor: pointer;
  }

  /* Document Preview Overlay */
  .document-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 42, 77, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 5vw, 3rem);
    backdrop-filter: blur(4px);
    z-index: 3000;
  }

  .document-preview-overlay[hidden] {
    display: none;
  }

  .document-preview-overlay.is-open .document-preview-dialog {
    animation: fadeIn 180ms ease;
  }

  .document-preview-dialog {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(16, 42, 77, 0.25);
    width: min(1040px, 96vw);
    height: min(90vh, 960px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .document-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(16, 42, 77, 0.08);
  }

  .document-preview-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #102a4d;
  }

  .document-preview-title i {
    font-size: 1.25rem;
    color: #0b5ed7;
  }

  .document-preview-close {
    border: none;
    background: transparent;
    color: #0b172d;
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 999px;
    transition: background 0.2s ease;
  }

  .document-preview-close:hover,
  .document-preview-close:focus {
    background: rgba(16, 42, 77, 0.1);
  }

  .document-preview-body {
    flex: 1 1 auto;
    display: flex;
    background: rgba(16, 42, 77, 0.04);
    padding: 0.75rem;
  }

  .document-preview-body iframe {
    flex: 1 1 auto;
    height: 100%;
    border: none;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(16, 42, 77, 0.08);
  }

  /* ==========================================================================
    11. Accessibility & Animations
    ========================================================================== */

  .composer-action:focus-visible,
  .conversation-action:focus-visible,
  .info-toggle-btn:focus-visible,
  .send-msg-btn:focus-visible,
  button:focus-visible {
    outline: 3px solid #1a75ff;
    outline-offset: 2px;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes messageEnter {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }


  /* ==========================================================================
    12. Responsive Adjustments
    ========================================================================== */

  /* Extra Large Desktops - No changes needed here, wrapper handles it */
  @media (min-width: 1400px) {
    /* All max-width rules were removed from here */
  }

  /* Standard Desktops & Laptops */
  @media (min-width: 1101px) {
    .mediation-container.chat-page {
      max-height: 92vh;
      /* Override the global .mediation-container padding (20px 15px 80px) that
         otherwise leaves ~80px of dead space below the chat on desktop. */
      padding: clamp(0.5rem, 1vw, 0.9rem) clamp(0.75rem, 1.5vw, 1.5rem) clamp(0.75rem, 1.2vw, 1.1rem);
      /* Escape hatch: at 100% the chat fills the box exactly and nothing
         overflows, so no scrollbar shows. But when content can't fit the locked
         92vh box — heavy zoom or a short viewport — scroll instead of clipping
         the toolbar / composer away (which the base `overflow: hidden` does).
         Paired with the .chat-panel min-height floor below, which forces the
         overflow rather than letting the panel collapse to nothing. */
      overflow-y: auto;
    }

    /* Don't let the chat panel collapse under the toolbar + composer when
       vertical space is tight; below this it overflows and the container
       (above) scrolls, keeping the composer and actions reachable. */
    .chat-panel {
      min-height: clamp(360px, 45vh, 560px);
    }

    /* Single scroll owner: the outer .mediation-container.chat-page (above)
       scrolls; nothing between it and the content may clip. .chat-page-wrapper
       is otherwise a clip context because overflow-x: hidden forces overflow-y
       to compute to `auto` — visible here keeps it from clipping the End button
       against the chat when content exceeds the viewport under zoom. */
    .chat-page-wrapper {
      overflow: visible;
    }

    /* flex: 1 1 auto (basis auto, not 0): grows to fill the leftover space at
       100% just like basis 0 did, but takes its natural content height when the
       viewport is too short (zoom), overflowing the outer container so it
       scrolls — instead of being squeezed to fit and clipping the composer.
       overflow: visible overrides the base `overflow: hidden` clip for the same
       reason. */
    .message-page-container.chat-layout {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: visible;
      max-width: min(1100px, 100%);
      width: 100%;
      margin: 0 auto;
    }

    .chat-panel-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
    }

    /* Keep toolbar aligned with the centered chat column */
    .conversation-toolbar {
      max-width: min(1100px, 100%);
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(0.75rem, 1.4vw, 1.5rem);
      padding-right: clamp(0.75rem, 1.4vw, 1.5rem);
      box-sizing: border-box;
    }
  }

  /* Tablets & Small Desktops */
  @media (max-width: 1100px) {
    /* Structural height/overflow/flex for these containers is owned by the
       below-desktop block near the end of this file; only cosmetic rules live
       here. */
    .message-page-container.chat-layout {
      flex-direction: column;
      gap: clamp(0.6rem, 1.2vw, 1.1rem);
      width: 100%;
    }

    .chat-panel-wrapper {
      width: 100%;
      max-width: 100%;
      padding: 0 clamp(0.75rem, 2vw, 1.25rem);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .message-textarea {
      scrollbar-width: none;
    }

    .message-textarea::-webkit-scrollbar {
      display: none;
    }

    .chat-page-wrapper {
      padding: 0 clamp(0.75rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
      max-width: 100%;
    }

    .mediation-container.chat-page {
      padding: 0 clamp(0.75rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
      max-width: 100%;
    }

    .mediation-container.chat-page h1 {
      padding: 0 clamp(0.75rem, 2vw, 1.5rem);
      font-size: clamp(1.4rem, 2vw, 1.75rem);
      margin-bottom: 0.35rem;
    }

    .mediation-container.chat-page p {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .chat-panel {
      border-radius: 18px;
      max-width: 100%;
      box-shadow: 0 16px 32px rgba(16, 42, 77, 0.12);
    }

    .message-list-container {
      padding: clamp(0.9rem, 2vw, 1.25rem);
      overflow-x: hidden;
    }

    .message-list {
      max-width: 100%;
    }

    .chat-message {
      max-width: 84%;
      word-break: break-word;
    }

    .message-bubble {
      padding: 0.7rem 0.95rem 0.65rem;
      font-size: 0.95rem;
    }

    .message-composer,
    .composer-input-row {
      max-width: 100%;
      box-sizing: border-box;
    }

    .composer-input-row {
      gap: clamp(0.5rem, 1.5vw, 0.85rem);
    }

    .composer-attach-btn {
      min-height: clamp(3rem, 7vw, 3.75rem);
      padding: 0 0.85rem;
    }

    .message-textarea {
      min-height: clamp(3rem, 8vw, 4.2rem);
      font-size: 1rem;
    }

    .send-msg-btn {
      min-height: clamp(3rem, 8vw, 4.2rem);
      padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1.25rem, 3vw, 1.75rem);
      font-size: 1rem;
    }

    .conversation-cta,
    .conversation-action {
      border-radius: 16px;
      padding: clamp(0.75rem, 2vw, 1rem) clamp(0.9rem, 2vw, 1.1rem);
      font-size: 1rem;
    }

    .conversation-cta__label {
      font-size: 1rem;
    }

    .conversation-info-card {
      width: min(640px, 94vw);
      border-radius: 20px;
    }

    .conversation-info-card__header {
      padding: 1rem 1.5rem 0.9rem;
    }

    .conversation-info-card__body {
      padding: 1rem 1.5rem 1.35rem;
    }

    .document-preview-dialog {
      width: min(760px, 94vw);
      height: min(88vh, 820px);
    }

    .document-preview-body iframe {
      min-height: 65vh;
    }

    .info-toggle-btn {
      min-height: 46px;
      font-size: 0.95rem;
      padding: 0.6rem 1.1rem;
    }

    .chat-panel-wrapper {
      order: 1;
    }
  }

  /* Tablet sizes (768-1024px) - constrain width to prevent full-screen stretch */
  @media (min-width: 768px) and (max-width: 1024px) {
    .message-page-container.chat-layout {
      max-width: 850px;
      margin: 0 auto;
    }

    .chat-page-wrapper {
      max-width: 850px;
      margin: 0 auto;
    }
  }

  /* Mobile and Tablet Devices (Portrait) */
  @media (max-width: 1024px) {
    /* Adding responsive padding to the master wrapper */
    .chat-page-wrapper {
      padding: 0;
      max-width: 100vw;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
    }

    .mediation-container.chat-page {
      padding: 0 12px 0.5rem;
      max-width: 100vw;
      overflow-x: hidden;
    }

    .mediation-container.chat-page h1 {
      font-size: 1.5rem;
      padding: 0;
      flex: 0 0 auto;
      margin-bottom: 0.25rem;
    }

    .mediation-container.chat-page p {
      margin-bottom: 0.5rem;
      font-size: 0.95rem;
      flex: 0 0 auto;
    }


    .message-page-container.chat-layout {
      gap: 0.5rem;
      max-width: 100%;
      overflow-x: hidden;
      padding-bottom: 0.5rem;
      display: flex;
      flex-direction: column;
    }

    .chat-panel-wrapper {
      max-width: 100%;
      overflow-x: hidden;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .chat-panel {
      border-radius: 16px;
      max-width: 100%;
      overflow-x: hidden;
    }

    .message-list-container {
      padding: 0.85rem 0.75rem 1rem;
      overflow-x: hidden;
    }

    .message-list {
      max-width: 100%;
    }

    .chat-message {
      max-width: 88%;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .message-bubble {
      padding: 0.65rem 0.85rem 0.6rem;
      font-size: 0.9rem;
      max-width: 100%;
      box-sizing: border-box;
    }

    .composer-input-row {
      gap: 0.5rem;
    }

    .composer-attach-btn {
      padding: 0 0.75rem;
      min-width: 2.5rem;
      min-height: clamp(3rem, 12vw, 4.5rem);
    }

    .composer-attach-label {
      display: none;
    }

    .message-textarea {
      min-height: clamp(3rem, 14vw, 4.6rem);
      font-size: 0.95rem;
      max-width: 100%;
      box-sizing: border-box;
    }

    .send-msg-btn {
      padding: clamp(0.4rem, 2vw, 0.6rem) clamp(1.25rem, 4vw, 1.75rem);
      min-width: 100px;
      font-size: 0.95rem;
      flex-shrink: 0;
      min-height: clamp(3rem, 12vw, 4.5rem);
      line-height: 1;
    }

    .message-composer {
      max-width: 100%;
      box-sizing: border-box;
    }

    .composer-input-row {
      max-width: 100%;
      box-sizing: border-box;
    }

    .chat-panel-wrapper {
      order: 1;
    }

    .conversation-cta,
    .conversation-action {
      padding: 0.8rem 0.9rem;
      font-size: 0.95rem;
      border-radius: 16px;
    }

    .conversation-cta__label {
      font-size: 0.95rem;
    }

    .conversation-info-card {
      width: min(540px, 96vw);
      border-radius: 18px;
    }

    .conversation-info-card__header {
      padding: 1rem 1.25rem 0.85rem;
    }

    .conversation-info-card__body {
      padding: 1rem 1.25rem 1.25rem;
    }

    .document-preview-dialog {
      width: min(540px, 94vw);
      height: min(88vh, 720px);
    }

    .document-preview-body iframe {
      min-height: 60vh;
    }

    .info-toggle-btn {
      padding: 0.55rem 1rem;
      font-size: 0.9rem;
      min-height: 44px;
    }

    .composer-toolbar {
      gap: 0.5rem;
    }

    .mediation-container h1 {
      padding: 0 clamp(0.75rem, 3vw, 1.35rem);
    }
  }

  /* Mobile Devices (Landscape) */
  @media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    .chat-panel {
      min-height: 50vh;
      max-height: 80vh;
    }

    .message-list-container {
      max-height: 50vh; /* This might need adjustment delete */
      padding: 0.75rem;
    }

    .message-composer {
      padding: 0.75rem;
    }

    .message-textarea {
      min-height: clamp(2.75rem, 10vw, 3.75rem);
    }

    .conversation-info-panel {
      padding: 1rem;
    }
  }

  /* Small Mobile Devices */
  @media (max-width: 540px) {
    .conversation-info-panel {
      align-items: center;
      padding: 1.25rem 0.5rem;
    }

    .conversation-info-card {
      border-radius: 16px;
      max-height: 88vh;
      width: 98vw;
      max-width: 98vw;
    }

    .conversation-info-card__header {
      padding: 0.9rem 1rem 0.75rem;
    }

    .conversation-info-card__header h3 {
      font-size: 1rem;
    }

    .conversation-info-card__body {
      padding: 0.9rem 1rem 1rem;
    }

    .chat-message {
      max-width: 92%;
    }

    .message-bubble {
      border-radius: 14px;
      padding: 0.6rem 0.8rem 0.55rem;
    }

    .message-meta {
      font-size: 0.8rem;
      gap: 0.4rem;
    }

    .message-content {
      font-size: 0.9rem;
    }

    .message-timestamp {
      font-size: 0.7rem;
    }

    .message-attachment {
      flex-direction: column;
      align-items: stretch;
      padding: 0.5rem 0.65rem;
    }

    .attachment-icon {
      font-size: 1.25rem;
    }

    .attachment-name {
      font-size: 0.85rem;
    }

    .attachment-actions {
      gap: 0.35rem;
      font-size: 0.8rem;
    }

    .composer-input-row {
      gap: 0.4rem;
    }

    .composer-attach-btn {
      padding: 0 0.6rem;
      min-width: 2.25rem;
      min-height: 2.75rem;
    }

    .composer-attach-btn i {
      font-size: 0.9rem;
    }

    .message-textarea {
      min-height: 2.75rem;
      padding: 0.7rem 0.85rem;
      font-size: 0.9rem;
    }

    .send-msg-btn {
      padding: 0.35rem 1rem;
      min-width: 85px;
      font-size: 0.9rem;
      min-height: 2.75rem;
      line-height: 1;
    }

    .message-composer {
      padding: 0.85rem;
    }

    .chat-panel {
      /* Resetting height constraints for mobile to let flexbox work */
      min-height: 0;
      height: auto !important;
      max-height: none !important;
      border-radius: 14px;
      flex: 1 1 auto;
    }

    .chat-panel-wrapper {
      flex: 1 1 auto;
    }

    .message-list-container {
      padding: 0.75rem 0.6rem 0.85rem;
       /* This might need adjustment */
    }

    .conversation-action {
      padding: 0.7rem 1.1rem;
      font-size: 0.88rem;
      min-height: 44px;
      gap: 0.5rem;
    }

    .conversation-action__icon {
      font-size: 1rem;
    }

    .conversation-alert {
      padding: 0.8rem 0.9rem;
    }

    .conversation-alert h3 {
      font-size: 0.95rem;
    }

    .conversation-modal {
      padding: 1.5rem 0;
    }

    .conversation-modal__content {
      padding: 1.25rem;
      width: min(440px, 92vw);
      margin-inline: auto;
    }

    .conversation-modal__header h3 {
      font-size: 1.05rem;
    }

    .conversation-modal__body {
      font-size: 0.88rem;
    }

    .conversation-modal__actions {
      gap: 0.6rem;
    }

    .document-preview-dialog {
      width: min(460px, 96vw);
      height: min(84vh, 600px);
      border-radius: 16px;
    }

    .document-preview-header {
      padding: 0.85rem 1rem;
    }

    .document-preview-title h3 {
      font-size: 0.95rem;
    }

  }

  /* Very Small Mobile Devices */
  @media (max-width: 480px) {
    .chat-page-wrapper {
      padding: 0 0.35rem;
    }

    .conversation-cta,
    .conversation-action {
      flex-wrap: nowrap;
      gap: 0.65rem;
      padding: 0.75rem 0.85rem;
    }

    .conversation-cta__icon {
      font-size: 1rem;
      flex-shrink: 0;
    }

    .conversation-cta__label {
      flex: 1 1 auto;
      text-align: left;
      font-size: 0.9rem;
    }

    .conversation-cta__chevron {
      flex-shrink: 0;
    }
  }

  /* Below-desktop (phones through tablets/small laptops): fully stack the
     toolbar so the buttons never get squeezed into / over the chat box, each
     full width on its own row. The desktop inline-row layout only applies at
     >=1101px, so everything under that shares this stacked treatment. */
  @media (max-width: 1100px) {
    /* Below desktop, let the document body be the SINGLE scroll owner (html/body
       already scroll naturally — see base.css). Dropping the ~94vh lock and the
       container's own overflow-y: auto removes the second scrollbar: the page
       just flows and grows with its content. These rules deliberately and fully
       override the older app-shell rules in the max-width: 1100px / 1024px
       blocks above, which otherwise leave height: 94vh / height: 100% /
       max-height: 100% / overflow: hidden on these wrappers — that combination
       forces the chat panel to full height while capping + clipping it, sliding
       it under the stacked toolbar and cutting off the composer. */
    .mediation-container.chat-page {
      height: auto;
      min-height: 0;
      max-height: none;
      overflow: visible;
    }

    /* Natural-height stacking: no viewport-fill fight, no height caps, no inner
       clipping, so the toolbar / chat / composer can never overlap. */
    .chat-page-wrapper,
    .message-page-container.chat-layout,
    .chat-panel-wrapper {
      flex: 0 0 auto;
      height: auto;
      max-height: none;
      min-height: 0;
      overflow: visible;
    }

    .chat-panel {
      flex: 0 0 auto;
      height: auto;
      max-height: none;
      /* A usable, bounded chat area: the message list scrolls inside this (see
         below), so the panel stays a sensible height and the *page* grows under
         zoom rather than the panel itself ballooning. Keeps the base
         overflow: hidden so the rounded panel clips its own content cleanly. */
      min-height: clamp(320px, 55vh, 560px);
    }

    /* Internal scroll so the panel doesn't grow unbounded with message history. */
    .message-list-container {
      max-height: 60vh;
    }

    .conversation-toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.4rem;
      flex: 0 0 auto;
      /* Match the gap below the End button (the chat-page-wrapper gap) so the
         space above "Conversation details" mirrors the space below the toolbar. */
      margin-top: clamp(0.65rem, 1.2vw, 1.1rem);
    }

    .conversation-toolbar > .conversation-cta {
      width: 100%;
    }

    .conversation-toolbar__actions {
      margin-left: 0;
      width: 100%;
      gap: 0.4rem;
      flex-direction: column;
      align-items: stretch;
      flex-wrap: nowrap;
    }

    .conversation-toolbar .conversation-cta {
      width: 100%;
      flex: 0 0 auto;
      padding: 0.55rem 0.85rem;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(16, 42, 77, 0.08);
    }

    .conversation-toolbar .conversation-cta__label {
      font-size: 0.92rem;
    }

    .conversation-status-pill-wrap {
      width: 100%;
      justify-content: center;
    }

    .conversation-status-pill {
      width: 100%;
      justify-content: center;
      padding: 0.5rem 0.85rem;
    }
  }