/* =============================================================
 * Mesaj isteği modali — messaging/snippets/chat_request_button.html
 *
 * Modal her rol profilinde (danışman, tedarikçi, müteahhit, uzman)
 * aynı parçadan gelir, bu yüzden derisi de tek yerdedir.
 *
 * Önceki hâli dp_popup_system.css'in "dp-hero--blue" derisini
 * kullanıyordu: koyu petrol mavisi gradyan bant, üzerinde beyaz
 * başlık. Modalı açan buton ise yeşil (profile_hero_actions.css),
 * yani eylemin rengi tıklandığı anda değişiyordu. Bu katman başlığı
 * düz yüzeye indirir ve yeşili modalın içinde de sürdürür.
 *
 * Renk yok: yüzey/metin/kenarlık global paletten (custom-theme.css),
 * yeşil kimlik shared/app_tokens.css'ten gelir. İkisi de base.html'de
 * bu dosyadan önce yüklenir; koyu tema karşılıkları oradan geldiği
 * için burada ayrı bir dark kuralı yoktur.
 * ============================================================= */

.chat-request-modal .modal-content {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* ─── Başlık: düz yüzey, yuvarlak yeşil ikon, ad + tür rozeti ─── */
.chat-request-modal .crm-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 0;
    background: var(--bg-surface);
}

.chat-request-modal .crm-header__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--app-accent-soft);
    border: 1px solid var(--app-accent-border);
    color: var(--app-accent);
    font-size: 18px;
}

.chat-request-modal .crm-header__text {
    min-width: 0;
}

.chat-request-modal .crm-header__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    /* Uzun Türkçe adlar rozeti aşağı itmek yerine sarılır. */
    overflow-wrap: anywhere;
}

.chat-request-modal .crm-header__badge {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--app-accent-soft);
    border: 1px solid var(--app-accent-border);
    color: var(--app-accent);
    font-size: 12px;
    font-weight: 600;
}

.chat-request-modal .crm-header .btn-close {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

/* ─── Gövde ───────────────────────────────────────────────── */
.chat-request-modal .modal-body {
    padding: 4px 24px 20px;
}

/* Bilgi kutusu: nötr kademe zemin, anlamı ikon + metin taşır. */
.chat-request-modal .crm-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft, var(--border-color));
    border-radius: 10px;
    background: var(--app-surface-muted);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

.chat-request-modal .crm-note__icon {
    flex: 0 0 auto;
    color: var(--app-accent);
    font-size: 16px;
    line-height: 1.35;
}

.chat-request-modal .crm-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-request-modal .crm-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-primary);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-request-modal .crm-textarea::placeholder {
    color: var(--text-muted);
}

.chat-request-modal .crm-textarea:focus {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem var(--app-focus-ring);
}

.chat-request-modal .crm-counter {
    margin-top: 6px;
    text-align: right;
    font-size: 13px;
    color: var(--text-muted);
}

/* ─── Alt eylem satırı ────────────────────────────────────── */
.chat-request-modal .modal-footer.crm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.chat-request-modal .crm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px; /* WCAG dokunma hedefi */
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.chat-request-modal .crm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--app-focus-ring);
}

.chat-request-modal .crm-btn--ghost {
    background: var(--bg-surface);
    border-color: var(--app-border-strong, var(--border-color));
    color: var(--text-primary);
}

.chat-request-modal .crm-btn--ghost:hover {
    background: var(--app-surface-muted);
}

.chat-request-modal .crm-btn--primary {
    background: var(--app-accent-fill);
    border-color: var(--app-accent-fill);
    color: var(--app-on-accent);
}

.chat-request-modal .crm-btn--primary:hover {
    background: var(--app-accent-fill-hover);
    border-color: var(--app-accent-fill-hover);
    color: var(--app-on-accent);
}

.chat-request-modal .crm-btn[disabled],
.chat-request-modal .crm-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ─── Mobil (390 px): eylemler tam genişlik, birincil üstte ── */
@media (max-width: 575.98px) {
    .chat-request-modal .crm-header,
    .chat-request-modal .modal-body,
    .chat-request-modal .modal-footer.crm-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .chat-request-modal .modal-footer.crm-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .chat-request-modal .crm-btn {
        width: 100%;
    }
}