/* app.css - SmartFlow theme.
 * Logo idea: SI (red dot) in the center connects people (Tiffany/blue petals) around it.
 * Chats with SI get a soft warm-red tint, chats with people a calm Tiffany tint.
 * Light by default; dark when Telegram is in dark mode (<html data-theme="dark">).
 * Colors are "R G B" triplets so Tailwind can add opacity (see tailwind.config.js).
 */

:root {
  --c-page: 246 249 250;
  --c-card: 255 255 255;
  --c-sunken: 242 247 249;
  --c-raised: 232 241 244;
  --c-ink: 18 32 45;
  --c-ink-2: 51 71 89;
  --c-muted: 92 111 128;
  --c-faint: 134 151 166;
  --c-line: 224 233 238;
  --c-line-2: 204 217 225;
  --c-brand: 13 128 120;
  --c-si: 208 58 52;

  --c-emerald-300: 4 120 87;
  --c-emerald-400: 5 140 98;
  --c-emerald-800: 167 243 208;
  --c-emerald-900: 209 250 229;
  --c-emerald-950: 236 253 245;
  --c-rose-300: 190 18 60;
  --c-rose-400: 219 39 79;
  --c-rose-900: 255 228 230;
  --c-amber-300: 146 64 14;
  --c-amber-400: 180 83 9;
  --c-violet-200: 91 33 182;
  --c-violet-300: 109 40 217;
  --c-violet-400: 124 58 237;
  --c-violet-900: 237 233 254;
  --c-sky-300: 3 105 161;
  --c-sky-400: 2 132 199;

  /* Brand colors from the logo */
  --sf-tiffany: #81D8D0;
  --sf-tiffany-deep: #0d9488;
  --sf-logo-cyan: #6fd3df;
  --sf-logo-blue: #2f88a8;
  --sf-si-red: #e53935;

  /* Chat tints */
  --si-bubble: #fff3f1;
  --si-bubble-line: #fbd5d0;
  --human-bubble: #e9f8f6;
  --human-bubble-line: #bfe9e4;
  --human-bubble-strong: #c9efeb;

  --shadow-soft: 0 1px 2px rgb(18 32 45 / 0.04), 0 6px 18px -8px rgb(18 32 45 / 0.12);
  --shadow-lift: 0 2px 4px rgb(18 32 45 / 0.05), 0 12px 28px -10px rgb(18 32 45 / 0.18);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-page: 9 15 23;
  --c-card: 17 26 40;
  --c-sunken: 12 19 30;
  --c-raised: 24 35 52;
  --c-ink: 241 245 249;
  --c-ink-2: 203 213 225;
  --c-muted: 148 163 184;
  --c-faint: 100 116 139;
  --c-line: 31 43 61;
  --c-line-2: 51 65 85;
  --c-brand: 129 216 208;
  --c-si: 248 128 120;

  --c-emerald-300: 110 231 183;
  --c-emerald-400: 52 211 153;
  --c-emerald-800: 6 95 70;
  --c-emerald-900: 6 78 59;
  --c-emerald-950: 2 44 34;
  --c-rose-300: 253 164 175;
  --c-rose-400: 251 113 133;
  --c-rose-900: 136 19 55;
  --c-amber-300: 252 211 77;
  --c-amber-400: 251 191 36;
  --c-violet-200: 221 214 254;
  --c-violet-300: 196 181 253;
  --c-violet-400: 167 139 250;
  --c-violet-900: 76 29 149;
  --c-sky-300: 125 211 252;
  --c-sky-400: 56 189 248;

  --si-bubble: #2a1719;
  --si-bubble-line: #5a2a2b;
  --human-bubble: #10302f;
  --human-bubble-line: #1f5853;
  --human-bubble-strong: #164340;

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -10px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.7);

  color-scheme: dark;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: rgb(var(--c-page));
  color: rgb(var(--c-ink));
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

#app-root {
  min-height: 0;
}

/* Handwritten accent font (slogan) */
.font-handwritten {
  font-family: "Caveat", "Brush Script MT", "Segoe Script", cursive;
  letter-spacing: 0.5px;
}

/* Card */
.glass-card-3d {
  background: rgb(var(--c-card));
  border: 1px solid rgb(var(--c-line));
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-card-3d:hover {
  box-shadow: var(--shadow-lift);
}

/* Hero banner in logo colors */
.hero-tiffany-banner {
  background: linear-gradient(135deg, #a8e9e3 0%, var(--sf-logo-cyan) 55%, #5bbfd2 100%);
  color: #0b2530;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

/* Buttons: calm, soft depth */
.btn-3d-tiffany {
  background: linear-gradient(180deg, #8fdfd8 0%, #6fcfc6 100%);
  color: #08302c;
  font-weight: 700;
  border-radius: 14px;
  border: 1px solid #7bd3cb;
  box-shadow: 0 2px 0 #4fb3aa, 0 6px 14px -6px rgb(13 148 136 / 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  cursor: pointer;
}

.btn-3d-tiffany:hover {
  filter: brightness(1.03);
}

.btn-3d-tiffany:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #4fb3aa, 0 2px 6px -2px rgb(13 148 136 / 0.4);
}

/* Red = SI actions and real alerts only */
.btn-3d-red {
  background: linear-gradient(180deg, #f06560 0%, #e04440 100%);
  color: #ffffff;
  font-weight: 700;
  border-radius: 14px;
  border: 1px solid #ea5a55;
  box-shadow: 0 2px 0 #b8302c, 0 6px 14px -6px rgb(229 57 53 / 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  cursor: pointer;
}

.btn-3d-red:hover {
  filter: brightness(1.04);
}

.btn-3d-red:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #b8302c, 0 2px 6px -2px rgb(229 57 53 / 0.4);
}

.btn-3d-dark {
  background: rgb(var(--c-card));
  color: rgb(var(--c-ink-2));
  border-radius: 14px;
  border: 1px solid rgb(var(--c-line-2));
  box-shadow: 0 1px 0 rgb(var(--c-line-2));
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.btn-3d-dark:hover {
  border-color: var(--sf-tiffany);
  color: rgb(var(--c-brand));
}

.btn-3d-dark:active {
  transform: translateY(1px);
}

/* App area: full screen, no phone frame. On wide screens it is a centered column. */
.app-frame {
  width: 100%;
  max-width: 640px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(var(--c-page));
}

@media (min-width: 680px) {
  .app-frame {
    border-left: 1px solid rgb(var(--c-line));
    border-right: 1px solid rgb(var(--c-line));
  }
}

/* App header */
.tg-header {
  background: rgb(var(--c-card) / 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(var(--c-line));
  padding: 10px 16px;
  z-index: 40;
}

/* Bottom navigation */
.tg-nav-bar {
  background: rgb(var(--c-card) / 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgb(var(--c-line));
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
}

.tg-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--c-muted));
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.tg-nav-item {
  min-width: 0;
  padding: 6px 2px;
  font-size: 10px;
}

/* Buddy: the raised center button of the bottom navigation */
.buddy-nav-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--c-card));
  border: 2px solid rgb(var(--c-line));
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.buddy-nav-btn.active {
  border-color: var(--sf-tiffany);
  transform: translateY(-2px);
}

.tg-nav-item.active {
  color: rgb(var(--c-brand));
  background: rgb(129 216 208 / 0.18);
}

/* SI marker: the red dot from the logo */
.si-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sf-si-red);
  box-shadow: 0 0 0 3px rgb(229 57 53 / 0.15);
  flex-shrink: 0;
}

.mascot-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--si-bubble);
  border: 1px solid var(--si-bubble-line);
  object-fit: contain;
  padding: 1px;
  flex-shrink: 0;
}

/* Chat bubbles: SI = soft warm red, people = Tiffany */
.chat-bubble-si,
.chat-bubble-human,
.chat-bubble-expert {
  padding: 11px 15px;
  line-height: 1.5;
  font-size: 13.5px;
  color: rgb(var(--c-ink));
  box-shadow: var(--shadow-soft);
}

.chat-bubble-si {
  background: var(--si-bubble);
  border: 1px solid var(--si-bubble-line);
  border-radius: 18px 18px 18px 6px;
  max-width: 88%;
}

.items-end > .chat-bubble-si {
  border-radius: 18px 18px 6px 18px;
}

.chat-bubble-human {
  background: var(--human-bubble);
  border: 1px solid var(--human-bubble-line);
  border-radius: 18px 18px 6px 18px;
  max-width: 85%;
}

.items-start > .chat-bubble-human {
  border-radius: 18px 18px 18px 6px;
}

/* The expert writing personally: a person, so a stronger Tiffany */
.chat-bubble-expert {
  background: var(--human-bubble-strong);
  border: 1px solid var(--sf-tiffany);
  border-radius: 18px 18px 6px 18px;
  max-width: 85%;
}

/* Voice message */
.audio-voice-box {
  background: var(--human-bubble);
  border: 1px solid var(--human-bubble-line);
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-soft);
}

.audio-waveform {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 24px;
}

.waveform-bar {
  width: 3px;
  background: var(--sf-tiffany-deep);
  border-radius: 3px;
  transition: height 0.2s ease;
}

.waveform-playing .waveform-bar {
  animation: wavePulse 1s infinite alternate ease-in-out;
}

@keyframes wavePulse {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.3); }
}

/* SI typing indicator */
.typing-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 8px 14px;
  background: var(--si-bubble);
  border-radius: 16px;
  border: 1px solid var(--si-bubble-line);
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-si-red);
  opacity: 0.7;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* Small square bullet in the hero banner */
.red-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--sf-si-red);
  border-radius: 50%;
  margin-right: 6px;
}

/* Investor badge */
.yc-badge {
  background: linear-gradient(135deg, #ff6600 0%, #cc5200 100%);
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--c-line-2));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--c-faint));
}