* { box-sizing: border-box; }

      body {
        margin: 0;
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background:
          radial-gradient(circle at top left, rgba(82, 82, 91, 0.24), transparent 36rem),
          radial-gradient(circle at bottom right, rgba(63, 63, 70, 0.2), transparent 34rem),
          #09090b;
        color: #f4f4f5;
      }

      main {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        padding: 32px 20px;
      }

      .page { width: 100%; max-width: 980px; }

      .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #27272a;
        background: #18181b;
        color: #a1a1aa;
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 14px;
        margin-bottom: 18px;
      }

      h1 {
        font-size: clamp(42px, 7vw, 80px);
        line-height: 0.95;
        margin: 0 0 18px;
        letter-spacing: -0.06em;
      }

      .intro {
        color: #a1a1aa;
        font-size: 18px;
        line-height: 1.7;
        max-width: 720px;
        margin: 0 0 28px;
      }

      .card {
        border: 1px solid #27272a;
        background: rgba(24, 24, 27, 0.75);
        border-radius: 24px;
        padding: 22px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(16px);
      }

      .chat {
        min-height: 420px;
        max-height: 58vh;
        overflow-y: auto;
        border: 1px solid #27272a;
        background: #09090b;
        border-radius: 18px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .message {
        max-width: 82%;
        border-radius: 18px;
        padding: 14px 16px;
        line-height: 1.7;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }

      .message.user {
        align-self: flex-end;
        background: #f4f4f5;
        color: #09090b;
      }

      .message.ai {
        align-self: flex-start;
        background: #18181b;
        color: #d4d4d8;
        border: 1px solid #27272a;
      }

      .message.empty {
        align-self: center;
        color: #71717a;
        background: transparent;
        border: 1px dashed #27272a;
      }

      .message a {
        color: #f4f4f5;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .typing {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #a1a1aa;
      }

      .dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #a1a1aa;
        animation: pulse 0.9s infinite ease-in-out;
      }

      .dot:nth-child(2) { animation-delay: 0.15s; }
      .dot:nth-child(3) { animation-delay: 0.3s; }

      @keyframes pulse {
        0%, 100% { opacity: 0.25; transform: translateY(0); }
        50% { opacity: 1; transform: translateY(-2px); }
      }

      .search-card {
        border: 1px solid #3f3f46;
        background: #111113;
        border-radius: 16px;
        padding: 14px;
        margin-top: 12px;
      }

      .search-title {
        font-weight: 700;
        color: #f4f4f5;
        margin-bottom: 6px;
      }

      .search-url {
        color: #a1a1aa;
        font-size: 13px;
        margin-bottom: 10px;
      }

      .search-snippet {
        color: #d4d4d8;
      }

      form {
        margin-top: 18px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
      }

      textarea {
        width: 100%;
        min-height: 58px;
        max-height: 160px;
        resize: vertical;
        border: 1px solid #27272a;
        background: #09090b;
        color: #f4f4f5;
        border-radius: 18px;
        padding: 14px 16px;
        font: inherit;
        font-size: 16px;
        line-height: 1.5;
        outline: none;
      }

      textarea:focus { border-color: #71717a; }

      button {
        border: 0;
        border-radius: 16px;
        padding: 0 20px;
        min-height: 58px;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
      }

      #sendBtn {
        background: #f4f4f5;
        color: #09090b;
      }

      #clearBtn {
        margin-top: 12px;
        min-height: auto;
        padding: 11px 14px;
        background: transparent;
        color: #d4d4d8;
        border: 1px solid #27272a;
      }

      button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .hint {
        color: #71717a;
        font-size: 13px;
        margin-top: 10px;
      }

      @media (max-width: 700px) {
        form { grid-template-columns: 1fr; }
        .message { max-width: 95%; }
      }