/* Desktop layout (>=1024px). Mobile keeps the phone UI: bottom tabs, single column.
   Desktop: left sidebar nav, top bar with search, two-column content grid.
   Sections are grouped by desktop.js into .sec.main / .sec.side / .sec.full. */

#tabs .brand{display:none}

@media (min-width:1024px){
  html{background:var(--bg)}
  body{max-width:none;margin:0;padding:26px 36px 40px 276px;min-height:100vh}
  h1{font-size:26px}
  h2{margin:26px 2px 12px}

  /* Sidebar: matches the Sales tool (white rail, hairline border, solid accent pill on the active item) */
  #tabs{top:0;bottom:0;left:0;right:auto;width:240px;max-width:none;margin:0;padding:0 8px 12px;
    flex-direction:column;align-items:stretch;gap:4px;border-top:0;border-right:1px solid var(--line);
    background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
  #tabs .brand{display:flex;align-items:center;gap:12px;height:64px;padding:0 8px;margin:0 -8px 10px;border-bottom:1px solid var(--line);padding-left:16px}
  #tabs .brand .logo{width:36px;height:36px;margin:0;border-radius:8px;background:#fff;object-fit:contain;display:block}
  #tabs .brand b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text)}
  #tabs .brand span{display:block;font-size:11.5px;margin-top:1px}
  #tabs button{flex:none;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;
    text-align:left;font-size:13.5px;font-weight:500;color:#3b4557;position:relative;transition:background .12s,color .12s}
  #tabs button .ic{display:inline-flex;font-size:18px;width:18px;text-align:center;line-height:1}
  #tabs button .ic svg{width:18px;height:18px;margin:0}
  #tabs button:hover{background:var(--card2);color:var(--text)}
  #tabs button:focus{outline:none}
  #tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #tabs button.on{background:var(--accent);color:#fff}
  #tabs button.on:before{display:none}
  #tabs button.on:hover{background:var(--accent)}
  #tabs button .dot{position:absolute;right:12px;top:50%;margin:-3.5px 0 0}

  /* Top bar: title left, search right */
  .topbar{display:flex;align-items:flex-start;gap:22px;margin-bottom:22px}
  .topbar .hdr{margin:0;flex:none;min-width:220px;align-items:flex-start}
  .topbar .hdr h1{line-height:44px}
  .topbar .hdr #asof{margin-top:2px}
  .topbar .hdr .refresh{margin-left:14px;margin-top:4px}
  .topbar #searchwrap{position:static;flex:1;max-width:620px;padding:0;margin:0 0 0 auto;background:none}
  #searchwrap .sinner input{padding:11px 14px}

  /* Content grid */
  #app.desk .cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0 26px;align-items:start}
  #app.desk .colmain,#app.desk .colside{min-width:0}
  #app.desk .colmain>.sec:first-child>h2:first-child,#app.desk .colside>.sec:first-child>h2:first-child{margin-top:10px}
  #app.desk .colside .tiles{flex-direction:column}
  #app.desk .colside .stats{grid-template-columns:repeat(3,1fr)}
  #app.desk .sec.full .board{margin:0;padding-left:2px;padding-right:2px}
  #app.desk .colside:empty,#app.desk .colmain:empty{display:none}
  #app.desk .cols:has(.colside:empty),#app.desk .cols:has(.colmain:empty){grid-template-columns:minmax(0,1fr)}
  .card{border-radius:12px}
  .card[onclick]:hover,.card[style*="cursor:pointer"]:hover{border-color:#c7cfe4;box-shadow:0 4px 14px rgba(16,24,40,.08)}
  .col{width:280px}

  /* Ask: chat is a centered column, input pinned to the bottom of the viewport */
  .chat{min-height:calc(100vh - 260px);max-width:860px}
  .chips{max-width:860px}
  .askbar{bottom:22px;max-width:860px}
  .askbar input{padding:14px}

  /* Dialogs: centered instead of bottom sheet */
  #modal{align-items:center}
  .sheet{border-radius:18px;max-width:560px;max-height:84vh;padding:22px 22px 24px}

  #login .card{max-width:380px;padding:34px 28px}
}

@media (min-width:1440px){
  body{padding-left:296px;padding-right:56px}
  #tabs{width:256px}
  #app.desk .cols{grid-template-columns:minmax(0,1fr) 420px;gap:0 32px}
}