/* ============================================================
   MeAssistant Demo — CSS
   Matching me-card-app Flutter card styles exactly
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family: 'ReadexPro'; src: url('assets/fonts/ReadexPro-Light.ttf')    format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'ReadexPro'; src: url('assets/fonts/ReadexPro-Regular.ttf')  format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ReadexPro'; src: url('assets/fonts/ReadexPro-Medium.ttf')   format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'ReadexPro'; src: url('assets/fonts/ReadexPro-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'ReadexPro'; src: url('assets/fonts/ReadexPro-Bold.ttf')     format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'ReadexPro'; src: url('assets/fonts/ReadexPro-ExtraLight.ttf')format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  --meg-primary:       #6310D1;
  --meg-primary-light: #8d41f1;
  --meg-yellow:        #FED401;
  --meg-dark25:        #f6f6f8;
  --meg-dark50:        #F0F1F3;
  --meg-dark200:       #C8C8D0;
  --meg-dark400:       #9292A0;
  --meg-dark600:       #686878;
  --meg-dark800:       #42424C;
  --meg-dark900:       #26262B;
  --meg-dark1000:      #0f0f0f;
  --meg-purple25:      #f6f4fe;
  --meg-grass600:      #009201;
  --meg-red600:        #F76C6C;
  --meg-white:         #ffffff;

  /* Card sweep gradient border: 1px border with conic purple gradient */
  --meg-card-gradient: conic-gradient(
    from 0deg,
    #A829F0 0%,
    #5E308B 15%,
    rgba(255,255,255,0.7) 35%,
    rgba(255,255,255,0.7) 45%,
    #A829F0 50%,
    #5E308B 70%,
    rgba(255,255,255,0.7) 100%
  );
}

/* ============================================================
   Floating Button — matches me-card-app _buildButton()
   55x55, Stack: ai_button_container.png fills area + ic_ai.png centered
   ============================================================ */
.meg-floating-btn {
  position: fixed;
  bottom: 24px;   /* default web position — can be overridden via JS config */
  right: 24px;
  z-index: 9999;
  width: 47px;
  height: 47px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;   /* so container image clips to circle */
  -webkit-tap-highlight-color: transparent;
  animation: meg-slide-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

.meg-floating-btn.meg-visible {
  display: flex;
}

@keyframes meg-slide-in {
  from { transform: translateX(60px) scale(0); opacity: 0; }
  to   { transform: translateX(0)    scale(1); opacity: 1; }
}

/* ============================================================
   Overlay (invisible tap-away backdrop for floating window)
   ============================================================ */
.meg-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.meg-overlay.meg-visible {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   Floating Chat Window — overlaps the floating button area
   Bottom-anchored at same position as the button so it sits over it
   ============================================================ */
.meg-modal {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 323px;
  max-width: calc(100vw - 40px);
  height: min(612px, 75dvh);
  display: flex;
  flex-direction: column;
  transform: scale(0.88) translateY(16px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
}
.meg-modal.meg-visible {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.meg-modal-inner {
  background: rgba(246,246,250,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-family: 'ReadexPro', sans-serif;
  zoom: 0.85;
}

/* ============================================================
   Handle / Header
   ============================================================ */
.meg-handle { display: none; }
.meg-handle-bar { display: none; }

.meg-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 16px 8px;
}
.meg-close-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--meg-dark800);
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  transition: background 0.15s;
}
.meg-close-btn:hover { background: rgba(0,0,0,0.06); }
.meg-history-btn { display: none; }

/* ============================================================
   Content / Welcome / Conversation
   ============================================================ */
.meg-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.meg-welcome {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.meg-welcome.meg-hidden { display: none; }

.meg-welcome-spacer-top    { height: 40px; flex-shrink: 0; }
.meg-welcome-spacer-bottom { height: 20px; flex-shrink: 0; }

.meg-logo {
  width: 72px; height: 72px; object-fit: contain;
}
.meg-logo-placeholder {
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--meg-primary); border-radius: 50%; color: white;
}

/* meAssistant label: exact Flutter — 15px w400 mePurple900, no letter-spacing */
.meg-name {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--meg-primary);
}

.meg-intro {
  font-size: 24px;
  font-weight: 600;
  color: var(--meg-dark900);
  text-align: center;
  line-height: 1.35;
  margin: 0;
}

/* Suggestions area — pinned above input field, hidden when conversation starts */
.meg-suggestions-area {
  flex-shrink: 0;
  padding: 0 16px 12px;
}

/* Suggestion cards — horizontal scroll */
.meg-suggestions {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  padding-bottom: 4px;
}
.meg-suggestions::-webkit-scrollbar { display: none; }

/* Card: matches Flutter _buildSuggestionCard — Row layout, white 0.7 bg, radius 12, white 0.3 border */
.meg-suggestion-card {
  flex: 0 0 auto;
  width: calc(60% - 10px);
  min-width: 180px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.meg-suggestion-card:hover  { opacity: 0.82; }
.meg-suggestion-card:active { opacity: 0.65; }

/* Icon: 18px, tinted to dark200 (#C8C8D0) via filter */
.meg-suggestion-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
  margin-top: 2px;
  filter: grayscale(1) brightness(1.6) opacity(0.75);
}

.meg-suggestion-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--meg-dark900);
  line-height: 1.4;
  flex: 1;
}

/* ============================================================
   Conversation view
   ============================================================ */
.meg-conversation {
  flex: 1;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.meg-conversation.meg-visible {
  display: flex;
}

.meg-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 16px 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Message wrappers */
.meg-message { margin-bottom: 16px; }

.meg-message-user-row {
  display: flex;
  justify-content: flex-end;
}
.meg-message-user-row.meg-first {
  animation: meg-fade-up 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* User bubble: exact Flutter values — black 0.04 bg, radius 16/4/16/16, 12×16 pad, 15px w300 dark900 */
.meg-bubble-user {
  background: rgba(0,0,0,0.04);
  border-radius: 16px 4px 16px 16px;
  padding: 12px 16px;
  max-width: 80%;
  font-size: 15px;
  font-weight: 300;
  color: var(--meg-dark900);
  line-height: 1.5;
  word-break: break-word;
}

.meg-message-assistant-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: meg-fade-up 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* Lottie header area — matches Flutter Container(margin: EdgeInsets.symmetric(vertical:8)) */
.meg-assistant-lottie-wrap {
  margin: 8px 0;
  min-height: 24px;
}
/* Inner lottie div — natural dimensions of ai-transition-2.json (150×24) */
.meg-assistant-lottie-inner {
  width: 150px;
  height: 24px;
}
/* Last-frame PNG rendered at the same height (24px) so both snap to the same line */
.meg-assistant-last-frame {
  height: 24px;
  width: auto;
  display: block;
}

/* Assistant text: exact Flutter — 15px w300 dark800 */
.meg-bubble-assistant {
  font-size: 15px;
  font-weight: 300;
  color: var(--meg-dark800);
  line-height: 1.6;
  word-break: break-word;
}

/* Follow-up prompts — right-aligned container, matches Flutter vertical margin 5 between each */
.meg-follow-prompts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
}
/* Matches Flutter _buildSuggestionPrompt: white, radius 12, black 0.08 border, 16px pad, 14px mePurple900 */
/* Width is dynamic (content-driven), max capped to keep it readable */
.meg-follow-prompt {
  background: var(--meg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--meg-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  text-align: left;
  display: inline-block;
  max-width: 92%;
  word-break: break-word;
}
.meg-follow-prompt:hover  { background: var(--meg-purple25); }
.meg-follow-prompt:active { background: var(--meg-dark50); }

/* Typing indicator — Lottie animation + "Thinking..." shimmer */
.meg-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin: 4px 0;
}
/* Lottie player: ai-loop-cropped.json is 24×24 square, sits neatly beside the shimmer text */
.meg-typing-lottie {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
/* "Thinking..." shimmer text */
@keyframes meg-shimmer-text {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.meg-thinking-text {
  font-size: 13px;
  font-weight: 300;
  background: linear-gradient(90deg,
    var(--meg-dark400) 20%,
    var(--meg-dark900) 50%,
    var(--meg-dark400) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: meg-shimmer-text 2.8s linear infinite;
  white-space: nowrap;
}
/* Pulse used for avatar only (not typing indicator) */
@keyframes meg-logo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.88); }
}
/* Dot fallback (if lottie-player script not loaded) */
.meg-typing-dots {
  display: flex; align-items: center; gap: 5px; padding: 4px 2px;
}
.meg-typing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--meg-primary);
  animation: meg-bounce 0.8s ease-in-out infinite;
}
.meg-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.meg-typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* ============================================================
   Input Area — matches Flutter: padding(left:16, right:16, bottom:16)
   ============================================================ */
.meg-input-area {
  padding: 8px 16px 0;
  flex-shrink: 0;
}
/* Input: matches Flutter _buildInputArea — radius 8, white 0.7, very faint border, 13px font */
.meg-input-container {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}

/* Prefix icon wrapper: 14px margin all sides, matching Flutter Container(margin: EdgeInsets.all(14)) */
.meg-input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 14px 0 14px 14px;
}
.meg-input-prefix-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: invert(35%) sepia(80%) saturate(600%) hue-rotate(250deg) brightness(0.9);
}

.meg-input-field {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--meg-dark1000);
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  padding: 12px 16px;
}
.meg-input-field::placeholder { color: var(--meg-dark400); font-size: 13px; }

/* Send button: small icon (10px) in a 30px touch target, matching Flutter suffix */
.meg-send-btn {
  background: none;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 6px;
  color: var(--meg-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
}
.meg-send-btn svg { width: 16px; height: 16px; }
.meg-send-btn.meg-visible { display: flex; }
.meg-send-btn:hover  { opacity: 0.75; }
.meg-send-btn:active { transform: scale(0.92); }

.meg-footer-text {
  font-size: 10px;
  font-weight: 300;
  color: rgba(0,0,0,0.35);
  text-align: center;
  margin: 6px 0 0;
}

.meg-bottom-spacer { height: 16px; flex-shrink: 0; }

/* ============================================================
   CARD STYLES — matching Flutter card widgets exactly
   Every card:
     - outer: conic-gradient border 1px + border-radius:20 + margin-vertical:8
     - inner: white bg + border-radius:20 + padding:20
   ============================================================ */

/* Outer gradient-border wrapper (1px sweep-gradient border) */
.meg-card-outer {
  background: var(--meg-card-gradient);
  padding: 1px;
  border-radius: 20px;
  margin: 8px 0;
}

/* Inner white card body — padding set inline per card type */
.meg-card-inner {
  background: var(--meg-white);
  border-radius: 20px;
  /* default padding:20px is set inline; override per type also inline */
}

/* AmountCurrencyWidget inline flex */
.meg-amt-widget {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}

/* Row helper */
.meg-card-row {
  display: flex;
  align-items: center;
}

/* Circle image containers */
.meg-circle-img {
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meg-circle-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--meg-dark50);
  border-radius: 50%;
}
.meg-sq-fallback {
  display: flex; align-items: center; justify-content: center;
  background: rgba(99,16,209,0.1);
  border-radius: 12px;
}

/* Amount + SAVED/GOAL/SPENT/LIMIT label column */
.meg-amt-label-col {
  display: inline-flex;
  align-items: flex-start;
}

/* Separator line (SeparatorLineWidget) */
.meg-separator {
  height: 1px;
  background: var(--meg-dark50);
  width: 100%;
  margin: 0;
}

/* Rounded container (RoundedContainerWidget, bg = mePurple25) */
.meg-rounded-box {
  background: var(--meg-purple25);
  border-radius: 12px;
}

/* Detail row (label + value, space-between) */
.meg-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.meg-detail-label {
  font-size: 15px;
  font-weight: 300;
  color: var(--meg-dark600);
  flex: 1;
}
.meg-detail-value {
  display: flex;
  align-items: center;
}

/* RecurringIcon (45x45 Stack) */
.meg-recurring-icon {
  position: relative;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
}
.meg-recurring-main-img {
  position: absolute;
  top: 0; left: 0;
}
.meg-recurring-badge-wrap {
  position: absolute;
  bottom: 0; right: 0;
}
.meg-recurring-img-fallback {
  width: 38px; height: 38px;
  background: var(--meg-dark50);
  border-radius: 20px;
}

/* Progress bar flex track */
.meg-progress-bar-wrap {
  display: flex;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--meg-dark50);
}

/* Table card */
.meg-table {
  border-collapse: collapse;
  white-space: nowrap;
}
.meg-table th {
  font-size: 13px;
  font-weight: 500;
  color: var(--meg-dark1000);
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid var(--meg-dark50);
}
.meg-table td {
  font-size: 12px;
  font-weight: 300;
  color: var(--meg-dark900);
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid var(--meg-dark25);
}
.meg-table tr:last-child td { border-bottom: none; }

/* ============================================================
   Animations
   ============================================================ */
@keyframes meg-bounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 1; }
}
@keyframes meg-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Scrollbar styling
   ============================================================ */
.meg-messages::-webkit-scrollbar { width: 4px; }
.meg-messages::-webkit-scrollbar-track { background: transparent; }
.meg-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }