/* The chat widget. Identical on all 96 pages. */

    /* ── Widget shell ── */
    .ria-chat-widget {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 1000;
    }

    /* ── Chat window ── */
    .ria-chat-window {
      position: fixed;
      bottom: 5.5rem;
      right: 2rem;
      width: 400px;
      max-height: min(600px, calc(100vh - 8rem));
      display: flex;
      flex-direction: column;
      background: rgba(248, 247, 243, 0.38);
      -webkit-backdrop-filter: blur(32px) saturate(180%);
      backdrop-filter: blur(32px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.32);
      border-radius: 20px;
      box-shadow:
        0 40px 100px -24px rgba(0,0,0,0.22),
        0 12px 32px -8px rgba(0,0,0,0.08),
        0 0 0 1px rgba(255,255,255,0.45) inset;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      z-index: 1000;
    }

    /* ── Toggle button ── */
    .ria-chat-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--ink);
      color: #FFFFFF;
      border: none;
      border-radius: 999px;
      padding: 0.75rem 1.25rem 0.75rem 1.05rem;
      font-family: 'Satoshi', sans-serif;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 22px rgba(0,0,0,0.24), 0 1px 4px rgba(0,0,0,0.12);
      transition: background 240ms var(--ease-out-quart),
                  transform 200ms var(--ease-out-quart),
                  box-shadow 240ms var(--ease-out-quart);
    }
    @media (hover: hover) {
      .ria-chat-toggle:hover {
        background: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 10px 34px rgba(75,0,130,0.34), 0 2px 6px rgba(0,0,0,0.1);
      }
    }
    .ria-chat-toggle:active { transform: scale(0.96) !important; }
    .ria-toggle-icon { width: 15px; height: 15px; flex-shrink: 0; }
    .ria-toggle-icon-close { display: none; }
    .ria-chat-toggle.is-open .ria-toggle-icon-open  { display: none; }
    .ria-chat-toggle.is-open .ria-toggle-icon-close { display: inline-flex; }

    /* ── Header ── */
    .ria-chat-hd {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.38);
      flex-shrink: 0;
    }
    .ria-hd-mark {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(75,0,130,0.24);
    }
    .ria-hd-mark span {
      font-family: 'Satoshi', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #FFFFFF;
    }
    .ria-chat-hd-info { flex: 1; min-width: 0; }
    .ria-chat-hd-name {
      display: block;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--ink);
      line-height: 1.2;
    }
    .ria-chat-hd-sub {
      display: block;
      font-size: 0.63rem;
      color: var(--muted);
      letter-spacing: 0.02em;
      margin-top: 0.1rem;
    }
    .ria-chat-hd-close {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      flex-shrink: 0;
      transition: color 160ms ease, background 160ms ease;
    }
    .ria-chat-hd-close:hover { color: var(--ink); background: rgba(0,0,0,0.06); }

    /* ── Message thread ── */
    .ria-chat-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.25rem 1.25rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      scroll-behavior: smooth;
      overscroll-behavior: contain;
      background: transparent;
    }
    .ria-chat-body::-webkit-scrollbar { width: 3px; }
    .ria-chat-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }

    /* ── Messages ── */
    .ria-msg {
      display: flex;
      flex-direction: column;
      max-width: 84%;
      animation: ria-up 340ms var(--ease-out-expo) both;
    }
    .ria-msg.is-bot { align-self: flex-start; }
    .ria-msg.is-user { align-self: flex-end; align-items: flex-end; }

    @keyframes ria-up {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Sender label */
    .ria-sender {
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
      opacity: 0.75;
      margin-bottom: 0.28rem;
    }

    /* Bubble shared */
    .ria-msg-bub {
      padding: 0.75rem 1rem;
      font-size: 0.8rem;
      line-height: 1.74;
      letter-spacing: 0.01em;
    }

    /* Bot bubble — flat top-left corner signals the sender direction */
    .ria-msg.is-bot .ria-msg-bub {
      background: rgba(255,255,255,0.52);
      border: 1px solid rgba(255,255,255,0.38);
      border-radius: 2px 14px 14px 14px;
      color: var(--ink);
      align-self: flex-start;       /* KEY FIX — shrinks to content width */
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    /* User bubble — flat bottom-right corner */
    .ria-msg.is-user .ria-msg-bub {
      background: var(--accent);
      color: #FFFFFF;
      border-radius: 14px 14px 2px 14px;
      align-self: flex-end;         /* KEY FIX — shrinks to content width */
      box-shadow: 0 2px 10px rgba(75,0,130,0.22);
    }

    /* ── CTA action card ── */
    .ria-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.68rem 1.05rem;
      border-radius: 10px;
      font-family: 'Satoshi', sans-serif;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-decoration: none;
      align-self: flex-start;
      animation: ria-up 340ms var(--ease-out-expo) both;
      transition: background 210ms var(--ease-out-quart),
                  color 210ms var(--ease-out-quart),
                  transform 180ms var(--ease-out-quart),
                  box-shadow 210ms var(--ease-out-quart);
    }
    .ria-cta svg { flex-shrink: 0; }
    .ria-cta.is-primary {
      background: var(--accent);
      color: #FFFFFF;
      border: 1px solid var(--accent);
      box-shadow: 0 3px 12px rgba(75,0,130,0.22);
    }
    .ria-cta.is-secondary {
      background: #FFFFFF;
      color: var(--accent);
      border: 1px solid rgba(75,0,130,0.28);
    }
    @media (hover: hover) {
      .ria-cta.is-primary:hover  { background: #3d0070; box-shadow: 0 6px 18px rgba(75,0,130,0.3); transform: translateY(-1px); }
      .ria-cta.is-secondary:hover { background: var(--accent); color: #FFFFFF; border-color: var(--accent); transform: translateY(-1px); }
    }
    .ria-cta:active { transform: scale(0.97) !important; }

    /* ── Typing indicator ── */
    .ria-typing {
      display: inline-flex;
      gap: 0.26rem;
      align-items: center;
      padding: 0.72rem 1rem;
      background: rgba(255,255,255,0.52);
      border: 1px solid rgba(255,255,255,0.38);
      border-radius: 2px 14px 14px 14px;
      align-self: flex-start;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      animation: ria-up 260ms var(--ease-out-expo) both;
    }
    .ria-typing span {
      width: 5px; height: 5px;
      border-radius: 999px;
      background: var(--accent);
      opacity: 0.4;
      animation: ria-dot 1.2s ease-in-out infinite;
    }
    .ria-typing span:nth-child(2) { animation-delay: 0.18s; }
    .ria-typing span:nth-child(3) { animation-delay: 0.36s; }
    @keyframes ria-dot {
      0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
      30%            { opacity: 1;    transform: translateY(-4px); }
    }

    /* ── Chips area ── */
    .ria-chips-area {
      flex-shrink: 0;
      padding: 0.8rem 1.25rem 0.9rem;
      border-top: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.32);
    }
    .ria-chips-lbl {
      display: block;
      font-size: 0.57rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }
    .ria-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      transition: opacity 170ms ease;
    }
    .ria-chips.is-fading { opacity: 0; pointer-events: none; }
    /* Base chip — pill */
    .ria-chip {
      background: none;
      border: 1px solid rgba(75,0,130,0.22);
      color: var(--accent);
      border-radius: 999px;
      padding: 0.4rem 0.95rem;
      font-family: 'Satoshi', sans-serif;
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      cursor: pointer;
      white-space: nowrap;
      animation: ria-up 340ms var(--ease-out-expo) both;
      transition: background 180ms var(--ease-out-quart),
                  color 180ms var(--ease-out-quart),
                  border-color 180ms var(--ease-out-quart),
                  transform 140ms var(--ease-out-quart),
                  box-shadow 180ms var(--ease-out-quart);
    }
    /* Tier 1 — filled primary */
    .ria-chip.t1 {
      background: var(--accent);
      color: #FFFFFF;
      border-color: var(--accent);
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(75,0,130,0.2);
    }
    /* Tier 3 — muted secondary */
    .ria-chip.t3 {
      border-color: rgba(0,0,0,0.1);
      color: var(--muted);
      font-size: 0.66rem;
    }
    @media (hover: hover) {
      .ria-chip:hover {
        background: var(--accent);
        color: #FFFFFF;
        border-color: var(--accent);
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(75,0,130,0.2);
      }
      .ria-chip.t1:hover { background: #3d0070; border-color: #3d0070; box-shadow: 0 4px 14px rgba(75,0,130,0.3); }
      .ria-chip.t3:hover { background: rgba(0,0,0,0.05); color: var(--ink); border-color: rgba(0,0,0,0.14); transform: none; box-shadow: none; }
    }
    .ria-chip:active { transform: scale(0.95) !important; }

    /* ── Text input row ── */
    .ria-input-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.25rem 0.7rem;
      background: rgba(255,255,255,0.32);
      border-top: 1px solid rgba(255,255,255,0.2);
      flex-shrink: 0;
    }
    .ria-input {
      flex: 1;
      min-width: 0;
      background: rgba(255,255,255,0.4);
      border: 1.5px solid transparent;
      border-radius: 999px;
      padding: 0.52rem 1rem;
      font-family: 'Satoshi', sans-serif;
      font-size: 0.77rem;
      color: var(--ink);
      outline: none;
      transition: border-color 200ms ease, background 200ms ease;
    }
    .ria-input::placeholder { color: var(--muted); opacity: 0.6; }
    .ria-input:focus { border-color: rgba(75,0,130,0.36); background: #FFFFFF; }
    .ria-send-btn {
      width: 34px; height: 34px;
      border-radius: 999px;
      background: var(--accent);
      color: #FFFFFF;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 180ms ease, transform 150ms ease, opacity 200ms ease;
    }
    .ria-send-btn:disabled { opacity: 0.28; cursor: default; }
    @media (hover: hover) {
      .ria-send-btn:not(:disabled):hover { background: #3d0070; transform: scale(1.07); }
    }
    .ria-send-btn:active { transform: scale(0.93) !important; }

    /* ── Footer ── */
    .ria-chat-ft {
      padding: 0.42rem 1.25rem 0.6rem;
      background: rgba(255,255,255,0.28);
      border-top: 1px solid rgba(255,255,255,0.18);
      flex-shrink: 0;
    }
    .ria-chat-ft p {
      margin: 0;
      font-size: 0.57rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(0,0,0,0.2);
      text-align: center;
    }

    /* ── Mobile ── */
    @media (max-width: 500px) {
      .ria-chat-widget { bottom: 1.25rem; right: 1.25rem; }
      .ria-chat-window {
        bottom: 5.25rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-height: calc(100dvh - 7rem);
        border-radius: 16px;
      }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      .ria-chat-window { transition: opacity 80ms ease !important; }
      .ria-msg, .ria-cta, .ria-typing, .ria-chip, .ria-proj-card { animation: none !important; }
      .ria-typing span { animation: none !important; opacity: 0.4; }
    }

    /* Project cards. Added 2026-08-20 with the rebuilt assistant: the flow can
       now answer a sector question with two or three real projects rather than
       a paragraph and a link. */

    .ria-proj-cards {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      align-self: flex-start;
      width: 100%;
      max-width: 260px;
    }
    .ria-proj-card {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.5rem;
      border-radius: 10px;
      border: 1px solid rgba(75,0,130,0.14);
      background: #FFFFFF;
      text-decoration: none;
      animation: ria-up 340ms var(--ease-out-expo) both;
      transition: border-color 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart), transform 180ms var(--ease-out-quart);
    }
    .ria-proj-card-img {
      width: 56px;
      height: 56px;
      border-radius: 7px;
      object-fit: cover;
      flex-shrink: 0;
      background: rgba(75,0,130,0.06);
    }
    .ria-proj-card-body {
      display: flex;
      flex-direction: column;
      gap: 0.14rem;
      min-width: 0;
    }
    .ria-proj-card-body strong {
      font-family: 'Satoshi', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--ink);
    }
    .ria-proj-card-body span {
      font-size: 0.7rem;
      line-height: 1.35;
      color: rgba(0,0,0,0.55);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (hover: hover) {
      .ria-proj-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(75,0,130,0.16); transform: translateY(-1px); }
    }
    .ria-proj-card:active { transform: scale(0.98) !important; }
    .ria-proj-card:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }