/* Conversations module - three-pane email client layout (phases 6-7) */

.conversations-app {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ------------------------------------------------------------------ */
/* Toolbar                                                             */
/* ------------------------------------------------------------------ */

.conversations-toolbar {
    gap: 8px;
}

.conv-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.conv-search-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}

.conv-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--gray-400, 220 9% 64%));
    pointer-events: none;
}

.conv-search-wrap .form-control {
    padding-left: 32px;
}

.conv-client-wrap {
    flex: 0 1 220px;
    min-width: 180px;
}

.conv-client-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    border-radius: var(--r-md, 8px);
}

#conv-filter-user {
    flex: 0 1 200px;
    min-width: 160px;
}

.conv-date-input {
    flex: 0 1 150px;
    min-width: 130px;
}

.conv-inline-label {
    margin-bottom: 0;
    white-space: nowrap;
}

#conv-sort,
#conv-order {
    width: auto;
    min-width: 110px;
}

.conv-sync-result {
    max-width: 320px;
}

.conv-last-sync {
    white-space: nowrap;
}

.conv-toolbar-status {
    min-height: 20px;
}

#conv-result-count:empty {
    display: none;
}

.conv-filter-badge {
    background: hsl(var(--primary-50, 260 95% 97%));
    color: hsl(var(--primary-700, 250 45% 48%));
    font-size: var(--t-xs, 12px);
    font-weight: 600;
}

.conv-reset-link {
    font-size: var(--t-xs, 12px);
    color: hsl(var(--gray-600, 220 11% 35%));
    text-decoration: none;
}

.conv-reset-link:hover {
    color: hsl(var(--primary-600, 250 60% 58%));
}

.message-item mark {
    padding: 0 1px;
    border-radius: 2px;
    background: hsl(48 96% 76%);
    color: inherit;
}

.conv-spin {
    display: inline-block;
    animation: conv-rotate 0.8s linear infinite;
}

@keyframes conv-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ */
/* Three-pane layout                                                   */
/* ------------------------------------------------------------------ */

.conversations-layout {
    display: grid;
    grid-template-columns: 190px minmax(300px, 400px) 1fr;
    gap: 12px;
    align-items: start;
    min-height: 420px;
}

/* Sans min-width:0, un courriel HTML avec table large etire la grille
   et fait deborder la page horizontalement. */
.conversations-layout > * {
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Folders                                                             */
/* ------------------------------------------------------------------ */

.conversations-folders {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.folder-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-md, 8px);
    background: transparent;
    color: hsl(var(--gray-700, 220 13% 25%));
    font-size: var(--t-sm, 14px);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--d-fast, 120ms) ease;
}

.folder-item:hover {
    background: hsl(var(--gray-100, 220 13% 95%));
}

.folder-item.active {
    background: hsl(var(--primary-50, 260 95% 97%));
    color: hsl(var(--primary-700, 250 45% 48%));
    font-weight: 600;
}

.folder-item .folder-label {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Unread dots (folder + navbar)                                       */
/* ------------------------------------------------------------------ */

.conversations-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: hsl(var(--primary-500, 250 75% 69%));
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Message list                                                        */
/* ------------------------------------------------------------------ */

.conversations-list {
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    min-height: 300px;
}

.message-list {
    display: flex;
    flex-direction: column;
}

.message-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid hsl(var(--gray-100, 220 13% 95%));
    cursor: pointer;
    transition: background-color var(--d-fast, 120ms) ease;
}

.message-item:last-child {
    border-bottom: 0;
}

.message-item:hover {
    background: hsl(var(--gray-50, 220 14% 98%));
}

.message-item.selected {
    background: hsl(var(--primary-50, 260 95% 97%));
    box-shadow: inset 3px 0 0 hsl(var(--primary-500, 250 75% 69%));
}

.message-item .unread-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: hsl(var(--primary-500, 250 75% 69%));
}

.message-item.unread .message-sender,
.message-item.unread .message-subject {
    font-weight: 700;
    color: hsl(var(--gray-900, 220 18% 11%));
}

.message-main {
    flex: 1 1 auto;
    min-width: 0;
}

.message-top,
.message-mid,
.message-bottom {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.message-sender {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-sm, 14px);
    color: hsl(var(--gray-800, 220 15% 18%));
}

.message-date {
    flex: 0 0 auto;
    font-size: var(--t-xs, 12px);
    color: hsl(var(--gray-500, 220 9% 46%));
    white-space: nowrap;
}

.message-subject {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-sm, 14px);
    color: hsl(var(--gray-700, 220 13% 25%));
}

.message-attachment-icon {
    flex: 0 0 auto;
    color: hsl(var(--gray-500, 220 9% 46%));
}

.message-client {
    flex: 0 0 auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: hsl(var(--gray-100, 220 13% 95%));
    color: hsl(var(--gray-600, 220 11% 35%));
    font-size: var(--t-xs, 12px);
    font-weight: 500;
}

.message-preview {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-xs, 12px);
    color: hsl(var(--gray-500, 220 9% 46%));
}

.conv-mark-toggle {
    flex: 0 0 auto;
    align-self: center;
    color: hsl(var(--gray-400, 220 9% 64%));
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--d-fast, 120ms) ease;
}

.message-item:hover .conv-mark-toggle,
.message-item:focus-within .conv-mark-toggle {
    opacity: 1;
}

.conv-mark-toggle:hover {
    color: hsl(var(--primary-600, 250 60% 58%));
}

.message-empty-icon,
.thread-empty-icon,
.conversations-locked-icon {
    font-size: 40px;
    color: hsl(var(--gray-300, 220 12% 84%));
}

/* ------------------------------------------------------------------ */
/* Thread pane                                                         */
/* ------------------------------------------------------------------ */

.conversation-thread {
    overflow-y: auto;
    /* dvh : hauteur reelle du viewport mobile ; le fil defile dans son cadre
       au lieu de pousser la page et de chevaucher le footer. */
    max-height: max(300px, calc(100dvh - 220px));
    min-height: 300px;
    padding: 12px;
}

/* style-v2 pose [data-ui="v2"] .card { overflow: visible } (specificite
   superieure) : sans ces overrides par id, les panneaux ne defilent plus
   dans leur cadre et le fil chevauche le footer. */
#conversations-list {
    overflow-y: auto;
}

#conversation-thread {
    overflow-y: auto;
}

.thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thread-message {
    padding: 14px 16px;
    border: 1px solid hsl(var(--gray-200, 220 13% 91%));
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-xs, 0 1px 0 rgb(20 14 60 / 0.04));
}

.thread-message.thread-sent {
    background: hsl(var(--primary-50, 260 95% 97%) / 0.5);
}

.thread-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.thread-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.thread-from {
    font-weight: 600;
    font-size: var(--t-sm, 14px);
    color: hsl(var(--gray-800, 220 15% 18%));
}

.thread-direction {
    background: hsl(var(--gray-100, 220 13% 95%));
    color: hsl(var(--gray-600, 220 11% 35%));
    font-size: var(--t-xs, 12px);
    font-weight: 500;
}

.thread-received .thread-direction {
    background: hsl(var(--primary-50, 260 95% 97%));
    color: hsl(var(--primary-700, 250 45% 48%));
}

.thread-date {
    font-size: var(--t-xs, 12px);
    color: hsl(var(--gray-500, 220 9% 46%));
    white-space: nowrap;
}

.thread-subject {
    margin-bottom: 8px;
    color: hsl(var(--gray-900, 220 18% 11%));
}

.thread-body {
    font-size: var(--t-sm, 14px);
    color: hsl(var(--gray-700, 220 13% 25%));
    overflow-wrap: break-word;
    /* Tables larges des courriels HTML : defilement local, pas de chevauchement. */
    overflow-x: auto;
    /* Les styles inline des courriels (position, largeur fixe) restent
       confines au cadre du message : plus de chevauchement du footer. */
    position: relative;
    contain: paint;
}

.thread-body img {
    max-width: 100%;
    height: auto;
}

.thread-attachments {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed hsl(var(--gray-200, 220 13% 91%));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thread-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm, 14px);
}

.thread-attachment-preview {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-invoice-suggest {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid hsl(var(--gray-200, 220 13% 91%));
    border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Thread action bar + compose panel (phase 7)                         */
/* ------------------------------------------------------------------ */

.conv-thread-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid hsl(var(--gray-100, 220 13% 95%));
}

.conv-thread-actions.d-none {
    display: none;
}

.conv-compose {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.conv-compose.d-none {
    display: none;
}

.conv-compose-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid hsl(var(--gray-100, 220 13% 95%));
}

.conv-compose-ccrow {
    display: flex;
    gap: 8px;
}

.conv-compose-ccfield {
    flex: 1 1 50%;
    min-width: 0;
}

.conv-compose-editor {
    min-height: 180px;
    background: hsl(0 0% 100%);
}

.conv-compose .ql-toolbar,
.conv-compose .ql-container {
    border-color: hsl(var(--gray-200, 220 13% 91%));
}

.conv-compose .ql-toolbar {
    border-radius: var(--r-md, 8px) var(--r-md, 8px) 0 0;
}

.conv-compose .ql-container {
    border-radius: 0 0 var(--r-md, 8px) var(--r-md, 8px);
    font-size: var(--t-sm, 14px);
}

.conv-quote-toggle {
    text-decoration: none;
    font-size: var(--t-sm, 14px);
    color: hsl(var(--gray-600, 220 11% 35%));
}

.conv-compose-quote {
    margin-top: 6px;
    padding: 10px 12px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid hsl(var(--gray-200, 220 13% 91%));
    border-left: 3px solid hsl(var(--gray-300, 220 12% 84%));
    border-radius: var(--r-md, 8px);
    background: hsl(var(--gray-50, 220 14% 98%));
    font-size: var(--t-sm, 14px);
    color: hsl(var(--gray-600, 220 11% 35%));
}

.conv-compose-quote blockquote {
    margin: 0;
}

.conv-drop-zone {
    padding: 12px;
    border: 2px dashed hsl(var(--gray-300, 220 12% 84%));
    border-radius: var(--r-md, 8px);
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: border-color var(--d-fast, 120ms) ease;
}

.conv-drop-zone:hover,
.conv-drop-zone.drag-over {
    border-color: hsl(var(--primary-500, 250 75% 69%));
}

.conv-drop-zone .drop-zone-overlay {
    display: none;
}

.conv-drop-zone.drag-over .drop-zone-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    background: hsl(var(--primary-50, 260 95% 97%) / 0.92);
    border-radius: var(--r-md, 8px);
    color: hsl(var(--primary-700, 250 45% 48%));
}

.conv-drop-icon {
    font-size: 24px;
}

#convFilesListItems .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#convFilesListItems .file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#convFilesListItems .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-compose-lang {
    width: auto;
    min-width: 110px;
}

#conv-compose-bcc-wrap input:disabled {
    background: hsl(var(--gray-100, 220 13% 95%));
    cursor: not-allowed;
}

.conv-compose-footer {
    padding-top: 8px;
    border-top: 1px solid hsl(var(--gray-100, 220 13% 95%));
}

@media (max-width: 575px) {
    .conv-compose-ccrow {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------ */
/* Locked state                                                        */
/* ------------------------------------------------------------------ */

.conversations-locked-card {
    max-width: 520px;
    border-radius: var(--r-xl, 16px);
}

.conversations-locked-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: hsl(var(--gray-100, 220 13% 95%));
}

.conversations-locked-icon {
    font-size: 32px;
    color: hsl(var(--gray-500, 220 9% 46%));
}

/* ------------------------------------------------------------------ */
/* Responsive: stack the three panes on mobile                         */
/* ------------------------------------------------------------------ */

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

    .conversations-folders {
        flex-direction: row;
    }

    .folder-item {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
    }

    .conversations-list {
        max-height: none;
    }

    /* Mobile : le fil garde son propre defilement au lieu de pousser la page. */
    .conversation-thread {
        max-height: max(300px, calc(100dvh - 120px));
    }

    .conv-sort-wrap {
        margin-left: 0 !important;
    }
}

@media (max-width: 575px) {
    .message-bottom .message-client {
        max-width: 40%;
    }

    .conv-search-wrap,
    .conv-client-wrap,
    #conv-filter-user,
    .conv-date-input {
        flex: 1 1 100%;
    }
}