/* ============================================================
   BUBLO — Agentic AI Assistant Chat UI
   Premium SaaS-style chat interface
   Light theme with soft grays and brand blue
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Background layers */
  --clr-bg-page:       hsl(220, 20%, 96%);
  --clr-bg-app:        hsl(0, 0%, 100%);
  --clr-bg-header:     hsl(0, 0%, 100%);
  --clr-bg-input:      hsl(0, 0%, 100%);
  --clr-bg-input-area: hsl(220, 14%, 96%);

  /* Brand blue */
  --clr-brand:         hsl(217, 91%, 55%);
  --clr-brand-hover:   hsl(217, 91%, 48%);
  --clr-brand-light:   hsl(217, 91%, 95%);
  --clr-brand-glow:    hsla(217, 91%, 55%, .20);

  /* Neutrals */
  --clr-text-primary:   hsl(222, 25%, 12%);
  --clr-text-secondary: hsl(222, 10%, 46%);
  --clr-text-muted:     hsl(222, 8%, 62%);
  --clr-border:         hsl(220, 13%, 90%);
  --clr-border-focus:   var(--clr-brand);

  /* Bubbles */
  --clr-bubble-user:    var(--clr-brand);
  --clr-bubble-user-text: #fff;
  --clr-bubble-bot:     hsl(220, 14%, 95%);
  --clr-bubble-bot-text: var(--clr-text-primary);

  /* Typography */
  --ff-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-xs:   .75rem;
  --fs-sm:   .8125rem;
  --fs-base: .9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;

  /* Spacing */
  --sp-xs:  .25rem;
  --sp-sm:  .5rem;
  --sp-md:  .75rem;
  --sp-lg:  1rem;
  --sp-xl:  1.5rem;
  --sp-2xl: 2rem;

  /* Radii */
  --radius-sm:  .5rem;
  --radius-md:  .75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;
  --radius-bubble: 1.125rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-app:    0 4px 40px hsla(222, 25%, 10%, .08),
                   0 1px 6px hsla(222, 25%, 10%, .04);
  --shadow-header: 0 1px 3px hsla(222, 25%, 10%, .06);
  --shadow-input:  0 2px 8px hsla(222, 25%, 10%, .05);
  --shadow-btn:    0 2px 10px var(--clr-brand-glow);

  /* Transitions */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: 150ms;
  --dur-normal: 280ms;

  /* Layout */
  --header-h: 64px;
  --input-area-h: 80px;
  --app-max-w: 820px;
  --app-radius: 1.25rem;
}

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--clr-text-primary);
  background: var(--clr-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── App Shell ────────────────────────────────────────────── */
.app-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
}

.chat-app {
  width: 100%;
  max-width: var(--app-max-w);
  height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-app);
  border-radius: var(--app-radius);
  box-shadow: var(--shadow-app);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  animation: appFadeIn .6s var(--ease-out) both;
}

@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ───────────────────────────────────────────────── */
.chat-header {
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-xl);
  background: var(--clr-bg-header);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-header);
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.header-avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--clr-brand), hsl(265,70%,58%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.header-info h1 {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.header-status {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-weight: 500;
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: hsl(145, 65%, 48%);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

.header-actions {
  display: flex;
  gap: var(--sp-sm);
}

.header-btn {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--clr-text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.header-btn:hover {
  background: var(--clr-brand-light);
  color: var(--clr-brand);
}

/* ── Chat Area ────────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 20% 20%, hsla(217,91%,55%,.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, hsla(265,70%,58%,.02) 0%, transparent 50%),
    var(--clr-bg-app);
}

/* Custom scrollbar */
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--clr-border);
  border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--clr-text-muted);
}

/* ── Welcome Screen ───────────────────────────────────────── */
.welcome-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-2xl);
  animation: fadeInUp .6s var(--ease-out) .2s both;
}

.welcome-icon {
  width: 72px; height: 72px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--clr-brand), hsl(265,70%,58%));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  margin-bottom: var(--sp-xl);
  box-shadow: 0 8px 30px var(--clr-brand-glow);
}

.welcome-screen h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-sm);
}

.welcome-screen p {
  color: var(--clr-text-secondary);
  font-size: var(--fs-sm);
  max-width: 380px;
}

.welcome-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
  justify-content: center;
}

.suggestion-chip {
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--clr-bg-input-area);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--clr-text-secondary);
  cursor: pointer;
  font-family: var(--ff-sans);
  transition: all var(--dur-fast) var(--ease-out);
}

.suggestion-chip:hover {
  background: var(--clr-brand-light);
  border-color: var(--clr-brand);
  color: var(--clr-brand);
  transform: translateY(-1px);
}

/* ── Message Bubbles ──────────────────────────────────────── */
.message {
  display: flex;
  gap: var(--sp-md);
  max-width: 75%;
  animation: messageFadeIn .35s var(--ease-out) both;
}

@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User messages */
.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.message.bot .message-avatar {
  background: linear-gradient(135deg, var(--clr-brand), hsl(265,70%,58%));
  color: #fff;
}

.message.user .message-avatar {
  background: hsl(220, 14%, 90%);
  color: var(--clr-text-secondary);
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.message-bubble {
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-sm);
  line-height: 1.65;
  word-break: break-word;
}

.message.user .message-bubble {
  background: var(--clr-bubble-user);
  color: var(--clr-bubble-user-text);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--sp-xs) var(--radius-bubble);
}

.message.bot .message-bubble {
  background: var(--clr-bubble-bot);
  color: var(--clr-bubble-bot-text);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--sp-xs);
}

.message-time {
  font-size: 10px;
  color: var(--clr-text-muted);
  padding: 0 var(--sp-xs);
}

.message.user .message-time { text-align: right; }

/* ── Typing Indicator ─────────────────────────────────────── */
.typing-indicator {
  display: flex;
  gap: var(--sp-md);
  max-width: 75%;
  animation: messageFadeIn .35s var(--ease-out) both;
}

.typing-bubble {
  background: var(--clr-bubble-bot);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--sp-xs);
  padding: var(--sp-lg) var(--sp-xl);
  display: flex;
  align-items: center;
  gap: 5px;
}

.typing-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Input Area ───────────────────────────────────────────── */
.chat-input-area {
  flex-shrink: 0;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--clr-bg-input-area);
  border-top: 1px solid var(--clr-border);
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-md);
  background: var(--clr-bg-input);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-lg);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-input);
}

.input-wrapper:focus-within {
  border-color: var(--clr-border-focus);
  box-shadow: 0 0 0 3px var(--clr-brand-glow), var(--shadow-input);
}

#chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--clr-text-primary);
  background: transparent;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  padding: var(--sp-sm) 0;
}

#chat-input::placeholder {
  color: var(--clr-text-muted);
}

.send-btn {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: var(--clr-brand);
  color: #fff;
  font-size: var(--fs-lg);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-btn);
}

.send-btn:hover {
  background: var(--clr-brand-hover);
  transform: scale(1.05);
}

.send-btn:active { transform: scale(.95); }

.send-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.send-btn svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Powered By ───────────────────────────────────────────── */
.powered-by {
  text-align: center;
  padding: var(--sp-sm) 0;
  font-size: 10px;
  color: var(--clr-text-muted);
  letter-spacing: .03em;
}

.powered-by a {
  color: var(--clr-brand);
  text-decoration: none;
  font-weight: 600;
}

/* ── Mobile full-screen ───────────────────────────────────── */
@media (max-width: 768px) {
  .app-wrapper {
    padding: 0;
    align-items: stretch;
  }

  .chat-app {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .chat-header {
    padding: 0 var(--sp-lg);
  }

  .chat-messages {
    padding: var(--sp-lg);
  }

  .message { max-width: 88%; }

  .chat-input-area {
    padding: var(--sp-md) var(--sp-lg);
    /* Extra bottom padding for mobile browsers */
    padding-bottom: max(var(--sp-md), env(safe-area-inset-bottom));
  }

  .welcome-suggestions {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .header-info h1 { font-size: var(--fs-sm); }
  .message { max-width: 92%; }
}