@media (max-width: 768px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  body:has(#appShell:not(.hidden)){
    height:100dvh;
    overflow:hidden;
  }

  header{
    height:auto;
    min-height:var(--headerH);
    padding:10px 12px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
  }

  header .title,
  .headerRight,
  .sessionBar{
    min-width:0;
  }

  header .title{
    gap:10px;
  }

  .brandLogo{
    height:34px;
    flex:0 0 auto;
  }

  .brandText{
    font-size:17px;
    font-weight:700;
    padding-left:10px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .headerRight{
    justify-self:end;
    position:relative;
  }

  .sessionBar{
    max-width:min(46vw, 210px);
    gap:8px;
    padding:7px 9px;
    font-size:11px;
  }

  .sessionBar > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sessionBtn{
    flex:0 0 auto;
  }

  .sessionAvatar{
    width:36px;
    height:36px;
    border:none;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-size:13px;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(20,21,63,.14);
  }

  .sessionAvatar.hidden{
    display:none !important;
  }

  body:has(#authGate:not(.hidden)) .sessionAvatar{
    display:none !important;
  }

  .sessionAvatar:hover{
    background:var(--primary2);
  }

  .sessionAvatar span{
    display:block;
    line-height:1;
  }

  .headerRight .sessionBar{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    max-width:none;
    min-width:210px;
    padding:12px 14px;
    border-radius:18px;
    box-shadow:0 16px 32px rgba(20,21,63,.16);
    display:none;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    z-index:250;
  }

  .headerRight.is-open .sessionBar{
    display:flex;
  }

  .headerRight .sessionBar > span{
    min-width:0;
    flex:1 1 auto;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.45;
    font-size:13px;
  }

  .headerRight .sessionBtn{
    flex:0 0 auto;
    padding:0;
    margin-left:auto;
    font-size:13px;
    white-space:nowrap;
  }

  .shell{
    height:calc(100dvh - var(--headerH));
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .shell.hidden{
    display:none !important;
  }

  .sidebar{
    position:sticky;
    top:0;
    width:100%;
    height:auto;
    min-height:auto;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:10px;
    padding:12px;
    border-right:none;
    border-bottom:1px solid var(--border-soft);
    z-index:180;
    -webkit-overflow-scrolling:touch;
    flex:0 0 auto;
  }

  .navBtn{
    width:auto;
    min-width:max-content;
    margin-bottom:0;
    flex:0 0 auto;
    padding:12px 18px;
    text-align:center;
    font-size:14px;
    line-height:1.2;
  }

  .mainArea{
    width:100%;
    margin-left:0;
    padding:14px 12px 20px;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .wrap{
    max-width:100%;
  }

  .grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .card{
    border-radius:20px;
    padding:16px 14px;
  }

  .card h3{
    font-size:16px;
  }

  .row{
    gap:8px;
  }

  .mobileCollapseHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
  }

  .mobileCollapseHead h3{
    margin:0;
  }

  .mobileCollapseToggle{
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--primary);
    border-radius:999px;
    padding:6px 12px;
    font-size:12px;
    font-weight:700;
    line-height:1.1;
    cursor:pointer;
    flex:0 0 auto;
  }

  .mobileCollapseMeta{
    margin:0 0 10px;
    padding:9px 11px;
    border:1px solid var(--accent-line);
    border-radius:12px;
    background:#fbf7ee;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
  }

  .mobileCollapseMeta strong{
    color:var(--primary);
  }

  .mobileCollapseCard.is-collapsed .mobileCollapseBody{
    display:none;
  }

  .mobileCollapseCard.is-collapsed .mobileCollapseMeta{
    display:block;
  }

  .authGate{
    padding:28px 12px;
  }

  .authCard{
    width:min(100%, calc(100vw - 24px));
    padding:24px 18px 22px;
  }

  .authTitle{
    font-size:22px;
  }

  .fetchProviders{
    gap:6px;
  }

  .fetchProviders label{
    font-size:12px;
    padding:7px 10px;
  }

  .fetchSummary{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .fetchStats{
    gap:6px;
  }

  .fetchStat{
    padding:5px 9px;
  }

  .fetchTableWrap{
    overflow:visible;
  }

  .fetchTable{
    min-width:0;
    width:100%;
    font-size:12px;
  }

  .fetchTable thead{
    display:none;
  }

  .fetchTable,
  .fetchTable tbody,
  .fetchTable tr,
  .fetchTable td{
    display:block;
    width:100%;
  }

  .fetchTable tbody{
    display:grid;
    gap:10px;
  }

  .fetchTable tr{
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(253,253,251,.96);
    padding:12px;
  }

  .fetchTable td{
    padding:0;
    border-bottom:none;
    text-align:left;
    white-space:normal;
  }

  .fetchTable td + td{
    margin-top:8px;
  }

  .fetchActions{
    gap:6px;
  }

  .fetchActionBtn{
    min-width:0;
    padding:7px 10px;
  }

  .fetchFileName{
    white-space:normal;
    word-break:break-word;
    overflow:visible;
    text-overflow:clip;
  }

  .fetchTable td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:2px;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    letter-spacing:.01em;
  }

  .fetchTable td.muted{
    padding:4px 0;
    text-align:left;
  }

  .fetchTable td.muted::before{
    content:none;
  }

  #pageFetch .card{
    padding:16px 14px;
  }

  #pageFetch #fetchTickers{
    min-height:140px;
  }

  .pushCards{
    grid-template-columns:1fr;
    gap:8px;
  }

  .pushCard{
    padding:10px;
  }

  .pushTicker{
    font-size:16px;
  }

  .pushProgressText{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    line-height:1.45;
  }

  .pushTask{
    max-width:100%;
    white-space:normal;
    line-height:1.35;
  }

  .pushModal{
    padding:18px 12px 28px;
    align-items:flex-end;
  }

  .pushPanel{
    width:100%;
    max-height:min(82dvh, calc(100vh - 52px));
    border-radius:20px;
    padding:16px;
    box-shadow:var(--shadow);
  }

  .chat{
    left:12px;
    right:12px;
    top:auto;
    bottom:12px;
    width:auto;
    max-width:none;
    height:min(74dvh, 620px);
    max-height:min(74dvh, 620px);
    border-radius:24px;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    box-shadow:0 18px 40px rgba(20,21,63,.18);
    transform:translateY(14px) scale(.98);
    transform-origin:right bottom;
  }

  .chat.is-open{
    transform:translateY(0) scale(1);
  }

  .chatHeader{
    padding:12px 14px;
  }

  .chatHeader .left{
    min-width:0;
    flex:1 1 auto;
  }

  .chatHeader .sub{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .chatSourcePanel{
    max-height:132px;
    overflow:auto;
  }

  .chatBody{
    min-height:0;
    padding:12px;
  }

  .bubble{
    max-width:92%;
  }

  .bubbleText{
    max-width:none;
    line-height:1.58;
  }

  .chatInput{
    gap:10px;
    padding:12px;
    align-items:flex-end;
  }

  .chatInput textarea{
    min-height:48px;
    max-height:132px;
    padding:10px 12px;
  }

  .chatInput .btn{
    flex:0 0 78px;
    height:44px;
  }

  .chatLauncher{
    left:auto;
    right:12px;
    bottom:12px;
    width:auto;
    max-width:none;
    min-width:142px;
    height:52px;
    padding:0 16px;
    border-radius:999px;
    justify-content:center;
    align-items:center;
    gap:0;
  }

  .chatLauncher > span:first-child{
    min-width:0;
    flex:0 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .chatLauncher .t1{
    display:block;
    font-size:13px;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .chatLauncher .t2{
    display:none;
  }

  .chatLauncher .plus{
    display:none;
  }
}

@media (min-width: 769px){
  .sessionAvatar{
    display:none !important;
  }

  .mobileCollapseToggle,
  .mobileCollapseMeta{
    display:none !important;
  }
}