.ccmsg-app, .ccmsg-app * { box-sizing: border-box; }
.ccmsg-app {
    --ccmsg-primary: var(--smu-primary, #2f6fed);
    --ccmsg-primary-dark: var(--smu-primary-dark, #1d4fc4);
    --ccmsg-primary-light: var(--smu-primary-light, #eff6ff);
    --ccmsg-surface: var(--smu-surface, #ffffff);
    --ccmsg-bg: var(--smu-bg, #f0f4ff);
    --ccmsg-border: var(--smu-border, #e2e8f0);
    --ccmsg-text: var(--smu-text, #1e293b);
    --ccmsg-text-muted: var(--smu-text-muted, #64748b);
    --ccmsg-radius: var(--smu-radius, 18px);
    --ccmsg-danger: var(--smu-danger, #dc2626);
    font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
    display: flex;
    height: 76vh;
    min-height: 520px;
    background: var(--ccmsg-surface);
    border: 1px solid var(--ccmsg-border);
    border-radius: var(--ccmsg-radius);
    box-shadow: var(--smu-shadow, 0 1px 3px rgba(16,25,46,.04), 0 8px 24px rgba(16,25,46,.06));
    overflow: hidden;
    color: var(--ccmsg-text);
}
.ccmsg-page-wrap { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.ccmsg-admin-wrap .ccmsg-app { margin-top: 16px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.ccmsg-sidebar {
    width: 320px; flex-shrink: 0; border-inline-end: 1px solid var(--ccmsg-border);
    display: flex; flex-direction: column; background: #fafbff;
}
.ccmsg-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.ccmsg-sidebar-head h2 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: 8px; }
.ccmsg-sidebar-head h2 i { color: var(--ccmsg-primary); }

.ccmsg-search { position: relative; padding: 0 16px 12px; }
.ccmsg-search i { position: absolute; inset-inline-start: 26px; top: 50%; transform: translateY(-50%); color: var(--ccmsg-text-muted); font-size: 13px; }
.ccmsg-search input {
    width: 100%; padding: 8px 34px; border: 1px solid var(--ccmsg-border); border-radius: 10px;
    font-size: 13px; background: #fff;
}

.ccmsg-thread-list { flex: 1; overflow-y: auto; }
.ccmsg-thread-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
    border-bottom: 1px solid var(--ccmsg-border); position: relative;
}
.ccmsg-thread-item:hover { background: var(--ccmsg-primary-light); }
.ccmsg-thread-item.active { background: var(--ccmsg-primary-light); border-inline-start: 3px solid var(--ccmsg-primary); }
.ccmsg-thread-meta { flex: 1; min-width: 0; }
.ccmsg-thread-top, .ccmsg-thread-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ccmsg-thread-name { font-weight: 600; font-size: 14px; }
.ccmsg-thread-time { font-size: 11px; color: var(--ccmsg-text-muted); flex-shrink: 0; }
.ccmsg-thread-preview {
    font-size: 12px; color: var(--ccmsg-text-muted); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 165px;
}
.ccmsg-unread-badge {
    background: var(--ccmsg-primary); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 20px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.ccmsg-role-tag {
    font-size: 10px; color: var(--ccmsg-primary); background: var(--ccmsg-primary-light);
    padding: 1px 7px; border-radius: 20px; flex-shrink: 0;
}

.ccmsg-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--ccmsg-primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; font-size: 15px;
}
.ccmsg-avatar-sm { width: 30px; height: 30px; font-size: 13px; }

/* ── Chat pane ───────────────────────────────────────────────────────────── */
.ccmsg-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ccmsg-bg); }
.ccmsg-chat-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--ccmsg-border); }
.ccmsg-chat-name { font-weight: 700; font-size: 15px; }
.ccmsg-chat-placeholder { flex: 1; }

.ccmsg-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ccmsg-bubble {
    max-width: 62%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
    box-shadow: 0 1px 2px rgba(16,25,46,.06); word-break: break-word;
}
.ccmsg-bubble.theirs { align-self: flex-start; background: #fff; border-bottom-inline-start-radius: 4px; }
.ccmsg-bubble.mine { align-self: flex-end; background: var(--ccmsg-primary); color: #fff; border-bottom-inline-end-radius: 4px; }
.ccmsg-bubble.mine a { color: #dce9ff; }
.ccmsg-bubble-text { white-space: pre-wrap; }
.ccmsg-bubble-time { font-size: 10px; opacity: .75; margin-top: 4px; text-align: end; }
.ccmsg-attach-img { max-width: 220px; border-radius: 10px; margin-top: 6px; display: block; }
.ccmsg-attach-file {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px;
    background: rgba(255,255,255,.15); border-radius: 8px; color: inherit; text-decoration: none;
}
.ccmsg-bubble.theirs .ccmsg-attach-file { background: var(--ccmsg-primary-light); color: var(--ccmsg-primary); }

.ccmsg-composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--ccmsg-border); }
.ccmsg-composer textarea {
    flex: 1; resize: none; border: 1px solid var(--ccmsg-border); border-radius: 12px; padding: 10px 14px;
    font-size: 14px; max-height: 100px; font-family: inherit;
}
.ccmsg-composer textarea:focus { outline: none; border-color: var(--ccmsg-primary); }
.ccmsg-attach-btn {
    cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; background: var(--ccmsg-primary-light); color: var(--ccmsg-primary); flex-shrink: 0;
}
.ccmsg-attach-name { font-size: 11px; color: var(--ccmsg-text-muted); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.ccmsg-empty { text-align: center; color: var(--ccmsg-text-muted); padding: 40px 20px; margin: auto; }
.ccmsg-empty i { font-size: 34px; opacity: .3; display: block; margin-bottom: 10px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ccmsg-btn {
    border: 1px solid transparent; border-radius: 10px; padding: 8px 16px; font-size: 13px;
    font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.ccmsg-btn-sm { padding: 6px 12px; font-size: 12px; }
.ccmsg-btn-primary { background: var(--ccmsg-primary); color: #fff; }
.ccmsg-btn-primary:hover { background: var(--ccmsg-primary-dark); }
.ccmsg-btn-outline { background: transparent; border-color: var(--ccmsg-primary); color: var(--ccmsg-primary); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.ccmsg-modal {
    position: fixed; inset: 0; background: rgba(16,25,46,.45); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
}
.ccmsg-modal-box {
    background: #fff; border-radius: var(--ccmsg-radius); width: 92%; max-width: 480px;
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif; color: var(--ccmsg-text);
}
.ccmsg-modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--ccmsg-border); font-weight: 700;
    display: flex; align-items: center; gap: 8px; position: relative;
}
.ccmsg-modal-close { position: absolute; inset-inline-end: 16px; top: 12px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ccmsg-text-muted); }
.ccmsg-modal-body { padding: 18px 20px; overflow-y: auto; }
.ccmsg-modal-footer { padding: 14px 20px; border-top: 1px solid var(--ccmsg-border); display: flex; gap: 10px; }

.ccmsg-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.ccmsg-field label { font-size: 12px; font-weight: 700; color: var(--ccmsg-text-muted); }
.ccmsg-field textarea, .ccmsg-field input[type="text"] {
    border: 1px solid var(--ccmsg-border); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit;
}
.ccmsg-hint { font-size: 11px; color: var(--ccmsg-text-muted); margin: 4px 0 0; }

.ccmsg-cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ccmsg-cat-tab {
    border: 1px solid var(--ccmsg-border); background: #fff; border-radius: 20px; padding: 6px 14px;
    font-size: 12px; cursor: pointer; color: var(--ccmsg-text);
}
.ccmsg-cat-tab.active { background: var(--ccmsg-primary); color: #fff; border-color: var(--ccmsg-primary); }

.ccmsg-recipient-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--ccmsg-border); border-radius: 10px; margin-top: 4px; }
.ccmsg-recipient-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--ccmsg-border); font-size: 13px; }
.ccmsg-recipient-row:last-child { border-bottom: none; }
.ccmsg-recipient-row:hover { background: var(--ccmsg-primary-light); }
.ccmsg-recipient-row.active { background: var(--ccmsg-primary-light); font-weight: 700; }

/* ── Nav badge injected into ClassCloud portal sidebar ──────────────────── */
.ccmsg-nav-badge {
    background: var(--ccmsg-danger, #dc2626); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 20px; padding: 0 6px; margin-inline-start: 6px;
}

.ccmsg-login-required { text-align: center; padding: 60px 20px; }

@media (max-width: 782px) {
    .ccmsg-app { flex-direction: column; height: auto; min-height: 0; }
    .ccmsg-sidebar { width: 100%; border-inline-end: none; border-bottom: 1px solid var(--ccmsg-border); max-height: 320px; }
    .ccmsg-chat { min-height: 420px; }
    .ccmsg-bubble { max-width: 82%; }
}