/* ============================================
   FloatingChatWindow — Responsive Full Rewrite
   Desktop / Tablet (<=1024) / Mobile (<=600)
   ============================================ */

:root {
    --fcw-compact-w: 600px; --fcw-compact-h: 420px;
    --fcw-minimized-w: 280px; --fcw-minimized-h: 40px;
    --fcw-conv-panel-w: 220px;
    --fcw-bubble-max-w: 80%;
    --fcw-header-h: 40px;
    --fcw-font-title: 0.875rem;
    --fcw-font-conv-name: 0.8rem;
    --fcw-font-conv-last: 0.7rem;
}

@keyframes fcw-shake {
    0%{transform:translateX(0)}10%{transform:translateX(-4px)}20%{transform:translateX(4px)}30%{transform:translateX(-4px)}40%{transform:translateX(4px)}50%{transform:translateX(-2px)}60%{transform:translateX(2px)}70%{transform:translateX(-2px)}80%{transform:translateX(2px)}90%{transform:translateX(0)}100%{transform:translateX(0)}
}

/* === Container: Compact = Base === */
.fcw-container {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: var(--fcw-compact-w);
    height: var(--fcw-compact-h);
    z-index: 1200;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    transition: width .3s, height .3s, border-radius .3s;
}
.fcw-container.fcw-buzz {
    animation: fcw-shake .5s ease-in-out 3;
}

/* === Minimized === */
.fcw-container.fcw-minimized {
    height: var(--fcw-minimized-h) !important;
    width: var(--fcw-minimized-w) !important;
    transition: width .3s, height .3s;
}

/* === FullScreen === */
.fcw-container.fcw-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0;
    z-index: 1300;
}

/* === Header === */
.fcw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: var(--mud-palette-primary);
    color: #fff;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    min-height: var(--fcw-header-h);
}
.fcw-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.fcw-header-title {
    font-weight: 600;
    font-size: var(--fcw-font-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fcw-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* === Body (holds conv-panel + chat-panel) === */
.fcw-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: row;
    position: relative; /* anchor for absolute conv panel on mobile */
}

/* === Conv Panel === */
.fcw-conv-panel {
    width: var(--fcw-conv-panel-w);
    min-width: 180px;
    border-right: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--mud-palette-background-grey);
    transition: transform .25s, width .3s;
}
.fcw-conv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
.fcw-conv-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* === Tab Bar === */
.fcw-tabbar {
    display: flex;
    align-items: stretch;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
    gap: 0;
}
.fcw-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
    position: relative;
    min-width: 0;
    line-height: 1.2;
}
.fcw-tab:hover {
    color: var(--mud-palette-text-primary);
    background: rgba(0,0,0,0.03);
}
.fcw-tab.fcw-tab-active {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 600;
}
.fcw-tab-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.fcw-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
.fcw-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* === Tab Header Actions (for Group tab) === */
.fcw-tab-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    flex-shrink: 0;
}

/* === Empty state for tab content === */
.fcw-empty-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.5;
}

/* === Chat Panel === */
.fcw-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.fcw-chat-header-bar {
    padding: 8px 12px;
    font-weight: 600;
    font-size: .85rem;
    background-color: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fcw-chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.fcw-chat-input {
    padding: 6px 8px;
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* === Messages === */
.fcw-bubble {
    border-radius: 12px;
    max-width: var(--fcw-bubble-max-w);
    word-break: break-word;
}

/* === Conv Items === */
.fcw-conv-item {
    position: relative;
    cursor: pointer;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background-color .15s;
}
.fcw-conv-item:hover { background-color: var(--mud-palette-action-default-hover); }
.fcw-conv-item.fcw-active { background-color: var(--mud-palette-primary-hover); }
.fcw-conv-name {
    font-weight: 600;
    font-size: var(--fcw-font-conv-name);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fcw-conv-lastmsg {
    font-size: var(--fcw-font-conv-last);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.fcw-conv-item .fcw-del-btn {
    opacity: 0;
    transition: opacity .15s;
    background: 0 0;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: 2px;
    right: 2px;
}
.fcw-conv-item:hover .fcw-del-btn { opacity: 1; }
.fcw-conv-item .fcw-del-btn:hover { background-color: rgba(255,0,0,.1); color: #d32f2f; }

.fcw-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.fcw-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1199;
    background: 0 0;
}

/* === TABLET <=1024px === */
@media (max-width: 1024px) {
    :root {
        --fcw-compact-w: min(90vw, 500px);
        --fcw-compact-h: min(55vh, 420px);
        --fcw-minimized-w: 220px;
        --fcw-conv-panel-w: 200px;
        --fcw-bubble-max-w: 85%;
    }
}

/* === MOBILE <=600px === */
@media (max-width: 600px) {
    :root {
        --fcw-compact-w: 100vw;
        --fcw-compact-h: 65vh;
        --fcw-minimized-w: 180px;
        --fcw-minimized-h: 36px;
        --fcw-bubble-max-w: 90%;
        --fcw-font-title: .8125rem;
        --fcw-font-conv-name: .75rem;
        --fcw-font-conv-last: .6875rem;
        --fcw-header-h: 44px;
    }

    /* Bottom-sheet + full-width positioning (all states) */
    .fcw-container {
        left: 0;
        right: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Bottom-sheet rounded corners */
    .fcw-container.fcw-compact {
        border-radius: 16px 16px 0 0;
    }

    /* Conv panel: overlay absolute within body, solid backdrop */
    .fcw-container.fcw-fullscreen .fcw-conv-panel,
    .fcw-container.fcw-compact .fcw-conv-panel {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important;
        z-index: 20;
        border-right: none;
        background-color: var(--mud-palette-surface);
    }

    /* Default: hidden off the left */
    .fcw-conv-panel { transform: translateX(-100%); }
    /* Show when _showConvPanel = true (no fcw-conv-hidden class) */
    .fcw-conv-panel:not(.fcw-conv-hidden) { transform: translateX(0); }

    /* Tab bar: slightly larger touch targets */
    .fcw-tab { padding: 10px 4px; font-size: 0.8rem; }
    .fcw-tab-icon { font-size: 1.1rem; }
    .fcw-tab-label { font-size: 0.75rem; }

    /* Touch-friendly sizing */
    .fcw-conv-item { padding: 12px 16px; min-height: 48px; }
    .fcw-header { padding: 6px 16px; }

    /* iOS zoom fix */
    .fcw-chat-input .mud-input-control input,
    .fcw-chat-input .mud-input-control textarea {
        font-size: 16px !important;
    }
    .fcw-chat-input { flex-direction: row; }
}

/* === Group Info Panel — Slide-in === */
.gip-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    z-index: 15;
    background: var(--mud-palette-surface, #fff);
    border-left: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    box-shadow: -2px 0 8px rgba(0,0,0,0.08);
    overflow-y: auto;
    transition: transform 0.2s ease;
}
.gip-closed {
    transform: translateX(100%);
    pointer-events: none;
}
.gip-open {
    transform: translateX(0);
}
.gip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}
.gip-body {
    padding: 8px 16px;
}
.gip-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #f0f0f0);
}
.gip-section:last-child {
    border-bottom: none;
}
.gip-member-list {
    max-height: 200px;
    overflow-y: auto;
}
.gip-member-item {
    border-radius: 6px;
    transition: background 0.15s;
}
.gip-member-item:hover {
    background: var(--mud-palette-background-grey, #f5f5f5);
}
.gip-actions .mud-button-root {
    justify-content: flex-start;
}

/* === Locked Group Banner === */
.fcw-locked-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    gap: 6px;
}

/* === System Message Styling === */
.fcw-chat-msgs .text-center {
    display: flex;
    justify-content: center;
}
.fcw-chat-msgs .text-center .mud-typography {
    background: rgba(0,0,0,0.03);
    padding: 4px 12px;
    border-radius: 12px;
    max-width: 80%;
    font-size: 0.75rem;
}

/* === Create Group Dialog — member row selection === */
.selected-user-row {
    background: var(--mud-palette-primary-hover, rgba(25,118,210,0.08));
}

/* === VERY SMALL <=380px === */
@media (max-width: 380px) {
    :root {
        --fcw-minimized-w: 150px;
        --fcw-compact-h: 70vh;
    }
    .fcw-conv-lastmsg { max-width: 100px; }
    .fcw-header-actions .mud-icon-button { padding: 4px; }
}