/* responsive.css — RWD breakpoints
   浪花旅遊顧問平台 · 設計系統（依《品牌風格指南 — 中高齡友善》）

   原則：
   · 絕不橫向捲動；寬內容（表格）在自己的容器內捲。
   · 縮小畫面時可以少一欄，但不縮字、不縮觸控目標。
   · 「特大」字級 + 窄螢幕是最嚴苛組合，版面必須仍然成立。
   ===================================================================== */

@media(max-width:1080px){
  .g4,.tiles{grid-template-columns:repeat(2,1fr)}
  .g-sidebar,.g-aside{grid-template-columns:1fr}

  /* 平台聊天：對話列表排到聊天室上方，列表一長就把對話推出畫面。
     這個斷點起才顯示收合鈕（桌機是兩欄並排，不需要收）。 */
  .conv-collapse-sum{
    display:flex;align-items:center;gap:10px;
    min-height:var(--tap);padding:0 14px;margin-bottom:8px;
    border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
    cursor:pointer;user-select:none;list-style:none;
    font-weight:700;color:var(--ink);
  }
  .conv-collapse-sum::-webkit-details-marker{display:none}
  .conv-collapse-sum::marker{content:""}
  .conv-collapse-sum .ico{color:var(--ink-3)}
  .conv-collapse-sum .n{
    background:var(--muted);color:var(--ink-2);border-radius:999px;
    padding:1px 9px;font-size:.78rem;font-weight:800;
  }
  /* 收起來時仍要看得出現在在哪一則對話 —— 過長就省略，不要撐開整列 */
  .conv-collapse-sum .cur{
    margin-left:auto;max-width:45%;
    color:var(--ink-2);font-weight:600;font-size:.85rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .conv-collapse[open] .conv-collapse-sum .cur{display:none}   /* 展開時列表自己就看得到，不必重複 */
  .conv-collapse-sum::after{
    content:"\203A";                        /* › 用 CSS 轉義：避免非 UTF-8 解碼時變亂碼 */
    font-size:1.1rem;font-weight:700;color:var(--ink-3);
    transition:transform var(--dur-ui);
  }
  .conv-collapse[open] .conv-collapse-sum::after{transform:rotate(90deg)}
}

@media(max-width:1000px){
  /* 桌機水平導覽收進抽屜；漢堡鈕同時控制前台導覽與主控台側欄。
     選擇器需 ≥ layout.css 的 `.top .nav`，否則 display:flex 會贏過 display:none。 */
  .top .nav.desktop-nav{display:none}
  .top .menu-btn{display:inline-flex}
  .mobile-nav.open{display:flex}
  .sidebar{
    position:fixed;top:var(--topbar-h);left:0;z-index:36;
    transform:translateX(-100%);transition:transform .22s var(--ease-out);
    box-shadow:var(--sh3);
  }
  .sidebar.open{transform:translateX(0)}
  .content{padding:var(--s4) var(--s3) var(--s8)}
  /* 字級控制在窄螢幕收成純圖示鈕，但功能保留——中高齡使用者最需要它 */
  .menu-trigger .menu-txt{display:none}
  .front section{padding:var(--s8) 0}
  .wrap{padding:0 var(--s3)}
}

@media(max-width:720px){
  .g2,.g3,.form-grid{grid-template-columns:1fr}
  /* 服務流程改單欄直排：兩欄時每張卡只剩約 180px 寬，
     標題會斷成「登入 / 補」「資料」。桌機維持四欄由左至右。 */
  .ha-steps{grid-template-columns:1fr}
  /* 編號圓章原本外掛在卡片左上角外側（left:-16px），
     單欄時卡片貼齊容器邊緣，那 16px 會頂到畫面外緣。收回卡片內。 */
  .ha-step-no{left:12px;top:-16px}
  .tiles{grid-template-columns:1fr 1fr}
  .foot{padding:var(--s3) var(--s3)}
  .dl{grid-template-columns:1fr;gap:2px var(--s2)}
  .dl dt{margin-top:var(--s1)}
  .hero .row .btn{width:100%}
  .modal .m-foot{flex-direction:column-reverse}
  .modal .m-foot .btn{width:100%}
}

@media(max-width:560px){
  .top .inner{padding:0 var(--s2);gap:var(--s1)}
  .content{padding:var(--s3) var(--s2) var(--s6)}
  .wrap{padding:0 var(--s2)}
  .tiles{grid-template-columns:1fr}
  .bubble{max-width:88%}
  .panel .p-body,.panel .p-head,.panel .p-foot{padding:var(--s2)}
  .card .body{padding:var(--s2)}

  /* 頂欄只留必要的：選單、品牌、購物車、頭像（或訪客的字級鈕）。
     只有訪客的「登入」鈕移入抽屜（.drawer-auth 已有一顆）——
     已登入者的頭像必須留著：字級與會員中心都收在它裡面，
     一律 display:none 的話，手機上就完全拿不到字級控制。 */
  .top .wordmark small{display:none}
  .top .auth-action.auth-guest{display:none}

  /* 手機：品牌字置中。
     它原本緊貼在漢堡鈕右邊，兩個目標之間只有 8px —— 想按品牌回首頁，
     很容易誤觸而彈出側欄。置中之後兩者距離拉開到半個畫面寬。

     用絕對定位而非再塞一個 flex 空白：左邊只有漢堡鈕（48px）、
     右邊是購物車＋頭像（約 96px），兩側不等寬，
     靠 flex 均分空白會偏移 (左-右)/2 ≈ 24px，看得出來沒對準。

     max-width + overflow：品牌名稱變長時寧可截斷，也不要壓到左右兩側的按鈕。
     桌機不套這段，品牌維持靠左與內文切齊。

     限定 body.front（前台）：後台頂欄用同一組 class，但它右側是
     字級＋身分徽章＋登出，寬度遠超過這裡預留的 210px，置中會壓到那些元素。 */
  body.front .top .inner{position:relative}
  body.front .top .wordmark{
    position:absolute;left:50%;transform:translateX(-50%);
    margin-left:0;                 /* 抵銷桌機為了對齊內文左緣的 -6px */
    max-width:calc(100% - 210px);  /* 左 48 ＋ 右 96 ＋ 兩側各留一點餘裕 */
    overflow:hidden;
  }
  .drawer-auth{display:block;padding-top:var(--s2)}
  .front section{padding:var(--s6) 0}
  .hero{padding:var(--s6) 0 var(--s4)}
}
/* 桌機不需要抽屜裡那顆登入鈕（頂欄已經有了） */
.drawer-auth{display:none}