You are an expert UI/UX designer and frontend developer specializing in Google Material 3 and mobile-first web applications. 

I am building an AI chat widget for an education platform (Educationist). The widget lives in a floating panel on mobile and desktop. It is a state-machine-driven conversational UI. The AI handles user onboarding (signup/login), profile completion, and job application.

I need you to generate the HTML structure and Material 3 CSS for this widget. It must look extremely clean, modern, and native to mobile devices (edge-to-edge, thumb-friendly hit areas, pill-shaped buttons).

Here is the EXACT and COMPLETE list of UI states ("clips") and the buttons that appear in each state. Do not add extra features.

--- PHASE 1: BEFORE LOGIN (GUEST) ---

1. AUTH_CHOICE (The starting point on a job page)
   - Message: "Assalam-o-Alaikum! Welcome to Educationist. To apply for class 1111255, let's get your account ready first. Do you already have an account with us?"
   - Buttons: [ ✅ Yes, log me in ] (Primary Outline) | [ 📝 No, sign me up ] (Primary Solid)

2. GUEST_TABS (The starting point on the homepage, no job context)
   - Two Pill Tabs at the top: [ 👨‍👩‍👧 Parents & Students ] | [ 🎓 Teachers ]
   - Under "Parents": [ 🔍 Hire a Verified Tutor → ] | [ 📋 Post a Tuition Requirement ] | [ 🏫 Are you a teacher? Sign in here ]
   - Under "Teachers": [ ✨ Sign In / Create Account → ] | [ 📝 Register as a Teacher ] | [ 💼 Browse Available Tuitions ]

3. INLINE_LOGIN (User clicks "Yes, log me in")
   - Chat asks for Email, then Password sequentially.
   - Text Input with a "Send" (paper plane) button.
   - (If failure): Message: "⚠️ Invalid email or password."
   - Buttons: [ 🔄 Try again ] (Secondary) | [ 🔑 Forgot password? ] (Tertiary warning color)

4. INLINE_SIGNUP (User clicks "No, sign me up")
   - Chat asks for Name -> Email -> WhatsApp -> Password sequentially.
   - Text Input with "Send" button.

--- PHASE 2: AFTER LOGIN (AUTHENTICATED) ---

5. INLINE_PROFILE (Profile is missing fields)
   - Chat asks only the missing questions (e.g., "What is your gender? (Male / Female / Other)", "What is your highest degree?").
   - Text Input with "Send" button.

6. JOB_CONFIRMATION (Profile complete, ready to apply)
   - A styled Material 3 Card showing Job Details:
     "CLASS CODE 1111255" (Small chip)
     "Home FSc 1-2 Math & Physics Tutor Required" (Bold heading)
     "📍 Rawalpindi, Bahria Town Phase 8" (Subtitle)
     "📚 Math, Physics"
     "🎓 Mode: Home"
   - Message: "Is this the correct job?"
   - Buttons: [ ✅ Yes ] (Success green tint) | [ ❌ No ] (Error red tint)

7. AI_CHAT (DeepSeek handles the application)
   - Messages asking for expected fee, distance, or cover letter.
   - Text Input with "Send" button.

8. SUCCESS
   - Message: "✅ Application submitted successfully!"
   - (Widget resets after 5 seconds).

--- EDGE CASE CLIPS (System Errors) ---

9. CONTEXT_LOADING
   - Message: "Let me check your profile to see what's missing..." (Spinner or typing indicator)

10. CRITICAL_ERROR
   - Message: "⚠️ Connection error: [error message]"

11. CSRF_ERROR
   - Message: "⚠️ Session expired. Please refresh the page."

--- GLOBAL HEADER (Always present) ---
   - Left: 🎓 Educationist AI (Text + Logo)
   - Right: [ 🔄 (Refresh icon to reset state) ] | [ ✕ (Close icon) ]

--- REQUIREMENTS FOR YOUR OUTPUT ---
1. Write clean, semantic HTML structure for the entire widget.
2. Write the Material 3 CSS (use CSS variables for colors: Primary Blue #1A73E8, Surface White, Border Gray #DADCE0, Success Green, Error Red).
3. Ensure mobile responsiveness: The panel should be 100vw/100vh on mobile, and a centered 420px card on desktop.
4. Make sure the input area sits at the very bottom (with safe-area-inset-bottom for iPhones).
5. Style the buttons as Material 3 pills (border-radius: 99px, font-family: Google Sans/Roboto).
6. Include subtle hover/active states for all buttons.

Please generate the code and design guidelines based on this exact blueprint.

Below is the exact HTML structure, Material 3 CSS, and implementation guidelines
matching your 11-state blueprint—with no extra features or unrequested UI
elements.

1. Semantic HTML Structure (educationist-ai-widget.html)

<div class="edu-ai-backdrop" role="presentation">
  <section
    class="edu-ai-panel"
    role="dialog"
    aria-modal="true"
    aria-labelledby="edu-ai-title"
    data-state="AUTH_CHOICE"
  >
    <!-- =====================================================
         GLOBAL HEADER (Always Present)
         ===================================================== -->
    <header class="edu-ai-header">
      <div class="edu-ai-brand">
        <span class="edu-ai-brand__logo" aria-hidden="true">🎓</span>
        <h1 id="edu-ai-title" class="edu-ai-brand__title">Educationist AI</h1>
      </div>

      <div class="edu-ai-header__actions">
        <button
          type="button"
          class="edu-ai-icon-btn"
          data-action="reset"
          aria-label="Reset conversation"
          title="Reset"
        >
          <span aria-hidden="true">🔄</span>
        </button>
        <button
          type="button"
          class="edu-ai-icon-btn"
          data-action="close"
          aria-label="Close panel"
          title="Close"
        >
          <span aria-hidden="true">✕</span>
        </button>
      </div>
    </header>

    <!-- =====================================================
         CONVERSATIONAL VIEWPORT (11 State-Machine Clips)
         ===================================================== -->
    <main class="edu-ai-body" aria-live="polite">

      <!-- ─────────────────────────────────────────────────
           PHASE 1: BEFORE LOGIN (GUEST)
           ───────────────────────────────────────────────── -->

      <!-- 1. AUTH_CHOICE (Job Page Entry) -->
      <div class="edu-ai-clip is-active" data-clip="AUTH_CHOICE">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>
              Assalam-o-Alaikum! Welcome to Educationist. To apply for class 1111255,
              let's get your account ready first. Do you already have an account with us?
            </p>
          </div>
        </div>

        <div class="edu-ai-actions edu-ai-actions--inline" role="group" aria-label="Authentication choice">
          <button
            type="button"
            class="edu-ai-btn edu-ai-btn--outline"
            data-transition="INLINE_LOGIN"
          >
            ✅ Yes, log me in
          </button>
          <button
            type="button"
            class="edu-ai-btn edu-ai-btn--primary"
            data-transition="INLINE_SIGNUP"
          >
            📝 No, sign me up
          </button>
        </div>
      </div>

      <!-- 2. GUEST_TABS (Homepage Entry, No Job Context) -->
      <div class="edu-ai-clip" data-clip="GUEST_TABS">
        <div class="edu-ai-tabs" role="tablist" aria-label="Select your role">
          <button
            type="button"
            class="edu-ai-tab is-selected"
            role="tab"
            aria-selected="true"
            aria-controls="panel-parents"
            id="tab-parents"
            data-tab="parents"
          >
            👨‍👩‍👧 Parents &amp; Students
          </button>
          <button
            type="button"
            class="edu-ai-tab"
            role="tab"
            aria-selected="false"
            aria-controls="panel-teachers"
            id="tab-teachers"
            data-tab="teachers"
          >
            🎓 Teachers
          </button>
        </div>

        <!-- Parents & Students Tab -->
        <div
          id="panel-parents"
          class="edu-ai-tab-panel"
          role="tabpanel"
          aria-labelledby="tab-parents"
        >
          <div class="edu-ai-actions edu-ai-actions--stack">
            <a href="/tutors" class="edu-ai-btn edu-ai-btn--primary edu-ai-btn--full">
              🔍 Hire a Verified Tutor →
            </a>
            <a href="/post-tuition" class="edu-ai-btn edu-ai-btn--outline edu-ai-btn--full">
              📋 Post a Tuition Requirement
            </a>
            <button
              type="button"
              class="edu-ai-btn edu-ai-btn--secondary edu-ai-btn--full"
              data-switch-tab="teachers"
            >
              🏫 Are you a teacher? Sign in here
            </button>
          </div>
        </div>

        <!-- Teachers Tab -->
        <div
          id="panel-teachers"
          class="edu-ai-tab-panel"
          role="tabpanel"
          aria-labelledby="tab-teachers"
          hidden
        >
          <div class="edu-ai-actions edu-ai-actions--stack">
            <button
              type="button"
              class="edu-ai-btn edu-ai-btn--primary edu-ai-btn--full"
              data-transition="INLINE_LOGIN"
            >
              ✨ Sign In / Create Account →
            </button>
            <button
              type="button"
              class="edu-ai-btn edu-ai-btn--outline edu-ai-btn--full"
              data-transition="INLINE_SIGNUP"
            >
              📝 Register as a Teacher
            </button>
            <a href="/tuition-jobs" class="edu-ai-btn edu-ai-btn--secondary edu-ai-btn--full">
              💼 Browse Available Tuitions
            </a>
          </div>
        </div>
      </div>

      <!-- 3. INLINE_LOGIN (Email -> Password sequentially) -->
      <div class="edu-ai-clip" data-clip="INLINE_LOGIN">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>Please enter your email address.</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--user">
          <div class="edu-ai-bubble edu-ai-bubble--user">
            <p>user@example.com</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>Please enter your password.</p>
          </div>
        </div>

        <!-- Shown on login failure -->
        <div class="edu-ai-msg edu-ai-msg--bot" data-login-error>
          <div class="edu-ai-bubble edu-ai-bubble--error" role="alert">
            <p>⚠️ Invalid email or password.</p>
          </div>
        </div>

        <div class="edu-ai-actions edu-ai-actions--inline" role="group" aria-label="Login recovery">
          <button
            type="button"
            class="edu-ai-btn edu-ai-btn--secondary"
            data-action="retry-login"
          >
            🔄 Try again
          </button>
          <a
            href="/forgot-password"
            class="edu-ai-btn edu-ai-btn--warning"
          >
            🔑 Forgot password?
          </a>
        </div>
      </div>

      <!-- 4. INLINE_SIGNUP (Name -> Email -> WhatsApp -> Password sequentially) -->
      <div class="edu-ai-clip" data-clip="INLINE_SIGNUP">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>What is your full name?</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--user">
          <div class="edu-ai-bubble edu-ai-bubble--user">
            <p>Ali Raza</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>What is your email address?</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--user">
          <div class="edu-ai-bubble edu-ai-bubble--user">
            <p>ali.raza@example.com</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>What is your WhatsApp number?</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--user">
          <div class="edu-ai-bubble edu-ai-bubble--user">
            <p>0300-1234567</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>Please create a password.</p>
          </div>
        </div>
      </div>

      <!-- ─────────────────────────────────────────────────
           PHASE 2: AFTER LOGIN (AUTHENTICATED)
           ───────────────────────────────────────────────── -->

      <!-- 5. INLINE_PROFILE (Missing profile fields only) -->
      <div class="edu-ai-clip" data-clip="INLINE_PROFILE">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>What is your gender? (Male / Female / Other)</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--user">
          <div class="edu-ai-bubble edu-ai-bubble--user">
            <p>Male</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>What is your highest degree?</p>
          </div>
        </div>
      </div>

      <!-- 6. JOB_CONFIRMATION -->
      <div class="edu-ai-clip" data-clip="JOB_CONFIRMATION">
        <article class="edu-ai-job-card" aria-label="Job details">
          <span class="edu-ai-chip">CLASS CODE 1111255</span>
          <h2 class="edu-ai-job-card__title">
            Home FSc 1-2 Math &amp; Physics Tutor Required
          </h2>
          <p class="edu-ai-job-card__subtitle">
            📍 Rawalpindi, Bahria Town Phase 8
          </p>
          <ul class="edu-ai-job-card__details">
            <li>📚 Math, Physics</li>
            <li>🎓 Mode: Home</li>
          </ul>
        </article>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>Is this the correct job?</p>
          </div>
        </div>

        <div class="edu-ai-actions edu-ai-actions--inline" role="group" aria-label="Confirm job">
          <button
            type="button"
            class="edu-ai-btn edu-ai-btn--success"
            data-transition="AI_CHAT"
          >
            ✅ Yes
          </button>
          <button
            type="button"
            class="edu-ai-btn edu-ai-btn--error"
            data-action="cancel-job"
          >
            ❌ No
          </button>
        </div>
      </div>

      <!-- 7. AI_CHAT (DeepSeek Application Flow) -->
      <div class="edu-ai-clip" data-clip="AI_CHAT">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>What is your expected monthly fee for this tuition?</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--user">
          <div class="edu-ai-bubble edu-ai-bubble--user">
            <p>25,000 PKR</p>
          </div>
        </div>

        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot">
            <p>How far are you from Bahria Town Phase 8, and would you like to add a short cover letter?</p>
          </div>
        </div>
      </div>

      <!-- 8. SUCCESS (Widget resets after 5 seconds) -->
      <div class="edu-ai-clip" data-clip="SUCCESS">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--success" role="status">
            <p>✅ Application submitted successfully!</p>
          </div>
        </div>
      </div>

      <!-- ─────────────────────────────────────────────────
           EDGE CASE CLIPS (System States)
           ───────────────────────────────────────────────── -->

      <!-- 9. CONTEXT_LOADING -->
      <div class="edu-ai-clip" data-clip="CONTEXT_LOADING">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--bot edu-ai-bubble--loading" role="status">
            <span class="edu-ai-typing" aria-hidden="true">
              <span></span><span></span><span></span>
            </span>
            <p>Let me check your profile to see what's missing...</p>
          </div>
        </div>
      </div>

      <!-- 10. CRITICAL_ERROR -->
      <div class="edu-ai-clip" data-clip="CRITICAL_ERROR">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--error" role="alert">
            <p>⚠️ Connection error: [error message]</p>
          </div>
        </div>
      </div>

      <!-- 11. CSRF_ERROR -->
      <div class="edu-ai-clip" data-clip="CSRF_ERROR">
        <div class="edu-ai-msg edu-ai-msg--bot">
          <div class="edu-ai-bubble edu-ai-bubble--error" role="alert">
            <p>⚠️ Session expired. Please refresh the page.</p>
          </div>
        </div>
      </div>

    </main>

    <!-- =====================================================
         BOTTOM INPUT BAR (Safe-area aware for iPhones)
         Toggle .is-hidden when current state has no text input
         ===================================================== -->
    <footer class="edu-ai-footer">
      <form class="edu-ai-composer" action="#" method="post">
        <label for="edu-ai-input" class="sr-only">Message</label>
        <input
          id="edu-ai-input"
          class="edu-ai-composer__input"
          type="text"
          name="message"
          placeholder="Type your message..."
          autocomplete="off"
        />
        <button
          type="submit"
          class="edu-ai-send-btn"
          aria-label="Send"
          title="Send"
        >
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
          </svg>
        </button>
      </form>
    </footer>
  </section>
</div>

2. Material 3 CSS (educationist-ai-widget.css)

/* =========================================================
   MATERIAL 3 DESIGN TOKENS
   ========================================================= */
:root {
  --md-sys-color-primary: #1A73E8;
  --md-sys-color-primary-hover: #1557B0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E8F0FE;
  --md-sys-color-on-primary-container: #1557B0;

  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-dim: #F8F9FA;
  --md-sys-color-surface-container: #F1F3F4;
  --md-sys-color-on-surface: #202124;
  --md-sys-color-on-surface-variant: #5F6368;
  --md-sys-color-outline: #DADCE0;

  --md-sys-color-success: #137333;
  --md-sys-color-success-container: #E6F4EA;
  --md-sys-color-on-success-container: #0D5224;

  --md-sys-color-error: #D93025;
  --md-sys-color-error-container: #FCE8E6;
  --md-sys-color-on-error-container: #A50E0E;

  --md-sys-color-warning: #B06000;
  --md-sys-color-warning-container: #FEF7E0;

  --md-sys-font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --md-sys-shape-pill: 99px;
  --md-sys-shape-card: 24px;
  --md-sys-shape-bubble: 18px;

  --md-sys-elevation-1: 0 1px 3px rgba(60, 64, 67, 0.10);
  --md-sys-elevation-3: 0 12px 32px rgba(32, 33, 36, 0.18);
  --md-sys-motion: cubic-bezier(0.2, 0, 0, 1);
}

.edu-ai-backdrop *,
.edu-ai-backdrop *::before,
.edu-ai-backdrop *::after {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   RESPONSIVE PANEL (100vw/100vh Mobile -> Centered 420px Desktop)
   ========================================================= */
.edu-ai-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 33, 36, 0.4);
  font-family: var(--md-sys-font-family);
  color: var(--md-sys-color-on-surface);
}

.edu-ai-panel {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--md-sys-color-surface);
  overflow: hidden;
}

@media (min-width: 640px) {
  .edu-ai-backdrop {
    padding: 24px;
  }

  .edu-ai-panel {
    width: 420px;
    max-width: 100%;
    height: min(680px, 88vh);
    border-radius: var(--md-sys-shape-card);
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-3);
  }
}

/* =========================================================
   GLOBAL HEADER
   ========================================================= */
.edu-ai-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px 16px;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline);
}

@media (min-width: 640px) {
  .edu-ai-header {
    padding: 12px 12px 12px 18px;
  }
}

.edu-ai-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.edu-ai-brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--md-sys-color-primary-container);
  font-size: 19px;
  flex-shrink: 0;
}

.edu-ai-brand__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
}

.edu-ai-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.edu-ai-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--md-sys-shape-pill);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.16s var(--md-sys-motion),
              color 0.16s var(--md-sys-motion),
              transform 0.12s var(--md-sys-motion);
}

.edu-ai-icon-btn:hover {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.edu-ai-icon-btn:active {
  transform: scale(0.93);
  background: var(--md-sys-color-outline);
}

/* =========================================================
   BODY & CLIP VISIBILITY
   ========================================================= */
.edu-ai-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--md-sys-color-surface-dim);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edu-ai-clip {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.edu-ai-clip.is-active {
  display: flex;
}

/* =========================================================
   CHAT BUBBLES & LOADING INDICATOR
   ========================================================= */
.edu-ai-msg {
  display: flex;
  width: 100%;
}

.edu-ai-msg--bot {
  justify-content: flex-start;
}

.edu-ai-msg--user {
  justify-content: flex-end;
}

.edu-ai-bubble {
  max-width: 86%;
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.edu-ai-bubble p {
  margin: 0;
}

.edu-ai-bubble--bot {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) 4px;
  box-shadow: var(--md-sys-elevation-1);
}

.edu-ai-bubble--user {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) 4px var(--md-sys-shape-bubble);
}

.edu-ai-bubble--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: 1px solid rgba(217, 48, 37, 0.25);
  border-radius: var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) 4px;
  font-weight: 500;
}

.edu-ai-bubble--success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border: 1px solid rgba(19, 115, 51, 0.25);
  border-radius: var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) var(--md-sys-shape-bubble) 4px;
  font-weight: 600;
}

.edu-ai-bubble--loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.edu-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.edu-ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  animation: eduBounce 1.2s infinite ease-in-out;
}

.edu-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.edu-ai-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes eduBounce {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* =========================================================
   MATERIAL 3 PILL BUTTONS (Thumb-Friendly >= 44px)
   ========================================================= */
.edu-ai-actions {
  display: flex;
  gap: 8px;
}

.edu-ai-actions--inline {
  flex-wrap: wrap;
}

.edu-ai-actions--stack {
  flex-direction: column;
}

.edu-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--md-sys-shape-pill);
  border: 1px solid transparent;
  font-family: var(--md-sys-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s var(--md-sys-motion),
              border-color 0.16s var(--md-sys-motion),
              box-shadow 0.16s var(--md-sys-motion),
              transform 0.12s var(--md-sys-motion);
}

.edu-ai-btn--full {
  width: 100%;
  justify-content: flex-start;
}

.edu-ai-btn:active {
  transform: scale(0.97);
}

.edu-ai-btn:focus-visible,
.edu-ai-icon-btn:focus-visible,
.edu-ai-tab:focus-visible,
.edu-ai-send-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Primary Solid */
.edu-ai-btn--primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.edu-ai-btn--primary:hover {
  background: var(--md-sys-color-primary-hover);
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.28);
}

/* Primary Outline */
.edu-ai-btn--outline {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.edu-ai-btn--outline:hover {
  background: var(--md-sys-color-primary-container);
}

/* Secondary */
.edu-ai-btn--secondary {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline);
}

.edu-ai-btn--secondary:hover {
  background: #E4E7EA;
}

/* Tertiary Warning */
.edu-ai-btn--warning {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-warning);
  border-color: rgba(176, 96, 0, 0.22);
}

.edu-ai-btn--warning:hover {
  background: #FDEFC2;
}

/* Success Green Tint */
.edu-ai-btn--success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border-color: rgba(19, 115, 51, 0.25);
  font-weight: 600;
}

.edu-ai-btn--success:hover {
  background: #CEEAD6;
}

/* Error Red Tint */
.edu-ai-btn--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-color: rgba(217, 48, 37, 0.25);
  font-weight: 600;
}

.edu-ai-btn--error:hover {
  background: #FAD2CF;
}

/* =========================================================
   GUEST_TABS — PILL SEGMENTED TABS
   ========================================================= */
.edu-ai-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--md-sys-shape-pill);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline);
}

.edu-ai-tab {
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--md-sys-shape-pill);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-font-family);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.16s var(--md-sys-motion),
              color 0.16s var(--md-sys-motion),
              box-shadow 0.16s var(--md-sys-motion);
}

.edu-ai-tab:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.65);
  color: var(--md-sys-color-on-surface);
}

.edu-ai-tab.is-selected {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  font-weight: 600;
  box-shadow: var(--md-sys-elevation-1);
}

.edu-ai-tab-panel[hidden] {
  display: none;
}

/* =========================================================
   JOB_CONFIRMATION — MATERIAL 3 CARD
   ========================================================= */
.edu-ai-job-card {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--md-sys-elevation-1);
}

.edu-ai-chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--md-sys-shape-pill);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.edu-ai-job-card__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--md-sys-color-on-surface);
}

.edu-ai-job-card__subtitle {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
}

.edu-ai-job-card__details {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--md-sys-color-outline);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

/* =========================================================
   BOTTOM INPUT BAR (iPhone Safe-Area Inset)
   ========================================================= */
.edu-ai-footer {
  flex-shrink: 0;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--md-sys-color-surface);
  border-top: 1px solid var(--md-sys-color-outline);
}

.edu-ai-footer.is-hidden {
  display: none;
}

.edu-ai-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 4px 4px 16px;
  border-radius: var(--md-sys-shape-pill);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline);
  transition: border-color 0.16s var(--md-sys-motion),
              background-color 0.16s var(--md-sys-motion);
}

.edu-ai-composer:focus-within {
  background: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

.edu-ai-composer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-font-family);
  font-size: 16px; /* Prevents iOS Safari zoom on input focus */
  line-height: 1.4;
  outline: none;
}

.edu-ai-composer__input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.edu-ai-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--md-sys-shape-pill);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  transition: background-color 0.16s var(--md-sys-motion),
              transform 0.12s var(--md-sys-motion);
}

.edu-ai-send-btn:hover {
  background: var(--md-sys-color-primary-hover);
}

.edu-ai-send-btn:active {
  transform: scale(0.93);
}

3. Design & State-Machine Guidelines

1.  Clip Visibility & Input Bar Mapping: Show .edu-ai-footer only for clips that
    expect typed user messages:
      - Input visible: INLINE_LOGIN, INLINE_SIGNUP, INLINE_PROFILE, AI_CHAT
      - Input hidden (.is-hidden): AUTH_CHOICE, GUEST_TABS, JOB_CONFIRMATION,
        SUCCESS, CONTEXT_LOADING, CRITICAL_ERROR, CSRF_ERROR
2.  Mobile Viewport & Safe Area:
      - height: 100dvh (with 100vh fallback) prevents the iOS Safari bottom bar
        from covering the composer.
      - padding: 10px 12px max(12px, env(safe-area-inset-bottom)) clears the
        iPhone Home Indicator.
      - font-size: 16px on .edu-ai-composer__input prevents iOS Safari from
        auto-zooming on tap.
3.  Sequential Keyboard Types: Switch #edu-ai-input type attribute dynamically
    during INLINE_LOGIN and INLINE_SIGNUP (email, tel, password, text) for
    native mobile keyboards.
4.  Reset Behavior: On SUCCESS, trigger your 5-second timer to revert
    .edu-ai-clip.is-active back to AUTH_CHOICE (on job pages) or GUEST_TABS (on
    homepage), matching the header 🔄 button behavior.



/* =========================================================
   FLOATING BUTTON POSITION OVERRIDE (LEFT-MIDDLE)
   ========================================================= */
#aiFloatingFab, 
.edu-ai-fab, 
button[onclick*="aiAuthOpen"] {
    top: 50% !important;
    bottom: auto !important;
    left: 16px !important;  /* Move to left */
    right: auto !important;
    transform: translateY(-50%) !important;  /* Center vertically */
}