.breadcrumb{
    display:flex; align-items:center; gap:8px;
    font-family:'Tajawal', sans-serif; font-size:0.85rem; color:var(--ink-500);
    margin-bottom:20px;
  }
  .breadcrumb a{color:var(--ink-500);}
  .breadcrumb a:hover{color:var(--orange-500);}
  .breadcrumb .sep{opacity:.5;}
  .breadcrumb .current{color:var(--ink-100); font-weight:600;}

  .chat-hero{
    padding:140px 0 30px;
    background:
      radial-gradient(ellipse 900px 500px at 80% 0%, rgba(62,124,184,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 10% 10%, rgba(232,134,60,0.10), transparent 55%),
      var(--navy-900);
  }
  .chat-hero .inner{max-width:720px;}
  .chat-hero h1{font-size:clamp(1.9rem, 3.4vw, 2.5rem); font-weight:700; margin-bottom:10px;}
  .chat-hero p{color:var(--ink-500); font-size:0.98rem;}

  .chat-wrap{max-width:760px; margin:0 auto; padding:30px 20px 90px;}
  .chat-window{
    background:#fff; border:1px solid var(--line); border-radius:24px;
    box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
    height:min(620px, 70vh);
  }
  .chat-messages{
    flex:1; overflow-y:auto; padding:28px; display:flex; flex-direction:column; gap:16px;
  }
  .msg{max-width:78%; padding:13px 18px; border-radius:16px; font-size:0.95rem; line-height:1.7;}
  .msg.assistant{
    align-self:flex-start; background:var(--navy-800); color:var(--ink-100);
    border-bottom-left-radius:4px;
  }
  .msg.user{
    align-self:flex-end; background:linear-gradient(120deg, var(--orange-500), var(--orange-300));
    color:#fff; border-bottom-right-radius:4px;
  }
  .msg.typing{align-self:flex-start; background:var(--navy-800); display:flex; gap:5px; padding:16px 20px;}
  .msg.typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-500); display:inline-block; animation:blink 1.2s infinite;}
  .msg.typing span:nth-child(2){animation-delay:.2s;} .msg.typing span:nth-child(3){animation-delay:.4s;}
  @keyframes blink{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}

  .chip-row{display:flex; gap:10px; flex-wrap:wrap; padding:0 28px 18px;}
  .chip{
    font-size:0.82rem; padding:8px 14px; border-radius:999px;
    border:1px solid var(--line); color:var(--ink-300); background:var(--navy-800);
    cursor:pointer; transition:border-color .2s ease, color .2s ease;
  }
  .chip:hover{border-color:var(--orange-300); color:var(--ink-100);}

  .chat-input-row{
    display:flex; gap:10px; padding:18px 20px; border-top:1px solid var(--line); background:#fff;
  }
  .chat-input-row textarea{
    flex:1; resize:none; border:1px solid var(--line); border-radius:14px;
    padding:12px 16px; font-family:inherit; font-size:0.95rem; max-height:100px;
    background:var(--navy-800); color:var(--ink-100);
  }
  .chat-input-row textarea:focus{outline:none; border-color:var(--blue-300);}
  .chat-input-row button{border-radius:14px; padding:0 22px;}

  .chat-footer-note{
    text-align:center; margin-top:18px; font-size:0.85rem; color:var(--ink-500);
  }
  .chat-footer-note a{color:var(--orange-500); font-weight:600;}

  @media (max-width:600px){
    .msg{max-width:88%;}
    .chat-window{height:min(560px, 75vh);}
  }