/* Inline chips + input container */
    .snippet-container{
      display:flex;
      flex-wrap:wrap;          /* wrap to next line when full */
      align-items:center;
      gap:8px;                 /* space between chips and input */
      padding:8px 10px;
      border:1px solid #dadce0;
      border-radius:8px;
    }

    /* Chips row */
    .snippet-list{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .snippet-tag{
      display:inline-flex;
      align-items:center;
      padding:6px 12px;
      border-radius:16px;
      background: var(--regular_button_background_color);
      color: var(--regular_button_foreground_color);
      font-size:16px;
    }

    /* Make input sit inline and not full width like .form-control */
    .snippet-input{
      min-width:140px;
      flex:1;
      border:none;
      outline:none;
      background: transparent;
      box-shadow: none;
      padding:6px 4px;
    }

    /* small remove “×” */
    .snippet-tag .remove-btn{
      margin-left:8px;
      cursor:pointer;
      font-weight:700;
      opacity:.8;
    }

    .snippet-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      gap: 8px;
      padding: 6px 0;
    }

    .snippet-chip {
      border: 0;
      border-radius: 22px;
      padding: 6px 12px;
      background: var(--regular_button_background_color);
      color: #fff;
      cursor: pointer;
    }
    .snippet-chip:hover { opacity: .9; }

    /* Follow-up question chips appear below an AI message bubble */
    .followup-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 4px 36px;
    }
    .followup-bar:empty {
      display: none;
    }
    .followup-chip {
      border-radius: 18px;
      font-size: 14px;
      padding: 6px 12px;
      background: var(--regular_button_background_color);
      color: #fff;
      border: 0;
      cursor: pointer;
    }
    .followup-chip:hover { opacity: .9; }