/* ===== صفحة الأداة ===== */
.tool-page{ max-width:1180px; margin:auto; padding:44px 20px; }
.tool-header{ display:flex; align-items:center; gap:20px; margin-bottom:34px; }
.tool-header .tool-icon{ width:72px; height:72px; font-size:36px; margin:0; }
.tool-header h1{ font-size:clamp(22px,3.4vw,34px); }
.tool-header p{ color:var(--muted); margin-top:6px; max-width:640px; line-height:1.7; }
.tool-header-actions{ display:flex; gap:8px; flex-wrap:wrap; align-self:flex-start; }
.tool-header-actions .btn{ font-size:13.5px; padding:9px 16px; white-space:nowrap; }
@media (max-width:640px){ .tool-header{ flex-wrap:wrap; } .tool-header-actions{ width:100%; } }

.tool-body{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:860px){ .tool-body{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .tool-page{ padding:24px 14px; }
  .panel{ padding:18px; }
  .tool-header .tool-icon{ width:56px; height:56px; font-size:28px; }
  .studio-grid{ grid-template-columns:1fr 1fr; }
  .tg-bridge{ padding:14px; }
  .tg-bridge .btn{ width:100%; }
  .model-row{ flex-wrap:wrap; }
  .result-actions .btn, .refine-btn, .tpl-chip{ font-size:12.5px; }
}

.panel{
  background:var(--card); border:1px solid var(--border); border-radius:20px; padding:26px;
}
.panel label{ display:block; font-size:14px; color:var(--muted); margin:16px 0 8px; font-weight:700; }
.panel label:first-child{ margin-top:0; }
.panel textarea, .panel input[type=text], .panel select{
  width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:13px 14px; color:var(--text); font-family:inherit; font-size:15px; outline:none;
}
.panel textarea{ min-height:130px; resize:vertical; }
.panel textarea:focus, .panel input:focus{ border-color:var(--accent2); }
.panel input[type=range]{ width:100%; accent-color:var(--accent); }
.panel input[type=file]{ display:none; }
.range-row{ display:flex; align-items:center; gap:12px; }
.range-row output{ min-width:44px; text-align:center; color:var(--accent); font-weight:800; }

.drop-zone{
  border:2px dashed var(--border); border-radius:16px; padding:34px 16px; text-align:center;
  color:var(--muted); cursor:pointer; transition:.2s; font-size:15px;
}
.drop-zone:hover, .drop-zone.drag{ border-color:var(--accent2); color:var(--text); background:rgba(139,92,246,.06); }
.drop-zone.has-file{ border-style:solid; border-color:var(--accent2); color:var(--text); }
.edit-transforms{ display:flex; gap:8px; flex-wrap:wrap; }
.edit-tbtn{ background:var(--bg2); border:1px solid var(--border); color:var(--text);
  padding:9px 14px; border-radius:10px; font-family:inherit; font-size:13.5px; cursor:pointer; transition:.2s; }
.edit-tbtn:hover{ border-color:var(--accent2); background:var(--card-hover); }

.generate-btn{
  width:100%; margin-top:22px; padding:15px; border:none; border-radius:14px;
  background:var(--grad); color:#fff; font-size:17px; font-weight:800; transition:.2s;
}
.generate-btn:hover{ opacity:.9; }
.generate-btn:disabled{ opacity:.5; cursor:wait; }

.result-panel{ min-height:340px; display:flex; flex-direction:column; }
.result-placeholder{
  flex:1; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:17px; min-height:280px;
}
#resultArea img, #resultArea canvas{ width:100%; border-radius:14px; display:block; }
#resultArea audio{ width:100%; margin-top:10px; }
.waveform{ width:100%; height:90px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; display:block; }
.audio-input-preview{ margin:12px 0; }
.aip-label{ display:block; color:var(--muted); font-size:13px; font-weight:700; margin-bottom:6px; }
.audio-input-preview audio{ width:100%; }
.vision-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.vthumb{ position:relative; }
.vthumb img{ width:70px; height:70px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.vthumb button{ position:absolute; top:-6px; left:-6px; background:var(--accent); color:#fff; border:none;
  width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:11px; }
.dnd-overlay{ position:fixed; inset:0; z-index:600; background:rgba(139,92,246,.25); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; pointer-events:none; }
.dnd-overlay.show{ display:flex; }
.dnd-overlay div{ background:var(--card); border:3px dashed var(--accent); border-radius:20px;
  padding:40px 60px; font-size:22px; font-weight:800; color:var(--text); }
.first-tip{ display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(255,45,106,.12));
  border:1px solid rgba(139,92,246,.35); border-radius:14px; padding:13px 18px; margin-bottom:18px; font-size:14px; line-height:1.7; }
.first-tip span{ flex:1; }
.first-tip button{ background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; flex-shrink:0; }
.first-tip button:hover{ color:var(--text); }
.result-text{
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:18px; line-height:2; white-space:pre-wrap; font-size:15px; max-height:480px; overflow-y:auto;
}
.result-text p{ white-space:normal; margin:0 0 10px; }
.result-text h2{ font-size:19px; margin:16px 0 8px; }
.result-text h3{ font-size:16px; margin:14px 0 6px; }
.result-text ul{ margin:8px 0; padding-right:22px; }
.result-text li{ margin:4px 0; }
.result-text code{ background:var(--card); padding:2px 6px; border-radius:6px; font-family:monospace; font-size:13.5px; direction:ltr; display:inline-block; }
.result-text pre{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px; overflow-x:auto; direction:ltr; text-align:left; margin:10px 0; }
.result-text pre code{ background:none; padding:0; }
.hl-kw{ color:#c084fc; font-weight:700; }
.hl-str{ color:#4ade80; }
.hl-com{ color:#6b7280; font-style:italic; }
.hl-num{ color:#fbbf24; }
.result-text pre{ position:relative; }
.code-copy{ position:absolute; top:8px; left:8px; background:var(--bg2); border:1px solid var(--border);
  color:var(--text); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:14px; opacity:.7; transition:.2s; }
.code-copy:hover{ opacity:1; border-color:var(--accent2); }
.text-meta{ color:var(--muted); font-size:12.5px; margin-top:8px; }
.kbd-hint{ font-size:11px; opacity:.6; font-weight:400; margin-right:6px; }
.batch-toggle{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; cursor:pointer; margin-top:10px; }
.batch-toggle input{ width:auto; }
.batch-item{ margin-bottom:16px; }
.batch-head{ font-size:13px; font-weight:700; color:var(--accent); margin-bottom:6px; }
.result-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.result-actions .btn{ font-size:14px; padding:9px 18px; }
.result-text.streaming::after{ content:"▍"; animation:blink 1s steps(2) infinite; color:var(--accent); }
@keyframes blink{ 50%{ opacity:0; } }
.refine-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.refine-label{ color:var(--muted); font-size:13px; font-weight:700; }
.refine-btn{ background:var(--bg2); border:1px solid var(--border); color:var(--text);
  padding:7px 14px; border-radius:20px; font-size:13px; font-family:inherit; cursor:pointer; transition:.2s; }
.refine-btn:hover{ border-color:var(--accent2); background:var(--card-hover); }
.next-steps{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; width:100%; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--border); }
.next-steps .refine-btn{ border-color:var(--accent2); }
.followup{ display:flex; gap:8px; width:100%; margin-top:12px; }
.followup input{ flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; color:var(--text); font-family:inherit; font-size:14px; outline:none; }
.followup input:focus{ border-color:var(--accent2); }
.followup .btn{ padding:10px 20px; }
.followup-answer{ margin-top:12px; border-right:3px solid var(--accent); }

/* جسر تيليجرام */
.tg-bridge{
  display:flex; align-items:center; gap:16px; margin-top:22px;
  background:linear-gradient(135deg, rgba(41,171,226,.16), rgba(139,92,246,.14));
  border:1px solid rgba(41,171,226,.35); border-radius:18px; padding:18px 22px; flex-wrap:wrap;
}
.tg-bridge-icon{
  width:52px; height:52px; border-radius:14px; font-size:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#229ED9,#7e22ce);
}
.tg-bridge-text{ flex:1; min-width:180px; }
.tg-bridge-text b{ display:block; font-size:15px; margin-bottom:3px; }
.tg-bridge-text span{ color:var(--muted); font-size:13.5px; line-height:1.6; }
.tg-bridge .btn{ white-space:nowrap; }

/* مقارنة قبل/بعد */
.compare{ position:relative; border-radius:14px; overflow:hidden; user-select:none; touch-action:none; cursor:ew-resize; }
.cmp-after{ display:block; width:100%; }
.cmp-before{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.cmp-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-50%); }
.cmp-handle span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; color:#111; border-radius:50%; width:38px; height:38px; display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:900; box-shadow:0 2px 10px rgba(0,0,0,.4); cursor:ew-resize; }
.cmp-tag{ position:absolute; top:10px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:700; padding:3px 12px; border-radius:20px; }
.cmp-tag-b{ right:10px; } .cmp-tag-a{ left:10px; }

/* وضع الاستوديو: شبكة تنويعات */
.studio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.studio-cell{ position:relative; border-radius:12px; overflow:hidden; background:var(--bg2);
  min-height:130px; display:flex; align-items:center; justify-content:center; }
.studio-cell img{ width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; transition:.2s; }
.studio-cell img:hover{ transform:scale(1.04); }
.studio-dl{ position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.6); color:#fff;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; }
.loading-cell .spinner{ width:34px; height:34px; }

.loading{ text-align:center; padding:50px 0; color:var(--muted); }
.gen-error{ text-align:center; padding:30px 16px; }
.gen-error .ge-icon{ font-size:44px; margin-bottom:12px; }
.gen-error p{ color:var(--text); font-size:16px; margin-bottom:10px; }
.gen-error .ge-hint{ color:var(--muted); font-size:13.5px; line-height:1.9; max-width:440px; margin:0 auto 18px; }
.gen-error .result-actions{ justify-content:center; }
/* محلّل النصوص */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.st-cell{ background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center; }
.st-cell b{ display:block; font-size:28px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.st-cell span{ color:var(--muted); font-size:13px; }
/* لوحات الألوان */
.palette-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; border-radius:14px; overflow:hidden; }
.pal-swatch{ height:120px; display:flex; align-items:flex-end; justify-content:center; cursor:pointer; transition:.2s; position:relative; }
.pal-swatch:hover{ transform:scale(1.05); z-index:2; border-radius:10px; }
.pal-swatch span{ background:rgba(0,0,0,.55); color:#fff; font-family:monospace; font-size:12px; padding:4px 8px; border-radius:8px; margin-bottom:10px; }
@media (max-width:560px){ .palette-grid{ grid-template-columns:repeat(2,1fr); } }
.spinner{
  width:46px; height:46px; margin:0 auto 16px; border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* منتقي النموذج */
.model-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.model-label{ color:var(--muted); font-size:13px; font-weight:700; white-space:nowrap; }
.model-select{ flex:1; background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:9px 12px; font-family:inherit; font-size:13.5px; }
.model-select:focus{ border-color:var(--accent2); outline:none; }

/* الإملاء الصوتي */
.mic-holder{ position:relative; }
.mic-holder textarea{ padding-left:52px; }
.mic-btn{ position:absolute; bottom:12px; left:12px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg2); color:var(--text); font-size:16px; cursor:pointer; transition:.2s; }
.mic-btn:hover{ border-color:var(--accent2); }
.mic-btn.rec{ background:var(--accent); color:#fff; border-color:var(--accent); animation:micpulse 1s infinite; }
@keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,45,106,.5); } 50%{ box-shadow:0 0 0 8px rgba(255,45,106,0); } }

/* إرفاق (صورة/ملف/رابط) */
.attach-wrap{ margin-top:10px; }
.attach-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.attach-btn{ font-size:13px; padding:8px 14px; }
.attach-preview{ position:relative; display:inline-block; margin-top:6px; }
.attach-preview img{ max-height:90px; border-radius:10px; border:1px solid var(--border); display:block; }
.attach-chip{ display:inline-block; background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:9px 14px; font-size:13px; color:var(--text); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.attach-remove{ position:absolute; top:-8px; left:-8px; background:var(--accent); color:#fff; border:none;
  width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:12px; }
.templates-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 4px; }
.tpl-label{ color:var(--muted); font-size:13px; font-weight:700; }
.tpl-chip{ background:var(--bg2); border:1px solid var(--border); color:var(--muted);
  padding:6px 12px; border-radius:20px; font-size:12.5px; font-family:inherit; cursor:pointer; transition:.2s; max-width:100%; }
.tpl-chip:hover{ border-color:var(--accent2); color:var(--text); background:var(--card-hover); }
.tpl-chip.active{ background:var(--grad); color:#fff; border-color:transparent; }
.style-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chat-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.chat-toolbar .btn{ font-size:13px; padding:8px 14px; white-space:nowrap; }
/* دردشة */
.chat-box{ display:flex; flex-direction:column; gap:12px; max-height:420px; overflow-y:auto; padding:4px; }
.chat-msg{ padding:12px 16px; border-radius:14px; font-size:15px; line-height:1.9; max-width:88%; white-space:pre-wrap; }
.chat-msg.user{ background:var(--grad); color:#fff; align-self:flex-start; }
.chat-msg.bot{ background:var(--bg2); border:1px solid var(--border); align-self:flex-end; }

/* شارة نوع الأداة */
.impl-note{
  margin-top:18px; font-size:13px; color:var(--muted); background:var(--bg2);
  border:1px solid var(--border); border-radius:12px; padding:11px 14px; line-height:1.8;
}
.api-locked{
  text-align:center; padding:30px 14px;
}
.api-locked .big{ font-size:52px; margin-bottom:14px; }
.api-locked h3{ margin-bottom:10px; }
.api-locked p{ color:var(--muted); line-height:1.9; max-width:420px; margin:auto; }