/* Desktop layout for the main application at /studentos-ai/.
   Keep native screens, actions and theme tokens. No rules apply below 1025px.
   1024 คือ iPad แนวนอน — 24 ต.ค. 69 เจ้าของ: "ทำให้ไอแพดแนวนอนปุ่มเหมือนในโทรศัพท์" → ใช้แถบล่างของช่วงแท็บเล็ต (device-preview-controls.css) */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) {
  :root { --desktop-expanded:248px; --desktop-rail:var(--desktop-expanded); --desktop-gap:24px; }
  :root body:not(.login-mode) { overflow:hidden; background:var(--scr); }
  :root body:not(.login-mode) .stage {
    position:fixed; inset:0; display:block; width:100%; max-width:none;
    margin:0; padding:0; gap:0;
  }
  :root body:not(.login-mode) .stage-note { display:none; }
  :root body:not(.login-mode) .phone {
    width:100%; max-width:none; height:100dvh; margin:0;
    border:0; border-radius:0; box-shadow:none; overflow:hidden;
  }
  :root body:not(.login-mode) .statusbar { display:none; }
  :root body:not(.login-mode) .screens {
    margin:0 0 0 var(--desktop-rail)!important; width:calc(100% - var(--desktop-rail));
    height:100%; min-height:0; border-radius:0!important;
  }
  :root body:not(.login-mode) .screen {
    width:100%; max-width:none; padding:28px clamp(24px,3vw,56px) 32px;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  :root body:not(.login-mode) .screen::-webkit-scrollbar { display:block; width:7px; }
  :root body:not(.login-mode) .screen::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
  :root body:not(.login-mode) .screen.flush { padding:0; }
  :root body:not(.login-mode) .screen :is(.scr-body,.home-body) {
    width:100%; max-width:none; margin-inline:auto; padding:28px clamp(24px,3vw,56px) 32px;
  }
  :root body:not(.login-mode) .screen>.sticky-head {
    width:100%; max-width:none; padding:25px clamp(24px,3vw,56px) 20px;
  }
  :root body:not(.login-mode) .sticky-head .sh-title { font-size:25px; line-height:1.5; }
  /* Native side navigation offsets put back/close buttons inside the wider rail. */
  :root body:not(.login-mode) .phone .sticky-head :is(.sh-btn,.fm-x),
  :root body:not(.login-mode) .phone .fd-top>.fd-back {
    position:static!important; inset:auto!important; flex:0 0 auto;
  }
  /* Reuse the five native navigation buttons, including badges and add actions. */
  :root body:not(.login-mode) .stage .phone .tabbar {
    position:absolute; inset:0 auto 0 0; width:var(--desktop-expanded); height:100%;
    padding:28px 16px 24px!important; margin:0; border-radius:0!important; border:0;
    border-right:1px solid var(--line); display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start; gap:12px;
    background:var(--glass,var(--card)); box-shadow:none; transform:none;
  }
  :root body:not(.login-mode) .tabbar::before {
    content:'Student OS'; display:block; flex:none; height:46px;
    margin:0 4px 28px; padding:9px 0 0 50px; color:var(--ink);
    background:url('logo-mark.png') left center / 40px 40px no-repeat;   /* 24 ต.ค. 69 · ตราใหม่มีพื้นของตัวเอง ไม่ต้องมีวงขาวรอง */
    font:600 21px/1.4 'Outfit','Sarabun',sans-serif; white-space:nowrap;
  }
  :root body:not(.login-mode) .tabbar::after {
    content:'พื้นที่เรียนของคุณ'; position:absolute; bottom:22px; left:30px;
    color:var(--muted); font-size:12px; pointer-events:none;
  }
  :root body:not(.login-mode) .tabbar .tab {
    flex:0 0 auto; width:100%; min-height:54px; height:auto; padding:13px 17px;
    flex-direction:row; justify-content:flex-start; align-items:center;
    gap:15px; border-radius:14px; font-size:15px; transform:none;
  }
  :root body:not(.login-mode) .tabbar .tab .ic { width:24px; height:24px; }
  :root body:not(.login-mode) .tabbar .ic-wrap { width:24px; height:24px; flex:none; }
  :root body:not(.login-mode) .tabbar .tab.scan { min-height:54px!important; height:54px!important; margin-block:8px; }
  :root body:not(.login-mode) .tabbar .tab.scan .scan-dot {
    /* margin ต้อง !important เหมือนขนาด — กฎแถบข้างใน alt.css (.phone .tabbar ... 0 0 4px) specificity สูงกว่า
       เคยชนะ margin แต่แพ้ขนาด ก้อน 32px จึงกินที่เต็ม ไอคอนเยื้องขวา 4px ป้าย "เพิ่ม" เยื้อง 8px (24 ต.ค. 69) */
    width:32px!important; height:32px!important; margin:-4px!important; border-radius:10px; box-shadow:none;
  }
  :root body:not(.login-mode) .tabbar .tab.scan>span:last-child { margin-left:0; }
  :root body:not(.login-mode) .tabbar .tab[data-scr="scr-profile"] { margin-top:auto; margin-bottom:40px; }
  :root body:not(.login-mode) .tabbar .tab:focus-visible { outline:3px solid var(--fill); outline-offset:3px; }
  :root body.focus-on:not(.login-mode) .tabbar { visibility:hidden; }
  /* The existing home blocks become a workspace, without a second plan or data set. */
  :root body:not(.login-mode) #menuBody {
    display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
    grid-template-areas:'head head' 'context context' 'focus companion' 'focus rail' 'ask rail' 'tools tools';
    gap:var(--desktop-gap); align-content:start; align-items:start;
    height:auto!important; min-height:100%; overflow:visible!important;
  }
  :root body:not(.login-mode) #menuBody>* { min-width:0; width:100%; max-width:none; margin:0; }
  :root body:not(.login-mode) #menuBody>:not(:is(.td-top,.td-event,.td-deck,.td-head,.dc-line,.break-ask,.td-now,.td-clear,.saih,.td-ask,.td-railwrap,.td-tiles)) { grid-column:1 / -1; }
  :root body:not(.login-mode) #menuBody:has(>.td-clear) { grid-template-areas:'head head' 'context context' 'focus focus' 'ask ask' 'tools tools'; }
  :root body:not(.login-mode) #menuBody:has(>.td-note) { grid-template-areas:'head head' 'context context' 'focus companion' 'focus rail' 'notice rail' 'ask ask' 'tools tools'; }
  /* 24 ต.ค. 69 · หน้าแรกใหม่ (แถบบน + ชุดการ์ด) ไม่มีรายการ "ที่เหลือของวันนี้" (.td-railwrap) แล้ว
     ช่อง rail จึงว่างเป็นโพรงใต้การ์ดน้องฮูก · ช่องถามได้แค่คอลัมน์ซ้าย · แถบตัวเลขไม่มีช่องของตัวเองเลยไปเต็มแถวบนสุด
     (ภาพเจ้าของ 24 ต.ค. ธีม Astral) → คอลัมน์ขวาเรียง น้องฮูก · ตัวเลข · ช่องถาม ให้สูงพอ ๆ กับชุดการ์ดซ้าย
     การ์ดตั้งค่าตารางเรียนต้องมีช่องของตัวเองด้วย ไม่งั้น grid ยัดมันขึ้นแถว context ที่ว่างบนสุด (ลำดับต่างจากมือถือ)
     จองแถว setup เฉพาะตอนมีการ์ดจริง — แถวว่างยังกิน gap สองช่อง เป็นช่องโหว่ระหว่างช่องถามกับไทล์
     ตอนกลางคืนที่มีรายการ "ที่เหลือของวันนี้" (.td-railwrap) การ์ดตั้งค่าก็ต้องอยู่ที่เดียวกัน */
  :root body:not(.login-mode) #menuBody:not(:has(>:is(.td-railwrap,.td-clear,.td-note))) { grid-template-areas:'head head' 'context context' 'focus companion' 'focus stats' 'focus ask' 'tools tools'; }
  :root body:not(.login-mode) #menuBody:has(>.td-setup):not(:has(>:is(.td-railwrap,.td-clear,.td-note))) { grid-template-areas:'head head' 'context context' 'focus companion' 'focus stats' 'focus ask' 'setup setup' 'tools tools'; }
  :root body:not(.login-mode) #menuBody:has(>.td-setup):has(>.td-railwrap):not(:has(>:is(.td-clear,.td-note))) { grid-template-areas:'head head' 'context context' 'focus companion' 'focus rail' 'ask rail' 'setup setup' 'tools tools'; }
  :root body:not(.login-mode) #menuBody:not(:has(>:is(.td-railwrap,.td-clear,.td-note)))>.td-stats { grid-area:stats; grid-column:auto; }
  :root body:not(.login-mode) #menuBody:has(>.td-setup):not(:has(>:is(.td-clear,.td-note)))>.td-setup { grid-area:setup; }
  /* แถบบนสุดกับหัวจอเต็มไม่เคยอยู่พร้อมกัน (todayHead ว่างเมื่อแถบเปิด) จึงใช้แถวเดียวกัน */
  :root body:not(.login-mode) #menuBody>.td-top { grid-area:head; }
  /* การ์ดอีเวนต์เล็กขึ้นเฉพาะตอนปิดการ์ดหลัก (ปกติอีเวนต์อยู่ในสไลด์) · แถวบริบทว่างแทบทุกวัน จึงใช้ที่นั้น */
  :root body:not(.login-mode) #menuBody>.td-event { grid-area:context; }
  :root body:not(.login-mode) #menuBody>.td-head { grid-area:head; padding:0; }
  :root body:not(.login-mode) #menuBody .th-greet { font-size:28px; line-height:1.5; }
  :root body:not(.login-mode) #menuBody .th-sub { font-size:14px; margin-top:5px; }
  :root body:not(.login-mode) #menuBody>:is(.dc-line,.break-ask) { grid-area:context; min-height:42px; font-size:13px; }
  :root body:not(.login-mode) #menuBody>:is(.td-now,.td-clear,.td-deck) { grid-area:focus; }
  :root body:not(.login-mode) #menuBody>.saih { grid-area:companion; align-self:start; }
  :root body:not(.login-mode) #menuBody>.td-ask { grid-area:ask; min-height:54px; }
  :root body:not(.login-mode) #menuBody>.td-railwrap { grid-area:rail; }
  :root body:not(.login-mode) #menuBody>.td-tiles { grid-area:tools; padding:0; }
  :root body:not(.login-mode) #menuBody:has(>.td-note)>.td-note { grid-area:notice; }
  :root body:not(.login-mode) #menuBody .td-now .tn-head { padding:22px 24px 18px; }
  :root body:not(.login-mode) #menuBody .td-now .tn-body { padding:16px 24px 22px; }
  :root body:not(.login-mode) #menuBody .td-now .tn-title { font-size:27px; line-height:1.5; }
  :root body:not(.login-mode) #menuBody .td-now .tn-cta { min-height:52px; }
  :root body:not(.login-mode) #menuBody .td-now .tn-why-pane:not(.open) { display:none; }
  :root body:not(.login-mode) #menuBody>.td-clear { min-height:300px; }
  :root body:not(.login-mode) #menuBody>.saih .saih-title { font-size:17px; line-height:1.6; }
  :root body:not(.login-mode) #menuBody .td-rail { max-height:400px; overflow-y:auto; scrollbar-width:thin; }
  :root body:not(.login-mode) #menuBody .tg-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  /* หน้าแรกแบบใหม่ไทล์เหลือห้าก้อน — แถวเดียวเต็มความกว้าง ไม่ใช่สี่บวกหนึ่ง */
  :root body:not(.login-mode) #menuBody.home-v2 .tg-grid { grid-template-columns:repeat(var(--tg-n,4),minmax(0,1fr)); }
  :root body:not(.login-mode) #menuBody>.td-setup { grid-column:1 / -1; }
  :root body:not(.login-mode) #menuBody .tg-t { height:64px; min-height:64px; padding:10px 12px; gap:10px; flex-direction:row; justify-content:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; }
  :root body:not(.login-mode) #menuBody .tg-ic { width:36px; height:36px; flex:none; aspect-ratio:1; border-radius:10px; }
  :root body:not(.login-mode) #menuBody .tg-ic svg { width:19px; height:19px; padding:4px; }
  :root body:not(.login-mode) #menuBody .tg-lb2 { min-height:0; font-size:12px; text-align:left; line-height:1.5; opacity:1; }
  /* Wide native task, calendar and conversation screens. */
  :root body:not(.login-mode) :is(#taskList,#timeline,#aiBody,#planList) { width:100%; max-width:none; margin-inline:auto; }
  :root body:not(.login-mode) :is(#taskList,#timeline) .page-title { font-size:30px; line-height:1.5; }
  :root body:not(.login-mode) #taskList .tk { padding:22px 24px; border-radius:18px; margin-bottom:16px; }
  :root body:not(.login-mode) #taskList .tk-ttl { font-size:19px; line-height:1.6; }
  :root body:not(.login-mode) #timeline .cal-grid { gap:8px; }
  :root body:not(.login-mode) #timeline .cal-cell { min-height:66px; }
  :root body:not(.login-mode) #scr-ai { padding:0; }
  :root body:not(.login-mode) #aiBody { min-height:100%; padding-bottom:26px; }
  :root body:not(.login-mode) #scr-form { padding-bottom:32px; }
  :root body:not(.login-mode) #scr-form>:not(.sticky-head) { max-width:1000px; margin-inline:auto; }
  :root body:not(.login-mode) #scr-form .fm-bar {
    bottom:0; padding:12px clamp(24px,3vw,56px) 16px; margin-top:0;
  }
  :root body:not(.login-mode) #scr-form:not(.fm-s1):not(.fm-s2) .fm-step { display:none; }
  /* Overlays remain inside the full-size phone root, above the existing navigation. */
  :root body:not(.login-mode) #focusWrap { inset:0; width:100%; height:100dvh; overflow-y:auto; }
  :root body:not(.login-mode) #focusWrap .fc-sheet { max-width:760px; margin-inline:auto; padding:30px 48px; }
  :root body:not(.login-mode) #focusWrap .fc-title { font-size:28px; line-height:1.5; }
  :root body:not(.login-mode) .as-card { width:600px; max-width:calc(100vw - 48px); left:calc(50% - 300px); right:auto; bottom:24px; border-radius:24px; max-height:calc(100dvh - 48px); }
  :root body:not(.login-mode) #appToast.toast { left:calc(var(--desktop-rail) + 24px); right:24px; top:16px; bottom:auto; height:auto; max-width:480px; margin-inline:auto; }
  :root body:not(.login-mode) .runbar { left:calc(var(--desktop-rail) + 24px); right:24px; bottom:20px; }
  :root body:not(.login-mode) .top-friends { left:auto; right:24px; }
  /* Desktop-only controls are mounted only at this breakpoint and removed below it. */
  :root[data-desktop-sidebar] body:not(.login-mode) .stage .phone .tabbar { padding-top:22px!important; padding-bottom:18px!important; gap:6px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .tabbar::before { font-size:19px; margin-bottom:14px; padding-right:30px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .tabbar::after { bottom:10px; font-size:11px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .tabbar .tab { min-height:44px; padding:10px 15px; font-size:14px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .tabbar .tab.scan { min-height:44px!important; height:44px!important; margin-block:4px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .tabbar .tab[data-scr="scr-profile"] { margin-bottom:24px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-extra-nav { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; padding-block:2px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-extra-nav>p { color:var(--muted); font-size:11px; margin:8px 15px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-link { display:flex; align-items:center; gap:13px; width:100%; min-height:40px; border:1px solid transparent; border-radius:11px; background:none; color:var(--muted); font:inherit; font-size:13px; text-align:left; padding:9px 15px; cursor:pointer; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-link[hidden] { display:none; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-link svg { width:21px; height:21px; flex:none; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-link:hover { background:var(--card2); color:var(--ink); }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-link.is-current { background:var(--card2); color:var(--ink); border-color:var(--fill); }
  :root[data-desktop-sidebar] body:not(.login-mode) :is(.desktop-link,.desktop-nav-toggle):focus-visible { outline:3px solid var(--fill); outline-offset:2px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-nav-toggle { position:absolute; top:27px; left:calc(var(--desktop-expanded) - 49px); z-index:6; display:flex; align-items:center; justify-content:center; gap:9px; width:32px; height:34px; padding:6px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); cursor:pointer; font:inherit; font-size:13px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-nav-toggle svg { width:19px; height:19px; flex:none; }
  /* 24 ต.ค. 69 · เจ้าของ (ภาพปุ่มพับแถบ): "แก้ให้มันตรง" — ป้าย <span> ว่างตอนแถบเปิด แต่ยังเป็นชิ้นใน flex
     gap 9px จึงดันไอคอนไปซ้าย 4.5px · ไม่มีป้ายก็ไม่ต้องจองช่อง */
  :root[data-desktop-sidebar] body:not(.login-mode) .desktop-nav-toggle span:empty { display:none; }
  :root[data-desktop-sidebar="closed"] { --desktop-rail:0px; --desktop-gap:14px; }
  :root[data-desktop-sidebar="closed"] body:not(.login-mode) .stage .phone .tabbar { visibility:hidden; pointer-events:none; transform:translateX(-100%); }
  :root[data-desktop-sidebar="closed"] body:not(.login-mode) .screens { margin:56px 0 0!important; width:100%; height:calc(100% - 56px); }
  :root[data-desktop-sidebar="closed"] body:not(.login-mode) .desktop-nav-toggle { top:11px; left:20px; width:auto; padding-inline:11px; }
  :root[data-desktop-sidebar="closed"] body:not(.login-mode) #menuBody { padding-top:12px; }
  :root[data-desktop-sidebar] body.focus-on :is(.desktop-nav-toggle,.tabbar),
  :root[data-desktop-sidebar] body.as-open .desktop-nav-toggle { visibility:hidden; }
}
@media (min-width:1025px) and (max-width:1199px) and (hover:hover) and (pointer:fine) {
  :root { --desktop-expanded:224px; --desktop-gap:18px; }
  :root body:not(.login-mode) .stage .phone .tabbar { padding-inline:12px!important; }
  :root body:not(.login-mode) .tabbar::before { font-size:18px; padding-left:43px; background-size:34px 34px; }
  :root[data-desktop-sidebar] body:not(.login-mode) .tabbar::before { font-size:18px; }
  :root body:not(.login-mode) #menuBody { grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); }
  :root body:not(.login-mode) #menuBody .td-now .tn-title { font-size:24px; }
  :root body:not(.login-mode) #menuBody .td-now :is(.tn-head,.tn-body) { padding-inline:18px; }
}
@media (min-width:1025px) and (max-height:760px) and (hover:hover) and (pointer:fine) {
  :root { --desktop-gap:18px; }
  :root body:not(.login-mode) #menuBody { padding-top:24px; }
  :root body:not(.login-mode) #menuBody .th-greet { font-size:26px; }
  :root body:not(.login-mode) #menuBody .td-now .tn-head { padding-top:18px; padding-bottom:14px; }
  :root body:not(.login-mode) #menuBody .td-now .tn-body { padding-top:12px; padding-bottom:18px; }
}