/* assets/css/main.css */

  /* -------------------- Design tokens -------------------- */
  :root {
    --shell-bg:#0b0e14;
    --card-bg:#11151c;
    --muted:#9aa4b2;
    --ring:#2a9d8f;

    /* A11y additions */
    --focus-outline:#7fd8cc;
    --contrast-text:#e9eef3;
    --contrast-muted:#b8c1cc;

    --latin-stack: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }

  /* -------------------- Fonts -------------------- */
  @font-face {
    font-family:"IRANSansWeb";
    src:
      url("../fonts/IranSansWeb.woff2") format("woff2"),
      url("../fonts/IranSansWeb.woff") format("woff"),
      url("../fonts/IranSansWeb.ttf") format("truetype"),
      url("../fonts/IranSansWeb.eot");
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
  }

  /* -------------------- Base -------------------- */
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--latin-stack);
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(42,157,143,.12), transparent 60%),
      radial-gradient(1200px 600px at 90% 110%, rgba(168,85,247,.10), transparent 60%),
      var(--shell-bg);
  }

  /* languages and direction */
  :lang(fa),
  :lang(ar) { font-family:"IRANSansWeb", var(--latin-stack); }
  html:lang(fa),
  html:lang(ar) { direction: rtl; }
  :lang(fa),
  :lang(ar) { font-variant-numeric: normal; }

  /* -------------------- Typography & layout helpers -------------------- */
  h1 { cursor:pointer; }
  .container-narrow { max-width: 860px; }
  .char-count { font-variant-numeric: tabular-nums; }
  .rtl { direction: rtl; }
  .ltr { direction: ltr; }
  [dir="rtl"] .input-group > :not(:last-child) { border-right: 0; }

  /* -------------------- Links & entities -------------------- */
  a, .entity-link {
    color: rgba(160, 225, 215, 0.95);
    text-decoration: none;
  }
  a:hover, .entity-link:hover { text-decoration: underline; }
  a:focus-visible, .entity-link:focus-visible {
    outline: 3px solid var(--focus-outline);
    outline-offset: 2px;
    text-decoration: underline;
  }

  .entity-link {
    padding-inline: 2px;
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  }
  .sources_links { margin-top: .5rem; }
  .response-card .sources_links { margin-top: .75rem; }

  /* -------------------- Cards & surfaces -------------------- */
  .card.shadow-sm,
  .response-card {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,.06);
  }
  .response-card { white-space: pre-wrap; color: var(--contrast-text); }

  .glass {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
  }

  .loader-card .card-body { min-height: 160px; }

  .text-secondary { color: var(--contrast-muted) !important; }

  button:focus-visible,
  .btn:focus-visible,
  .form-control:focus-visible,
  select:focus-visible,
  [role="button"]:focus-visible {
    outline: 3px solid var(--focus-outline);
    outline-offset: 2px;
  }

  .btn-primary:focus,
  .form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(42,157,143,.25) !important;
    border-color: rgba(42,157,143,.6) !important;
  }

  .btn-outline-secondary {
    color: var(--contrast-text);
    border-color: rgba(255,255,255,.4);
  }
  .btn-outline-secondary:hover {
    border-color: rgba(255,255,255,.7);
  }

  /* -------------------- Chat shell -------------------- */
  .chat-shell { display:flex; flex-direction:column; gap:12px; }

  .sticky-input {
    position: sticky;
    bottom: 0;
    background: transparent;
    padding: 0.5rem;
    z-index: 10;
    backdrop-filter: blur(6px);
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }

  /* -------------------- FAQ -------------------- */
  .faq-btn { margin: .25rem .25rem 0 0; }
  .faq-toggle-parent { cursor:pointer; user-select:none; }

  .faq-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .faq-wrap.open {
    max-height: 40vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .faq-wrap.open::-webkit-scrollbar { width: 8px; }
  .faq-wrap.open::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 8px;
  }
  .faq-wrap.open::-webkit-scrollbar-track { background: transparent; }

  .faq-chips {
    display:flex;
    flex-wrap: wrap;
    gap:.5rem;
    overflow: visible;
    padding:.25rem 0;
    justify-content: flex-start;
  }
  .faq-chips .btn {
    text-align: start;
    white-space: normal;
    line-height: 1.35;
    flex: 0 0 auto;
    max-width: 100%;
  }
  
  /* FAQ: touch targets & mobile ergonomics */
    @media (hover: none), (pointer: coarse), (max-width: 576px) {
      .faq-chips .btn {
        /* Larger tap area on mobile */
        min-height: 44px;       /* WCAG min */
        padding: .6rem .9rem;
        line-height: 1.4;
        font-size: .98rem;
      }
    }
    
    /* Smooth scrolling and prevent last item from hiding under sticky input */
    .faq-wrap.open {
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      scroll-padding-bottom: 120px;
    }
    
    /* Mobile: more room for list and bottom padding */
    @media (max-width: 576px) {
      .faq-wrap.open {
        max-height: 60vh;
        padding-bottom: 96px;
      }
    }
    
    /* Embedded (embed=1): add spacer so last chip is visible */
    [data-embed="true"] .faq-wrap.open::after {
      content: "";
      display: block;
      height: calc(120px + env(safe-area-inset-bottom));
    }
    
    [data-embed="true"] #responseZone, [data-embed="true"] .loader-card { 
        display: none;
    }
    
    /* Extra breathing room for the last chip */
    .faq-chips > .btn:last-child { margin-bottom: 8px; }


  /* -------------------- Skeletons -------------------- */
  .skeleton {
    display: block;
    border-radius: 8px;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.32) 50%,
      rgba(255,255,255,0.16) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.1s infinite linear;
  }
  .skeleton-title  { height: 22px; width: 46%; }
  .skeleton-line   { height: 14px; width: 100%; }
  .skeleton-avatar { width: 44px; height: 44px; }
  .skeleton-chip   { height: 26px; width: 92px; border-radius: 999px; display:inline-block; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .skeleton { animation: none; }
  }

  /* -------------------- Social icons -------------------- */
  .social-icons .icon-link {
    color: #c7d0da;
    opacity: .9;
    transition: transform .15s ease, opacity .15s ease;
  }
  .social-icons .icon-link:hover {
    opacity: 1;
    transform: translateY(-2px);
  }

  /* -------------------- Source icons -------------------- */
  .sources_link .source-favicon {
    border-radius: 3px;
    object-fit: cover;
    inline-size: 16px;
    block-size: 16px;
    flex: 0 0 auto;
  }

  /* -------------------- Privacy note -------------------- */
  .privacy-note { color: var(--muted); font-size: .9rem; }

  /* -------------------- Inline loading hint -------------------- */
  .inline-loading { will-change: opacity, transform; }

  /* -------------------- Response card appearance */
  #responseZone .card.response-card {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
  }
  #responseZone .card.response-card {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* -------------------- Embed -------------------- */
  [data-embed="true"] body {
      background: none;
  }
  [data-embed="true"] .container {
    border-radius: 1em;
  }
  [data-embed="true"] footer {
    display: none;
  }