/**
 * BeeJobs Mesagerie – Stiluri moderne
 * CSS Variables, flexbox, transitions
 */
:root {
    --msg-bg: #fff;
    --msg-sidebar-bg: #f8f9fa;
    --msg-head-candidat: linear-gradient(135deg, #fff9f0 0%, #fff5eb 100%);
    --msg-head-agentie: linear-gradient(135deg, #e8f0ff 0%, #d4e1ff 100%);
    --msg-bubble-me: linear-gradient(135deg, #ff7f00 0%, #ffa040 100%);
    --msg-bubble-them: #e9ecef;
    --msg-active-candidat: #ff7f00;
    --msg-active-agentie: #5a7bd4;
    --msg-radius: 12px;
    --msg-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

body { padding-top: 0; background: #fff url('/hexellence.fw.png'); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; }
/* Elimină spațiul deasupra navbar pe pagina mesagerie */
body.msg-body-agentie { margin: 0 !important; padding: 0 !important; }
body.msg-body-agentie .navbar { margin-top: 0 !important; }
.nav-link { color: #333; }
.nav-link:hover { background-color: navajowhite; }

.msg-layout {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 450px;
    border: 1px solid #e0e0e0;
    border-radius: var(--msg-radius);
    overflow: hidden;
    background: var(--msg-bg);
    box-shadow: var(--msg-shadow);
}

.msg-sidebar {
    width: 340px;
    min-width: 280px;
    border-right: 1px solid #eee;
    overflow-y: auto;
    background: var(--msg-sidebar-bg);
    display: flex;
    flex-direction: column;
}

.msg-sidebar-header {
    padding: 1rem 1.25rem;
    background: var(--msg-bg);
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.msg-conv-list { flex: 1; overflow-y: auto; padding: 0.5rem; }

.msg-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msg-head {
    padding: 1rem 1.25rem;
    background: var(--msg-head-candidat);
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    font-weight: 600;
}

.msg-body-agentie .msg-head { background: var(--msg-head-agentie); }

.msg-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.msg-composer {
    padding: 1rem;
    border-top: 1px solid #eee;
    background: var(--msg-sidebar-bg);
    flex-shrink: 0;
}

.msg-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.msg-form .form-control { flex: 1; }
.msg-form .btn { flex-shrink: 0; }

.conv-item {
    padding: 1rem;
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 0.25rem;
    transition: background 0.2s, border-color 0.2s;
    border-left: 4px solid transparent;
}

.conv-item:hover { background: rgba(255,127,0,0.08); }
.msg-body-agentie .conv-item:hover { background: rgba(90,123,212,0.08); }

.conv-item.active {
    background: rgba(255,127,0,0.12);
    border-left-color: var(--msg-active-candidat);
}
.msg-body-agentie .conv-item.active {
    background: rgba(90,123,212,0.1);
    border-left-color: var(--msg-active-agentie);
}

.conv-item.unread { background: #fffef8; }
.conv-item .conv-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.conv-item .conv-time { font-size: 0.75rem; color: #888; }
.conv-item .conv-item-job { font-size: 0.85rem; color: #666; }
.conv-item .conv-item-preview { font-size: 0.85rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg-bubble {
    max-width: 78%;
    padding: 0.65rem 1rem;
    border-radius: var(--msg-radius);
    align-self: flex-start;
}
.msg-bubble.me {
    background: var(--msg-bubble-me);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.msg-bubble.them {
    background: var(--msg-bubble-them);
    color: #333;
    border-bottom-left-radius: 4px;
}
.msg-bubble .msg-text { word-wrap: break-word; }
.msg-bubble .msg-time { font-size: 0.7rem; opacity: 0.85; margin-top: 0.25rem; }

.msg-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #666;
}
.msg-empty-state i { font-size: 2.5rem; color: #ccc; margin-bottom: 1rem; display: block; }
.msg-empty-state p { margin-bottom: 1rem; }
.msg-placeholder { text-align: center; padding: 2rem; color: #888; }
.msg-error { padding: 1rem; color: #c00; }
.msg-loading { padding: 1.5rem; text-align: center; color: #666; }

.msg-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(2rem);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    background: #333;
    color: #fff;
    font-size: 0.95rem;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.msg-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.msg-toast-error { background: #c62828; }
.msg-toast-success { background: #2e7d32; }

@media (max-width: 768px) {
    .msg-layout { flex-direction: column; height: auto; min-height: 520px; }
    .msg-sidebar { width: 100%; max-height: 220px; }
}