@import url('https://fontsapi.zeoseven.com/2104/main/result.css');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --app-height: 100lvh;
  }

  html, body, #root {
    width: 100vw;
    min-height: var(--app-height);
    height: var(--app-height);
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    @apply antialiased text-gray-900;
    background: transparent;

    /* Prevent text selection and default callouts on mobile */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS specific fixes for bottom gaps in PWA */
  body.ios-standalone {
    min-height: var(--app-height);
    height: var(--app-height);
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
  }

  body.ios-standalone #root {
    min-height: var(--app-height);
    height: var(--app-height);
  }
  
  /* Re-enable selection for inputs */
  input, textarea {
    user-select: text;
    -webkit-user-select: text;
  }
  /* Protect SVG colors */
  svg.preserve-color, .preserve-color svg {
    color: currentColor !important;
  }
}

@layer utilities {
  .glass-card {
    background-color: theme('colors.glass-bg');
    border: 1px solid theme('colors.glass-border');
    box-shadow: theme('boxShadow.glass');
  }

  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .glass-card {
      @apply backdrop-blur-glass;
      background-color: rgba(255, 255, 255, 0.4);
    }
  }

  @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .glass-card {
      background-color: rgba(255, 255, 255, 0.95);
    }
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* 隐藏滚动条但保留滚动能力 */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  @keyframes wiggle {
    0% {
      transform: rotate(-1.5deg);
    }
    50% {
      transform: rotate(1.5deg);
    }
    100% {
      transform: rotate(-1.5deg);
    }
  }

  .wiggle {
    animation: wiggle 0.25s ease-in-out infinite;
    transform-origin: 50% 70%;
  }

  .x-dm-peer-bubble {
    background-color: #E5E5EA !important;
    color: #000000 !important;
  }

  .x-dm-me-bubble {
    background-color: #1D9BF0 !important;
    color: #ffffff !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .wiggle {
      animation: none;
    }
  }
}

:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ui-card-subtitle-font { font-family: "Great_Vibes","Great Vibes",cursive !important; }

@font-face {
  font-family: "ZSFT-gq";
  src: url("https://fontsapi.zeoseven.com/gq/italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "ZSFT-gq";
  src: url("https://fontsapi.zeoseven.com/gq/main.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "ZSFT-he";
  src: url("https://fontsapi.zeoseven.com/he/main.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* 红包（发红包）按钮的宝石图标 */
.icon-gem {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12l4 6-10 13L2 9Z'/><path d='M11 3 8 9l4 13 4-13-3-6'/><path d='M2 9h20'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12l4 6-10 13L2 9Z'/><path d='M11 3 8 9l4 13 4-13-3-6'/><path d='M2 9h20'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* 红包按钮的红包图标（颜色跟随 currentColor 自动适配全局主题） */
.icon-receipt {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path fill='black' d='M380.48 563.925333C398.901333 508.949333 450.826667 469.333333 512 469.333333s113.098667 39.616 131.52 94.592A709.162667 709.162667 0 0 0 821.333333 505.781333V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256a53.333333 53.333333 0 0 0-53.333333 53.333334v303.114666a709.152 709.152 0 0 0 177.813333 58.144z m268.768 64.010667C639.573333 695.072 581.813333 746.666667 512 746.666667c-69.813333 0-127.573333-51.594667-137.248-118.72A773.109333 773.109333 0 0 1 202.666667 576.117333V821.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V576.128a773.12 773.12 0 0 1-172.085333 51.808zM256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m256 597.333334a74.666667 74.666667 0 1 0 0-149.333334 74.666667 74.666667 0 0 0 0 149.333334z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path fill='black' d='M380.48 563.925333C398.901333 508.949333 450.826667 469.333333 512 469.333333s113.098667 39.616 131.52 94.592A709.162667 709.162667 0 0 0 821.333333 505.781333V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256a53.333333 53.333333 0 0 0-53.333333 53.333334v303.114666a709.152 709.152 0 0 0 177.813333 58.144z m268.768 64.010667C639.573333 695.072 581.813333 746.666667 512 746.666667c-69.813333 0-127.573333-51.594667-137.248-118.72A773.109333 773.109333 0 0 1 202.666667 576.117333V821.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V576.128a773.12 773.12 0 0 1-172.085333 51.808zM256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m256 597.333334a74.666667 74.666667 0 1 0 0-149.333334 74.666667 74.666667 0 0 0 0 149.333334z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

span.app-logo-text {
  font-family: "ZSFT-he" !important;
}
span.meeting-ribbon-text {
  font-family: 'Pinyon Script', cursive !important;
}
.force-script-font, .force-script-font * {
  font-family: "ZSFT-gq" !important;
  font-weight: normal !important;
}
.mask-image-vertical {
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.animate-spin-slow {
  animation: spin 20s linear infinite;
}
.font-companion-script {
  font-family: "ZSFT-gq" !important;
  font-weight: normal;
}
.font-enter-exit {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
}

/* FloatingChatWindow: force fixed-positioned children inside WChatApp
   to use absolute positioning, so they stay inside the floating window */
.floating-chat-content .fixed {
  position: absolute !important;
}

/* ============ Item 1: Chat list left sidebar (我的/聊天/动态/记忆/收藏) ============ */
.floating-chat-content .floating-chat-sidebar-list {
  width: 100% !important;
  padding-top: 0 !important;
}

.floating-chat-content .floating-chat-sidebar-list-inner {
  gap: 0 !important;
  padding-left: 12px !important;
}

.floating-chat-content .floating-chat-sidebar-avatar {
  width: 44px !important;
  height: 44px !important;
}

.floating-chat-content .floating-chat-sidebar-btn {
  gap: 10px !important;
  font-size: 13px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.floating-chat-content .floating-chat-sidebar-icon {
  padding: 6px !important;
}

.floating-chat-content .floating-chat-sidebar-icon .w-6,
.floating-chat-content .floating-chat-sidebar-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* ============ Item 2: Chat room right settings sidebar (聊天设置) ============ */
.floating-chat-content .floating-chat-sidebar-settings {
  width: 100% !important;
}

/* Settings close button - hidden by default, shown only in floating mode */
.floating-chat-settings-close {
  display: none !important;
}

.floating-chat-content .floating-chat-settings-close {
  display: flex !important;
}

.floating-chat-content .floating-chat-sidebar-settings > div:first-child {
  padding: 12px !important;
}

.floating-chat-content .floating-chat-sidebar-settings > div:first-child h2 {
  font-size: 15px !important;
}

.floating-chat-content .floating-chat-sidebar-settings > div:nth-child(2) {
  padding: 16px !important;
  gap: 20px !important;
}

.floating-chat-content .floating-chat-sidebar-settings > div:nth-child(2) > div {
  gap: 8px !important;
}

.floating-chat-content .floating-chat-sidebar-settings input,
.floating-chat-content .floating-chat-sidebar-settings textarea {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 12px !important;
}

/* ============ Item 3: Plus menu buttons (加号菜单) ============ */
.floating-chat-content .floating-chat-plus-menu {
  width: 180px !important;
  /* Move menu up to avoid being covered by drag bar (drag bar is 36px tall at top) */
  margin-bottom: 48px !important;
}

.floating-chat-content .floating-chat-plus-menu-inner {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  overflow-y: auto !important;
  max-height: 280px !important;
}

.floating-chat-content .floating-chat-plus-btn {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 12px !important;
}

.floating-chat-content .floating-chat-plus-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* ============ General compression for chat list in floating window ============ */
.floating-chat-content .floating-chat-list-header {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: 8px !important;
}

.floating-chat-content .floating-chat-list-header > div:first-child > button,
.floating-chat-content .floating-chat-list-header > div:first-child > div > button {
  width: 32px !important;
  height: 32px !important;
}

.floating-chat-content .floating-chat-list-header .w-6,
.floating-chat-content .floating-chat-list-header svg.w-6 {
  width: 18px !important;
  height: 18px !important;
}

.floating-chat-content .floating-chat-list-header > div:last-child > button {
  width: 28px !important;
  height: 28px !important;
}

/* Compress content area padding */
.floating-chat-content .flex-1.overflow-y-auto.p-4 {
  padding: 8px !important;
}

/* Compress chat list spacing */
.floating-chat-content .space-y-6 {
  gap: 12px !important;
}

.floating-chat-content .space-y-4 {
  gap: 8px !important;
}

/* Compress "我的" tab avatar picker */
.floating-chat-content .max-w-2xl.mx-auto.space-y-6.pt-4 {
  padding-top: 8px !important;
  gap: 12px !important;
}

.floating-chat-content .max-w-2xl.mx-auto.space-y-6.pt-4 .w-16.h-16 {
  width: 40px !important;
  height: 40px !important;
}

/* Compress bottom bar in chat room */
.floating-chat-content .su-bottombar-container {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.floating-chat-content .su-bottombar-plus {
  padding: 4px !important;
}

.floating-chat-content .su-bottombar-plus svg {
  width: 16px !important;
  height: 16px !important;
}

.floating-chat-content .su-bottombar-inputwrap {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.floating-chat-content .su-bottombar-textarea {
  font-size: 12px !important;
}

.floating-chat-content .su-bottombar-btn {
  padding: 4px !important;
}

.floating-chat-content .su-bottombar-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* ============ 创意工坊「插入工具」设计期占位样式 ============ */
/* 仅作用于创意工坊实时预览区（.cw-design-mode），主屏渲染为自然内容，不显示占位框 */
.cw-design-mode .cw-insert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 22px;
  padding: 2px 8px;
  margin: 2px;
  border: 1px dashed rgba(99, 102, 241, 0.6);
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  font-size: 11px;
  font-family: -apple-system, system-ui, sans-serif;
  white-space: nowrap;
}
.cw-design-mode .cw-insert[data-insert="music"] {
  display: flex;
  width: 100%;
  min-height: 44px;
}
.cw-design-mode .cw-insert[data-insert="music"]::before {
  content: "音乐控件";
}
.cw-design-mode img.cw-insert {
  min-width: 48px;
  min-height: 48px;
  object-fit: cover;
  color: #6366f1;
}

/* 分支按钮图标：GitHub Octicon 风格的 git-pull-request
   通过 mask + currentColor 实现，自动适配明暗主题，工具栏与左下角完全一致 */
.icon-git-pull-request {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* 微爱设置-颜色选择器：整圆（去掉原生方形小窗），细白边 */
input[type="color"].welove-color-circle {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
input[type="color"].welove-color-circle::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"].welove-color-circle::-webkit-color-swatch {
  border: none;
  border-radius: 9999px;
}
input[type="color"].welove-color-circle::-moz-color-swatch {
  border: none;
  border-radius: 9999px;
}