/* ===== ProBot: High-school style (Digital Tech) ===== */
:root{
  --pro-z: 2147483602; /* أعلى من #labRoot */
}


.probot-launcher{
  position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: var(--pro-z);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 800; border: 1px solid color-mix(in oklab, #fff 35%, transparent);
  box-shadow: var(--shadow); cursor: pointer; user-select: none;
}
.probot-launcher:focus{ outline: 3px solid rgba(255,255,255,.75); outline-offset: 2px }
.probot-launcher .pl-icon{
  width: 18px; height: 18px; border-radius: 4px; display:inline-block;
  background: conic-gradient(from 180deg, var(--brand), var(--brand-2), #7c8df8, var(--brand));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.probot-launcher .pl-text{ letter-spacing:.2px }

.probot{
  position: fixed; inset-inline-end: 18px; inset-block-end: 92px; z-index: calc(var(--pro-z) + 1);
  width: min(480px, 96vw); height: min(74vh, 740px);
  background: color-mix(in oklab, var(--card) 88%, var(--bg) 12%);
  border: 1px solid var(--border); border-radius: var(--pro-radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  backdrop-filter: saturate(1.2) blur(8px);
}
.probot.is-hidden{ display:none }

/* Head */
.pb-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: .75rem .9rem;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--brand) 22%, transparent),
      color-mix(in oklab, var(--brand-2) 22%, transparent)
    );
  border-block-end: 1px solid var(--border);
}
.pb-title{ display:flex; flex-direction:column; line-height:1.2; color: var(--ink) }
.pb-title strong{ font-size:15px }
.pb-title small{ font-size:12px; color: var(--muted) }
.pb-actions{ display:flex; align-items:center; gap:8px }
.pb-actions button{
  background: transparent; color: var(--ink); border:1px solid var(--border);
  border-radius: 10px; padding:.35rem .55rem; cursor:pointer; font-weight:800;
}

/* Quick chips */
.pb-suggest{ padding:.6rem .9rem; border-block-end:1px solid var(--border); background: color-mix(in oklab, var(--card) 92%, transparent) }
.pb-chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.pb-chips .chip{
  background: transparent; color: var(--ink);
  border:1px dashed color-mix(in oklab, var(--border) 70%, var(--brand) 30%);
  border-radius: 999px; padding:.42rem .7rem; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.pb-chips .chip:hover{ background: color-mix(in oklab, var(--brand) 8%, transparent) }
.pb-toast{
  display:none; margin-top:.45rem; width:max-content;
  background: color-mix(in oklab, var(--brand-2) 70%, #0a0 30%); color:#fff;
  border-radius: 10px; padding: .25rem .5rem; font-size:12px;
}

/* Frame */
.pb-frame{ flex:1 1 auto; background: color-mix(in oklab, var(--bg) 92%, transparent); }
#probot-frame{ width:100%; height:100%; border:0; background: var(--card) }

/* Foot */
.pb-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:.55rem .9rem; border-block-start: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 92%, transparent);
}
.pb-tip{ display:flex; align-items:flex-start; gap:.5rem; color: var(--muted); font-size: 12.5px; line-height:1.6 }
.pb-tip span{ font-size: 16px }
.pb-hotkey{
  background: color-mix(in oklab, var(--bg) 80%, #fff 20%);
  border:1px solid var(--border); border-radius:8px; padding:.25rem .45rem; color: var(--ink); font-weight:800;
}

/* Dark tweaks */
@media (prefers-color-scheme: dark){
  .probot{ background: color-mix(in oklab, var(--card) 85%, transparent) }
}

/* Mobile */
@media (max-width: 560px){
  .probot{ inset-block-end: 78px; width: 96vw; height: 70vh }
  .probot-launcher{ inset-inline-end: 12px; inset-block-end: 12px }
}
/* === أسلوب واجهة المساعد المضمّنة (بديل الإطار) === */
.assistant-app, .asst-wrap{ display:flex; flex-direction:column; height:100%; }
.asst-messages{
  flex:1 1 auto; min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px;
  background: color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}
.asst-msg{ max-width: 92%; display:flex; }
.asst-msg.user{ justify-content:flex-end; }
.asst-msg.assistant{ justify-content:flex-start; }
.asst-msg .bubble{
  padding:.6rem .75rem; border-radius:14px; line-height:1.6; box-shadow:var(--shadow);
  border:1px solid var(--border); background:var(--card); color:var(--ink);
}
.asst-msg.user .bubble{
  background: color-mix(in oklab, var(--brand) 20%, var(--card) 80%);
  border-color: color-mix(in oklab, var(--border) 60%, var(--brand) 40%);
}
.asst-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); background:var(--card); }
.asst-input{ flex:1 1 auto; padding:.6rem .8rem; border-radius:10px; border:1px solid var(--border); }
.asst-send{
  padding:.6rem .9rem; border-radius:10px; border:1px solid var(--border); background:var(--brand); color:#fff; font-weight:800;
}
.asst-typing{ display:inline-flex; gap:4px; padding:6px 8px; }
.asst-typing span{
  width:8px; height:8px; border-radius:50%; background: color-mix(in oklab, var(--ink) 80%, transparent);
  animation: asst-blink .9s infinite alternate;
}
.asst-typing span:nth-child(2){ animation-delay:.15s }
.asst-typing span:nth-child(3){ animation-delay:.3s }
@keyframes asst-blink{ from{ opacity:.3; transform:translateY(1px) } to{ opacity:1; transform:translateY(-1px) } }