/* ── CSS Custom Properties ── */
    /* Override these to restyle the chatbot: */
    :root {
      --cb-bg: #ffffff;
      --cb-text: #1a1a1a;
      --cb-text-muted: #a3a3a3;
      --cb-border: #e5e5e5;
      --cb-user-bg: #f0f0f0;
      --cb-user-text: #1a1a1a;
      --cb-assistant-text: #2a2a2a;
      --cb-input-bg: #fff;
      --cb-input-border: #d4d4d4;
      --cb-input-focus: #a3a3a3;
      --cb-btn-bg: #1a1a1a;
      --cb-btn-text: #fff;
      --cb-radius: 0.75rem;
      --cb-font: system-ui, -apple-system, sans-serif;
      --cb-font-size: 0.95rem;
      --cb-max-width: 720px;
      /* Embedded mode */
      --cb-widget-width: 380px;
      --cb-widget-height: 520px;
    }

    /* ── Dark mode — just variable overrides ── */
    body.dark {
      --cb-bg: #0a0a0a;
      --cb-text: #eee;
      --cb-text-muted: #666;
      --cb-border: rgba(255,255,255,0.08);
      --cb-user-bg: #2a2a2a;
      --cb-user-text: #eee;
      --cb-assistant-text: rgba(255,255,255,0.85);
      --cb-input-bg: #0a0a0a;
      --cb-input-border: rgba(255,255,255,0.1);
      --cb-input-focus: rgba(255,255,255,0.2);
      --cb-btn-bg: #fff;
      --cb-btn-text: #0a0a0a;
    }
    body.dark.embedded { background: #1a1a1a; }
    body.dark.embedded .page-header { background: #1a1a1a; }

    /* ── Page ── */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body {
      font-family: var(--cb-font);
      background: var(--cb-bg);
      color: var(--cb-text);
      height: calc(var(--vh, 1dvh) * 100);
      display: flex;
      flex-direction: column;
    }

    /* ── Header ── */
    .page-header {
      padding: 0.75rem 1.5rem;
      border-bottom: 1px solid var(--cb-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      background: var(--cb-bg);
    }
    .page-header a { color: #2563eb; text-decoration: none; font-size: 0.85rem; }
    .page-header a:hover { text-decoration: underline; }
    .page-header h1 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--cb-text);
      letter-spacing: -0.01em;
    }
    .mode-toggle {
      background: none;
      border: 1px solid var(--cb-border);
      color: var(--cb-text-muted);
      font-family: var(--cb-font);
      font-size: 0.8rem;
      padding: 0.3rem 0.7rem;
      border-radius: 6px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }
    .mode-toggle:hover {
      color: var(--cb-text);
      border-color: var(--cb-input-focus);
    }

    /* ── Full-page mode ── */
    coup-chatbot {
      display: flex;
      flex: 1;
      min-height: 0;
      transition: all 0.3s ease;
    }

    /* ── Embedded mode ── */
    body.embedded {
      background: #f5f5f5;
    }
    body.embedded .page-header {
      background: #f5f5f5;
      border-color: #ddd;
    }
    body.embedded coup-chatbot {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      width: var(--cb-widget-width);
      height: var(--cb-widget-height);
      flex: none;
      border-radius: 1rem;
      box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
      overflow: hidden;
      border: 1px solid var(--cb-border);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Minimized: collapse the widget, FAB handles its own positioning */
    body.embedded coup-chatbot.cb-minimized {
      width: 0;
      height: 0;
      border: none;
      box-shadow: none;
      overflow: visible;
    }
    body.embedded coup-chatbot.cb-minimized .cb-container {
      display: none;
    }

    /* Widget header (shown only in embedded) */
    .cb-widget-header {
      display: none;
    }
    body.embedded .cb-widget-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 0.75rem;
      border-bottom: 1px solid var(--cb-border);
      flex-shrink: 0;
      background: var(--cb-bg);
      border-radius: 1rem 1rem 0 0;
    }
    .cb-widget-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--cb-text);
    }
    .cb-minimize {
      background: none;
      border: none;
      color: var(--cb-text-muted);
      font-size: 1.2rem;
      cursor: pointer;
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      line-height: 1;
      transition: color 0.15s;
    }
    .cb-minimize:hover {
      color: var(--cb-text);
    }

    /* FAB (floating action button) */
    .cb-fab {
      display: none;
    }
    body.embedded .cb-fab {
      display: flex;
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--cb-btn-bg);
      color: var(--cb-btn-text);
      border: none;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, opacity 0.2s ease;
      z-index: 999;
    }
    body.embedded .cb-fab:hover {
      transform: scale(1.08);
    }
    body.embedded .cb-fab.cb-fab-hidden {
      opacity: 0;
      transform: scale(0.8);
      pointer-events: none;
    }

    /* ── Container ── */
    .cb-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      background: var(--cb-bg);
      position: relative;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .cb-container.cb-dragover::after {
      content: 'Drop image here';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(37, 99, 235, 0.04);
      border: 2px dashed rgba(37, 99, 235, 0.3);
      color: rgba(37, 99, 235, 0.7);
      font-size: 1.1rem;
      font-weight: 500;
      z-index: 10;
      pointer-events: none;
    }

    /* ── Messages area ── */
    .cb-messages {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      scroll-behavior: smooth;
    }
    .cb-messages::-webkit-scrollbar { width: 6px; }
    .cb-messages::-webkit-scrollbar-track { background: transparent; }
    .cb-messages::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.08);
      border-radius: 3px;
    }

    .cb-empty {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cb-text-muted);
      font-size: var(--cb-font-size);
      text-align: center;
      padding: 2rem;
    }

    /* ── Messages ── */
    chatbot-message { display: contents; }

    .cb-msg {
      display: flex;
      max-width: var(--cb-max-width);
      width: 100%;
      margin: 0 auto;
      padding: 0.5rem 0;
      animation: cb-fade-in 0.2s ease;
    }
    @keyframes cb-fade-in {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .cb-user {
      justify-content: flex-end;
    }
    .cb-assistant {
      justify-content: flex-start;
    }

    .cb-bubble {
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
      max-width: 85%;
      font-size: var(--cb-font-size);
    }

    .cb-user .cb-bubble {
      background: var(--cb-user-bg);
      color: var(--cb-user-text);
      padding: 0.5rem 0.75rem;
      border-radius: var(--cb-radius) var(--cb-radius) 0.15rem var(--cb-radius);
    }

    .cb-assistant .cb-bubble {
      color: var(--cb-assistant-text);
      padding: 0.25rem 0;
    }

    /* ── Avatar ── */
    .cb-avatar { display: none; }

    /* ── Typing indicator ── */
    .cb-typing {
      max-width: var(--cb-max-width);
      width: 100%;
      margin: 0 auto;
      display: flex;
      gap: 5px;
      padding: 0.75rem 0;
    }
    .cb-typing span {
      width: 6px;
      height: 6px;
      background: rgba(0,0,0,0.15);
      border-radius: 50%;
      animation: cb-bounce 1.4s ease-in-out infinite;
    }
    .cb-typing span:nth-child(2) { animation-delay: 0.2s; }
    .cb-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes cb-bounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-5px); }
    }

    /* ── Images in messages ── */
    .cb-images {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }
    .cb-thumb {
      max-width: 200px;
      max-height: 140px;
      border-radius: 8px;
      object-fit: cover;
      cursor: pointer;
    }

    /* ── Pending files ── */
    .cb-pending-files {
      max-width: var(--cb-max-width);
      width: 100%;
      margin: 0 auto;
      display: flex;
      gap: 0.5rem;
      padding: 0.5rem 0;
      overflow-x: auto;
    }
    .cb-pending-file {
      position: relative;
      flex-shrink: 0;
    }
    .cb-pending-file img {
      width: 56px;
      height: 56px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid var(--cb-border);
    }
    .cb-remove-file {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: none;
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    /* ── Compose area ── */
    .cb-compose {
      max-width: var(--cb-max-width);
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: flex-end;
      gap: 0.5rem;
      padding: 1rem;
    }
    .cb-compose textarea {
      flex: 1;
      border: 1px solid var(--cb-input-border);
      background: var(--cb-input-bg);
      color: var(--cb-text);
      border-radius: 1.25rem;
      padding: 0.6rem 1rem;
      font-family: var(--cb-font);
      font-size: var(--cb-font-size);
      resize: none;
      outline: none;
      max-height: 200px;
      line-height: 1.5;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .cb-compose textarea:focus {
      border-color: var(--cb-input-focus);
    }
    .cb-compose textarea::placeholder {
      color: var(--cb-text-muted);
    }
    .cb-compose textarea:disabled { opacity: 0.4; }

    /* Attach */
    .cb-attach {
      cursor: pointer;
      color: var(--cb-text-muted);
      padding: 0.5rem;
      border-radius: 50%;
      transition: color 0.15s;
      display: flex;
      align-items: center;
    }
    .cb-attach:hover { color: var(--cb-text); }

    /* Send */
    .cb-send {
      border: none;
      background: var(--cb-btn-bg);
      color: var(--cb-btn-text);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: opacity 0.15s;
      flex-shrink: 0;
    }
    .cb-send:hover:not(:disabled) { opacity: 0.8; }
    .cb-send:disabled { opacity: 0.15; cursor: default; }

    /* Stop */
    .cb-stop {
      border: none;
      background: var(--cb-btn-bg);
      color: var(--cb-btn-text);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-shrink: 0;
    }
    .cb-stop:hover { opacity: 0.8; }

    /* ── Copy action ── */
    .cb-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.4rem;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .cb-msg:hover .cb-actions { opacity: 1; }
    .cb-action-btn {
      background: none;
      border: 1px solid var(--cb-border);
      color: var(--cb-text-muted);
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-family: var(--cb-font);
      transition: color 0.15s, border-color 0.15s;
    }
    .cb-action-btn:hover {
      color: var(--cb-text);
      border-color: var(--cb-input-border);
    }

    /* ── Fullscreen image overlay ── */
    .cb-img-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      cursor: pointer;
    }
    .cb-img-overlay img {
      max-width: 90vw;
      max-height: 90vh;
      object-fit: contain;
      border-radius: 8px;
    }

    /* ── Mobile ── */
    @media (max-width: 600px) {
      .cb-bubble {
        max-width: 92%;
        font-size: 0.9rem;
        overflow-wrap: break-word;
      }
      .cb-user .cb-bubble {
        padding: 0.4rem 0.65rem;
      }
      .cb-messages {
        padding: 1rem 0.5rem;
      }
      .cb-compose {
        padding: 0.5rem;
        gap: 0.35rem;
      }
      .cb-compose textarea {
        font-size: 16px; /* prevent iOS zoom */
      }
      .page-header {
        padding: 0.5rem 0.75rem;
      }
      .page-header h1 {
        font-size: 0.85rem;
      }

      /* Lock the page against iOS keyboard scroll */
      body {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
      }

      /* Embedded mode: slightly inset on mobile */
      body.embedded coup-chatbot {
        bottom: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        height: min(var(--cb-widget-height), calc(var(--vh, 1dvh) * 100 - 5rem));
      }
      body.embedded .cb-fab {
        bottom: 0.75rem;
        right: 0.75rem;
      }
    }