/* custom.css — 对官方 telegram.css/theme.css 的最小本地补充。
 * 主要补齐：无外链图片的主题切换图标、返回顶部箭头、贴纸画布尺寸。 */

/* --- 主题切换图标：用内联 SVG 替代官方 webp（离线可用） --- */
.theme-toggle--static::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238a939d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .theme-toggle--static::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%238a939d'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}

/* --- 返回顶部 --- */
.back_to_top { display: flex; align-items: center; justify-content: center; gap: 6px; }
.back_to_top i { display: none; }
.back_to_top::before {
  content: "";
  width: 14px; height: 14px;
  border: solid #2481cc; border-width: 2px 0 0 2px;
  transform: rotate(45deg);
  margin-top: 6px;
}

/* --- 贴纸 --- */
.dev_page_tgsticker { width: 100%; aspect-ratio: 1 / 1; }
.tl_main_card_wrap .dev_page_tgsticker { max-width: 132px; margin: 0 auto; }

/* --- 主题切换 --- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.top_lang_select .chosen a { color: #2481cc; font-weight: 600; }

/* --- 主页 logo --- */
.tl_main_logo_title_image {
  width: 144px !important;
  height: 144px !important;
  margin: 0 auto 6px;
}

/* --- 下载按钮 --- */
.tl_main_download_link_tdesktop { display: block !important; background: none !important; }
.tl_main_download_link {
  height: auto !important;
  padding-top: 20px !important;
  padding-bottom: 15px !important;
  margin: 20px auto !important;
  max-width: 360px !important;
}
.tl_main_download_image__ios {
  position: static !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 200px !important;
  height: auto !important;
  margin: 0 auto 10px !important;
  background: none !important;
}
.tl_main_download_image__ios .dev_page_tgsticker { max-width: 180px; margin: 0 auto; }

/* --- 底部栏 --- */
.footer_columns_wrap { max-width: none !important; padding: 0 20px !important; }
.footer_column_telegram { flex: 1 1 auto !important; max-width: none !important; }
.footer_column_telegram h5 {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}

/* 语言下拉按钮调小 padding，防止蓝色横杠过大 */
.top_lang_select .dropdown-toggle {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 修复 Bootstrap 767px 以下把语言下拉变成静态内联的问题 */
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: absolute !important;
    background-color: #fff !important;
    border: 1px solid rgba(29,92,123,0.3) !important;
    box-shadow: 0 1px 1px rgba(20,60,83,0.1) !important;
    float: none;
    margin-top: 4px;
  }
  html[data-theme="dark"] .navbar-nav .open .dropdown-menu {
    background-color: var(--d-surface) !important;
    border-color: var(--d-border) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
  }
}

/* ================================================
   导航栏 flex 布局
   ================================================ */
@media (max-width: 767px) {
  .navbar-tg .container.clearfix::before,
  .navbar-tg .container.clearfix::after {
    display: none !important;
  }

  .navbar-tg .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 10px;
  }

  /* 左边的导航 (Home, Core) */
  .navbar-tg .navbar-nav:not(.navbar-right) {
    float: none !important;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
  }

  /* 右边的语言 */
  .navbar-tg .navbar-right {
    float: none !important;
    margin: 0 0 0 auto;
    display: flex;
    flex-direction: row;
  }

  .navbar-tg .navbar-nav > li {
    float: none;
  }

  .navbar-tg .navbar-nav > li > a {
    padding: 10px 8px;
    font-size: 13px;
    line-height: 18px;
  }

  .top_lang_select .dropdown-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    line-height: 18px;
  }

  /* 语言下拉框不超出屏幕 */
  .navbar-nav > li.top_lang_select > .dropdown-menu {
    width: auto !important;
    min-width: 150px !important;
    max-width: 85vw;
    right: -5px;
  }
  .top_lang_select .dropdown-menu li a {
    padding: 6px 14px;
    font-size: 13px;
  }

  /* Logo */
  .tl_main_logo_title_image { width: 80px !important; height: 80px !important; }
  .tl_main_logo_lead { font-size: 15px; max-width: 240px; }

  /* 下载 */
  .tl_main_download_link { max-width: 280px !important; padding-top: 12px !important; font-size: 14px; }
  .tl_main_download_image__ios { width: 140px !important; }
  .tl_main_download_image__ios .dev_page_tgsticker { max-width: 130px; }

  /* 卡片两列 */
  .tl_main_cards { display: flex; flex-wrap: wrap; justify-content: center; }
  .tl_main_card_cell { width: 50%; padding-left: 6px; padding-right: 6px; }
  .tl_main_card_wrap { max-width: 100%; padding: 10px 4px; }
  .tl_main_card_wrap .dev_page_tgsticker { max-width: 72px; }
  .tl_main_card_header { font-size: 16px; margin: 6px 0 3px; }
  .tl_main_card_lead { font-size: 12px; line-height: 1.4; }
  .tl_main_body_header { font-size: 18px; }

  /* 底部 */
  .footer_column_telegram h5 { flex-direction: column; align-items: flex-start; gap: 2px; }
  .footer_column_telegram h5 span { font-size: 12px !important; }
}

/* ================================================
   小屏手机 (≤480px)
   ================================================ */
@media (max-width: 480px) {
  .tl_main_logo_title_image { width: 64px !important; height: 64px !important; }
  .tl_main_logo_lead { font-size: 14px; max-width: 200px; }

  .tl_main_download_link { max-width: 240px !important; padding-top: 8px !important; font-size: 13px; }
  .tl_main_download_image__ios { width: 110px !important; }
  .tl_main_download_image__ios .dev_page_tgsticker { max-width: 100px; }

  .tl_main_card_wrap .dev_page_tgsticker { max-width: 56px; }
  .tl_main_card_header { font-size: 14px; }
  .tl_main_card_lead { font-size: 11px; }
  .tl_main_body_header { font-size: 16px; }

  .navbar-tg .navbar-nav > li > a { padding: 10px 5px; font-size: 12px; }
  .top_lang_select .dropdown-toggle { padding: 10px 5px; font-size: 12px; }
}