/* Global styles and animations */
:root {
  --brand-orange: #FF6A3D;
  --brand-green: #0E9F6E;
  --text-deep: #0B3B2E;
}

html { scroll-behavior: smooth; }

h1,h2,h3,h4,h5,h6 { font-family: 'Inter Tight', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

/**************** Animations ****************/
@keyframes float-slow { 0%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} 100%{ transform: translateY(0);} }
@keyframes float-slower { 0%{ transform: translateY(0);} 50%{ transform: translateY(8px);} 100%{ transform: translateY(0);} }
@keyframes pop-in { 0%{ transform: scale(.98); opacity: 0;} 100%{ transform: scale(1); opacity: 1;} }
@keyframes shimmer { 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }

.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-slower { animation: float-slower 10s ease-in-out infinite; }
.pop-in { animation: pop-in .3s ease-out both; }

/* Token stream subtle caret */
.ai-caret { display: inline-block; width: 8px; height: 1em; background: rgba(11,59,46,0.4); margin-left: 2px; animation: blink 1s steps(1,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Ensure buttons are always clickable above other layers */
button { position: relative; z-index: 10; }

/* Responsive safeguards */
#ai-output { word-wrap: break-word; overflow-wrap: anywhere; }

/* Markdown styling for AI output */
#ai-output.markdown-body { line-height: 1.7; }
#ai-output.markdown-body h1 { font-size: 1.25rem; margin: .25rem 0 .5rem; font-weight: 800; color: var(--text-deep); }
#ai-output.markdown-body h2 { font-size: 1.125rem; margin: .25rem 0 .5rem; font-weight: 700; color: var(--text-deep); }
#ai-output.markdown-body h3 { font-size: 1rem; margin: .25rem 0 .5rem; font-weight: 700; color: var(--text-deep); }
#ai-output.markdown-body p { margin: .5rem 0; }
#ai-output.markdown-body ul { padding-left: 1.25rem; list-style: disc; margin: .5rem 0; }
#ai-output.markdown-body ol { padding-left: 1.25rem; list-style: decimal; margin: .5rem 0; }
#ai-output.markdown-body li { margin: .125rem 0; }
#ai-output.markdown-body code { background: #F3F4F6; padding: .1rem .3rem; border-radius: .375rem; }
#ai-output.markdown-body pre { background: #0B3B2E; color: #F9FAFB; padding: .75rem; border-radius: .75rem; overflow: auto; }
#ai-output.markdown-body blockquote { border-left: 3px solid rgba(0,0,0,0.1); padding-left: .75rem; color: #2A5245; margin: .5rem 0; }
#ai-output.markdown-body hr { border: 0; border-top: 1px solid rgba(0,0,0,0.08); margin: .75rem 0; }
#ai-output.markdown-body table { border-collapse: collapse; margin: .5rem 0; width: 100%; }
#ai-output.markdown-body th, #ai-output.markdown-body td { border: 1px solid rgba(0,0,0,0.08); padding: .25rem .5rem; text-align: left; }

/* Checklist styling */
.check-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .75rem; border: 1px solid rgba(0,0,0,0.06); background: #fff; transition: background .2s ease, transform .2s ease; }
.check-item:hover { background: #F9FAFB; transform: translateY(-1px); }

/* Scrollbar aesthetics */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }