.atn-box {
    /* قيم افتراضية (تُستبدل ديناميكيًا حسب إعدادات الألوان) */
    --atn-bg: #1b1b1f;
    --atn-text: #f2f2f2;
    --atn-panel2: #232329;
    --atn-border: #3a3a42;
    --atn-accent: #09b4ba;

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--atn-border);
    background: var(--atn-bg);
    color: var(--atn-text);
    font-family: inherit;
}
.atn-box * { box-sizing: border-box; }
.atn-header {
    background: linear-gradient(90deg, var(--atn-accent), var(--atn-accent));
    padding: 14px 18px;
}
.atn-title { display:block; font-weight:700; font-size:16px; color:#fff; }
.atn-spark { display:inline-block; margin-left:4px; }
.atn-subtitle { display:block; font-size:13px; opacity:.9; margin-top:2px; color:#fff; }
.atn-body { padding: 18px; }
.atn-prompt { margin: 0 0 12px; font-size: 14px; opacity: .85; color: var(--atn-text); }
.atn-suggestions { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.atn-suggestion-btn {
    width:100%; background:var(--atn-panel2); color:var(--atn-text); border:1px solid var(--atn-border); border-radius:8px;
    padding:10px 14px; text-align:right; cursor:pointer; font-size:14px;
}
.atn-suggestion-btn:hover { border-color:var(--atn-accent); }
.atn-loading { font-size:13px; opacity:.6; color:var(--atn-text); }
.atn-answer {
    background:var(--atn-panel2); border:1px solid var(--atn-border); border-radius:8px;
    padding:12px 14px; margin-bottom:14px; font-size:14px; line-height:1.7;
    color:var(--atn-text); word-wrap:break-word;
}
.atn-answer p { margin:0 0 8px 0; }
.atn-answer p:last-child { margin-bottom:0; }
.atn-answer strong { font-weight:700; color:var(--atn-text); }
.atn-answer ul { margin:4px 0 10px; padding-inline-start:20px; }
.atn-answer li { margin-bottom:4px; }
.atn-form { display:flex; gap:8px; flex-wrap:nowrap; }
.atn-form input {
    flex:1; min-width:0; background:var(--atn-panel2); border:1px solid var(--atn-border); border-radius:8px;
    color:var(--atn-text); padding:10px 14px; font-size:14px;
}
.atn-form button {
    flex-shrink:0; background:var(--atn-accent); border:none; color:#fff; width:44px; border-radius:8px;
    cursor:pointer; font-size:16px;
}
.atn-form button:disabled { opacity:.5; cursor:not-allowed; }

/* تجاوب مع الشاشات الصغيرة (الجوال) */
@media (max-width: 480px) {
    .atn-body { padding: 14px; }
    .atn-title { font-size: 15px; }
    .atn-subtitle { font-size: 12px; }
    .atn-suggestion-btn { font-size: 13px; padding: 9px 12px; }
    .atn-form input { font-size: 13px; padding: 9px 12px; }
    .atn-form button { width: 40px; font-size: 15px; }
}