/* ==========================================================================
   TELEGRAM CLIENT MOCKUP - ACCURATE DESKTOP & MOBILE STYLING
   ========================================================================== */

/* Telegram Dark Theme (Default) */
.tg-preview-container {
  --tg-chat-bg: #0e1621;
  --tg-bubble-bg: #182533;
  --tg-bubble-border: rgba(255, 255, 255, 0.04);
  --tg-text: #f5f5f5;
  --tg-text-secondary: #708499;
  --tg-link: #5288c1;
  --tg-link-hover: #6ab2f2;
  --tg-code-bg: #242f3d;
  --tg-code-text: #e1e9f0;
  --tg-pre-bg: #131c26;
  --tg-pre-border: #233140;
  --tg-btn-bg: rgba(255, 255, 255, 0.08);
  --tg-btn-hover: rgba(255, 255, 255, 0.15);
  --tg-btn-active: rgba(255, 255, 255, 0.22);
  --tg-btn-text: #ffffff;
  --tg-spoiler-bg: rgba(255, 255, 255, 0.12);
  --tg-header-bg: #17212b;
  --tg-header-border: #202b36;
  --tg-accent-blue: #2481cc;
  --tg-bubble-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);

  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--tg-chat-bg);
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  user-select: text;
}

/* Telegram Light Theme */
.tg-preview-container.light-theme {
  --tg-chat-bg: #8ea684;
  --tg-bubble-bg: #ffffff;
  --tg-bubble-border: rgba(0, 0, 0, 0.06);
  --tg-text: #050505;
  --tg-text-secondary: #8799a6;
  --tg-link: #168acd;
  --tg-link-hover: #0c6fa8;
  --tg-code-bg: #f1f4f7;
  --tg-code-text: #1d252c;
  --tg-pre-bg: #f6f8fa;
  --tg-pre-border: #dbe2e8;
  --tg-btn-bg: rgba(255, 255, 255, 0.85);
  --tg-btn-hover: rgba(255, 255, 255, 1);
  --tg-btn-active: rgba(240, 243, 246, 1);
  --tg-btn-text: #222222;
  --tg-spoiler-bg: rgba(0, 0, 0, 0.12);
  --tg-header-bg: #ffffff;
  --tg-header-border: #e6e8eb;
  --tg-accent-blue: #2481cc;
  --tg-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Telegram Chat Wallpaper Pattern */
.tg-chat-wallpaper {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 24px 24px;
}

.tg-preview-container.light-theme .tg-chat-wallpaper {
  opacity: 0.15;
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4) 1px, transparent 1px);
}

/* Telegram Header / Channel Bar */
.tg-channel-header {
  height: 54px;
  background: var(--tg-header-bg);
  border-bottom: 1px solid var(--tg-header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 10;
  flex-shrink: 0;
}

.tg-channel-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tg-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2aabee, #2279b9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tg-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg-channel-text-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tg-channel-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.tg-channel-title-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-accent-blue);
  flex-shrink: 0;
}

.tg-channel-subscribers {
  font-size: 12px;
  color: var(--tg-text-secondary);
}

.tg-channel-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tg-header-icon-btn {
  background: transparent;
  border: none;
  color: var(--tg-text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.tg-header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tg-text);
}

.tg-preview-container.light-theme .tg-header-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Telegram Viewport / Scrollable Messages area */
.tg-chat-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}

.tg-message-stream {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: max-width 0.2s ease;
}

/* Mobile preview width mode */
.tg-preview-container.mobile-mode .tg-message-stream {
  max-width: 380px;
}

/* Date Pill in Chat */
.tg-date-pill {
  align-self: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  color: #e5ebf1;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  user-select: none;
}

.tg-preview-container.light-theme .tg-date-pill {
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

/* Main Message Wrapper */
.tg-message-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  align-self: flex-start;
  position: relative;
}

/* Telegram Message Bubble */
.tg-bubble {
  background: var(--tg-bubble-bg);
  color: var(--tg-text);
  border-radius: 12px 12px 12px 3px;
  border: 1px solid var(--tg-bubble-border);
  box-shadow: var(--tg-bubble-shadow);
  overflow: hidden;
  position: relative;
  transition: background-color 0.2s;
}

/* Media Block (Photo / Video) */
.tg-media-block {
  width: 100%;
  max-height: 380px;
  position: relative;
  background: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-media-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

.tg-media-video {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

/* Telegram Media Album (Collage Grid) */
.tg-media-album {
  width: 100%;
  display: grid;
  gap: 2px;
  background: #0e1621;
}

.tg-media-album.album-2 {
  grid-template-columns: 1fr 1fr;
  height: 220px;
}

.tg-media-album.album-3 {
  grid-template-columns: 1.8fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  height: 250px;
}
.tg-media-album.album-3 .tg-album-item:first-child {
  grid-row: span 2;
}

.tg-media-album.album-many {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 260px;
}

.tg-album-item {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #18222d;
}

.tg-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tg-album-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
}

.tg-media-placeholder {
  width: 100%;
  height: 200px;
  background: #1e2b38;
  color: #7b92a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
}

/* Message Text Box */
.tg-message-body {
  padding: 10px 14px 8px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tg-text);
  word-break: break-word;
  white-space: pre-wrap;
}

.tg-message-body a {
  color: var(--tg-link);
  text-decoration: underline;
  text-decoration-thickness: 1.2px;
  text-underline-offset: 2px;
}

.tg-message-body a:hover {
  color: var(--tg-link-hover);
}

.tg-message-body b,
.tg-message-body strong {
  font-weight: 700;
}

.tg-message-body i,
.tg-message-body em {
  font-style: italic;
}

.tg-message-body u,
.tg-message-body ins {
  text-decoration: underline;
}

.tg-message-body s,
.tg-message-body strike,
.tg-message-body del {
  text-decoration: line-through;
}

.tg-message-body code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  background: var(--tg-code-bg);
  color: var(--tg-code-text);
  padding: 1.5px 5px;
  border-radius: 4px;
}

.tg-message-body pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12.5px;
  background: var(--tg-pre-bg);
  border: 1px solid var(--tg-pre-border);
  padding: 10px 12px;
  border-radius: 6px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  position: relative;
}

/* Telegram Interactive Spoiler */
.tg-spoiler {
  background: var(--tg-spoiler-bg);
  color: transparent !important;
  text-shadow: 0 0 10px var(--tg-text);
  border-radius: 4px;
  padding: 1px 4px;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: inline;
  transition: all 0.25s ease;
  filter: blur(4.5px);
}

.tg-spoiler.revealed {
  color: inherit !important;
  text-shadow: none !important;
  filter: none !important;
  background: rgba(255, 255, 255, 0.05);
}

.tg-spoiler::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
}

.tg-spoiler.revealed::after {
  display: none;
}

/* Message Meta (Timestamp & Views) */
.tg-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11.5px;
  color: var(--tg-text-secondary);
  margin-top: 4px;
  user-select: none;
  float: right;
  margin-left: 10px;
  line-height: 1;
}

.tg-views-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tg-time-text {
  font-size: 11px;
}

.tg-check-icon {
  color: var(--tg-accent-blue);
  display: inline-flex;
}

/* Clear float after message text */
.tg-message-body::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   TELEGRAM INLINE KEYBOARD (Exact Grid Rendering)
   ========================================================================== */

.tg-inline-keyboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  width: 100%;
}

.tg-keyboard-row {
  display: flex;
  gap: 4px;
  width: 100%;
}

.tg-inline-btn {
  flex: 1;
  background: var(--tg-btn-bg);
  color: var(--tg-btn-text);
  border: 1px solid var(--tg-bubble-border);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tg-inline-btn:hover {
  background: var(--tg-btn-hover);
}

.tg-inline-btn:active {
  background: var(--tg-btn-active);
  transform: scale(0.99);
}

.tg-inline-btn .btn-external-icon {
  opacity: 0.6;
  font-size: 11px;
  flex-shrink: 0;
}

/* Telegram Bot API 7.0+ Button Color Styles */
.tg-inline-btn.btn-style-primary,
.tg-inline-btn.btn-style-blue {
  background: #2481cc;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
.tg-inline-btn.btn-style-primary:hover,
.tg-inline-btn.btn-style-blue:hover {
  background: #2c8de2;
}
.tg-inline-btn.btn-style-primary:active,
.tg-inline-btn.btn-style-blue:active {
  background: #1d72b5;
}

.tg-inline-btn.btn-style-success,
.tg-inline-btn.btn-style-green {
  background: #2ea843;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
.tg-inline-btn.btn-style-success:hover,
.tg-inline-btn.btn-style-green:hover {
  background: #36b94e;
}
.tg-inline-btn.btn-style-success:active,
.tg-inline-btn.btn-style-green:active {
  background: #27963b;
}

.tg-inline-btn.btn-style-danger,
.tg-inline-btn.btn-style-red {
  background: #df3f3f;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
.tg-inline-btn.btn-style-danger:hover,
.tg-inline-btn.btn-style-red:hover {
  background: #eb4d4d;
}
.tg-inline-btn.btn-style-danger:active,
.tg-inline-btn.btn-style-red:active {
  background: #c83232;
}

.tg-inline-btn.btn-style-primary .btn-external-icon,
.tg-inline-btn.btn-style-blue .btn-external-icon,
.tg-inline-btn.btn-style-success .btn-external-icon,
.tg-inline-btn.btn-style-green .btn-external-icon,
.tg-inline-btn.btn-style-danger .btn-external-icon,
.tg-inline-btn.btn-style-red .btn-external-icon {
  opacity: 0.9;
}

/* Light Theme Overrides */
.tg-preview-container.light-theme .tg-inline-btn.btn-style-primary,
.tg-preview-container.light-theme .tg-inline-btn.btn-style-blue {
  background: #2481cc;
  color: #ffffff;
}
.tg-preview-container.light-theme .tg-inline-btn.btn-style-success,
.tg-preview-container.light-theme .tg-inline-btn.btn-style-green {
  background: #31b545;
  color: #ffffff;
}
.tg-preview-container.light-theme .tg-inline-btn.btn-style-danger,
.tg-preview-container.light-theme .tg-inline-btn.btn-style-red {
  background: #e53935;
  color: #ffffff;
}

/* Empty State Placeholder in Preview */
.tg-empty-preview-prompt {
  color: var(--tg-text-secondary);
  font-style: italic;
  font-size: 13.5px;
}