/* Mobile app shell. Desktop retains the full marketplace dock and header. */
.mobile-app-nav { display:none; }
.pwa-update-banner { position:fixed; z-index:2147483646; right:16px; bottom:102px; display:flex; align-items:center; gap:10px; max-width:min(400px,calc(100vw - 32px)); border:1px solid #668aa4; border-radius:10px; padding:10px 12px; background:#111c25f7; box-shadow:0 14px 34px #0009; color:#eaf4fb; font:.78rem/1.35 "DM Sans",sans-serif; backdrop-filter:blur(12px); }.pwa-update-banner button{border:1px solid #e4bd58;border-radius:5px;padding:7px 9px;background:#e4bd58;color:#19150a;font:800 .65rem/1 "DM Mono",monospace;cursor:pointer;white-space:nowrap}
.mobile-create-sheet{display:grid;gap:10px}.mobile-create-sheet button{display:grid;gap:5px;width:100%;border:1px solid #405364;border-radius:9px;padding:15px;text-align:left;background:linear-gradient(135deg,#172430,#10171e);color:#eaf2f7;cursor:pointer}.mobile-create-sheet button:hover,.mobile-create-sheet button:focus-visible{border-color:#e4bd58;background:#202c35;outline:0}.mobile-create-sheet button b{color:#f4d373;font:800 .82rem/1 "DM Mono",monospace;text-transform:uppercase}.mobile-create-sheet button span{color:#aebdc8;font:.82rem/1.35 "DM Sans",sans-serif}
@media (max-width:680px) {
  /* Override the legacy narrow app-shell so pages can use the full phone
     viewport. Keep native vertical scrolling on the document, never a nested
     scrolling pane. */
  html,body { width:100% !important; max-width:100% !important; overflow-x:clip !important; overflow-y:auto !important; }
  body { padding-bottom:calc(106px + env(safe-area-inset-bottom)) !important; }
  .app-shell { width:100vw !important; min-width:0 !important; max-width:100vw !important; margin:0 !important; overflow:visible !important; }
  :is(button,a,input,select,textarea) { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  :is(input,select,textarea) { font-size:16px !important; }
  .bottom-nav { display:none !important; }
  .mobile-app-nav { position:fixed !important; z-index:2147483647; right:0 !important; bottom:0 !important; left:0 !important; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100vw !important; max-width:100vw !important; height:calc(96px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #354552; background:linear-gradient(180deg,#111923fa,#0b1016fa); box-shadow:0 -10px 26px #0007; backdrop-filter:blur(16px); }
  .mobile-app-nav button { display:grid; min-width:0; min-height:86px; place-content:center; gap:7px; border:0; background:transparent; color:#9cafbc; font:800 10px/1 "DM Sans",sans-serif; letter-spacing:0; cursor:pointer; }
  .mobile-app-nav button b { display:grid; width:34px; height:32px; place-items:center; margin:auto; color:#c5d3dd; font:700 29px/1 "DM Mono",monospace; }
  .mobile-app-nav button.active { color:#fff0bd; }
  .mobile-app-nav button.active b { color:#f2c95e; text-shadow:0 0 14px #e4bd5845; }
  .pwa-update-banner { right:12px; bottom:calc(112px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); }
  .listing-media-inputs .listing-upload-field { min-height:54px; }
  .listing-media-inputs input[type="file"], .profile-upload input[type="file"], .chat-image-upload input[type="file"] { font-size:16px; }
  .listing-media-inputs .listing-upload-field:first-child > span::after { display:block; margin-top:4px; color:#9fc1d5; font:700 .62rem/1.25 "DM Sans",sans-serif; content:"Choose from your camera or photo library"; }
  .listing-image-preview,.editor-image-preview { min-height:220px; }
  .profile-gallery-grid,.wanted-grid,.raffle-list,.community-thread-list { width:100%; }
}

/* A phone is a focused workspace: remove duplicate desktop controls, give the
   content one comfortable rhythm, and keep key marketplace actions thumbable. */
@media (max-width:680px) {
  .masthead { display:flex !important; justify-content:space-between !important; gap:9px; height:58px !important; min-height:58px !important; padding:0 12px !important; }
  .masthead .market-mode-control,.masthead .header-nav,.masthead .header-sell,.masthead .header-wanted { display:none !important; }
  /* The brand remains recognizable at a glance on a phone, while the account
     action stays a compact avatar target instead of competing with it. */
  .masthead .brand-group { flex:1 1 auto; min-width:0; overflow:visible; }
  .masthead .brand-group img { width:31px !important; height:31px !important; }
  .masthead .mast-word { margin-left:7px !important; }
  .masthead .mast-word a { display:block; overflow:visible; font-size:clamp(.62rem,3.2vw,.78rem) !important; letter-spacing:.01em !important; text-overflow:clip; white-space:nowrap; }
  .masthead .header-account { flex:0 0 38px; width:38px; min-width:38px; min-height:38px !important; height:38px; margin-left:auto !important; padding:3px !important; justify-content:center; border-radius:50% !important; }
  .masthead .header-account-mark,.masthead .header-account-mark img { border-radius:50% !important; overflow:hidden; }
  .masthead .header-account-identity,.masthead .header-account-chevron { display:none !important; }
  .masthead .header-account-mark { flex-basis:30px; width:30px; height:30px; }
  .masthead .header-signout { display:none !important; }

  .mode-tabs { position:sticky; z-index:30; top:0; min-height:42px; background:#101720f5 !important; box-shadow:0 5px 14px #0003; backdrop-filter:blur(12px); }
  .mode-tabs button { flex:1 1 50%; min-width:0; font-size:.76rem !important; letter-spacing:.15em !important; }
  .discovery { padding-top:10px !important; }
  .search-mode-bar { display:grid !important; grid-template-columns:minmax(0,1fr) auto auto; gap:7px !important; width:calc(100% - 24px) !important; margin-inline:auto !important; }
  .search-mode-bar .search { width:auto !important; min-height:44px !important; margin:0 !important; }
  .search-mode-bar .browse-mode-toggle,.search-mode-bar .metadata-toggle { min-width:44px; min-height:44px !important; padding-inline:9px !important; font-size:0 !important; }
  .search-mode-bar :is(.browse-mode-toggle,.metadata-toggle) kbd { margin:0 !important; font-size:.72rem !important; }
  .search-scope { width:calc(100% - 24px) !important; margin:10px auto 0 !important; gap:7px !important; padding:0 0 8px !important; scroll-padding-inline:4px; }
  .search-scope > section { padding:6px !important; border-radius:9px !important; }
  .search-scope > section > span { padding:2px 5px 6px !important; font-size:.5rem !important; }
  .search-scope button { min-height:36px !important; padding-inline:8px !important; font-size:.61rem !important; }

  .tag-search-layout { display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:8px; width:calc(100% - 24px) !important; margin-inline:auto; }
  .tag-search-layout .audience-quick-tags { grid-column:1/-1; }
  .tag-remove { min-height:42px; padding-inline:10px !important; }
  .tag-search { width:auto !important; margin:0 !important; }

  /* Tags mode uses one compact tool row on phones. The matching game button
     is always directly beside Remove tags instead of floating over discovery.
     This applies to Star Run in Conveyor and Puppy Jump in Doomscroll. */
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock {
    position:static !important;
    z-index:auto !important;
    display:grid !important;
    grid-column:1 / -1;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch !important;
    gap:8px !important;
    width:100% !important;
    margin:0 !important;
    overflow:visible !important;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > #remove-tags,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags {
    order:1;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    margin:0 !important;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud {
    order:2;
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > :is(.rocket-game-hud,.puppy-game-hud) small,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > :is(.rocket-game-hud,.puppy-game-hud) small {
    display:none !important;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > :is(.rocket-game-hud,.puppy-game-hud) > button,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > :is(.rocket-game-hud,.puppy-game-hud) > button {
    display:block !important;
    width:100% !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 8px !important;
    overflow:hidden;
    font-size:.59rem !important;
    line-height:1 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud[data-running="true"],
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud[data-running="true"] {
    grid-column:1 / -1;
    height:auto !important;
    min-height:0 !important;
    padding:7px !important;
  }
  .tag-search-layout :is(.rocket-game-hud,.puppy-game-hud)[data-running="true"] > :is(b,span,small,em) { display:none !important; }
  .tag-search-layout .mobile-game-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; width:100%; padding:4px; border:1px solid #34576d; border-radius:12px; background:linear-gradient(135deg,#0c1720e8,#13293aeb); box-shadow:inset 0 1px #ffffff12,0 8px 18px #0004; }
  .tag-search-layout .mobile-game-controls button { display:grid; min-width:0; min-height:44px; height:44px; place-items:center; border:1px solid #4f829d; border-radius:9px; background:linear-gradient(145deg,#1d4155,#102331); box-shadow:inset 0 1px #ffffff20,0 2px 0 #071118; color:#ebf9ff; font:900 1.08rem/1 system-ui,sans-serif; cursor:pointer; touch-action:manipulation; transition:transform .12s ease,filter .12s ease,border-color .12s ease; }
  .tag-search-layout .mobile-game-controls button[data-star-run-control="boost"],.tag-search-layout .mobile-game-controls button[data-puppy-jump-control="jump"] { border-color:#e4bd58; background:linear-gradient(145deg,#5a4618,#2b2511); color:#ffe69a; }
  .tag-search-layout .mobile-game-controls button[data-star-run-control="laser"],.tag-search-layout .mobile-game-controls button[data-puppy-jump-control="laser"] { border-color:#a36ddc; background:linear-gradient(145deg,#3e1f61,#211437); color:#f0d9ff; }
  .tag-search-layout .mobile-game-controls button:focus-visible { border-color:#fff1a6; outline:2px solid #fff1a6; outline-offset:2px; }
  .tag-search-layout .mobile-game-controls button:active { transform:translateY(2px); box-shadow:inset 0 2px 7px #0008; filter:brightness(1.18); }
  .browse-doomscroll .tag-search-layout .mobile-game-controls { border-color:#dc8d97; background:linear-gradient(135deg,#fff2df,#ffcfc8); box-shadow:inset 0 1px #ffffffa6,0 8px 18px #7a384433; }
  .browse-doomscroll .tag-search-layout .mobile-game-controls button { border-color:#c8737f; background:linear-gradient(145deg,#fff8e9,#ffd9d4); box-shadow:inset 0 1px #ffffff,0 2px 0 #9f5864; color:#793849; }
  .browse-doomscroll .tag-search-layout .mobile-game-controls button[data-star-run-control="boost"],.browse-doomscroll .tag-search-layout .mobile-game-controls button[data-puppy-jump-control="jump"] { border-color:#cf8b36; background:linear-gradient(145deg,#fff0b6,#ffd27c); color:#75430d; }
  .browse-doomscroll .tag-search-layout .mobile-game-controls button[data-star-run-control="laser"],.browse-doomscroll .tag-search-layout .mobile-game-controls button[data-puppy-jump-control="laser"] { border-color:#b76a9f; background:linear-gradient(145deg,#ffd6ec,#f6a9d2); color:#762857; }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock + .tag-search,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock + .tag-search {
    grid-column:1 / -1;
  }
  .popular-tags,.live-auction-rail,.popular-listing-rail,.popular-entity-rail { width:calc(100% - 24px) !important; margin-inline:auto !important; border-radius:11px !important; }
  .popular-tags { padding-block:8px !important; }
  .listing-filter-controls { width:calc(100% - 24px) !important; margin:9px auto 0 !important; scroll-snap-type:x proximity; }
  .listing-filter-controls > * { scroll-snap-align:start; min-height:42px !important; }
  .listing-filter-controls .sort-listings { display:flex; align-items:center; gap:6px; padding-inline:8px; }

  .market-head { width:calc(100% - 24px); height:auto !important; min-height:38px; margin:10px auto 0; padding:10px 2px !important; font-size:.62rem !important; }
  .listing-stream { gap:10px; padding:0 12px 16px !important; background:transparent !important; }
  .listing { overflow:hidden; border-radius:12px !important; border:1px solid #34424d !important; box-shadow:0 10px 24px #0005; }
  .collector-head { min-height:52px; height:auto !important; padding:8px 10px !important; }
  .collector-head time { font-size:.58rem !important; }
  .media { height:min(112vw,430px) !important; padding:4px !important; }
  .listing-copy { padding:10px 11px 2px !important; text-align:left !important; }
  .listing h2 { font-size:.82rem !important; line-height:1.28 !important; }
  .listing-copy p { display:-webkit-box; border-width:1px !important; font-size:.73rem !important; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
  .listing footer.listing-actions { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; min-height:0 !important; padding:7px !important; }
  .listing-actions > * { min-width:0 !important; min-height:40px !important; }
  .listing-actions .action-buy { grid-column:span 2; }
  .listing-actions .vote-control { grid-column:span 2; }
  .listing-actions .comment-button span { display:inline !important; }

  .app-section-page { padding:14px 12px calc(126px + env(safe-area-inset-bottom)) !important; }
  .app-section-intro { gap:7px; padding:17px !important; border-radius:12px 12px 8px 8px !important; }
  .app-section-intro h1 { font-size:clamp(1.55rem,7vw,2.15rem) !important; }
  .app-section-intro p { font-size:.88rem !important; line-height:1.5 !important; }
  .app-section-content { gap:12px !important; padding-top:12px !important; }
  /* Every content tab gets the same predictable phone width and natural page
     scroll. This prevents gallery, community, and chat panels from creating
     a hidden horizontal canvas or a second trapped scroll area. */
  .app-section-page,.app-section-content,.profile-workspace,.community-workspace,.voice-room-page,.wanted-board,.wanted-request-page,.conversation-workspace { min-width:0 !important; max-width:100% !important; }
  .profile-workspace,.community-workspace,.voice-room-page,.wanted-board,.wanted-request-page { border-radius:10px; }
  .community-workspace,.voice-room-page,.wanted-board,.wanted-request-page { overflow-x:clip !important; }
  .profile-hero,.community-workspace > header { gap:12px !important; }
  .profile-footer,.account-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .profile-footer .entity-primary:last-child { grid-column:1/-1; }
  .community-thread { padding:14px !important; }
  .community-post-form,.community-reply-form { gap:9px !important; }

  dialog,#modal { padding:16px 12px calc(92px + env(safe-area-inset-bottom)) !important; }
  #modal .close { position:sticky; z-index:3; top:0; float:right; width:40px; height:40px; border:1px solid #526472; border-radius:50%; background:#111923; }
  .listing-publish-bar,body.app-section-listing .listing-publish-bar { bottom:calc(106px + env(safe-area-inset-bottom)) !important; border-radius:10px 10px 0 0; box-shadow:0 -12px 28px #0008; }
  .mobile-app-nav { height:calc(96px + env(safe-area-inset-bottom)) !important; }
  .mobile-app-nav button { min-height:86px; font-size:10px !important; }
  .mobile-app-nav button b { font-size:29px; }
}

/* Dense browse controls for phones and landscape phones. Every option remains
   available by swiping the rail; the row no longer dominates the screen. */
@media (max-width:900px) {
  .listing-filter-controls {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    min-height:0 !important;
    padding:4px 5px !important;
    border-radius:8px !important;
    scrollbar-width:none;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .listing-filter-controls::-webkit-scrollbar { display:none; }
  .listing-filter-controls > *,
  .listing-filter-controls button,
  .listing-filter-controls select,
  .listing-filter-controls input {
    min-height:34px !important;
    height:34px !important;
    font-size:.58rem !important;
    line-height:1 !important;
  }
  .listing-filter-controls > * { flex:0 0 auto !important; }
  .listing-filter-controls button { padding:6px 8px !important; letter-spacing:.02em !important; }
  .listing-filter-controls .viewer-location { width:max-content !important; margin-left:0 !important; padding-inline:8px !important; font-size:0 !important; }
  .listing-filter-controls .viewer-location::after { content:"Near me"; font-size:.6rem; }
  .listing-filter-controls .sort-listings,
  .listing-filter-controls .price-range { gap:4px !important; color:transparent !important; font-size:0 !important; }
  .listing-filter-controls .sort-listings { padding:0 !important; }
  .listing-filter-controls .sort-listings select { width:148px; min-width:148px !important; padding:5px 28px 5px 9px !important; color:#d8e3ea !important; font-size:.64rem !important; white-space:nowrap; }
  .listing-filter-controls .price-range { display:flex !important; align-items:center; padding:0 !important; }
  .listing-filter-controls .price-range input { width:68px; min-width:68px !important; padding:5px 7px !important; color:#d8e3ea !important; font-size:.6rem !important; }
  .listing-filter-controls .price-range span { color:#8998a4 !important; font-size:.7rem !important; }
  /* Mobile uses concise names instead of shrinking desktop labels until they
     become unreadable. The source text stays in the accessibility tree. */
  .listing-filter-controls .checkout-preference { flex:0 0 auto; white-space:nowrap; font-size:0 !important; }
  .listing-filter-controls [data-checkout-location]::after { content:"Address"; font-size:.6rem; }
  .listing-filter-controls [data-checkout-payment]::after { content:"PayPal"; font-size:.6rem; }
  .listing-filter-controls [data-checkout-delivery]::after { content:"USPS"; font-size:.6rem; }
  .listing-filter-controls [data-checkout-estimate]::after { content:"EST"; font-size:.6rem; }
  .listing-filter-controls .private-shipping-settings { width:max-content !important; margin-left:0 !important; flex:0 0 auto; max-width:none; overflow:visible; text-overflow:clip; font-size:0 !important; }
  .listing-filter-controls .private-shipping-settings::after { content:"Shipping"; font-size:.6rem; }

  /* Older shared button rules load a full desktop label at this breakpoint.
     Give the rail deterministic chip widths and paint only its short label. */
  body .listing-filter-controls button.viewer-location,
  body .listing-filter-controls button.checkout-preference,
  body .listing-filter-controls button.private-shipping-settings {
    box-sizing:border-box !important;
    overflow:hidden !important;
    color:transparent !important;
    font-size:0 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }
  body .listing-filter-controls button.viewer-location { width:68px !important; min-width:68px !important; max-width:68px !important; }
  body .listing-filter-controls button[data-checkout-location] { width:66px !important; min-width:66px !important; max-width:66px !important; }
  body .listing-filter-controls button[data-checkout-payment] { width:62px !important; min-width:62px !important; max-width:62px !important; }
  body .listing-filter-controls button[data-checkout-delivery] { width:54px !important; min-width:54px !important; max-width:54px !important; }
  body .listing-filter-controls button[data-checkout-estimate] { width:46px !important; min-width:46px !important; max-width:46px !important; }
  body .listing-filter-controls button.private-shipping-settings { width:76px !important; min-width:76px !important; max-width:76px !important; }
  body .listing-filter-controls button.viewer-location::after,
  body .listing-filter-controls button.checkout-preference::after,
  body .listing-filter-controls button.private-shipping-settings::after { color:#d8e3ea !important; font-size:.6rem !important; }
}

@media (max-width:420px) {
  .listing-filter-controls { width:calc(100% - 16px) !important; margin-top:6px !important; }
  .listing-filter-controls > *,
  .listing-filter-controls button,
  .listing-filter-controls select,
  .listing-filter-controls input { min-height:32px !important; height:32px !important; }
  .listing-filter-controls button { padding-inline:7px !important; font-size:.54rem !important; }
  .listing-filter-controls .viewer-location,
  .listing-filter-controls .checkout-preference,
  .listing-filter-controls .private-shipping-settings { font-size:0 !important; }
  .listing-filter-controls .viewer-location::after,
  .listing-filter-controls .checkout-preference::after,
  .listing-filter-controls .private-shipping-settings::after { font-size:.55rem !important; }
  .listing-filter-controls .sort-listings select { width:140px; min-width:140px !important; padding-right:27px !important; font-size:.61rem !important; }
  .listing-filter-controls .price-range input { width:60px; min-width:60px !important; }
}

/* Games keep their paint work isolated from the marketplace feed. This avoids
   layout invalidation from each moving sprite on older phones. */
@media (max-width:680px) {
  :is(.rocket-game-playfield,.puppy-game-playfield,.gothic-hunt-game,.sell-lava-game,.account-sailing-game,.auction-falls-game,.jungle-snake-game) { contain:layout paint style; }
  :is(.rocket-game-layer,.puppy-game-layer) { will-change:contents; }
  /* Fixed blurs and large moving fog layers are costly on phone GPUs. Keep
     the visual language, but simplify compositing while preserving gameplay. */
  .mobile-app-nav,.pwa-update-banner,.voice-dock { backdrop-filter:none !important; }
  .listing { content-visibility:auto; contain-intrinsic-size:520px; }
  .browse-conveyor .conveyor-smog-layer { opacity:.5 !important; contain:paint; }
  .browse-conveyor .conveyor-smog-layer span,.browse-conveyor .conveyor-smog-layer::before,.browse-conveyor .conveyor-smog-layer::after { filter:blur(22px) !important; animation-duration:18s !important; }
  .conveyor-orbit-layer { contain:paint; opacity:.72; }
  .conveyor-orbit-layer :is(i,b,svg) { animation-duration:28s !important; }
}

/* Phone browse tools: the game launcher and tag reset read as one compact,
   touch-first action strip instead of two unrelated utility buttons. */
@media (max-width:680px) {
  /* The HUD is a passive grouping element. Only its Play control is styled as
     a button, avoiding a visually nested-button treatment on small screens. */
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud {
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock {
    padding:5px !important;
    border:1px solid #365a70 !important;
    border-radius:13px !important;
    background:linear-gradient(135deg,#08131cfa,#102333f7) !important;
    box-shadow:inset 0 1px #ffffff14,0 8px 20px #00000042 !important;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > #remove-tags,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid #4b6475 !important;
    border-radius:9px !important;
    background:linear-gradient(145deg,#162634,#0d1821) !important;
    box-shadow:inset 0 1px #ffffff12,0 2px 0 #050b10 !important;
    color:#d9eaf4 !important;
    font:800 .6rem/1 "DM Mono",monospace !important;
    letter-spacing:.065em !important;
    text-transform:uppercase;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > #remove-tags::before,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags::before {
    content:"×";
    display:grid;
    width:17px;
    height:17px;
    place-items:center;
    border:1px solid #cf7880;
    border-radius:50%;
    color:#ffc4c8;
    font:900 .86rem/1 system-ui,sans-serif;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > #remove-tags:active,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags:active { transform:translateY(2px); box-shadow:inset 0 2px 8px #0009 !important; }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > #remove-tags:hover,
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > #remove-tags:focus-visible { border-color:#d78a90 !important; background:#202737 !important; color:#fff; outline:0; }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud > button,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud > button {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid #e3bf5a !important;
    border-radius:9px !important;
    background:linear-gradient(145deg,#f5d56a,#bc8926) !important;
    box-shadow:inset 0 1px #fff6c2,0 2px 0 #6e4810 !important;
    color:#18212a !important;
    font:900 .61rem/1 "DM Mono",monospace !important;
    letter-spacing:.045em !important;
    text-shadow:0 1px #ffffff55;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
  }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud > button::before { content:"✦"; font:900 .85rem/1 system-ui,sans-serif; }
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud > button::before { content:"☁"; font:900 .85rem/1 system-ui,sans-serif; }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud > button:active,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud > button:active { transform:translateY(2px); box-shadow:inset 0 2px 9px #6b4812,0 0 0 transparent !important; filter:saturate(1.12); }
  .browse-conveyor .tag-search-layout > .conveyor-utility-dock > .rocket-game-hud > button:focus-visible,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > .puppy-game-hud > button:focus-visible { outline:2px solid #fff1a8; outline-offset:2px; }
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock {
    border-color:#d7878d !important;
    background:linear-gradient(135deg,#fff0ddfa,#ffc9c1f7) !important;
    box-shadow:inset 0 1px #ffffff9c,0 8px 20px #7838472e !important;
  }
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags {
    border-color:#d18b94 !important;
    background:linear-gradient(145deg,#fffaf0,#ffe0d5) !important;
    box-shadow:inset 0 1px #fff,0 2px 0 #b86f79 !important;
    color:#713747 !important;
  }
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags::before { border-color:#b96878; color:#a83d59; }
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags:hover,
  .browse-doomscroll .tag-search-layout > .doomscroll-utility-dock > #remove-tags:focus-visible { border-color:#a95367 !important; background:#fff0e4 !important; color:#572535 !important; }
}

/* Messaging and comments need a single, comfortable interaction rhythm on a
   phone: conversation first, large hit areas second, and a composer that
   remains reachable above the native app dock. */
@media (max-width:680px) {
  body.app-section-chat .app-section-content { padding:10px 10px calc(116px + env(safe-area-inset-bottom)) !important; }
  body.app-section-chat .chat-command-center { gap:10px !important; }
  body.app-section-chat .chat-sidebar,
  body.app-section-chat .chat-secondary { border-radius:13px !important; }
  body.app-section-chat .chat-sidebar { min-height:0 !important; }
  body.app-section-chat .chat-section-heading { min-height:52px; padding:10px 11px !important; }
  body.app-section-chat .chat-section-heading h3 { font-size:.92rem !important; }
  body.app-section-chat .chat-conversation-row,
  body.app-section-chat .suggestion-card { min-height:70px; padding:11px 10px !important; border-radius:10px !important; touch-action:manipulation; }
  body.app-section-chat .chat-conversation-row:active,
  body.app-section-chat .suggestion-card:active { transform:scale(.985); background:#173621 !important; }
  body.app-section-chat .chat-avatar { width:40px; height:40px; }
  body.app-section-chat .chat-conversation-row strong,
  body.app-section-chat .suggestion-card strong { font-size:.86rem; }
  body.app-section-chat .chat-conversation-row i { padding:6px 0 6px 6px; font-size:.56rem; }

  body.app-section-chat .conversation-workspace {
    display:flex !important;
    flex-direction:column;
    min-height:calc(100dvh - 138px) !important;
    max-height:calc(100dvh - 94px) !important;
    overflow:hidden !important;
    border:1px solid #3a684b !important;
    border-radius:14px !important;
  }
  body.app-section-chat .conversation-header {
    display:flex !important;
    flex-wrap:wrap;
    align-items:center !important;
    gap:7px !important;
    min-height:0 !important;
    padding:10px !important;
  }
  body.app-section-chat .conversation-header > [data-chat] { order:0; min-height:38px; padding-inline:9px; font-size:.58rem; }
  body.app-section-chat .conversation-header .chat-avatar { order:1; width:34px; height:34px; margin:0; }
  body.app-section-chat .conversation-identity { order:2; flex:1 1 120px; min-width:0 !important; margin:0 !important; }
  body.app-section-chat .conversation-identity strong { display:block; overflow:hidden; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }
  body.app-section-chat .conversation-header .start-chat-trade,
  body.app-section-chat .conversation-header .voice-start { order:3; flex:1 1 calc(33.333% - 6px); min-width:0; min-height:39px; padding:7px 5px; border-radius:8px; font-size:.55rem; line-height:1.15; text-align:center; white-space:normal; }
  body.app-section-chat .collector-thread { flex:1 1 auto; min-height:180px; padding:13px 11px !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  body.app-section-chat .collector-thread .post-comment { max-width:92%; margin:7px 0; padding:10px 11px; font-size:.88rem; line-height:1.45; }
  body.app-section-chat .collector-thread .post-comment.is-own-message { margin-left:auto; }
  body.app-section-chat .chat-message-avatar { width:27px; height:27px; }
  body.app-section-chat .chat-message-copy > img { max-width:100%; max-height:260px; }
  body.app-section-chat .collector-message-form {
    position:sticky;
    bottom:0;
    z-index:2;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 76px;
    gap:7px !important;
    padding:10px !important;
    border-top:1px solid #3b6849 !important;
    box-shadow:0 -10px 24px #0209058f;
  }
  body.app-section-chat .collector-message-form textarea { grid-column:1 / -1; min-height:52px !important; max-height:156px; padding:12px !important; font-size:16px !important; line-height:1.35; resize:none; }
  body.app-section-chat .collector-message-form .chat-image-upload { grid-column:1; display:grid; width:42px; height:42px; place-items:center; overflow:hidden; border:1px solid #497555; border-radius:9px; background:#10271a; color:transparent; font-size:0; cursor:pointer; touch-action:manipulation; }
  body.app-section-chat .collector-message-form .chat-image-upload::before { content:"＋"; color:#dfffa9; font:500 1.35rem/1 system-ui,sans-serif; }
  body.app-section-chat .collector-message-form .chat-image-upload input { position:absolute; width:1px; height:1px; opacity:0; }
  body.app-section-chat .collector-message-form .chat-compose-hint { grid-column:2; align-self:center; overflow:hidden; color:#9fcaa3; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
  body.app-section-chat .collector-message-form button[type="submit"] { grid-column:3; width:76px; min-width:0 !important; min-height:42px; padding:0 8px; border-radius:9px; font-size:.67rem; touch-action:manipulation; }
  body.app-section-chat .collector-message-form .chat-image-status { grid-column:1 / -1; min-height:0; color:#d9f2ac; font-size:.61rem; }

  .comment-dialog { padding:62px 12px calc(20px + env(safe-area-inset-bottom)) !important; }
  .comment-dialog #modal-content { padding-bottom:10px !important; }
  .comment-dialog .modal-title { overflow:hidden; font-size:.77rem !important; text-overflow:ellipsis; white-space:nowrap; }
  .comment-dialog .modal-copy { padding-bottom:11px !important; font-size:.7rem; }
  .comment-workspace { padding-bottom:12px !important; }
  .comment-workspace-head { gap:9px !important; padding-bottom:12px !important; }
  .comment-workspace-head h3 { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:1rem !important; }
  .comment-sort { gap:5px; }
  .comment-sort button { min-height:36px; padding:7px 9px; font-size:.62rem; touch-action:manipulation; }
  .comment-thread-list { margin-top:10px; }
  .comment-workspace .post-comment { padding:13px 0; }
  .comment-workspace .post-comment>header { gap:8px; }
  .comment-workspace .post-comment>p { overflow-wrap:anywhere; font-size:.9rem; line-height:1.48; }
  .comment-replies { margin-left:7px; padding-left:9px; }
  .comment-workspace .comment-actions { min-height:34px; gap:8px; }
  .comment-vote { width:34px; height:32px; border-radius:8px; touch-action:manipulation; }
  .comment-workspace .comment-reply { min-height:32px; padding:7px 8px; }
  .comment-dialog .comment-form { margin-top:18px !important; padding:11px !important; border-radius:13px 13px 0 0 !important; }
  .comment-dialog .comment-form::before { font-size:.54rem; }
  .comment-dialog .comment-form textarea { min-height:84px !important; max-height:156px; padding:11px 12px !important; font-size:16px !important; line-height:1.42; resize:none; }
  .comment-dialog .comment-composer-tools { gap:7px !important; }
  .comment-dialog .comment-quick-emoji { min-height:40px; padding:4px 5px; }
  .comment-dialog .comment-composer-tools .comment-quick-emoji button { width:34px !important; height:34px !important; min-height:34px !important; }
  .comment-dialog .comment-record { min-height:40px; padding:8px 10px !important; }
  .comment-dialog .comment-media-field { min-height:40px; }
  .comment-dialog .comment-workspace .comment-form footer button[type="submit"] { min-height:46px; font-size:.68rem !important; touch-action:manipulation; }
  .comment-dialog .comment-emoji-picker { max-height:265px; padding:9px; }
  .comment-dialog .comment-emoji-grid { grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); max-height:175px; }
  .comment-dialog .comment-emoji-grid button { min-height:38px; }
}