#turath-chat{position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:120}

.tc-fab{
  width:58px; height:58px; border-radius:50%; border:none; background:var(--base); color:#fff;
  font-size:25px; cursor:pointer; box-shadow:0 8px 24px rgba(7,165,79,.38); transition:transform .2s;
}
.tc-fab:hover{transform:scale(1.06)}

.tc-panel{
  position:absolute; inset-block-end:72px; inset-inline-end:0;
  width:360px; max-width:calc(100vw - 40px);
  height:500px; max-height:calc(100vh - 130px);
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.22); flex-direction:column; overflow:hidden; display:none;
}
.tc-panel.open{display:flex}

.tc-head{
  background:linear-gradient(120deg,var(--base-dark),var(--base)); color:#fff;
  padding:14px 16px; font-weight:800; display:flex; align-items:center; justify-content:space-between;
}
.tc-close{background:transparent; border:none; color:#fff; font-size:17px; cursor:pointer; line-height:1}

.tc-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}

/* .tc-body عمود مرن، وأبناؤه يتقلّصون افتراضيًا. الفقاعات القصيرة تنجو، أما
   بطاقة المشروع (صورة 16:9 + نصوص) فكانت تُسحق إلى 45px ويُقصّ محتواها
   ولا يفيض شيء فلا يظهر شريط تمرير — فتبدو وكأن البوت لم يردّ إطلاقًا. */
.tc-body > *{flex:0 0 auto}

.tc-msg{max-width:84%; padding:10px 14px; border-radius:14px; line-height:1.6; font-size:14px; white-space:pre-line}
.tc-msg.bot{background:var(--bg); color:var(--ink); align-self:flex-start; border-end-start-radius:4px}
.tc-msg.me{background:var(--base); color:#fff; align-self:flex-end; border-end-end-radius:4px}

.tc-typing{align-self:flex-start; color:var(--muted); font-size:13px; padding:4px 6px}

/* أزرار الاختيار */
.tc-opts{display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:96%}
.tc-opt{
  background:#fff; border:1.5px solid var(--base); color:var(--base);
  border-radius:20px; padding:8px 14px; font-family:inherit; font-size:12.5px;
  font-weight:700; cursor:pointer; text-align:start; line-height:1.4;
  transition:background .15s, color .15s;
}
.tc-opt:hover:not(:disabled){background:var(--base); color:#fff}
.tc-opt:disabled{opacity:.45; cursor:default}
.tc-opt-cat{border-style:dashed}

/* بطاقة مشروع */
.tc-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; align-self:flex-start; max-width:96%; width:100%;
  box-shadow:0 4px 14px rgba(17,24,39,.07);
}
/* الصورة كاملة بنسبتها الأصلية — بلا إطار ثابت ولا object-fit:cover،
   فذاك كان يقصّ أطراف صورة المشروع (وفيها اسم المشروع أحيانًا). */
.tc-hero{width:100%; background:var(--base-soft); line-height:0}
.tc-hero img{width:100%; height:auto; display:block}
.tc-cbody{display:flex; flex-direction:column; gap:6px; padding:12px 13px 13px}
.tc-nm{font-weight:800; color:var(--ink); font-size:14.5px; line-height:1.4}
.tc-meta{color:var(--base); font-size:11.5px; font-weight:700}
.tc-sec{color:var(--muted); font-size:12.3px; line-height:1.6}
.tc-sec b{color:var(--ink); font-weight:700}
.tc-cta{
  margin-top:6px; background:var(--base); color:#fff; border:none; border-radius:10px;
  padding:9px 14px; font-weight:700; font-size:12.5px; cursor:pointer;
  font-family:inherit; align-self:flex-start; text-decoration:none;
}
.tc-cta:hover{filter:brightness(1.07); color:#fff; text-decoration:none}

.tc-input{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border)}
.tc-input input{
  flex:1; border:1px solid var(--border); border-radius:20px; padding:10px 14px;
  font-family:inherit; font-size:14px; background:var(--bg); color:var(--ink);
}
.tc-input input:focus{outline:none; border-color:var(--base)}
.tc-input button{
  background:var(--base); color:#fff; border:none; width:40px; height:40px;
  border-radius:50%; font-size:15px; cursor:pointer; flex-shrink:0;
}

@media(max-width:640px){
  #turath-chat{inset-inline-end:12px; inset-block-end:12px}
  .tc-panel{width:calc(100vw - 24px)}
}