@import "tailwindcss";
@config "../tailwind.config.ts";

:root {
    --app-bg: var(--tg-theme-bg-color, #ffffff);
    --app-fg: var(--tg-theme-text-color, #111827);
    --app-hint: var(--tg-theme-hint-color, #6b7280);
    --app-link: var(--tg-theme-link-color, #111827);
    --app-button: var(--tg-theme-button-color, #111827);
    --app-button-text: var(--tg-theme-button-text-color, #ffffff);
    --app-banner-bg: var(--tg-theme-button-color, #111827);
    --app-banner-text: var(--tg-theme-button-text-color, #ffffff);
    --app-secondary-bg: var(--tg-theme-secondary-bg-color, #f3f4f6);

    /* Theme-aware colors (light mode defaults) */
    --app-border: rgba(0, 0, 0, 0.1);
    --app-divider: rgba(0, 0, 0, 0.08);
    --app-subtle-bg: rgba(0, 0, 0, 0.05);
    --app-code-bg: #f6f8fa;
    --app-inline-code-bg: rgba(0, 0, 0, 0.08);

    /* Diff colors (light) - from hapi-app */
    --app-diff-added-bg: #e6ffed;
    --app-diff-added-text: #24292e;
    --app-diff-removed-bg: #ffeef0;
    --app-diff-removed-text: #24292e;

    /* Git status colors (light) */
    --app-git-staged-color: #34C759;
    --app-git-unstaged-color: #FF9500;
    --app-git-deleted-color: #FF3B30;
    --app-git-renamed-color: #2563eb;
    --app-git-untracked-color: #8E8E93;

    /* Badge colors (light) */
    --app-badge-warning-bg: rgba(245, 158, 11, 0.2);
    --app-badge-warning-text: #b45309;
    --app-badge-warning-border: rgba(245, 158, 11, 0.3);
    --app-badge-success-bg: rgba(34, 197, 94, 0.2);
    --app-badge-success-text: #15803d;
    --app-badge-success-border: rgba(34, 197, 94, 0.3);
    --app-badge-error-bg: rgba(239, 68, 68, 0.18);
    --app-badge-error-text: #b91c1c;
    --app-badge-error-border: rgba(239, 68, 68, 0.3);

    --app-font-scale: 1;
}

[data-theme="dark"] {
    /* Primary colors - override fallbacks for non-Telegram browsers */
    --app-bg: var(--tg-theme-bg-color, #1c1c1e);
    --app-fg: var(--tg-theme-text-color, #ffffff);
    --app-hint: var(--tg-theme-hint-color, #8e8e93);
    --app-link: var(--tg-theme-link-color, #ffffff);
    --app-button: var(--tg-theme-button-color, #ffffff);
    --app-button-text: var(--tg-theme-button-text-color, #111827);
    --app-banner-bg: var(--tg-theme-button-color, #3A3A3C);
    --app-banner-text: var(--tg-theme-button-text-color, #ffffff);
    --app-secondary-bg: var(--tg-theme-secondary-bg-color, #2C2C2E);

    --app-border: rgba(255, 255, 255, 0.1);
    --app-divider: rgba(255, 255, 255, 0.08);
    --app-subtle-bg: rgba(255, 255, 255, 0.05);
    --app-code-bg: #282c34;
    --app-inline-code-bg: rgba(255, 255, 255, 0.1);

    /* Diff colors (dark) - from hapi-app */
    --app-diff-added-bg: #0d2e1f;
    --app-diff-added-text: #c9d1d9;
    --app-diff-removed-bg: #3f1b23;
    --app-diff-removed-text: #c9d1d9;

    /* Git status colors (dark) */
    --app-git-staged-color: #4ade80;
    --app-git-unstaged-color: #f59e0b;
    --app-git-deleted-color: #f87171;
    --app-git-renamed-color: #60a5fa;
    --app-git-untracked-color: #9ca3af;

    /* Badge colors (dark) */
    --app-badge-warning-bg: rgba(251, 191, 36, 0.2);
    --app-badge-warning-text: #fbbf24;
    --app-badge-warning-border: rgba(251, 191, 36, 0.3);
    --app-badge-success-bg: rgba(74, 222, 128, 0.2);
    --app-badge-success-text: #4ade80;
    --app-badge-success-border: rgba(74, 222, 128, 0.3);
    --app-badge-error-bg: rgba(248, 113, 113, 0.2);
    --app-badge-error-text: #fca5a5;
    --app-badge-error-border: rgba(248, 113, 113, 0.35);
}

html {
    font-size: calc(100% * var(--app-font-scale));
}

html,
body {
    height: 100vh;
    height: 100dvh;
    height: var(--tg-viewport-stable-height, 100dvh);
    overflow: hidden;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--app-bg);
    color: var(--app-fg);
}

#root {
    height: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .session-list-item:hover,
    .session-list-new-button:hover {
        background-color: var(--app-subtle-bg);
    }
}

/* Markdown styles */
.markdown-content a { color: var(--app-link); text-decoration: underline; }
.markdown-content code { background: var(--app-inline-code-bg); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; }
.markdown-content blockquote { border-left: 3px solid var(--app-hint); padding-left: 0.75rem; margin: 0.5rem 0; opacity: 0.85; }
.markdown-content ul, .markdown-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.markdown-content table { border-collapse: collapse; width: 100%; }
.markdown-content th, .markdown-content td { border: 1px solid var(--app-border); padding: 0.25rem 0.5rem; }

.aui-md-codeblock pre.shiki {
    margin: 0;
    padding: 0.5rem;
    background-color: transparent !important;
    font-size: 0.875rem;
}

.aui-md-codeblock pre.shiki code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.aui-md-codeblock .shiki,
.aui-md-codeblock .shiki span {
    background-color: transparent !important;
}

/* Shiki dual theme colors */
.shiki,
.shiki span {
    color: var(--shiki-light) !important;
    font-style: var(--shiki-light-font-style) !important;
    font-weight: var(--shiki-light-font-weight) !important;
    text-decoration: var(--shiki-light-text-decoration) !important;
}

html[data-theme="dark"] .shiki,
html[data-theme="dark"] .shiki span {
    color: var(--shiki-dark) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* Ultrathink rainbow sparkle effect - per-letter wave animation */
@keyframes rainbow-wave {
  0% { color: #ff5555; }      /* red */
  14% { color: #ffaa00; }     /* orange */
  28% { color: #ffff55; }     /* yellow */
  42% { color: #55ff55; }     /* green */
  57% { color: #55ffff; }     /* cyan */
  71% { color: #5555ff; }     /* blue */
  85% { color: #ff55ff; }     /* magenta/pink */
  100% { color: #ff5555; }    /* red */
}

@keyframes sparkle-wave {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.7);
  }
}

.rainbow-letter {
  display: inline-block;
  animation: rainbow-wave 2s linear infinite, sparkle-wave 2s ease-in-out infinite;
  font-weight: 600;
}

/* PWA install prompt animation */
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

@keyframes menu-pop {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-menu-pop {
  animation: menu-pop 0.18s ease-out;
}

/* Syncing spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* New messages indicator bounce animation */
@keyframes bounce-in {
  0% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

.animate-bounce-in {
  animation: bounce-in 0.3s ease-out;
}

/* ReactQueryDevtools button - move to middle-right to avoid blocking UI */
.tsqd-open-btn-container {
  bottom: 50% !important;
  transform: translateY(50%);
}