/* =====================================================
   IVEY THEME � merged stylesheet (streamlined)
   - Primary: Ivey Green #034638
   - Accent:  Ivey Purple #582C83
   - Neutral: Cool Gray 10 #63666A
   Font: Figtree (loaded in index.html)
   ===================================================== */

:root{
  --ivey-green:#034638;
  --ivey-green-600:#0a5c49;
  --ivey-purple:#582C83;
  --ivey-gray-10:#63666A;
  --brand-surface:#ffffff;
  --brand-border:#e7eaee;
  --shadow-lg:0 8px 30px rgba(3,70,56,.12);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);
  --radius:16px;
  --card-transition-duration:.6s;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.5;
  color:#1f2937;
  background:#f7faf9;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:1.25rem;
}

/* Header */
.header{
  background:#fff;
  border-top:6px solid var(--ivey-green);
  border-bottom:1px solid var(--brand-border);
  position:sticky;
  top:0;
  z-index:10;
}
.header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:3px; background:var(--ivey-purple);
}
.site-title{ font-weight:900; letter-spacing:.01em; color:var(--ivey-green); margin:.5rem 0 0 0 }
.site-subtitle{ color:var(--ivey-gray-10); margin:.25rem 0 0 0 }

/* Sections */
.chain-progress-section{ margin-bottom:2rem; }
.chain-progress-card{ 
  background:linear-gradient(135deg, var(--ivey-green) 0%, var(--ivey-green-600) 100%); 
  color:white; padding:1.5rem; border-radius:var(--radius); 
  box-shadow:var(--shadow-md); margin-bottom:1rem;
}
.chain-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.chain-title{ font-weight:800; font-size:1.2rem; margin:0; }
.chain-description{ font-size:.9rem; opacity:.9; margin-top:.25rem; }
.chain-cancel-btn{ color:rgba(255,255,255,.8) !important; border-color:rgba(255,255,255,.3) !important; }
.chain-cancel-btn:hover{ background:rgba(255,255,255,.1) !important; color:white !important; }

.chain-steps{ display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.chain-step{ 
  background:rgba(255,255,255,.15); padding:.5rem .75rem; border-radius:20px; 
  font-size:.85rem; font-weight:500; transition:all .2s ease;
}
.chain-step.completed{ background:rgba(255,255,255,.25); }
.chain-step.current{ background:white; color:var(--ivey-green); font-weight:700; }
.chain-actions{ text-align:right; }
.chain-next-btn{ background:white !important; color:var(--ivey-green) !important; font-weight:700; }

.recent-prompts-section{ margin-bottom:2rem; }
.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.section-title{ font-weight:800; font-size:1.4rem; color:var(--ivey-green); margin:0; }
.clear-recent-btn{ font-size:.85rem; padding:.5rem .75rem; }

/* Grids */
.strategies-grid, .recent-prompts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1rem;
  align-items:stretch;
}
.recent-prompts-grid{ margin-bottom:1rem; }

/* Card */
.strategy-card{
  display:flex; flex-direction:column;
  background:var(--brand-surface);
  border:1px solid rgba(99,102,106,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:1.25rem;
  transition:transform .18s ease, box-shadow .2s ease;
}
.strategy-card:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(3,70,56,.16) }

/* Recent prompt indicator */
.strategy-card.recent-prompt{ border-left:3px solid var(--ivey-purple); }
.strategy-card.recent-prompt .card-title::before{ content:"🕒 "; font-size:.9em; }

.card-title{ 
  font-weight:800; font-size:1.05rem; margin:0 0 .35rem 0;
  position:relative; display:inline-block;
}
.card-title::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--ivey-green);
  transition:width 0.3s ease-out;
}
.strategy-card:hover .card-title::after{ width:100% }
.card-description{ color:var(--ivey-gray-10); font-size:.98rem }
.card-author{ font-size:.85rem; color:var(--ivey-purple); font-weight:600; margin-top:.25rem; font-style:italic }
.card-chapter{ font-size:.8rem; color:var(--ivey-gray-10); margin-top:.15rem; opacity:.8 }
.card-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem }

/* TAGS � soft label-style design */
.category-tag,.card-tag{
  display:inline-block;
  padding:.2rem .6rem; border-radius:20px;
  font-weight:500; font-size:.75rem; letter-spacing:.02em;
  background:rgba(3,70,56,.08);     /* very light ivey green */
  color:#0a5c49;                    /* darker ivey green */
  border:none;
  cursor:default;
  box-shadow:none;
  transition:none;
}
.category-tag:hover,.card-tag:hover{ transform:none; background:rgba(3,70,56,.08) }

/* Meta row */
.card-meta{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem }

/* Actions */
.card-actions{ margin-top:auto; display:flex; gap:.5rem; align-items:center }

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .details-btn, .explore-btn{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:999px; font-weight:700; line-height:1;
  border:1px solid transparent; cursor:pointer;
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; overflow:hidden;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn::after, .btn-primary::after, .btn-secondary::after, .btn-outline::after, .btn-ghost::after, .details-btn::after, .explore-btn::after{
  content:''; position:absolute; left:50%; bottom:8px;
  width:0; height:1px; background:currentColor;
  transition:all 0.25s ease-out;
  transform:translateX(-50%);
}
.btn:hover::after, .btn-primary:hover::after, .btn-secondary:hover::after, .btn-outline:hover::after, .btn-ghost:hover::after, .details-btn:hover::after, .explore-btn:hover::after{
  width:calc(100% - 2rem);
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-outline:focus-visible, .btn-ghost:focus-visible, .details-btn:focus-visible, .explore-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(88,44,131,.18), 0 0 0 6px rgba(3,70,56,.35);
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-outline:active, .btn-ghost:active, .details-btn:active, .explore-btn:active{
  transform:translateY(1px);
}

.btn-primary, .explore-btn{ background:var(--ivey-green); color:#fff; box-shadow:0 4px 14px rgba(3,70,56,.25) }
.btn-primary:hover, .explore-btn:hover{ background:var(--ivey-green-600) }

.btn-secondary{ background:var(--ivey-purple); color:#fff; box-shadow:0 4px 14px rgba(88,44,131,.22) }
.btn-secondary:hover{ filter:brightness(1.06) }

.btn-outline{ background:#fff; color:var(--ivey-green); border-color:var(--ivey-green) }
.btn-outline:hover{ background:rgba(3,70,56,.06); border-color:#0a5c49; color:#0a5c49 }

.btn-ghost{ background:transparent; color:var(--ivey-green) }
.btn-ghost:hover{ background:rgba(3,70,56,.06) }

/* Make "View Details" specifically use purple accent */
.details-btn{
  background:var(--ivey-purple) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 14px rgba(88,44,131,.22);
}
.details-btn:hover{ filter:brightness(1.06) }

/* Chat & Details areas */
.chat-area, .details-area{ display:flex; flex-direction:column; gap:1rem; margin-top:1rem; height:100%; }
.chat-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.chat-body{ display:flex; flex-direction:column; gap:1rem; flex:1; }
.chat-messages{ flex:1; overflow-y:auto; padding:1rem; border:1px solid var(--brand-border); border-radius:12px; background:#fafafa; max-height:400px; }
.message{ margin-bottom:1rem; }
.user-message{ text-align:right; }
.user-message .message-content{ background:var(--ivey-green); color:white; display:inline-block; padding:0.75rem 1rem; border-radius:18px; max-width:80%; }
.ai-message .message-content{ background:white; color:#1f2937; display:inline-block; padding:0.75rem 1rem; border-radius:18px; max-width:80%; border:1px solid var(--brand-border); }

/* AI message formatting */
.ai-message .message-content p{ margin:0.5rem 0; line-height:1.6; }
.ai-message .message-content p:first-child{ margin-top:0; }
.ai-message .message-content p:last-child{ margin-bottom:0; }
.ai-message .message-content ul, .ai-message .message-content ol{ margin:0.5rem 0; padding-left:1.5rem; }
.ai-message .message-content li{ margin:0.25rem 0; line-height:1.5; }
.ai-message .message-content strong{ font-weight:600; color:var(--ivey-green); }
.ai-message .message-content em{ font-style:italic; }
.ai-message .message-content ol{ list-style-type:decimal; }
.ai-message .message-content ul{ list-style-type:disc; }
.typing-indicator{ display:flex; gap:4px; align-items:center; }
.typing-indicator span{ width:8px; height:8px; border-radius:50%; background:var(--ivey-gray-10); animation:typing 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(1){ animation-delay:-0.32s; }
.typing-indicator span:nth-child(2){ animation-delay:-0.16s; }
@keyframes typing{ 0%,80%,100%{ transform:scale(1); opacity:0.5; } 40%{ transform:scale(1.2); opacity:1; } }
.input-group{ display:flex; gap:.5rem }
.chat-input, input[type="text"]{
  flex:1; padding:.8rem 1rem; border:1px solid var(--brand-border); border-radius:12px; background:#fff;
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  font-weight:400; font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.chat-input::placeholder{ color:#97a0ab }
.chat-input:focus{ outline:none; border-color:var(--ivey-green); box-shadow:0 0 0 4px rgba(3,70,56,.15) }

/* Follow-up Suggestions */
.follow-up-suggestions{ margin-top:1.5rem; padding:1rem; background:#f8fffe; border-radius:12px; border-left:3px solid var(--ivey-green); }
.suggestions-list{ display:flex; flex-direction:column; gap:.5rem; }
.suggestion-card{ 
  background:white; padding:.75rem 1rem; border-radius:8px; border:1px solid var(--brand-border); 
  cursor:pointer; transition:all .2s ease;
  display:flex; justify-content:space-between; align-items:center;
}
.suggestion-card:hover{ border-color:var(--ivey-green); transform:translateY(-1px); box-shadow:0 4px 12px rgba(3,70,56,.1); }
.suggestion-title{ font-weight:600; font-size:.9rem; color:#1f2937; }
.suggestion-author{ font-size:.75rem; color:var(--ivey-gray-10); font-style:italic; }
.suggestion-arrow{ color:var(--ivey-green); font-weight:700; }

/* File Upload */
.file-upload-area{ margin-bottom:1rem; }
.upload-dropzone{ 
  border:2px dashed var(--brand-border); border-radius:12px; padding:2rem; text-align:center; 
  cursor:pointer; transition:all .2s ease; background:#fafafa;
}
.upload-dropzone:hover, .upload-dropzone.dragover{ 
  border-color:var(--ivey-green); background:rgba(3,70,56,.04); transform:translateY(-1px);
}
.upload-icon{ font-size:2rem; margin-bottom:.5rem; }
.upload-text{ font-size:.95rem; color:#1f2937; }
.upload-subtext{ font-size:.8rem; color:var(--ivey-gray-10); margin-top:.25rem; }
.uploaded-file{ 
  background:white; border:1px solid var(--brand-border); border-radius:8px; 
  padding:.75rem; display:flex; justify-content:space-between; align-items:center;
}
.file-info{ display:flex; flex-direction:column; }
.file-name{ font-weight:600; font-size:.9rem; }
.file-size{ font-size:.8rem; color:var(--ivey-gray-10); }
.remove-file-btn{ 
  background:none; border:none; color:#dc2626; font-weight:700; font-size:1.1rem; 
  cursor:pointer; padding:.25rem; border-radius:4px;
}
.remove-file-btn:hover{ background:#fee2e2; }
.upload-toggle-btn{ background:var(--ivey-purple); color:white; }

/* EXPANSION STATES
   - .expanded-full (chat): full-viewport takeover
   - .expanded-details (details): in-flow wide expansion only
*/
.strategies-grid.expanding{ position:relative }
.strategies-grid.expanded, .recent-prompts-grid.expanded{ position:relative }

/* Full-screen chat (immersive) */
.strategy-card.expanded-full{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100vw;
  height:100vh;
  border-radius:0;
  padding:2.5rem;
  box-shadow:none;
  z-index:1000;
  background:white;
}
/* Dim siblings only for full-screen chat */
.strategies-grid.expanded .strategy-card:not(.expanded-full),
.recent-prompts-grid.expanded .strategy-card:not(.expanded-full){
  opacity:.6; filter:saturate(.9); transition:opacity 250ms ease;
}
.strategies-grid.expanded .strategy-card:not(.expanded-full):hover,
.recent-prompts-grid.expanded .strategy-card:not(.expanded-full):hover{ transform:none }

/* In-flow details (document style) */
.strategy-card.expanded-details{
  grid-column:1 / -1;
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}

/* Sticky header within expanded-full */
.strategy-card.expanded-full .chat-header{
  position:sticky; top:0; background:#fff; padding:0 0 1rem 0; margin-bottom:.5rem;
  border-bottom:1px solid var(--brand-border); z-index:1;
}
.close-expanded{
  border:1px solid transparent; background:transparent; padding:.5rem .75rem; border-radius:999px;
  font-weight:650; color:var(--ivey-green); cursor:pointer;
  transition:background-color .2s ease, box-shadow .2s ease, color .2s ease
}
.close-expanded:hover{ background:rgba(3,70,56,.06) }
.close-expanded:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(3,70,56,.2) }

/* Media & motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

@media (max-width: 480px){
  .strategies-grid{ grid-template-columns:1fr }
}