/* ======================================================================
   مساعد منصة معلم — الزر العائم والنافذة
   الألوان والمقاسات من متغيرات المنصة (brand.css / style.css)
   ====================================================================== */
.as-fab{position:fixed; bottom:16px; inset-inline-end:16px; z-index:1001; display:inline-flex; align-items:center; gap:8px;
  min-height:52px; padding:0 18px 0 16px; border:0; border-radius:999px; background:var(--navy,#14315F); color:#fff;
  font-family:inherit; font-size:var(--fs-ctl,14px); font-weight:800; cursor:pointer;
  box-shadow:0 10px 26px rgba(20,49,95,.32); transition:transform .15s ease, background .15s ease}
.as-fab:hover{background:var(--navy-dark,#0B1F3F); transform:translateY(-2px)}
/* حافة برتقالية حتى يظهر الزر فوق الخلفيات الداكنة (التذييل والوضع الليلي) */
.as-fab{border:2px solid var(--accent,#F08A24); box-shadow:0 0 0 2px rgba(240,138,36,.25), 0 10px 26px rgba(20,49,95,.32)}
.as-fab:focus-visible{outline:3px solid var(--accent,#F08A24); outline-offset:3px}
.as-fab svg{flex:none; color:var(--accent,#F08A24)}
.as-fab[aria-expanded="true"]{display:none}
body:has(#pwa-bar:not([hidden])) .as-fab{bottom:104px}

.as-panel{position:fixed; bottom:16px; inset-inline-end:16px; z-index:1002; width:392px; max-width:calc(100vw - 32px);
  height:min(640px, calc(100vh - 32px)); height:min(640px, calc(100dvh - 32px)); display:flex; flex-direction:column;
  background:var(--surface,#fff); color:var(--text,#1A2233); border:1px solid var(--border,#E3E8F0); border-radius:20px;
  box-shadow:0 24px 60px rgba(11,31,63,.28); overflow:hidden; line-height:1.75; animation:as-in .2s ease}
.as-panel[hidden]{display:none}
@keyframes as-in{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}}

.as-head{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; background:var(--navy,#14315F); color:#fff; flex:none}
.as-ava{width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.12); color:var(--accent,#F08A24)}
.as-head-t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.4}
.as-head-t h2{margin:0; font-size:var(--fs-md,16px); font-weight:800; color:#fff}
.as-head-t span{font-size:var(--fs-xs,12px); color:rgba(255,255,255,.75)}
.as-hbtn{flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:10px; background:transparent; color:#fff; cursor:pointer; text-decoration:none}
.as-hbtn:hover{background:rgba(255,255,255,.14)}
.as-hbtn:focus-visible{outline:2px solid var(--accent,#F08A24)}
.as-note{flex:none; padding:6px 14px; background:var(--accent-soft,#FFF1E3); color:#7A3E05; font-size:var(--fs-xs,12px); font-weight:700}

.as-log{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; background:var(--bg,#F6F8FB); overscroll-behavior:contain}
.as-msg{max-width:92%; font-size:var(--fs-base,15px); word-wrap:break-word}
.as-msg.me{align-self:flex-end; background:var(--navy,#14315F); color:#fff; padding:9px 14px; border-radius:16px; border-end-end-radius:4px; white-space:pre-wrap}
.as-msg.bot{align-self:stretch; max-width:100%; display:flex; flex-direction:column; gap:10px}
.as-say{align-self:flex-start; max-width:92%; background:var(--surface,#fff); border:1px solid var(--border,#E3E8F0); padding:9px 14px; border-radius:16px; border-end-start-radius:4px}
.as-typing{display:inline-flex; gap:4px; padding:12px 16px}
.as-typing i{width:7px; height:7px; border-radius:50%; background:var(--muted,#5B6472); opacity:.4; animation:as-dot 1s infinite}
.as-typing i:nth-child(2){animation-delay:.15s} .as-typing i:nth-child(3){animation-delay:.3s}
@keyframes as-dot{50%{opacity:1; transform:translateY(-3px)}}

.as-chips{display:flex; flex-wrap:wrap; gap:8px}
.as-chip{border:1px solid var(--border,#E3E8F0); background:var(--surface,#fff); color:var(--navy,#14315F); border-radius:999px; padding:6px 12px;
  font-family:inherit; font-size:var(--fs-sm,13px); font-weight:700; cursor:pointer; text-decoration:none; line-height:1.5}
.as-chip:hover{border-color:var(--navy,#14315F); background:var(--surface-2,#F4F6FA)}

/* البطاقات */
.as-card{background:var(--surface,#fff); border:1px solid var(--border,#E3E8F0); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.as-card h3{margin:0; font-size:var(--fs-md,16px); font-weight:800; color:var(--heading,#14315F); line-height:1.5}
.as-card .as-sub{font-size:var(--fs-sm,13px); color:var(--muted,#5B6472); margin-top:-6px}
.as-card p{margin:0; font-size:var(--fs-base,15px)}
.as-tag{align-self:flex-start; font-size:var(--fs-xs,12px); font-weight:800; padding:2px 10px; border-radius:999px; background:var(--accent-soft,#FFF1E3); color:#9A4B07}
.as-tag.q{background:rgba(46,111,208,.1); color:#1D4E9E}
.as-tag.g{background:rgba(14,159,110,.1); color:#0A7452}
.as-sec{display:flex; flex-direction:column; gap:4px}
.as-sec b{font-size:var(--fs-sm,13px); color:var(--muted,#5B6472); font-weight:800}
.as-sec ul{margin:0; padding-inline-start:20px; font-size:var(--fs-base,15px)}
.as-sec li{margin:2px 0}
.as-law{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; background:var(--surface-2,#F4F6FA)}
.as-law span{font-size:var(--fs-sm,13px); color:var(--muted,#5B6472)}
.as-law code{font-family:inherit; font-size:var(--fs-base,15px); font-weight:800; color:var(--text,#1A2233); direction:ltr; unicode-bidi:plaintext; text-align:start}
.as-vocab{display:flex; flex-wrap:wrap; gap:6px}
.as-vocab span{font-size:var(--fs-xs,12px); padding:2px 9px; border-radius:999px; background:var(--surface-2,#F4F6FA); border:1px solid var(--border,#E3E8F0)}
.as-ex{border-inline-start:3px solid var(--accent,#F08A24); padding-inline-start:10px; font-size:var(--fs-base,15px)}
.as-ex ol{margin:4px 0 0; padding-inline-start:20px}
.as-more-t{border:0; background:none; padding:0; font-family:inherit; font-size:var(--fs-sm,13px); font-weight:800; color:var(--navy,#14315F); cursor:pointer; align-self:flex-start}
.as-hide{display:none !important}
.as-opts{margin:0; padding:0; list-style:none; font-size:var(--fs-base,15px)}
.as-opts li{margin:2px 0}
.as-opts li.ok{color:var(--green,#0E9F6E); font-weight:800}
.as-qimg{max-width:100%; border-radius:10px; border:1px solid var(--border,#E3E8F0)}
.as-sol{border-radius:10px; background:rgba(14,159,110,.08); border:1px solid rgba(14,159,110,.25); padding:8px 12px; font-size:var(--fs-base,15px)}
.as-sol b{color:var(--green,#0E9F6E)}
.as-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.as-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:6px 14px; border-radius:10px; border:0;
  background:var(--navy,#14315F); color:#fff !important; font-family:inherit; font-size:var(--fs-ctl,14px); font-weight:800; text-decoration:none; cursor:pointer}
.as-btn:hover{background:var(--navy-dark,#0B1F3F)}
.as-btn.alt{background:var(--surface-2,#F4F6FA); color:var(--navy,#14315F) !important; border:1px solid var(--border,#E3E8F0)}
.as-btn.alt:hover{border-color:var(--navy,#14315F)}
.as-btn[disabled]{opacity:.6; cursor:default}

.as-form{flex:none; display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--border,#E3E8F0); background:var(--surface,#fff)}
.as-form textarea{flex:1; resize:none; max-height:110px; min-height:44px; padding:10px 14px; border:1px solid var(--border,#E3E8F0); border-radius:14px;
  background:var(--surface-2,#F4F6FA); color:var(--text,#1A2233); font-family:inherit; font-size:var(--fs-base,15px); line-height:1.5}
.as-form textarea:focus{outline:none; border-color:var(--navy,#14315F); background:var(--surface,#fff)}
.as-send{flex:none; width:44px; height:44px; border:0; border-radius:14px; background:var(--accent,#F08A24); color:#1A2233; display:grid; place-items:center; cursor:pointer}
.as-send:hover{background:var(--accent-dark,#D9731A)}
.as-send[disabled]{opacity:.55; cursor:default}
.as-foot{flex:none; margin:0; padding:0 12px 8px; text-align:center; font-size:var(--fs-xs,12px); color:var(--muted,#5B6472); background:var(--surface,#fff)}
.as-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (max-width: 640px){
  .as-fab{bottom:14px; inset-inline-end:14px; padding:0 14px}
  .as-panel{inset:0; width:100%; max-width:none; height:100%; border-radius:0; border:0}
}
@media (max-width: 380px){ .as-fab-t{display:none} .as-fab{width:52px; padding:0; justify-content:center} }
@media print{ .as-fab, .as-panel{display:none !important} }
@media (prefers-reduced-motion: reduce){ .as-panel, .as-typing i, .as-fab{animation:none; transition:none} }