@import "tailwindcss";

/* ============================================================
   Telegram-like theme
   ============================================================ */

:root {
  /* ----- Theme source color (override this from JS via setColorTheme) ----- */
  --tg-theme-color: #3390ec;

  /* Accent — derived from theme color (same in light) */
  --tg-accent: var(--tg-theme-color);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 15%, transparent);
  --tg-accent-text: var(--tg-accent);

  /* Surfaces */
  --tg-bg: #ffffff;
  --tg-bg-secondary: #f4f4f5;
  --tg-bg-hover: color-mix(in srgb, var(--tg-accent) 8%, #ffffff);
  --tg-bg-selected: var(--tg-accent);
  --tg-bg-selected-text: #ffffff;
  --tg-divider: #e4e4e5;

  /* Chat surface — pale tint of the theme color */
  --tg-chat-bg: color-mix(in srgb, var(--tg-accent) 22%, #d8dde2);

  /* Bubbles */
  --tg-bubble-in: #ffffff;
  --tg-bubble-in-text: #0f1419;
  --tg-bubble-out: color-mix(in srgb, var(--tg-accent) 18%, #ffffff);
  --tg-bubble-out-text: #0f1419;
  --tg-bubble-shadow: 0 1px 0.5px rgba(16, 35, 47, 0.13);

  /* Text */
  --tg-text-primary: #0f1419;
  --tg-text-secondary: #707579;
  --tg-text-meta: #707579;
  --tg-text-meta-out: color-mix(in srgb, var(--tg-accent) 65%, #0f1419);

  /* Misc */
  --tg-danger: #e53935;
  --tg-danger-soft: rgba(229, 57, 53, 0.12);
  --tg-success: #4fae4e;
  --tg-warning: #ffae42;
  --tg-reply-line: var(--tg-accent);

  /* Reactions */
  --tg-reaction-bg: color-mix(in srgb, var(--tg-accent) 12%, transparent);
  --tg-reaction-text: var(--tg-accent);
  --tg-reaction-bg-out: color-mix(in srgb, var(--tg-accent) 22%, transparent);
  --tg-reaction-text-out: color-mix(in srgb, var(--tg-accent) 75%, #0f1419);

  /* Safe areas */
  --tg-safe-top: env(safe-area-inset-top);
  --tg-safe-bottom: env(safe-area-inset-bottom);
}

body.dark,
.dark {
  /* In dark we lighten the theme color a bit for readability */
  --tg-accent: color-mix(in srgb, var(--tg-theme-color) 60%, white 40%);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 20%, transparent);
  --tg-accent-text: var(--tg-accent);

  --tg-bg: #17212b;
  --tg-bg-secondary: #232e3c;
  --tg-bg-hover: color-mix(in srgb, var(--tg-accent) 18%, #232e3c);
  --tg-bg-selected: color-mix(in srgb, var(--tg-accent) 35%, #232e3c);
  --tg-bg-selected-text: #ffffff;
  --tg-divider: #101921;

  --tg-chat-bg: color-mix(in srgb, var(--tg-accent) 10%, #0e1621);

  --tg-bubble-in: #182533;
  --tg-bubble-in-text: #ffffff;
  --tg-bubble-out: color-mix(in srgb, var(--tg-accent) 35%, #182533);
  --tg-bubble-out-text: #ffffff;
  --tg-bubble-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.4);

  --tg-text-primary: #ffffff;
  --tg-text-secondary: #7f8fa5;
  --tg-text-meta: rgba(255, 255, 255, 0.55);
  --tg-text-meta-out: color-mix(in srgb, var(--tg-accent) 85%, white);

  --tg-danger: #ef6b6b;
  --tg-danger-soft: rgba(239, 107, 107, 0.18);
  --tg-success: var(--tg-accent);
  --tg-warning: #f0c674;
  --tg-reply-line: var(--tg-accent);

  --tg-reaction-bg: color-mix(in srgb, var(--tg-accent) 18%, transparent);
  --tg-reaction-text: color-mix(in srgb, var(--tg-accent) 85%, white);
  --tg-reaction-bg-out: color-mix(in srgb, var(--tg-accent) 30%, transparent);
  --tg-reaction-text-out: #ffffff;
}

/* ============================================================
   WhatsApp-like palette (same --tg-* names for shared MessageItem)
   ============================================================ */

html[data-presentation="whatsapp"] {
  --tg-theme-color: #00a884;
  --tg-accent: var(--tg-theme-color);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 14%, transparent);
  --tg-accent-text: var(--tg-theme-color);

  --tg-bg: #ffffff;
  --tg-bg-secondary: #f0f2f5;
  --tg-bg-hover: color-mix(in srgb, var(--tg-accent) 6%, #f0f2f5);
  --tg-bg-selected: #f0f2f5;
  --tg-bg-selected-text: #111b21;
  --tg-divider: #e9edef;

  --tg-chat-bg: #efeae2;
  --tg-chat-bg-pattern: radial-gradient(
      circle at 20% 30%,
      rgba(0, 0, 0, 0.03) 0,
      transparent 45%
    ),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.025) 0, transparent 40%);

  --tg-bubble-in: #ffffff;
  --tg-bubble-in-text: #111b21;
  --tg-bubble-out: #d9fdd3;
  --tg-bubble-out-text: #111b21;
  /* WA: почти плоские пузыри */
  --tg-bubble-shadow: 0 0.5px 0 rgba(11, 20, 26, 0.06);
  --wa-bubble-radius: 7.5px;
  --wa-bubble-radius-tight: 5px;

  --tg-text-primary: #111b21;
  --tg-text-secondary: #667781;
  --tg-text-meta: #667781;
  --tg-text-meta-out: color-mix(in srgb, #111b21 72%, var(--tg-accent) 28%);

  --tg-danger: #ea0038;
  --tg-danger-soft: rgba(234, 0, 56, 0.12);
  --tg-success: var(--tg-accent);
  --tg-warning: #f5c84c;
  --tg-reply-line: var(--tg-accent);

  --tg-reaction-bg: color-mix(in srgb, var(--tg-accent) 10%, transparent);
  --tg-reaction-text: var(--tg-accent);
  --tg-reaction-bg-out: color-mix(in srgb, var(--tg-accent) 16%, transparent);
  --tg-reaction-text-out: #111b21;
}

html[data-presentation="whatsapp"] body.dark,
html[data-presentation="whatsapp"] .dark {
  --tg-accent: var(--tg-theme-color);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 22%, transparent);
  --tg-accent-text: color-mix(in srgb, var(--tg-theme-color) 38%, white 62%);

  --tg-bg: #111b21;
  --tg-bg-secondary: #202c33;
  --tg-bg-hover: color-mix(in srgb, var(--tg-accent) 12%, #202c33);
  --tg-bg-selected: #2a3942;
  --tg-bg-selected-text: #e9edef;
  --tg-divider: #2a3942;

  --tg-chat-bg: #0b141a;
  --tg-chat-bg-pattern: none;

  --tg-bubble-in: #202c33;
  --tg-bubble-in-text: #e9edef;
  --tg-bubble-out: #005c4b;
  --tg-bubble-out-text: #e9edef;
  --tg-bubble-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.35);

  --tg-text-primary: #e9edef;
  --tg-text-secondary: #8696a0;
  --tg-text-meta: #8696a0;
  --tg-text-meta-out: color-mix(in srgb, #e9edef 80%, var(--tg-accent) 20%);

  --tg-danger: #ff6b81;
  --tg-danger-soft: rgba(255, 107, 129, 0.18);
  --tg-success: var(--tg-accent);
  --tg-warning: #f0c674;

  --tg-reaction-bg: color-mix(in srgb, var(--tg-accent) 18%, transparent);
  --tg-reaction-text: #aff7e0;
  --tg-reaction-bg-out: color-mix(in srgb, var(--tg-accent) 28%, transparent);
  --tg-reaction-text-out: #e9edef;
}

/* ============================================================
   Instagram Direct–like palette
   ============================================================ */

html[data-presentation="instagram"] {
  --tg-theme-color: #0095f6;
  --tg-accent: var(--tg-theme-color);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 12%, transparent);
  --tg-accent-text: var(--tg-theme-color);

  --tg-bg: #ffffff;
  --tg-bg-secondary: #fafafa;
  --tg-bg-hover: color-mix(in srgb, var(--tg-accent) 6%, #fafafa);
  --tg-bg-selected: #efefef;
  --tg-bg-selected-text: #262626;
  --tg-divider: #dbdbdb;

  --tg-chat-bg: #efefef;
  --tg-chat-bg-pattern: radial-gradient(
      circle at 30% 20%,
      rgba(0, 0, 0, 0.02) 0,
      transparent 50%
    ),
    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.015) 0, transparent 45%);

  --tg-bubble-in: #ffffff;
  --tg-bubble-in-text: #262626;
  --tg-bubble-out: #e668a8;
  --tg-bubble-out-text: #ffffff;
  --tg-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

  --tg-text-primary: #262626;
  --tg-text-secondary: #8e8e8e;
  --tg-text-meta: #8e8e8e;
  --tg-text-meta-out: color-mix(in srgb, #ffffff 88%, #fce7f3 12%);

  --tg-danger: #ed4956;
  --tg-danger-soft: rgba(237, 73, 86, 0.12);
  --tg-success: #2ecc71;
  --tg-warning: #fcaf45;
  --tg-reply-line: var(--tg-accent);

  --tg-reaction-bg: color-mix(in srgb, var(--tg-accent) 10%, transparent);
  --tg-reaction-text: var(--tg-accent);
  --tg-reaction-bg-out: color-mix(in srgb, #ffffff 22%, transparent);
  --tg-reaction-text-out: #ffffff;
}

/* Default IG dark theme on <html> so ?theme= (inline --tg-theme-color) is not
   overridden by a body-scoped --tg-theme-color. */
html[data-presentation="instagram"]:has(body.dark) {
  --tg-theme-color: #a855f7;
}

html[data-presentation="instagram"] body.dark,
html[data-presentation="instagram"] .dark {
  --tg-accent: var(--tg-theme-color);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 22%, transparent);
  --tg-accent-text: color-mix(in srgb, var(--tg-theme-color) 55%, white 45%);

  --tg-bg: #000000;
  --tg-bg-secondary: #121212;
  --tg-bg-hover: color-mix(in srgb, var(--tg-accent) 12%, #1a1a1a);
  --tg-bg-selected: #262626;
  --tg-bg-selected-text: #fafafa;
  --tg-divider: #262626;

  --tg-chat-bg: #000000;
  --tg-chat-bg-pattern: none;

  --tg-bubble-in: #262626;
  --tg-bubble-in-text: #fafafa;
  --tg-bubble-out: #7c3aed;
  --tg-bubble-out-text: #ffffff;
  --tg-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

  --tg-text-primary: #fafafa;
  --tg-text-secondary: #a8a8a8;
  --tg-text-meta: #a8a8a8;
  --tg-text-meta-out: color-mix(in srgb, #ffffff 85%, var(--tg-accent) 15%);

  --tg-danger: #ff6b6b;
  --tg-danger-soft: rgba(255, 107, 107, 0.2);
  --tg-success: #2ecc71;
  --tg-warning: #fcaf45;

  --tg-reaction-bg: color-mix(in srgb, var(--tg-accent) 20%, transparent);
  --tg-reaction-text: #e9d5ff;
  --tg-reaction-bg-out: color-mix(in srgb, #ffffff 18%, transparent);
  --tg-reaction-text-out: #ffffff;
}

/* Исходящий пузырь Instagram: градиент (не --tg-bubble-out flat). */
html[data-presentation="instagram"] .ig-out-bubble {
  background-image: linear-gradient(
    115deg,
    #f58529 0%,
    #dd2a7b 45%,
    #8134af 100%
  );
  background-size: 140% 140%;
  background-position: 80% 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

html[data-presentation="instagram"] body.dark .ig-out-bubble,
html[data-presentation="instagram"] .dark .ig-out-bubble {
  background-image: linear-gradient(
    125deg,
    #4c1d95 0%,
    #a21caf 40%,
    #ec4899 100%
  );
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Входящий пузырь Instagram: мягкий «стеклянный» блок (не плоский белый как в WA). */
html[data-presentation="instagram"] .ig-in-bubble {
  background: linear-gradient(168deg, #f8f8f8 0%, #ebebeb 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html[data-presentation="instagram"] body.dark .ig-in-bubble,
html[data-presentation="instagram"] .dark .ig-in-bubble {
  background: linear-gradient(168deg, #333333 0%, #252525 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Плавающие кнопки у пузыря: без «почтовой» рамки WA — стекло. */
html[data-presentation="instagram"] .ig-float-action {
  background: color-mix(in srgb, var(--tg-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid color-mix(in srgb, var(--tg-divider) 55%, transparent);
}

html[data-presentation="instagram"] body.dark .ig-float-action,
html[data-presentation="instagram"] .dark .ig-float-action {
  background: color-mix(in srgb, var(--tg-bg-secondary) 75%, transparent);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@theme {
  --color-tg-bg: var(--tg-bg);
  --color-tg-bg-secondary: var(--tg-bg-secondary);
  --color-tg-divider: var(--tg-divider);
  --color-tg-accent: var(--tg-accent);
  --color-tg-text-primary: var(--tg-text-primary);
  --color-tg-text-secondary: var(--tg-text-secondary);
  --color-tg-danger: var(--tg-danger);
}

/* ============================================================
   Base
   ============================================================ */

html,
body,
#root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  -ms-content-zooming: none;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  color: var(--tg-text-primary);
  background: var(--tg-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection where it matters */
input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* iOS Safari/WebView zooms in on focus when font-size < 16px on form fields.
   Force a minimum 16px on mobile to prevent the focus zoom. !important is needed
   to override Tailwind arbitrary value utilities like text-[15px]. */
@media (max-width: 767px) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}

* {
  box-sizing: border-box;
}

button {
  font-family: inherit;
}

textarea,
input {
  font-family: inherit;
  font-size: 15px;
  color: var(--tg-text-primary);
}

/* ============================================================
   Chat pattern — pattern.jpg (viewport-stable tiling via top anchor)
   ============================================================ */

.tg-chat-bg {
  position: relative;
  /* background-color: var(--tg-chat-bg);*/
  isolation: isolate;
}

.tg-chat-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./pattern.jpg");
  background-size: 200px auto;
  background-repeat: repeat;
  /* top: при росте тулбара (ответ) высота области уменьшается снизу — центр по
     вертикали сдвигался бы и «прыгал» тайл; якорь к верху = стабильная сетка */
  background-position: center top;
  opacity: 0.22;
  pointer-events: none;
  z-index: -1;
}

.dark .tg-chat-bg::before {
  opacity: 0.01;
  filter: brightness(0.7);
}

html[data-presentation="whatsapp"] .tg-chat-bg {
  background-color: var(--tg-chat-bg);
}

html[data-presentation="whatsapp"] .tg-chat-bg::before {
  background-image: url("./wa-chat-tile.svg"), var(--tg-chat-bg-pattern);
  background-size: 96px 96px, 360px 360px;
  background-repeat: repeat, repeat;
  background-position: center top, center top;
  filter: none;
  opacity: 0.55;
}

html[data-presentation="whatsapp"] body.dark .tg-chat-bg::before,
html[data-presentation="whatsapp"] .dark .tg-chat-bg::before {
  opacity: 0;
  background-image: none;
}

html[data-presentation="instagram"] .tg-chat-bg {
  background-color: var(--tg-chat-bg);
}

html[data-presentation="instagram"] .tg-chat-bg::before {
  background-image: url("./ig-chat-tile.svg"), var(--tg-chat-bg-pattern);
  background-size: 80px 80px, 400px 400px;
  background-repeat: repeat, repeat;
  background-position: center top, center top;
  filter: none;
  opacity: 0.4;
}

html[data-presentation="instagram"] body.dark .tg-chat-bg::before,
html[data-presentation="instagram"] .dark .tg-chat-bg::before {
  opacity: 0;
  background-image: none;
}

/* ============================================================
   Scrollbar
   ============================================================ */

.tg-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.tg-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.tg-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.dark .tg-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes tg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tg-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes tg-slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.tg-fade-in {
  animation: tg-fade-in 0.15s ease both;
  animation-iteration-count: 1;
}

.tg-slide-up {
  animation: tg-slide-up 0.2s ease both;
}

.tg-slide-in-right {
  animation: tg-slide-in-right 0.25s ease both;
}

/* Лёгкий «pop-in» для самого свежего входящего сообщения. */
@keyframes tg-pop-in {
  0% {
    transform: translateY(6px) scale(0.97);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.tg-pop-in {
  animation: tg-pop-in 0.18s ease both;
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
  background: var(--tg-accent-soft);
  color: var(--tg-text-primary);
}

/* ============================================================
   Buttons / interactive
   ============================================================ */

.tg-press {
  transition:
    background-color 0.12s ease,
    opacity 0.12s ease,
    transform 0.06s ease;
}

.tg-press:active {
  opacity: 0.7;
}

/* ============================================================
   Emoji-only message
   ============================================================ */

.tg-only-emoji {
  font-size: 48px;
  line-height: 1.1;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tg-only-emoji .tg-bubble-tail-in::after,
.tg-only-emoji .tg-bubble-tail-out::after {
  display: none;
}

/* Tail отбрасывает ту же тень, что и bubble — выглядит цельным силуэтом. */
.tg-bubble-shadow-wrap {
  filter: drop-shadow(0 1px 0.5px rgba(16, 35, 47, 0.13));
}
.dark .tg-bubble-shadow-wrap {
  filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.4));
}
