#chatAudioToggle{
        background:white;
    }

    #chatSendBtn{
        background: linear-gradient(269deg, #ff7a18, #ffb199);
        color: white;
    }
    @font-face {
        font-family: 'Vazir';
        src: url('/static/assets/fonts/vazir/Vazir.woff2') format('woff2'),
             url('/static/assets/fonts/vazir/Vazir.woff') format('woff'),
             url('/static/assets/fonts/vazir/Vazir.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Vazir';
        src: url('/static/assets/fonts/vazir/Vazir-Bold.woff2') format('woff2'),
             url('/static/assets/fonts/vazir/Vazir-Bold.woff') format('woff'),
             url('/static/assets/fonts/vazir/Vazir-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    .page-title{
        padding: 2.4rem 1rem !important;
        background: linear-gradient(90deg, rgb(255 165 99), rgb(255 177 153 / 32%)) !important;
    }



        :root{
      --accent-1: #FF7A18;
      --accent-2: #FFB199;
      --muted: #6b7280;
      --card-bg: #ffffff;
      --glass: rgba(0,0,0,0.06);
      --radius: 12px;
    }
    html,body{height:100%;font-family:'Poppins', Tahoma, sans-serif;direction:rtl;text-align:right;background:#fff;color:#111;margin:0;padding:0;}
    .container-main{max-width:1180px;margin:26px auto;padding:0 16px;}
    a{color:inherit}
    /* product layout */
    .product-card-shell{background:var(--card-bg);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px var(--glass)}
    .gallery-main{border-radius:10px;overflow:hidden;background:#f8fafc;display:flex;align-items:center;justify-content:center;min-height:320px}
    .gallery-main img{max-width:100%;height:auto;object-fit:cover;display:block}
    .thumbs-row{gap:.6rem;margin-top:10px;display:flex;flex-wrap:wrap}
    .thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid #eee;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#fff}
    .product-title{font-size:1.2rem;font-weight:700;color:#111}
    .rating-stars{color:#f59e0b}
    .product-meta{color:var(--muted);font-size:.95rem;margin-top:.5rem}
    .price-tag{color:var(--accent-1);font-weight:700;font-size:1.05rem}
    .divider{height:1px;background:#f3f4f6;margin:14px 0;border-radius:4px}
    .small-muted{color:var(--muted);font-size:.95rem}

    /* CHAT */
    #chatWidget {
      position: fixed;
      inset: 0;
      z-index: 1080;
      pointer-events: none; /* وقتی بسته است نباید کلیک‌ها را بگیرد */
    }

    /* داخلی: overlay موجود در HTML (chat-overlay) */
    #chatWidget .chat-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.18);
      display: none;
      z-index: 1100;
      opacity: 0;
      transition: opacity .12s ease-in-out;
    }
    #chatWidget.open { pointer-events: auto; }
    #chatWidget.open .chat-overlay {
      display: block;
      opacity: 1;
    }

    .chat-minibutton {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width:64px;
      height:64px;
      border-radius:18px;
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 12px 30px rgba(16,24,40,0.18);
      cursor:pointer;
      border:none;
      pointer-events: auto;
      z-index: 1095;
    }

    .chat-window {
      display: none; /* حتماً بسته باشد تا صفحه را نپوشاند */
      pointer-events: auto;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(1100px, 90%);
      height: 78vh;
      background: var(--card-bg);
      border-radius: 14px;
      box-shadow: 0 40px 80px rgba(2,6,23,0.35);
      overflow: hidden;
      flex-direction: column;
      z-index: 1105; /* بالاتر از overlay */
      transition: opacity .12s ease, transform .12s ease;
      opacity: 0;
    }
    .chat-window.show {
      display: flex;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* chat-body layout */
    .chat-header { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f3f4f6;
        background: linear-gradient(269deg, #ff7a18, #ffb199);
        color: white;

    }
    #chatSubtitle{
    color:white;}
    .chat-body { display:flex; height: calc(100% - 64px); }
    .chat-main { flex:1; display:flex; flex-direction:column; padding:12px; }
    .messages { flex:1; overflow:auto; padding:8px; }
    .composer { display:flex; gap:8px; padding:10px; border-top:1px solid #f3f4f6; align-items:center; }
    .composer input[type="text"]{ flex:1; padding:8px 10px; border-radius:8px; border:1px solid #e6e6e6; }
    .vc-btn { background:transparent; border:1px solid #e6e6e6; padding:6px 8px; border-radius:8px; cursor:pointer; }
    .chat-side { width:300px; border-left:1px solid #f3f4f6; padding:12px; overflow:auto; }
    .message-bubble { margin:8px 0; padding:10px 12px; border-radius:12px; max-width:78%; }
    .message-bubble.user { margin-left:auto; background:#eaf8ff; }
    .message-bubble.bot { margin-right:auto; background:#f3f4f6;
        color: white;
        background: #f69577;
    }
    .audio-preview { width:100%; }

    /* responsive adjustments */
    @media (max-width: 900px) {
      .chat-side { width: 240px; padding:10px; }
      .chat-window { width: min(900px, 96%); height: 80vh; }
    }
    .chat-audio-btn{
        color:#000000;
        background: white;
    }
    @media (max-width: 576px){
      .chat-window {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        transform: none;
        width: auto;
        height: 78vh;
        border-radius: 12px;
      }
      .chat-side { display: none; }
      .chat-minibutton { right: 12px; bottom: 12px; }
    }
    .custum-css{
        background: linear-gradient(45deg, #ff6a00d4, #ff920000);
        padding: 25px;
        border-radius: 10px;
    }
    .modal-header{
        background:#ff7a18;
        color: white;
    }