:root{
  --bg:#000000;
  --panel:#0c0e13;
  --panel-2:#11141b;
  --line:#262a34;
  --line-2:#1a1d24;
  --text:#f2f3f5;
  --muted:#a6adbb;
  --muted-2:#80848e;
  --blue:#5865f2;
  --gold-bg:rgba(60,42,9,.82);
  --gold-line:#af7b13;
  --brown:#2f2206;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#08090d;color:var(--text);font-family:Arial,Tahoma,sans-serif}
body{direction:rtl}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.app-shell{display:grid;grid-template-columns:390px 1fr;min-height:100vh}
.controls{background:linear-gradient(180deg,#11141b 0%,#0b0d12 100%);border-left:1px solid var(--line);padding:18px;overflow:auto;position:sticky;top:0;height:100vh}
.controls-head h1{margin:0 0 6px;font-size:24px}
.controls-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.card{margin-top:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-radius:16px;padding:14px}
.card h2{margin:0 0 12px;font-size:18px}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.section-title-row h2{margin:0}
.accounts-editor{display:grid;gap:12px}
.account-card{border:1px solid var(--line);border-radius:14px;background:#0b0d12;padding:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.account-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.account-title{display:flex;align-items:center;gap:10px;font-weight:700}
.account-dot{width:10px;height:10px;border-radius:50%}
.account-title img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#20242d;box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.field-grid{display:grid;gap:10px}
.field-grid.two{grid-template-columns:1fr 1fr}
label{display:block;color:#d7dbe2;font-size:13px;margin:0 0 6px}
input,textarea,select{width:100%;border-radius:12px;border:1px solid #313542;background:#090b10;color:var(--text);padding:10px 12px;outline:none}
input:focus,textarea:focus,select:focus{border-color:#5865f2;box-shadow:0 0 0 3px rgba(88,101,242,.15)}
textarea{resize:vertical;min-height:110px}
input[type="file"]{padding:8px;background:#0a0d13}
input[type="color"]{height:44px;padding:4px}
.avatar-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:10px}
.avatar-thumb{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#20242d}
.tips-box{margin-top:12px;padding:12px;border-radius:12px;border:1px dashed #3b4252;background:#0c0f15;color:#cfd5df;font-size:13px;line-height:1.7}
.tips-title{font-weight:700;margin-bottom:6px;color:#fff}
.tips-box code{background:#313a74;color:#e3e7ff;padding:2px 6px;border-radius:6px;direction:ltr;display:inline-block}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button{border:0;border-radius:12px;padding:11px 14px;color:#fff;background:#2c3140;transition:.15s transform,.15s opacity,.15s background}
button:hover{transform:translateY(-1px)}
button.primary{background:#5865f2}
button.secondary{background:#2b3240}
button.danger{background:#7d2c36}
button.ghost{background:transparent;border:1px solid #363b47;color:#d6d9df}
.mini-btn{padding:7px 10px;border-radius:10px;font-size:12px}
.stack-mobile>*{flex:1}
.attached-image-box{margin-top:12px;border:1px solid var(--line);background:#090b10;border-radius:14px;padding:10px}
.attached-image-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:13px;color:#cfd5df}
.attached-image-box img{max-width:100%;max-height:220px;border-radius:12px;display:block;background:#0e1219}

.preview-area{background:#000;display:flex;flex-direction:column;min-width:0}
.preview-topbar{height:56px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid #17191f;background:#0b0d12;color:#e5e7eb}
.preview-topbar strong{display:block;font-size:16px}
.preview-topbar span{display:block;font-size:12px;color:var(--muted)}
.chat-view{flex:1;background:var(--bg);padding:10px 0 28px;overflow:auto}
.empty-state{display:flex;align-items:center;justify-content:center;min-height:260px;color:#646b77;font-size:18px}

.message{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:12px 18px;position:relative;direction:ltr;align-items:flex-start}
.message:hover .message-tools{opacity:1;pointer-events:auto}
.message.reply-message{background:var(--gold-bg)}
.message.reply-message::before{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--gold-line)}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1f232a;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.message-main{min-width:0;direction:rtl;text-align:right}
.message-header{display:flex;align-items:center;gap:7px;flex-wrap:wrap;direction:ltr;justify-content:flex-start}
.author{font-size:15px;font-weight:700}
.badge{font-size:11px;background:#31343b;color:#f6f7fb;padding:2px 6px;border-radius:4px;line-height:1.2}
.time{font-size:12px;color:var(--muted-2)}
.message-text{margin-top:3px;font-size:14px;line-height:1.65;color:#f2f3f5;white-space:pre-wrap;word-break:break-word;text-align:left;direction:rtl}
.mention{display:inline-block;background:rgba(88,101,242,.46);color:#dfe3ff!important;border-radius:4px;padding:1px 6px;font-weight:700;direction:ltr;unicode-bidi:isolate}

.reply-preview-wrap{display:flex;align-items:center;gap:6px;min-height:18px;margin-bottom:2px;position:relative;padding-right:38px;direction:ltr}
.reply-preview-wrap::before{content:"";position:absolute;right:11px;top:9px;width:28px;height:18px;border-top:2px solid #7a7d86;border-right:2px solid #7a7d86;border-top-right-radius:8px;opacity:.85}
.reply-mini-avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;background:#1f232a;flex:0 0 auto}
.reply-author{font-size:12px;font-weight:700}
.reply-badge{font-size:10px;background:#31343b;border-radius:4px;padding:1px 4px;color:#eceef1}
.reply-text{font-size:12px;color:#c2c7d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px;direction:rtl;text-align:right}

.image-attachment{margin-top:10px;display:block;max-width:260px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06);background:#111}
.message-tools{position:absolute;left:14px;top:8px;display:flex;gap:6px;opacity:0;pointer-events:none;transition:.15s opacity}
.tool-btn{padding:5px 9px;font-size:12px;border-radius:9px;background:#20242d;color:#edf0f6}
.tool-btn.delete{background:#6c2530}

@media (max-width:1100px){
  .app-shell{grid-template-columns:1fr}
  .controls{position:static;height:auto;border-left:0;border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .field-grid.two{grid-template-columns:1fr}
  .message{padding-inline:12px}
  .reply-text{max-width:220px}
  .button-row>*{flex:1}
}