/* =========================================================
   DynBot — Tablet & Mobile responsive wrapper
   - Desktop (≥1025px): base styles.css stays authoritative
   - Tablet (769–1024px): refined font sizes & spacing
   - Mobile (≤768px): tighter layout, readable thumbs
   - Uses clamps that preserve desktop max values
   ========================================================= */

/* ----- Global tokens (shared breakpoints) ----- */
:root {
  --bp-mobile-max: 768px;
  --bp-tablet-min: 769px;
  --bp-tablet-max: 1024px;
}

/* =========================================================
   GLOBAL CLAMPS (do NOT change desktop visual result)
   Only smooth things below large desktop widths.
   ========================================================= */

/* Main titles */
.app-title {
  /* desktop base in styles.css: 3.3rem */
  font-size: clamp(2.1rem, 2.2vw + 1.2rem, 3.3rem);
}

.project-title {
  /* desktop base in styles.css: 4.3rem */
  font-size: clamp(2.4rem, 3vw + 1.4rem, 4.3rem);
}

/* Shrunk header after first question */
.header-shrink .app-title {
  /* base ≈ 1.2rem */
  font-size: clamp(0.8rem, 1vw + 0.3rem, 1.2rem);
}

.header-shrink .project-title {
  /* base ≈ 1.3rem */
  font-size: clamp(0.9rem, 1.1vw + 0.2rem, 1.3rem);
}

/* Intro / info copy */
.info-text {
  /* base: 2.0rem */
  font-size: clamp(1.2rem, 1.5vw + 1rem, 2.0rem);
}

#instructions {
  /* base: 2.0rem */
  font-size: clamp(1.2rem, 1.5vw + 1rem, 2.0rem);
}

/* Input */
#messageInput {
  /* base: 1.4rem */
  font-size: clamp(1.1rem, 1.4vw + 0.8rem, 1.4rem);
}

/* Assistant text (white box) */
.assistant,
.assistant p {
  /* base: 1.2rem */
  font-size: clamp(1.05rem, 1.1vw + 0.7rem, 1.2rem);
}

/* Summary / primary content paragraphs */
.message-text {
  /* base: 1.3rem */
  font-size: clamp(1.05rem, 1.2vw + 0.7rem, 1.3rem);
}

/* RAG text (blue box) */
.rag-box span,
.rag-stream,
.rag-stream p {
  /* base: ~1.3–1.4rem */
  font-size: clamp(1.05rem, 1.2vw + 0.7rem, 1.3rem);   
}

/* Choices question label */
.choices-question {
  /* base: 2.0rem */
  font-size: clamp(1.3rem, 2.2vw + 0.8rem, 2.0rem);
}

/* CTA box text */
.cta-headline,
.cta-body {
  /* base: 1.5rem */
  font-size: clamp(1.1rem, 1.8vw + 0.6rem, 1.5rem);
}

/* Referenzstory headline */
.rag-box .ref-intro,
.rag-box .ref-empf {
  /* base: ~1.4rem */
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.4rem);
}

/* Referenzstory tag blocks (Titel, Beschreibung …) */
.ref-beschreibung,
.ref-beschreibung-highlight,
.ref-beschreibung-finish,
.ref-beitrag,
.ref-zitat,
.ref-subtitel,
.ref-problem,
.ref-loesung,
.ref-ergebnis {
  /* base: 1.4rem */
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.4rem);
}

/* Referenzstory tag blocks (Titel, Beschreibung …) */
.ref-titel,
.ref-beschreibung-titel {
  /* base: 1.4rem */
  font-size: clamp(1.8rem, 1.6rem + 0.6rem, 2.4rem);
}

/* Referenzstory tag blocks (Zitat …) */
.ref-beschreibung-titel {
  /* base: 1.4rem */
  font-size: clamp(1.8rem, 1.6rem + 0.6rem, 2.4rem);
}

/* Powered by / Neustart text under input */
#input-area .powered-by,
#input-area .neu-start {
  /* powered-by base: 16px ≈ 1rem; neu-start base: 1.4rem */
  font-size: clamp(0.85rem, 1.2vw + 0.5rem, 1.1rem);
}

/* Restart button */
#restartButton {
  /* base: 1.4rem */
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.4rem);
}

/* User question bubble */
.user-question-bubble {
  /* base: 1.3rem */
  font-size: clamp(1.05rem, 1.3vw + 0.6rem, 1.3rem);
}

/* Topic & choice buttons */
.topic-buttons button,
.choices-buttons button {
  /* base: 20px ≈ 1.25rem, but visually more like 1.1–1.2rem */
  font-size: clamp(0.95rem, 1.4vw + 0.5rem, 1.3rem);
}

/* =========================================================
   TABLET — 769px to 1024px
   ========================================================= */
@media (width >= 769px) and (width <= 1024px) {

  :root {
    /* slightly smaller general chat size vs. desktop */
    --chat-font-size: 1.3rem;
    --input-bar-h: 84px;
    --sb-size: 10px; /* more reasonable scrollbars on tablet */
  }

  /* Chat output needs room above sticky input */
  #chat-container:not(.start-mode) #chat-output {
    padding-bottom: calc(var(--input-bar-h) + 24px);
  }

  /* App header area */
  .top-row {
    gap: 10px;
    margin-top: 2vh;
  }

  .logo-icon {
    height: 4vw;
    width: 4vw;
  }

  /* Info text slightly smaller on tablet */
  .info-text {
    font-size: clamp(1.3rem, 1.6vw + 0.8rem, 1.8rem);
  }

  /* Instructions spacing */
  #instructions {
    text-align: center;
    font-size: 2.4vw;
    padding-left: 10vw;
    padding-right: 10vw;
    margin-top: 16px;
    margin-bottom: 32px;
  }

  /* Assistant text rhythm (white box) */
  .assistant,
  .assistant p {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  /* Topic/choices buttons: slightly tighter */
  .topic-buttons {
    margin: 3vh 3vw 1rem;
  }

  .topic-buttons button,
  .choices-buttons button {
    padding: 13px 18px;
    min-height: 44px;
    border-radius: 28px;
  }

  .choices-buttons {
    margin: 3vh 1rem 1.5rem;
  }

  /* User question bubble width */
  .user-question-bubble {
    max-width: 80%;
    padding-top: 2.0vh;
    padding-bottom: 2.0vh;
    padding-left: 2.2vw;
    padding-right: 2.2vw;
  }

  .user-question-meta {
    max-width: 80%;
  }

  /* RAG box polish */
  .rag-box {
    border-radius: 40px;
    padding-top: 24px;
    padding-bottom: 0px;
  }

  .rag-box .ref-box .ref-story-frame {
    padding-inline: 12px;
  }

  .rag-stream {
    font-size: 1.2rem;
  }

  /* CTA – keep comfortable but not huge */
  .cta-headline,
  .cta-body {
    padding-left: 12vw;
    padding-right: 12vw;
  }

  /* Scroll-to-end button aligned with tablet input bar */
  .scroll-to-end {
    bottom: calc(var(--input-bar-h) + var(--scroll-btn-gap));
    margin-bottom: 0;
  }

  /* Powered by / Neustart a bit closer & smaller */
  #input-area .powered-by {
    margin-top: 8px;
  }

  #input-area .neu-start {
    margin-top: -8px;
  }

  /* =========================================================
    EXTRA: Bring mobile structural fixes also to TABLET
    ========================================================= */

  /* 1) Make ref-wrapper full width also on tablet */
  .rag-box .ref-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) Ensure ref-story content doesn’t shrink left/right */
  .ref-story, 
  .ref-story * {
    padding-left: 0.5vw !important;
    padding-right: 0.5vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Ensure messageInput matches the new mobile defaults (important for layout) */
  #messageInput {
    min-height: 90px;                  /* improves thumb typing experience */
    padding-left: 4vw; 
    padding-right: 4vw;
  }

  /* 4) Match send-button and wrapper alignment refinements */
  #sendButton {
    width: 2.2rem;
    height: 2.2rem;
  }

  #send-button-wrapper,
  .send-button-wrapper {
    padding-right: 0rem !important;
    padding-bottom: 0.7rem !important;
  }

  /* 5) Apply consistent header spacing / logo sizing logic */
  .top-row {
    gap: 6px;
  }

  .logo-icon {
    height: 3.5vw;
    width: 3.5vw;
  }

  .app-title {
    font-size: clamp(1.6rem, 3vw + 0.6rem, 2.4rem);
    letter-spacing: 2px;
    padding-bottom: 2px;
  }

  /* 6) Match the input placeholder look */
  #messageInput::placeholder {
    font-size: 1.2rem;
    opacity: 1;
  }

  /* 7) Bring ref-intro-text normalization to tablet too (prevents width issues) */
  .ref-intro-text {
    padding-left: 0vw;    
    padding-right: 0vw;
    text-indent: -1vw;
    white-space: normal;
    display: inline;
  }

  /* 8) Ensure RAG story parts use the updated unified smaller paddings */
  p.ref-intro.ref-empf.rag-header {
    margin-left: 1.0vw;
    margin-right: 1.0vw;
    margin-top: -0.3vh;
  }

  .rag-box.has-stream p {
    padding-left: 1vw;
    padding-right: 1vw;
  }

  .rag-box .ref-box .ref-story-frame {
    padding-inline: 8px;
  }

  /* 9) Ensure CTA elements behave consistently between mobile/tablet */
  .cta-button {
    font-size: 1rem;
    padding: 0.7rem 1.4rem;
    margin-bottom: 1vh;
    margin-top: 3vh;
    border-radius: 26px;
  }

  .cta-quote {
    font-size: 1.4rem;
  }

   /* Tag-specific hooks (example; style freely per tag) */
  .ref-titel {
    font-size: 1.8rem !important;
    padding-left: 1vw;
    padding-top: 4vh !important;
  }

  .ref-beschreibung-titel{
    font-size: 1.8rem !important;
    padding-top: 1vh;
    padding-left: 1vw;
  }

  .ref-zitat{
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    padding-top: 5vh;
    padding-bottom: 3vh;
    width:85vw;
    padding-left: 1vw;
  } 
}

/* =========================================================
   MOBILE — ≤768px
   ========================================================= */
@media (width <= 768px) {

  :root {
    /* Tighter base text, larger input bar so nothing overlaps */
    --chat-font-size: 1.2rem;
    --input-bar-h: 96px;
    --sb-size: 8px; /* thin mobile scrollbar */
  }

  /* Chat output padding so last lines aren’t hidden behind sticky input */
  #chat-output {
    padding: 0 0.75rem;
  }

  #chat-container:not(.start-mode) #chat-output {
    padding-bottom: calc(var(--input-bar-h) + 28px);
  }

  /* Start mode – input directly under intro, edge-to-edge feeling */
  #chat-container.start-mode #input-area {
    margin: 0rem -0.3rem 0;
  }

  /* Input sizing for thumbs */
  #input-box {
    border-radius: 1.5rem;
    padding: 0.4rem 0.8rem;
  }

  .rag-box .ref-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ref-story, 
  .ref-story * {
    padding-left: 0.5vw !important;
    padding-right: 0.5vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #messageInput {
    min-height: 90px;
    font-size: clamp(1.0rem, 2.8vw + 0.75rem, 1.1rem);
    padding-left: 4vw;
    padding-right: 4vw;
  }

  #sendButton {
    width: 2.2rem;
    height: 2.2rem;
  }

  /* Assistant text rhythm */
  .assistant,
  .assistant p {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  /* Info text & instructions */
  .info-text {
    font-size: clamp(0.8rem, 0.8rem + 0.3rem, 1.4rem);
    margin: 1vh 0 1.5vh;
    margin-left: 8vw;
    margin-right: 8vw;
    margin-top: 0vh;
    margin-bottom: 2vh;
  }

  #instructions {
    margin-top: 16px;
    margin-bottom: 28px;
    font-size: clamp(1.1rem, 2.5vw + 0.6rem, 1.5rem);
  }

  /* Titles on mobile */
  .app-title {
    font-size: clamp(1.6rem, 3vw + 0.6rem, 2.4rem);
    letter-spacing: 2px;
    padding-bottom: 2px;
  }

  .project-title {
    font-size: clamp(1.6rem, 5.5vw + 0.6rem, 2.2rem);
    margin-bottom: 24px;
  }

  .top-row {
    gap: 6px;
  }

  .logo-icon {
    height: 6.3vw;
    width: 6.3vw;
  }

  .header-shrink .top-row {
    margin-top: 0.5vh;
    gap: 4px;
  }

  .header-shrink .logo-icon {
    height: 5vw;
    width: 5vw;
  }

  /* Bubbles & meta width */
  .user-question-bubble {
    max-width: 85%;
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .user-question-meta {
    max-width: 92%;
  }

  /* Topic/choice buttons layout */
  .topic-buttons {
    margin: 2vh 4vw 0.5rem;
    justify-content: flex-start;
  }

  .topic-buttons button,
  .choices-buttons button {
    padding: 10px 14px;
    font-size: 0.95rem;
    min-height: 40px;
  }

  .choices-buttons {
    margin: 2rem 0.5rem 1rem;
    justify-content: flex-start;
  }

  /* Choices question text a bit smaller */
  .choices-question {
    font-size: clamp(1.15rem, 2.4vw + 0.6rem, 1.4rem);
    margin-top: 7vw;
    margin-bottom: 7vw;
    margin-left: 8vw;
    margin-right: 8vw;
  }

  /* RAG box & Referenzstory */
  .rag-box {
    border-radius: 28px;
    padding: 16px 12px 20px;
  }

  /* .rag-stream {
    font-size: 1.1rem;
  } */

  p.ref-intro.ref-empf.rag-header {
    margin-left: 1.0vw;
    margin-right: 1.0vw;
    margin-top: -0.3vh;
    margin-bottom: -9vh !important;
    font-size: 1.4rem;
  }  

  .rag-box.has-stream p {
    padding-left: 2.8vw;
    padding-right: 2.8vw;
  }  

  .rag-box .ref-box .ref-story-frame {
    padding-inline: 8px;
  }

  .rag-box .ref-intro,
  .rag-box .ref-empf {
    font-size: 1.15rem;
  }

  /* CTA on mobile – less extreme side padding */
  .cta-headline,
  .cta-body {
    padding-left: 10vw;
    padding-right: 10vw;
    font-size: clamp(1.0rem, 3.5vw + 0.55rem, 1.3rem);
  }

  .cta-button {
    font-size: 1rem;
    padding: 0.7rem 1.4rem;
    margin-bottom: 1vh;
    margin-top: 3vh;
    border-radius: 26px;
  }

  .cta-quote {
    font-size: 1.4rem;
  }

  .rag-video {
    border-radius: 2rem;
  }

  #restartButton {
    min-height: 60px;
    border-radius: 2rem;
  }

  /* Scroll-to-end: keep above taller input */
  .scroll-to-end {
    bottom: calc(var(--input-bar-h) + var(--scroll-btn-gap));
    margin-bottom: 0;
  }

  .send-icon svg {
    stroke-width: 2;
  }

  /* Powered by / Neustart text under input */
  #input-area .powered-by {
    margin-top: 8px;
    font-size: 0.85rem;
    margin-left: 24px;
  }

  #input-area .neu-start {
    margin-top: -12px;
    font-size: 0.95rem;
  }

  /* Loading bubble more compact on small screens */
  .message.is-loading {
    min-height: 55px;
  }

  .assistant-thinking-bubble .logo-icon {
    width: 28px;    /* was probably around 16px */
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0; /* prevents it from collapsing */
  }

  .thinking-text {
    margin-left: -1.5vw;
    font-size: 0.6rem;   /* adjust to taste */
    line-height: 1.2;
    color: #444;
  }

  #messageInput::placeholder {
    font-style: regular;
    /* padding-top: 0.3rem;
    padding-left: 1.75vw; */
    font-size: 1.2rem;
    opacity: 1;
  }

  #send-button-wrapper,
  .send-button-wrapper {
    display: flex;
    align-items: flex-end;
    padding-right: 0rem;
    padding-bottom: 0.7rem;
  }

  .ref-intro-text {
    padding-left: 0vw;     /* indent ALL lines */
    padding-right: 0vw;
    text-indent: -1vw;     /* pull back the first line */
    font-size: 1.2rem !important;
    white-space: normal;   /* allow text to wrap */
    display: inline;
  }

  /* Tag-specific hooks (example; style freely per tag) */
  .ref-titel {
    font-size: 1.8rem !important;
    padding-left: 1vw;
    padding-top: 4vh !important;
  }

  .ref-beschreibung-titel{
    font-size: 1.8rem !important;
    padding-top: 1vh;
    padding-left: 1vw;
  }

  .ref-zitat{
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    padding-top: 5vh;
    padding-bottom: 3vh;
    width:85vw;
    padding-left: 1vw;
  }

}