/* DT AI Features - Frontend Styles */

/* ── Close button on AI result panels ── */
.dt-ai-panel-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0 4px;
    z-index: 1;
}
.dt-ai-panel-close:hover { color: #555; }
.dt-ai-compat-result,
.dt-ai-whymatch-result,
.dt-ai-ice-result {
    position: relative;
}

/* ── General AI Widget ── */
.dt-ai-wrap { margin: 12px 0; }
.dt-ai-error { color: #c62828; font-size: 13px; margin-top: 6px; }

.dt-ai-compat-btn,
.dt-ai-whymatch-btn,
.dt-ai-ice-btn,
.dt-ai-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--rose, #c2185b);
    background: transparent;
    color: var(--rose, #c2185b);
    transition: all .2s;
    margin: 4px 4px 4px 0;
}
.dt-ai-compat-btn:hover,
.dt-ai-whymatch-btn:hover,
.dt-ai-ice-btn:hover,
.dt-ai-reply-btn:hover {
    background: var(--rose, #c2185b);
    color: #fff;
}

/* ── Compatibility Result ── */
.dt-ai-compat-result {
    background: #fff9fb;
    border: 1px solid #f0d5e0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 10px;
    font-size: 13px;
}
.dt-ai-score {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}
.dt-ai-summary { color: #444; line-height: 1.6; margin-bottom: 8px; }
.dt-ai-strengths { color: #2e7d32; font-size: 12px; margin-bottom: 4px; }
.dt-ai-challenges { color: #e65100; font-size: 12px; }

/* ── Why You'd Match ── */
.dt-ai-whymatch-result {
    background: linear-gradient(135deg, #fff9fb, #f5f0ff);
    border: 1px solid rgba(194,24,91,0.15);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

/* ── Icebreakers ── */
.dt-ai-ice-result {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}
.dt-ai-ice-msg {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    color: #333; /* Force dark text — hero bg can bleed white */
}
.dt-ai-msg-text {
    color: #333;
    flex: 1;
}
.dt-ai-use-msg {
    background: var(--rose, #c2185b);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Reply Suggestions ── */
.dt-ai-reply-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.dt-ai-reply-option {
    background: #f5f0ff;
    border: 1px solid rgba(91,45,142,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}
.dt-ai-reply-option:hover { background: #ede7f6; }

/* ── Tone Indicator ── */
#dt-tone-indicator {
    animation: dt-ai-fadeIn .3s ease;
}

/* ── Profile Tips ── */
.dt-ai-tips-result {
    margin-top: 16px;
}
.dt-ai-tip-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.dt-ai-tip-item strong { color: var(--rose, #c2185b); }
.dt-ai-tip-item p { margin: 4px 0; font-size: 13px; color: #444; }

/* ── Photo Feedback ── */
.dt-ai-photo-result {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Bio Writer ── */
.dt-ai-bio-questions .form-group { margin-bottom: 14px; }
.dt-ai-bio-questions label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px; }
.dt-ai-bio-questions textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    resize: vertical;
}
.dt-ai-bio-output { margin-top: 16px; }
.dt-ai-bio-output textarea {
    width: 100%;
    padding: 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
}

/* ── General Animations ── */
@keyframes dt-ai-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dt-ai-compat-result,
.dt-ai-whymatch-result,
.dt-ai-ice-result,
.dt-ai-tips-result,
.dt-ai-photo-result {
    animation: dt-ai-fadeIn .3s ease;
}

/* ── AI Badge on member cards ── */
.dt-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #5B2D8E, #c2185b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .3px;
}

/* ── Photo Review Card ── */
.dt-ai-photo-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 16px;
    margin-top: 12px;
    animation: dt-ai-fadeIn .3s ease;
}
.dt-ai-photo-score-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.dt-ai-photo-score-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dt-ai-photo-score-num {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.dt-ai-photo-score-label {
    font-size: 10px;
    color: #888;
}
.dt-ai-photo-meter {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
}
.dt-ai-photo-meter-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .8s ease;
}
.dt-ai-photo-section {
    margin-bottom: 10px;
}
.dt-ai-photo-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.dt-ai-photo-item {
    font-size: 13px;
    color: #444;
    padding: 3px 0;
    padding-left: 8px;
}
.dt-ai-photo-tip {
    background: #f5f0ff;
    border-left: 3px solid #5B2D8E;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #333;
    margin-top: 10px;
}

/* ── Scam Warning Banner ── */
.dt-ai-scam-warning {
    background: linear-gradient(135deg, #fff3e0, #fff8e1);
    border: 1.5px solid #FF9800;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 12px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: dt-ai-fadeIn .3s ease;
}
.dt-ai-scam-warning.dt-ai-scam-high {
    background: linear-gradient(135deg, #ffebee, #fff3e0);
    border-color: #F44336;
}
.dt-ai-scam-warning-icon { font-size: 20px; flex-shrink: 0; }
.dt-ai-scam-warning-text { flex: 1; }
.dt-ai-scam-warning-title { font-weight: 700; color: #e65100; margin-bottom: 2px; }
.dt-ai-scam-warning.dt-ai-scam-high .dt-ai-scam-warning-title { color: #c62828; }
.dt-ai-scam-warning-body { color: #555; line-height: 1.5; }
.dt-ai-scam-dismiss { background: none; border: none; color: #aaa; cursor: pointer; font-size: 16px; padding: 0; flex-shrink: 0; }