/* Desktop working space. Keep the touch layout below 1024px unchanged. */
@media (min-width: 1024px) {
  :root { --desktop-tools-width: 336px; }

  /* Reserve a real column for tools; chart and barrage coordinates stay aligned. */
  .chart-wrap, #dao-barrages { right: calc(var(--desktop-tools-width) + 32px); }
  #app:has(#controls.panel-minimized) .chart-wrap,
  #app:has(#controls.panel-minimized) #dao-barrages { right: 0; }
  #hud { top: 16px; left: 16px; width: 380px; }
  #hud .title { font-size: 1rem; }
  #hud .badge, #hud .market-live-status { font-size: .75rem; }
  #hud .pair-card { padding: 12px 14px; }
  #controls {
    top: 16px; right: 16px; bottom: auto; left: auto;
    width: var(--desktop-tools-width); max-width: none;
  }
  #controls .controls-card {
    max-height: calc(var(--viewport-height) - var(--nav-total) - 32px)!important;
    overflow-y: auto; scrollbar-width: thin; border-radius: 20px;
    border: 1px solid var(--line); background: var(--surface);
    box-shadow: 0 8px 28px var(--glass-shadow);
  }
  #controls .panel-head { padding: 8px 12px; }
  #controls .panel-actions { justify-content: flex-start; gap: 8px; }
  #controls .panel-actions .market-tool { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  #controls > .controls-card > .selector-card { padding: 10px 14px 14px; gap: 12px; }
  #controls label { font-size: .875rem; line-height: 1.4; color: var(--muted); }
  #controls input, #controls select { height: 40px; min-height: 40px; font-size: .875rem; }
  #controls .asset-selected-meta { overflow-wrap: anywhere; }
  #controls .dao-chart-options { padding: 10px 14px; }
  #controls .dao-chart-options summary { font-size: .875rem; }
  #controls .dao-chart-settings { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #controls .button-mobile .btn-row { flex-wrap: wrap; }
  #controls .button-mobile .btn { flex: 1 0 auto; }
  #controls .hint { flex-wrap: wrap; padding: 8px 14px; font-size: .75rem; line-height: 1.6; }
  #controls .data-notes { min-height: 0; padding: 4px 14px 14px; font-size: .75rem; line-height: 1.6; }
  #controls #data-date { font-size: .75rem; }
  #controls-toggle-btn { width: 42px; min-width: 42px; height: 42px; min-height: 42px; right: 20px; }

  /* Page width follows the task: a reading column for posts, a wider account. */
  #dao-social-layer.dao-page, #dao-account-layer.dao-page { --page-left: 24px; --page-right: 24px; }
  #dao-social-layer.dao-page > .picker-sheet {
    width: min(820px,calc(100% - 48px)); max-width: 820px;
    border-inline: 1px solid var(--line);
  }
  #dao-account-layer.dao-page > .picker-sheet { width: min(1200px,calc(100% - 48px)); max-width: 1200px; }
  #dao-social-layer .social-header { padding-top: 20px; }
  #dao-social-layer .social-heading > strong, #dao-account-layer .favorites-title { font-size: 1.625rem; letter-spacing: -.025em; }
  #dao-social-layer .social-tabs { margin-top: 10px; }
  #dao-social-layer .social-tabs button { padding-block: 12px; }
  #dao-social-layer .social-post { padding-block: 16px; }
  #dao-social-layer .social-post.unread { padding: 16px; }
  #dao-social-layer .social-text { font-size: 1rem; line-height: 1.65; }
  #dao-social-layer .social-trade {
    grid-template-columns: auto minmax(0,1fr); gap: 6px 16px; padding: 10px 14px;
  }
  #dao-social-layer .social-trade small { grid-column: 1/-1; }
  #dao-social-layer .social-action { min-height: 36px; font-size: .875rem; }
  #dao-social-layer .social-post-actions { margin-top: 8px; }
  #dao-auth-area { width: 100%; max-width: 460px; margin: 8px auto 32px; }
  #dao-auth-area .dao-welcome h2 { font-size: 1.625rem; }
  #dao-account-layer .dao-recovery-card { max-width: 600px; margin-inline: auto; }

  /* Account overview is a grid on desktop and remains a carousel on phones. */
  #dao-account-layer #dao-card-rail {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start;
    gap: 16px; margin: 16px 0 24px; padding: 0;
    overflow: visible; scroll-snap-type: none; scroll-padding: 0;
  }
  #dao-card-rail > .dao-swipe-card {
    min-width: 0; min-height: 280px; margin: 0; padding: 20px;
    border-radius: 22px; scroll-snap-align: none;
    box-shadow: inset 0 1px 0 var(--glass-highlight),0 6px 18px -10px var(--glass-shadow);
  }
  #dao-card-rail .dao-card-title { margin-bottom: 14px; font-size: 1rem; }
  #dao-card-rail #dao-account-equity, #dao-card-rail #dao-account-annual { font-size: 1.875rem; line-height: 1.3; letter-spacing: -.035em; }
  #dao-card-rail #dao-account-annual { margin: 14px 0; }
  #dao-card-rail .dao-performance-total { gap: 6px; margin: 10px 0 16px; }
  #dao-card-rail .dao-performance-grid { gap: 14px 10px; }
  #dao-card-rail .dao-growth-heading h3, #dao-card-rail .dao-chain-wallet-head strong { font-size: 1rem; margin-top: 6px; }
  #dao-card-rail .dao-chain-wallet-head { gap: 12px; }
  #dao-card-rail .dao-chain-wallet-head .btn { margin-top: 0; }
  #dao-card-rail .dao-compound { border-radius: 14px; }
  #dao-card-rail #dao-project-value { font-size: 1.75rem; }
  #dao-card-pagination { display: none; }
  .dao-account-ledgers { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
  .dao-account-section { min-width: 0; padding: 0 18px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
  .dao-account-section .dao-section-title { margin: 16px 0 8px; min-height: 38px; }
  .dao-account-section .dao-position, .dao-account-section .dao-trade-record { padding-block: 12px; }
  .dao-account-section .dao-bubble { font-size: 1rem; }

  /* Dialogs keep readable proportions, including on very tall monitors. */
  .picker-layer:not(.dao-page), .favorites-layer { align-items: center; padding: 24px; }
  #dao-trade-layer > .picker-sheet { width: min(580px,100%); max-height: min(760px,100%); }
  #asset-picker > .picker-sheet { max-height: min(800px,100%); }
  #favorites-layer > .favorites-sheet { max-height: min(760px,100%); }
  #rankings-layer > .ranking-sheet { width: min(960px,100%); height: min(800px,100%); max-height: 100%; }
  #rankings-layer .rank-row { padding-block: 9px; }
  #rankings-layer .rank-lists { gap: 24px; }
  #rankings-layer .rank-lists > :only-child { grid-column: 1/-1; }
  #rankings-layer .rank-chip, #rankings-layer .rank-return strong { font-size: .875rem; }
  #dao-settings-layer .dao-settings-sheet { max-height: min(760px,calc(var(--viewport-height) - 48px)); border-radius: 22px; }
  #dao-settings-layer .dao-setting-row, #dao-settings-layer .dao-settings-panel > summary { min-height: 64px; padding: 10px 14px; }
  #dao-settings-layer .dao-settings-group { margin-bottom: 20px; }
  #social-detail-layer:not(.is-chat) > .picker-sheet { width: min(680px,100%); max-height: min(800px,100%); }
  #social-detail-layer.is-chat {
    padding: 24px; align-items: center; background: rgba(3,10,20,.38);
  }
  #social-detail-layer.is-chat > .picker-sheet {
    width: min(920px,100%); height: min(820px,100%); max-height: 100%;
    border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 24px 64px -16px var(--float-shadow);
  }
  #social-detail-layer.is-chat #social-detail-scroll { padding: 20px 28px 24px; }
  #social-detail-layer.is-chat .favorites-head { padding-inline: 20px; }
  #social-detail-layer.is-chat #social-detail-content,
  #social-detail-layer #social-detail-composer .social-composer { max-width: 800px; }
  #social-detail-layer #social-detail-composer { padding: 14px 28px; }
  #social-detail-layer .social-chat-message { margin-bottom: 18px; }
  #social-detail-layer .social-chat-body { max-width: min(78%,600px); }
}

/* Chat stays edge-to-edge on phones and touch-sized viewports. */
/* The centered framed treatment is reserved for large, pointer-precise web layouts. */
@media (max-width: 1023px), (pointer: coarse) and (max-width: 1366px) {
  #social-detail-layer.is-chat {
    inset: 0;
    padding: 0;
    align-items: stretch;
    background: var(--bg);
  }

  #social-detail-layer.is-chat > .picker-sheet {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #social-detail-layer.is-chat .favorites-head {
    padding-inline: max(12px, var(--safe-right)) max(12px, var(--safe-left));
  }

  #social-detail-layer.is-chat #social-detail-scroll {
    padding: 20px max(14px, var(--safe-right)) 24px max(14px, var(--safe-left));
  }

  #social-detail-layer.is-chat #social-detail-content,
  #social-detail-layer.is-chat #social-detail-composer .social-composer {
    max-width: 860px;
  }

  #social-detail-layer.is-chat #social-detail-composer {
    padding: 12px max(14px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(14px, var(--safe-left));
  }
}