/* Ansh AI - App styles (supplements Tailwind CDN) */

:root {
  --brand: #059669;
  --brand-dark: #065f46;
}

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* Smooth scrollbars */
* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Brand gradient */
.brand-gradient { background: linear-gradient(135deg, #064e3b 0%, #059669 55%, #10b981 100%); }
.brand-gradient-soft { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }

/* Fade / slide animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px);} to { opacity:1; transform:none;} }
.animate-fade-up { animation: fadeInUp .4s ease both; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.animate-fade { animation: fadeIn .3s ease both; }

/* Splash logo pulse */
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
.animate-floaty { animation: floaty 3s ease-in-out infinite; }

/* Typing indicator (three dots) */
.typing span {
  display:inline-block; width:8px; height:8px; margin:0 2px; border-radius:50%;
  background:#9ca3af; animation: typing 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing { 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-5px); opacity:1;} }

/* Chat bubbles */
.bubble-user { background: var(--brand); color:#fff; border-radius: 18px 18px 4px 18px; }
.bubble-ai { background:#fff; color:#1f2937; border-radius: 18px 18px 18px 4px; border:1px solid #f0f0f0; }

/* AI message rich content */
.ai-content p { margin: 0 0 .6rem; line-height: 1.7; }
.ai-content p:last-child { margin-bottom: 0; }
.ai-content ul, .ai-content ol { margin: .4rem 0 .8rem 1.2rem; }
.ai-content ul { list-style: disc; }
.ai-content ol { list-style: decimal; }
.ai-content li { margin: .2rem 0; line-height: 1.6; }
.ai-content strong { font-weight: 700; }
.ai-content code { background:#f3f4f6; padding:1px 6px; border-radius:6px; font-size:.9em; font-family: ui-monospace, monospace; }
.ai-content .code-block { position: relative; margin:.6rem 0; }
.ai-content .code-block pre { background:#0f172a; color:#e2e8f0; padding:14px; border-radius:12px; overflow-x:auto; font-size:.85rem; }
.ai-content .code-block .copy-code { position:absolute; top:8px; right:8px; background:rgba(255,255,255,.1); color:#fff; border:0; padding:4px 10px; border-radius:8px; font-size:.72rem; cursor:pointer; }
.ai-content .code-block .copy-code:hover { background:rgba(255,255,255,.2); }

/* Skeleton shimmer */
.skeleton { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0%{ background-position:100% 0;} 100%{ background-position:-100% 0;} }

/* Toasts */
#toast-wrap { position: fixed; z-index: 60; top: 16px; left: 50%; transform: translateX(-50%); display:flex; flex-direction:column; gap:8px; width: max-content; max-width: 92vw; }
.toast { padding:10px 16px; border-radius:12px; color:#fff; font-size:14px; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.15); animation: fadeInUp .25s ease; }
.toast-success { background:#059669; }
.toast-error { background:#dc2626; }
.toast-info { background:#334155; }

/* Suggestion chips */
.chip { border:1px solid #d1fae5; background:#fff; transition: all .15s; }
.chip:hover { background:#ecfdf5; border-color:#6ee7b7; }

/* Line clamp */
.clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #059669; outline-offset: 2px;
}

/* Auto-growing chat textarea */
.chat-textarea { max-height: 160px; }

/* Safe-area padding for mobile chat input */
.pb-safe { padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem); }