/* ====== Interview Coach & AI Response Styling (desktop-wide + mobile responsive) ====== */

/* ---------- Page shell (matches index/resume widths) ---------- */
/* If you wrap the page with <main id="interview-coach" class="coach-wrap"> ... */
#interview-coach.coach-wrap { background: #f8fcff; }

/* Outer container width like home page: min(1150px, 92%) */
#interview-coach .coach-container,
.coach-container {
  width: min(1150px, 92%);
  margin: 16px auto;
  padding: 0;
  box-sizing: border-box;
}

/* Optional inner column cap for readable content (900px) */
#interview-coach .coach-narrow,
.coach-narrow {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Core boxes (cap at 900px and center) ---------- */
#interviewCoachResult,
#feedback-box,
#suggestions-box,
#history-container {
  max-width: 900px;        /* desktop cap */
  width: 100%;             /* never exceed container */
  margin: 0 auto;          /* center on desktop */
  box-sizing: border-box;
}

/* History entries also follow the same readable width */
.history-entry {
  max-width: 900px;
  width: 100%;
  margin: 16px auto;
  box-sizing: border-box;
}

/* ---------- Generic AI output wrapper ---------- */
.ai-response {
  max-width: 100%;
  width: 100%;
  line-height: 1.55;
  overflow: hidden;         /* prevent spill-out */
  overflow-wrap: anywhere;  /* break long words/URLs */
  word-break: break-word;
}

/* Paragraphs, lists, headers inside AI responses */
.ai-response p,
.ai-response ul,
.ai-response ol,
.ai-response li,
.ai-response h1,
.ai-response h2,
.ai-response h3,
.ai-response h4 {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Code & pre blocks (Markdown fallback) */
.ai-response pre,
.ai-response code,
.ai-response pre code {
  white-space: pre-wrap;    /* wrap long lines */
  word-break: break-word;
  max-width: 100%;
  overflow-x: auto;         /* scroll if needed */
}

/* Optional: nicer bullets spacing */
.ai-response ul { 
  padding-left: 1.2rem; 
  margin: 0.4rem 0 0.8rem; 
}
.ai-response li { margin: 0.2rem 0; }

/* Optional: header styles */
.ai-response h2, 
.ai-response h3 {
  font-weight: 700; 
  margin: 0.5rem 0; 
}
.ai-response h2 { font-size: 1.25rem; }
.ai-response strong { font-weight: 700; }

/* Images inside AI output */
.ai-response img {
  max-width: 100%;
  height: auto;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 640px) {
  #interviewCoachResult,
  #feedback-box,
  #suggestions-box,
  #history-container,
  .history-entry {
    padding: 12px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure outer shell keeps nice gutters on small screens */
  #interview-coach .coach-container,
  .coach-container {
    width: 100%;
    padding-inline: 12px;
    margin: 12px auto;
  }
}

/* ---------- History / feedback regions never bleed horizontally ---------- */
#historyPanel,
.history-panel,
.feedback-history,
.history-content {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* never bleed off-screen */
}

/* Markdown body (what you render with marked.js or similar) */
#historyPanel .ai-response,
.history-panel .ai-response,
.feedback-history .ai-response,
.history-content .ai-response {
  max-width: 100%;
  overflow-wrap: anywhere; /* break long words/URLs first */
  word-break: break-word;  /* older fallback */
  white-space: normal;     /* reset any inherited pre formatting */
}

/* Code blocks: preserve newlines but wrap long lines */
#historyPanel .ai-response pre,
.history-panel .ai-response pre,
.feedback-history .ai-response pre,
.history-content .ai-response pre,
#historyPanel .ai-response code,
.history-panel .ai-response code,
.feedback-history .ai-response code,
.history-content .ai-response code {
  white-space: pre-wrap;   /* keep line breaks */
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Images and tables scale to container width */
#historyPanel .ai-response img,
.history-panel .ai-response img,
.feedback-history .ai-response img,
.history-content .ai-response img {
  max-width: 100%;
  height: auto;
}

#historyPanel .ai-response table,
.history-panel .ai-response table,
.feedback-history .ai-response table,
.history-content .ai-response table {
  display: block;          /* allow horizontal scroll if needed */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep blockquotes/content boxes from nudging width */
#historyPanel .ai-response blockquote,
.history-panel .ai-response blockquote,
.feedback-history .ai-response blockquote,
.history-content .ai-response blockquote {
  box-sizing: border-box;
  max-width: 100%;
}

/* Tighter spacing under history and tips */
#historyPanel { padding-bottom: 8px; }
#historyPanel .history-entry { margin: 0 0 10px; }
#historyPanel .history-entry:last-child { margin-bottom: 4px; }

#suggestions-box { margin-bottom: 10px; }
#suggestions-box ul { margin: 0 0 6px 1.2em; }
#suggestions-box li { margin: 4px 0; }

/* Make any last blocks end crisply */
.result-box .ai-response > :last-child,
#historyPanel .ai-response > :last-child { margin-bottom: 0 !important; }

/* If you ever overlay a watermark canvas on outputs */
.wm-overlay { display:block; position:absolute; inset:0; pointer-events:none; }

/* ---------- Optional: hero/section wrappers if you add them later ---------- */
/* Use these safely if your page includes a hero. They won’t interfere otherwise. */
#interview-coach .hero-wrap { background:#104879; padding: 20px 0; }
#interview-coach .hero {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: clamp(16px,4vw,48px) clamp(12px,4vw,24px);
  background:#104879; border-radius:14px; color:#fff;
}
#interview-coach .hero .kicker { color:#ffc957; font-weight:700; letter-spacing:.08em; }