/* Mobile-first overrides for caiziyou pages.
   Desktop layouts are intentionally left to each page's existing CSS. */
@media (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0;
  }

  img,
  svg,
  canvas,
  video,
  iframe {
    max-width: 100%;
  }

  svg {
    height: auto;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100%;
    font: inherit;
  }

  pre,
  code,
  .tool-output,
  .q-text,
  .post-content,
  .essay-text,
  .article-body,
  .detail,
  .modal-bd {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .page,
  .container,
  .app,
  .main,
  .panel-scroll,
  .modal-bd {
    min-width: 0;
  }

  .top,
  .toolbar,
  .top-inner,
  .header,
  .hero-inner,
  .header-actions,
  .head-actions,
  .form-actions,
  .tool-buttons,
  .video-actions,
  .stats,
  .metrics,
  .tabs,
  .filters,
  .zk-subnav {
    max-width: 100%;
  }

  .header-actions,
  .head-actions,
  .tool-buttons,
  .tabs,
  .filters,
  .zk-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .header-actions::-webkit-scrollbar,
  .head-actions::-webkit-scrollbar,
  .tool-buttons::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .filters::-webkit-scrollbar,
  .zk-subnav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-edge: 12px;
    --mobile-bottom-space: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  html,
  body {
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
  }

  .page,
  .container {
    width: 100%;
    padding-left: var(--mobile-edge) !important;
    padding-right: var(--mobile-edge) !important;
  }

  .grid,
  .detail-grid,
  .content-grid,
  .layout,
  .completion,
  .subject-grid,
  .form-grid,
  .set-grid,
  .row2,
  .community-grid,
  .tool-grid {
    grid-template-columns: 1fr !important;
  }

  .stats,
  .metrics,
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card,
  .q-box,
  .builder,
  .upload-section,
  .post-card,
  .article-body,
  .detail,
  .modal,
  .modal-box,
  .hero-inner {
    border-radius: 10px !important;
  }

  .btn,
  .back-btn,
  .tool-btn,
  .zk-nav-btn,
  .close-btn,
  .community-join-btn {
    min-height: 38px;
    white-space: nowrap;
  }

  .header-actions .btn,
  .head-actions .btn,
  .tool-buttons .btn,
  .tabs > *,
  .filters > *,
  .zk-subnav > * {
    flex: 0 0 auto;
  }

  .form-actions,
  .modal-foot,
  .chat-input-area,
  .video-main,
  .task,
  .source-row {
    align-items: stretch;
  }

  .modal-overlay,
  .modal-ov {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 8px !important;
  }

  .modal,
  .modal-box {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .modal-bd,
  .panel-scroll,
  .container.has-bottom-nav {
    padding-bottom: var(--mobile-bottom-space) !important;
  }

  #app {
    width: 100%;
    height: calc(100dvh - 52px) !important;
  }

  .topbar {
    height: 52px;
    padding: 0 10px !important;
  }

  .topbar-left {
    min-width: 0;
    margin-right: 8px !important;
  }

  .topbar-logo {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-right {
    margin-left: 8px !important;
  }

  .topbar-nav-dropdown,
  .topbar-dropdown {
    max-width: calc(100vw - 24px);
  }

  .panel-bar {
    min-height: 48px;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .panel-bar.admin-panel {
    padding-left: 12px !important;
  }

  .panel-bar span {
    min-width: 0;
  }

  .chat-app {
    min-width: 0;
  }

  .chat-list-col {
    max-width: none !important;
  }

  .chat-conv-col {
    top: 52px !important;
  }

  .chat-msg .bubble {
    max-width: min(82vw, 520px) !important;
  }

  .chat-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .diagram,
  .thumb,
  .carousel-slide,
  .community-card-banner {
    height: auto !important;
    min-height: 150px;
  }
}

@media (max-width: 520px) {
  :root {
    --mobile-edge: 10px;
    --mobile-bottom-space: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .metrics,
  .admin-stat-grid {
    grid-template-columns: 1fr !important;
  }

  .title h1,
  .header h1,
  .hero h1 {
    font-size: clamp(18px, 6vw, 22px) !important;
    line-height: 1.2 !important;
  }

  .form-actions,
  .modal-foot .actions,
  .chat-input-area,
  .head-actions {
    flex-direction: column !important;
  }

  .form-actions .btn,
  .modal-foot .actions button,
  .chat-input-area button,
  .head-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .tool-btn .txt,
  .close-btn .txt {
    display: none !important;
  }

  .q-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}