/* ===========================================================================
 * mes789-system / assets/css/shell-nav.css
 * ---------------------------------------------------------------------------
 * โหลด "ต่อจาก" shell.css เสมอ (ตัวนี้ทับค่าบางอย่างของ shell.css โดยตั้งใจ)
 *
 * แก้ 2 เรื่องที่แจ้งมา:
 *   1. แถบไอคอนนำทางกลางแถบบน — เอากลับมาแบบระบบเดิม
 *   2. คอลัมน์กลางยังเห็นขอบกล่อง — เอาขอบออกให้เต็มพื้นที่จริง
 * =========================================================================== */

/* ===========================================================================
   1. แถบไอคอนกลาง
   =========================================================================== */
.shell-iconnav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;              /* ดันตัวเองไปอยู่กลางแถบบน */
    flex-shrink: 1;
    min-width: 0;
}

.shell-iconnav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 40px;
    border-radius: 9px;
    color: var(--text-dim);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.shell-iconnav a .ico { font-size: 1.25rem; line-height: 1; }
.shell-iconnav a:hover { background: var(--surface-2); color: var(--text); }

/* หน้าที่กำลังดูอยู่ — ขีดทองใต้ปุ่ม แบบเดียวกับระบบเดิม */
.shell-iconnav a.active { color: var(--gold); }
.shell-iconnav a.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -8px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gold);
}

/* ปุ่มไอคอนฝั่งขวา (แจ้งเตือน / หลังบ้าน / ออก) */
.shell-topnav .icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.shell-topnav .icon-btn .ico { font-size: 1.05rem; line-height: 1; }
.shell-topnav .icon-btn:hover { border-color: var(--gold-dim); background: var(--surface); }

/* ช่องค้นหาย่อลง เพื่อให้แถบไอคอนมีที่ยืนกลางจอ */
.shell-topbar-inner .shell-search { max-width: 260px; flex: 0 1 260px; }

/* ---- จอกลาง: ตัดข้อความออก เหลือแต่ไอคอน ---- */
@media (max-width: 1100px) {
    .shell-iconnav a { width: 40px; }
    .shell-topbar-inner .shell-search { max-width: 180px; flex: 0 1 180px; }
}

/* ---- มือถือ: ซ่อนช่องค้นหา ให้ไอคอนได้พื้นที่เต็ม ---- */
@media (max-width: 860px) {
    .shell-topbar-inner { gap: 6px; padding: 0 8px; }
    .shell-brand { font-size: 1rem; }
    .shell-topbar-inner .shell-search { display: none; }

    /* บนมือถือแถบไอคอนคือทางนำทางเดียวที่เหลือ (เมนูซ้ายถูกซ่อน)
       จึงต้องแสดงเสมอ ห้ามซ่อนเด็ดขาด */
    .shell-iconnav { display: flex !important; margin: 0; flex: 1; justify-content: space-around; }
    .shell-iconnav a { width: auto; flex: 1; max-width: 52px; }

    .shell-topnav { display: flex !important; gap: 2px; }
    .shell-topnav a:not(.icon-btn) { display: none; }
    .shell-topnav .icon-btn { width: 34px; height: 34px; }
}

/* ===========================================================================
   2. คอลัมน์กลาง — เอาขอบกล่องออกจริง ๆ
   ---------------------------------------------------------------------------
   รอบก่อนเอา padding ออกแล้ว แต่ยังเหลือ "เส้นขอบ + มุมโค้ง + เงา" ของ .card
   ซึ่งยังทำให้ตาอ่านว่าเป็นกล่องอยู่ดี รอบนี้เอาออกให้หมด เหลือแค่เส้นคั่นบาง ๆ
   ระหว่างโพสต์ เหมือนที่เฟซบุ๊ก/ทวิตเตอร์ทำ
   =========================================================================== */
.shell-center .card.post {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
}

/* โพสต์สุดท้ายไม่ต้องมีเส้นคั่น */
.shell-center .card.post:last-child { border-bottom: 0; }

/* กล่องเขียนโพสต์ยังคงกรอบไว้ เพราะเป็น "ที่ให้ทำอะไรบางอย่าง"
   ต่างจากการ์ดโพสต์ที่เป็นแค่เนื้อหาให้อ่าน */
.shell-center .composer.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--shell-gap);
}

/* คอลัมน์กลางกว้างขึ้นอีกนิด ในเมื่อไม่มีขอบมากินที่แล้ว */
@media (min-width: 861px) {
    :root { --shell-center-max: 680px; }
}

/* ===========================================================================
   3. ⭐ ความกว้างข้อความคงที่ทุกอุปกรณ์
   ---------------------------------------------------------------------------
   ตอบคำถาม "มีวิธีที่ดีกว่าเฟซบุ๊กไหม ให้มือถือกับแท็บเล็ตเห็นเท่ากัน"
   มีครับ และเฟซบุ๊กไม่ได้ทำ
   
   เฟซบุ๊กคุมความกว้างเป็นพิกเซล ผลคือบนแท็บเล็ตบรรทัดหนึ่งยาวกว่ามือถือมาก
   ข้อความที่พิมพ์มา 3 บรรทัดบนมือถือ อาจเหลือ 2 บรรทัดบนแท็บเล็ต
   คนเขียนจึงเดาไม่ได้ว่าคนอ่านจะเห็นแบบไหน
   
   วิธีที่ดีกว่า: คุมด้วยหน่วย ch ซึ่งอิงกับ "ความกว้างของตัวอักษร" ไม่ใช่จอ
   ตั้งไว้ที่ 46ch = ประมาณ 46 ตัวอักษรต่อบรรทัดเท่ากันทุกอุปกรณ์
   
   ผลคือ ข้อความขึ้นบรรทัดตรงตำแหน่งเดียวกันเป๊ะ ไม่ว่าดูจากมือถือหรือแท็บเล็ต
   คนเขียนเห็นภาพตอนพิมพ์ได้ทันทีว่าคนอ่านจะเห็นยังไง
   
   (46ch เป็นช่วงที่อ่านสบายที่สุดตามงานวิจัยด้านการอ่าน — ยาวกว่านี้ตาจะหลง
   บรรทัด สั้นกว่านี้จะสะดุดบ่อยเกินไป)
   =========================================================================== */
.shell-center .post-body,
.shell-center .post-title,
.mpc-compose-preview {
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

/* รูปภาพไม่ต้องถูกจำกัด ปล่อยเต็มความกว้างการ์ดเหมือนเดิม */
.shell-center .post-media { max-width: none; }

/* บนจอเล็กมาก ยอมให้ข้อความใช้พื้นที่เต็ม ดีกว่าปล่อยขอบว่างสองข้าง */
@media (max-width: 480px) {
    .shell-center .post-body,
    .shell-center .post-title { max-width: 100%; }
}