/* =========================
   BASE / PAGE
   ========================= */

   body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f4f6;
  }
  
  h1 {
    margin-top: 0;
    text-align: center;
    font-size: 1.4rem;
    color: #111827;
  }
  
 /* =========================
   WIDGET CONTAINER
   ========================= */

/* Default: fill the viewport (perfect for iframes) */
#chat-widget{
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
}
  
  /* =========================
     APP WRAPPER
     ========================= */
  
  #app {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    min-width: 0;
  }
  
  /* =========================
     INTRO
     ========================= */
     
     #chat-title{
      margin: 0 0 10px;
    }

     #intro-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    
      /* was center — move it higher */
      justify-content: flex-start;
    
      text-align: center;
    
      /* add top padding so it's higher but not stuck to the top */
      padding: 28px 16px 0;
    
      gap: 16px;
    }    
  
  #intro-card {
    padding: 20px 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-width: 360px;
    width: 100%;
    box-sizing: border-box;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  #intro-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
    max-width: 280px;
  }
  
  /* Shared start buttons */
  #start-lesson-btn,
  #start-builder-btn {
    padding: 12px 30px;
    border-radius: 999px;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out,
      background 0.1s ease-out;
  }
  
  #start-lesson-btn:hover,
  #start-builder-btn:hover {
    background: #1d4ed8;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.5);
  }
  
  #start-lesson-btn:active,
  #start-builder-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
  }
  
  /* =========================
     CHAT CONTAINER
     ========================= */
  
  #chat-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    min-width: 0; /* flex-shrink safety */
  }
  
  .model-disclosure {
    font-size: 11px;
    color: #777;
    margin-top: 4px;
    text-align: center;
    line-height: 1.4;
  }
  
  /* =========================
     BUILDER PANES
     ========================= */
  
  #builder-panes {
    flex: 1;
    min-height: 0;
    min-width: 0; /* layout guard */
    display: flex;
  }
  
  /* Each pane fills available height */
  #builder-chat-pane,
  #builder-editor-pane {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  
  /* Base pane styling (used by Builder HTML) */
  .builder-pane {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
    
  .builder-pane-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 6px;
  }
  
  /* Optional (present in Builder HTML) */
  .builder-pane-header--row {
    /* no behavior styling; layout is inline in builder.html */
  }
  
  /* Optional Builder tabs (Builder HTML uses heavy inline styles) */
  .builder-tab {
    background: transparent;
    border: none;
    cursor: pointer;
  }
  
  .builder-tab--active {
    font-weight: 600;
  }
  
  /* Plan editor (Builder HTML also applies these inline; keep for consistency) */
  #builder-editor {
    flex: 1;
    min-height: 0;
    width: 100%;
    resize: none;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    font-size: 0.9rem;
    box-sizing: border-box;
    outline: none;
    background: #ffffff;
  }
  
  #builder-editor:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
  }
  
  .plan-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
  }
    
  .plan-actions{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0; /* was 8px; footer handles spacing now */
  }  
  
  /* On small screens, allow the disclaimer to wrap cleanly */
  @media (max-width: 600px){
    .plan-actions{
      flex-wrap: wrap;
    }
  }  

  /* Mobile: widen the chat lane by reducing outer app padding */
@media (max-width: 600px){
  #app{
    padding: 8px;
  }
}
  
  #add-structure-btn,
  #download-plan-btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.9rem;
  }
  
  #add-structure-btn:hover,
  #download-plan-btn:hover {
    background: #f3f4f6;
  }
  
  /* Plan header copy button */
  .plan-copy-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.6;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    position: relative; /* tooltip anchor */
  }
  
  .plan-copy-btn::before {
    content: "⧉";
  }
  
  .plan-copy-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    background: #111827;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }
  
  .plan-copy-btn:hover::after,
  .plan-copy-btn.is-copied::after {
    opacity: 1;
  }
  
  /* =========================
     MESSAGES
     ========================= */
  
     #messages {
      /* JS controls visibility */
      flex: 1 1 0;
      min-height: 0;
      min-width: 0;
    
      /* ✅ make the conversation lane a centered panel */
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
    
      /* lane padding (space from lane edges) */
      padding: 16px;
    
      border: none;
      background: transparent;
      border-radius: 0;
    
      overflow-y: auto;
      overflow-x: hidden;
    
      box-sizing: border-box;
    
      /* stack messages */
      display: flex;
      flex-direction: column;
    }    
    
    /* Desktop only: extra side padding */
    @media (min-width: 1024px){
      #messages{ padding: 16px; }
    }   
  
    :root{
      --msg-lane: 80%; /* same lane width for both sides */
    }
    
  /* Message bubbles */
  .msg{
    position: relative;
  
    /* bubble sizing lives inside the centered #messages lane */
    max-width: 100%;
    width: fit-content;
  
    /* ✅ more breathing room inside bubbles */
    padding: 12px 14px;
    padding-right: 42px; /* space for copy icon (tighter) */
  
    margin: 0 0 10px 0;
    border-radius: 12px;
  
    line-height: 1.45;
    font-size: 0.95rem;
    min-width: 0;
  }
  
  .msg-user{
    background: #f3f4f6;  /* lighter grey */
    color: #111827;       /* dark text */
  
    align-self: flex-end;
  }  
  
  .msg-assistant{
    background: #ffffff;
    color: #111827;
  
    border: 1px solid #e5e7eb;
  
    overflow-wrap: anywhere;
  
    /* left side within the lane */
    align-self: flex-start;
  }  
  
  .msg-system{
    background: #f3f4f6;
    color: #111827;
  
    text-align: left;
    overflow-wrap: anywhere;
  
    /* treat like assistant for alignment */
    align-self: flex-start;
  }  

@media (max-width: 768px){
  :root{ --msg-lane: 92%; }
}

/* Subtle scrollbar (messages only) */
#messages{
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: rgba(17,24,39,.22) transparent;
}

/* Chrome / Edge / Safari */
#messages::-webkit-scrollbar{
  width: 10px;
}

#messages::-webkit-scrollbar-track{
  background: transparent;
}

#messages::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.22);
  border-radius: 999px;
  border: 3px solid transparent;         /* makes it feel lighter */
  background-clip: content-box;
}

#messages::-webkit-scrollbar-thumb:hover{
  background: rgba(17,24,39,.32);
  background-clip: content-box;
}

/* Loading / Thinking spinner (no bubble) */
.msg-loading{
  align-self: flex-start;     /* lines up with assistant side */
  width: 22px;
  height: 22px;
  margin: 4px 0 10px 0;

  background: transparent;
  border: none;

  overflow: hidden;           /* hide the text that JS is still updating */
  text-indent: -9999px;       /* keep it visually empty */
  white-space: nowrap;
}

.msg-loading::before{
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  box-sizing: border-box;

  border-radius: 999px;
  border: 2px solid rgba(17,24,39,.20);
  border-top-color: rgba(17,24,39,.55);

  animation: msgSpin .7s linear infinite;
}

@keyframes msgSpin{
  to { transform: rotate(360deg); }
}
  
  /* Copy button inside bubbles */
  .msg-copy-btn {
    position: absolute;
    top: 6px;
    right: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.4;
    padding: 0;
  
    user-select: none;
    -webkit-user-select: none;
  }
  
  .msg-copy-btn::before {
    content: "⧉";
  }
  
  /* Hover tooltip */
  .msg-copy-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    background: #111827;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }
  
  .msg-copy-btn:hover::after,
  .msg-copy-btn.is-copied::after {
    opacity: 1;
  }
  
  /* =========================
     INPUT ROW
     ========================= */
  
     #input-row {
      display: none;
      gap: 8px;
      flex-shrink: 0;
      align-items: flex-end;
      min-width: 0;
    
      /* ✅ match the messages lane */
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 0 16px 16px;
      box-sizing: border-box;
    }    
  
  #user-input {
    flex: 1;
    min-width: 0;
  
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 0.95rem;
    outline: none;
  
    resize: vertical;
    min-height: 36px;
    max-height: 120px;
    line-height: 1.4;
    box-sizing: border-box;
  } 
  
  #user-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
  }

  #input-row.is-ready #user-input{
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37,99,235,.35);
  } 
  
  #send-btn{
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
  
    border-radius: 999px;
    border: none;
  
    background: #2563eb;
    box-shadow: none;
  
    cursor: pointer;
  
    /* no text */
    font-size: 0;
    line-height: 0;
    color: transparent;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    position: relative; /* anchor for spinner */
  }
  
  /* Arrow-head icon, rotated to point up */
  #send-btn::before{
    content: "➤";
    display: inline-block;
  
    font-size: 20px;
    line-height: 1;
  
    color: #ffffff;
  
    transform: rotate(-90deg);
  }
  
  /* Hover state */
  #send-btn:hover{
    background: #1d4ed8;
  }  
  
  /* Waiting spinner (both Lesson + Builder use .is-waiting) */
  #send-btn.is-waiting {
    position: relative;
    color: transparent; /* keep width stable */
  }
  
  #send-btn.is-waiting::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.95);
    animation: sendBtnSpin 0.7s linear infinite;
  }  

/* When waiting, hide the arrow so only the spinner shows */
#send-btn.is-waiting::before{
  opacity: 0;
}
  
  @keyframes sendBtnSpin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* =========================
     GEAR HIGHLIGHTS
     ========================= */
  
  .lesson-gear {
    font-weight: 700;
  }
  
  .builder-gear {
    font-weight: 700;
  }
  
  /* =========================
     BUILDER CODE BLOCK UI
     ========================= */
  
  .codeblock-wrap {
    position: relative;
    margin: 8px 0 0;
    max-width: 100%;
    min-width: 0;
  }
  
  /* Code block containment (prevents layout expansion) */
  .msg-assistant pre.codeblock {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  
    margin: 0;
    padding: 12px;
  
    border-radius: 10px;
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
  
    max-height: 320px;
  
    /* Internal scrolling lives here */
    overflow: auto;
  
    font-size: 0.85rem;
    line-height: 1.35;
  
    /* extra guard */
    min-width: 0;
  }
  
  .msg-assistant pre.codeblock code {
    display: block;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
  }
  
  /* Move-to-plan button (inside code blocks) */
  .codeblock-plan-btn {
    position: absolute;
    top: 8px;
    right: 8px;
  
    width: 28px;
    height: 28px;
    border-radius: 8px;
  
    border: 1px solid #d1d5db;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    opacity: 0.9;
  }
  
  .codeblock-plan-btn::before {
    content: "⇥";
    font-size: 14px;
    color: #374151;
  }
  
  .codeblock-plan-btn:hover {
    background: #ffffff;
    border-color: #9ca3af;
  }
  
  .codeblock-plan-btn.is-moved {
    border-color: #2563eb;
  }
  
  .codeblock-plan-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 12px;
    background: #111827;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }  
  
  .codeblock-plan-btn:hover::after,
  .codeblock-plan-btn.is-moved::after {
    opacity: 1;
  }
  
  /* =========================
     RESTART BUTTONS (end session)
     ========================= */
  
  #restart-lesson-btn,
  #restart-builder-btn {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.95rem;
  }
  
  #restart-lesson-btn:hover,
  #restart-builder-btn:hover {
    background: #f3f4f6;
  }

  /* =========================
   GENERIC START / RESTART BUTTONS
   (lets each profile have its own IDs)
   ========================= */

.th-start-btn{
  padding: 12px 30px;
  border-radius: 999px;
  border: none;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out,
    background 0.1s ease-out;
}

.th-start-btn:hover{
  background: #1d4ed8;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.5);
}

.th-start-btn:active{
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
}

.th-restart-btn{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
}

.th-restart-btn:hover{
  background: #f3f4f6;
}

  
  /* =========================
     FLEX / LAYOUT GUARDS
     ========================= */
  
  /* Flex parents must allow shrinking */
  #builder-panes,
  #builder-chat-pane,
  #builder-editor-pane,
  #chat-container,
  #messages {
    min-width: 0;
  }
  
  /* =========================
   EMBEDDED MODE (iframe)
   Makes the app fill the iframe cleanly
   ========================= */

html.is-embedded,
html.is-embedded body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

/* Override the floating widget layout when embedded */
html.is-embedded #chat-widget{
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  transform: none;

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ✅ Remove internal clamps that make the iframe "pop loose" at larger sizes */
html.is-embedded #chat-widget{
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Embedded mode: make inner flex chain truly fill the iframe */
html.is-embedded #app {
  min-height: 0; /* allow flex children to size correctly */
}

html.is-embedded #chat-container {
  height: 100%;
  min-height: 0;
}

html.is-embedded #messages {
  height: 100%;
  min-height: 0;
}

/* =========================
   STANDALONE MODE (local)
   Larger viewport + wider chat lane
   (does NOT affect iframe mode)
   ========================= */

   html.is-standalone,
   html.is-standalone body{
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;   /* page doesn't scroll; messages do */
     background: #f3f4f6;
   }
   
   /* Fill the whole browser window in standalone mode */
   html.is-standalone #chat-widget{
     position: fixed;
     inset: 0;
     width: 100vw;
     height: 100vh;
   }
   
   /* Give the conversation lane more width on desktop */
   html.is-standalone #messages,
   html.is-standalone #input-row{
     max-width: 980px;   /* was 760px globally */
   }