/* Simstagram sg.css - merged from Claude Design export (feed base + page extras) */

  /* ============================================================
     Simstagram — design tokens
     Fonts   : 'Baloo Thai 2' (headings/display), 'IBM Plex Sans Thai' (body)
     Colors  : teal #13A6C6 · deep teal #0E86A9 · blue #1E63AD · purple #5B3FC4
               yellow #FFBE28 / #FFDA5E · heart #FF5A6E · green #22A85E
               text #123E5A · body #3C5A6B · muted #5B7C8E · faint #8AA6B3
     Radius  : cards 20px · pills 999px · inputs 12px
     Spacing : page gutter 18px · card padding 14-16px · feed gap 22px
     ============================================================ */

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    color: #123E5A;
    background: linear-gradient(180deg, #EAF7FC 0%, #D6ECF6 100%);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  a { color: #0E86A9; text-decoration: none; }
  a:hover { color: #0A6584; }

  /* ---------- Top bar ---------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 12px 0;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(18, 164, 196, 0.12);
  }
  .topbar__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
  }
  .logo__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #13A6C6, #1E63AD);
    box-shadow: 0 8px 18px -8px rgba(19, 166, 198, 0.7);
  }
  .logo__text {
    font-family: 'Baloo Thai 2', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.2px;
    background: linear-gradient(120deg, #13A6C6, #5B3FC4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .topbar__spacer { flex: 1; }

  /* active-sim switcher (closed state) */
  .sim-switcher {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 7px;
    border: 1.5px solid rgba(18, 164, 196, 0.25);
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: #123E5A;
  }
  .sim-switcher:hover { border-color: #13A6C6; }
  .avatar {
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-family: 'Baloo Thai 2', sans-serif;
    font-weight: 800;
    flex-shrink: 0;
  }
  .avatar--sm { width: 28px; height: 28px; font-size: 13px; }
  .avatar--md { width: 34px; height: 34px; font-size: 14px; }
  .avatar--lg { width: 42px; height: 42px; font-size: 17px; }
  /* per-sim avatar colors */
  .av-teal   { background: linear-gradient(145deg, #13A6C6, #1E63AD); }
  .av-purple { background: linear-gradient(145deg, #5B3FC4, #8B5CF6); }
  .av-green  { background: linear-gradient(145deg, #22A85E, #13A6C6); }

  .sim-switcher__name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .icon-chevron { color: #8AA6B3; }

  .lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid rgba(18, 164, 196, 0.25);
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    color: #0E86A9;
    flex-shrink: 0;
  }
  .lang-toggle:hover { border-color: #13A6C6; }

  /* ---------- Feed layout ---------- */
  .page {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 18px 60px;
  }
  .page__title {
    font-family: 'Baloo Thai 2', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: #123E5A;
    margin-bottom: 4px;
  }
  .page__subtitle {
    font-size: 14.5px;
    color: #5B7C8E;
    margin-bottom: 22px;
  }
  .feed {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  /* ---------- Post card ---------- */
  .post {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(18, 164, 196, 0.10);
    box-shadow: 0 12px 30px -18px rgba(4, 40, 55, 0.42);
    overflow: hidden;
  }
  .post__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
  }
  .post__head-text {
    flex: 1;
    min-width: 0;
  }
  .post__sim {
    font-family: 'Baloo Thai 2', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    color: #123E5A;
    display: block;
  }
  .post__sim:hover { color: #0E86A9; }
  .location-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #0E86A9;
    font-weight: 600;
  }
  .post__time {
    flex-shrink: 0;
    font-size: 12px;
    color: #8AA6B3;
  }

  /* image placeholder — supports 1:1 and 16:9 */
  .post__image {
    display: block;
    width: 100%;
    background: #DDE9EE;
    color: #8AA6B3;
    display: grid;
    place-items: center;
    font-size: 13px;
  }
  .ratio-1-1  { aspect-ratio: 1 / 1; }
  .ratio-16-9 { aspect-ratio: 16 / 9; }

  .post__body { padding: 12px 16px 16px; }
  .post__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
  }
  .action-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Baloo Thai 2', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #5B7C8E;
  }
  .action-btn--like.is-liked { color: #FF5A6E; }
  .action-btn:hover { color: #0E86A9; }
  .icon-heart-empty { fill: none; stroke: #5B7C8E; }
  .icon-heart-filled { fill: #FF5A6E; stroke: #FF5A6E; }

  .post__caption {
    font-size: 14.5px;
    line-height: 1.55;
    color: #3C5A6B;
  }
  .post__caption .post__sim { display: inline; font-size: 14.5px; }
  .post__view-comments {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 13.5px;
    color: #8AA6B3;
    margin-top: 8px;
    display: block;
  }

/* ===== post page ===== */
/* ============================================================
     Simstagram — single-post view
     Fonts : 'Baloo Thai 2' (headings), 'IBM Plex Sans Thai' (body)
     Colors: teal #13A6C6 · deep teal #0E86A9 · blue #1E63AD · purple #5B3FC4
             yellow #FFBE28 · heart #FF5A6E · text #123E5A · body #3C5A6B
             muted #5B7C8E · faint #8AA6B3
     ============================================================ */

  * { box-sizing: border-box; margin: 0; padding: 0; }
/* ---------- Top bar (shared with feed) ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    padding: 12px 0;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(18, 164, 196, 0.12);
  }
.sim-switcher {
    display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px;
    border: 1.5px solid rgba(18, 164, 196, 0.25); background: #fff;
    border-radius: 999px; cursor: pointer;
    font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 13.5px; color: #123E5A;
  }
.av-teal { background: linear-gradient(145deg, #13A6C6, #1E63AD); }
/* ---------- Page + back link ---------- */
  .page { max-width: 640px; margin: 0 auto; padding: 18px 18px 60px; }
.back-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 15px;
    color: #0E86A9; margin-bottom: 16px;
  }
.back-link:hover { gap: 10px; }
/* ---------- Post detail card ---------- */
  .post-detail {
    background: #fff; border-radius: 20px;
    border: 1px solid rgba(18, 164, 196, 0.10);
    box-shadow: 0 14px 34px -18px rgba(4, 40, 55, 0.45);
    overflow: hidden;
  }
/* large image — 16:9 in this example (use .ratio-1-1 for square) */
  .post__image {
    width: 100%; background: #DDE9EE; color: #8AA6B3;
    display: grid; place-items: center; font-size: 13px;
  }
.post-detail__meta { padding: 14px 16px 8px; }
.like-row {
    display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
    border: none; background: none; cursor: pointer; padding: 0;
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 15px; color: #FF5A6E;
  }
.post-detail__caption {
    font-size: 14.5px; line-height: 1.6; color: #3C5A6B; margin-bottom: 6px;
  }
.post-detail__caption .post__sim { display: inline; font-size: 14.5px; }
/* ---------- Comment thread ---------- */
  .comment-thread {
    border-top: 1px solid rgba(18, 164, 196, 0.10);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 14px;
  }
.comment { display: flex; gap: 11px; }
.comment__body { flex: 1; min-width: 0; }
.comment__text { font-size: 14px; line-height: 1.5; color: #3C5A6B; }
.comment__author {
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; color: #123E5A;
  }
.comment__time { font-size: 11.5px; color: #8AA6B3; margin-top: 2px; }
/* ---------- Comment input ---------- */
  .comment-input {
    border-top: 1px solid rgba(18, 164, 196, 0.10);
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
  }
.comment-input__field {
    flex: 1; border: none; background: #F2F6F8; border-radius: 999px;
    padding: 11px 16px;
    font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #123E5A;
    outline: none;
  }
.comment-input__field::placeholder { color: #8AA6B3; }
.comment-input__post {
    flex-shrink: 0; border: none; background: none; cursor: pointer;
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 800; font-size: 14.5px;
    color: #0E86A9; padding: 6px;
  }
/* ===== profile page ===== */
/* ============================================================
     Simstagram — Sim profile page
     Fonts : 'Baloo Thai 2' (headings), 'IBM Plex Sans Thai' (body)
     Colors: teal #13A6C6 · deep teal #0E86A9 · blue #1E63AD · purple #5B3FC4
             text #123E5A · body #3C5A6B · muted #5B7C8E · faint #8AA6B3
     Grid  : 3 columns, 8px gap, square 1:1 thumbnails
     ============================================================ */

  * { box-sizing: border-box; margin: 0; padding: 0; }
/* ---------- Top bar (shared) ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 50; padding: 12px 0;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(18, 164, 196, 0.12);
  }
.avatar--xl { width: 82px; height: 82px; font-size: 34px; box-shadow: 0 10px 24px -10px rgba(4, 40, 55, 0.5); }
/* ---------- Profile header ---------- */
  .profile-header {
    background: #fff; border-radius: 20px;
    border: 1px solid rgba(18, 164, 196, 0.10);
    box-shadow: 0 12px 30px -18px rgba(4, 40, 55, 0.42);
    padding: 26px 24px; margin-bottom: 20px;
  }
.profile-header__top { display: flex; align-items: center; gap: 20px; }
.profile-header__info { flex: 1; min-width: 0; }
.profile-header__name {
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 800; font-size: 24px;
    color: #123E5A; line-height: 1.2;
  }
.profile-header__handle { font-size: 13.5px; color: #8AA6B3; margin-bottom: 8px; }
.profile-stats { display: flex; gap: 18px; }
.profile-stats__item { font-size: 13.5px; color: #5B7C8E; }
.profile-stats__num {
    font-family: 'Baloo Thai 2', sans-serif; color: #123E5A; font-size: 15px; font-weight: 700;
  }
.profile-header__bio {
    font-size: 14.5px; line-height: 1.6; color: #3C5A6B; margin-top: 16px;
  }
/* ---------- Photo grid (all posts by this Sim) ---------- */
  .photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
.photo-grid__item {
    background: #DDE9EE; border-radius: 12px; overflow: hidden;
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
    color: #8AA6B3; font-size: 12px;
  }
.photo-grid__item:hover { opacity: 0.92; }
/* ===== login modal ===== */
/* ============================================================
     Simstagram — "not logged in" state
     A login modal (Rogix ID) sits over a dimmed/blurred feed.
     Fonts : 'Baloo Thai 2' (headings), 'IBM Plex Sans Thai' (body)
     Colors: teal #13A6C6 · deep teal #0E86A9 · blue #1E63AD · purple #5B3FC4
             yellow #FFBE28 / #FFDA5E · text #123E5A · body #3C5A6B
             muted #5B7C8E · faint #8AA6B3
     ============================================================ */

  * { box-sizing: border-box; margin: 0; padding: 0; }
/* ---------- Dimmed feed behind the modal ---------- */
  /* The whole app is rendered, then blurred + faded so the feed
     is still faintly visible behind the login overlay. */
  .app-behind {
    filter: blur(2px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
  }
.topbar {
    position: sticky; top: 0; padding: 12px 0;
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(18, 164, 196, 0.12);
  }
.ghost-card {
    max-width: 640px; margin: 24px auto 0; padding: 0 18px;
  }
.ghost-card__inner {
    background: #fff; border-radius: 20px;
    border: 1px solid rgba(18, 164, 196, 0.10);
    box-shadow: 0 12px 30px -18px rgba(4, 40, 55, 0.42);
    height: 320px;
  }
/* ---------- Login overlay ---------- */
  .login-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 70, 95, 0.32);
    backdrop-filter: blur(6px);
  }
.login-modal {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 70px -20px rgba(4, 40, 55, 0.6);
    border: 1px solid rgba(18, 164, 196, 0.14);
    padding: 34px 30px;
    text-align: center;
  }
.login-modal__mark {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(145deg, #13A6C6, #1E63AD);
    box-shadow: 0 12px 26px -10px rgba(19, 166, 198, 0.8);
    margin-bottom: 16px;
  }
.login-modal__title {
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 800; font-size: 23px;
    color: #123E5A; margin-bottom: 6px;
  }
.login-modal__sub {
    font-size: 14px; color: #5B7C8E; line-height: 1.55; margin-bottom: 24px;
  }
.login-form {
    display: flex; flex-direction: column; gap: 14px;
    text-align: left;
  }
.field { display: block; }
.field__label {
    display: block;
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 13px;
    color: #0E86A9; margin-bottom: 6px;
  }
.field__input {
    width: 100%;
    border: 1.5px solid rgba(18, 164, 196, 0.25);
    background: #F8FBFC;
    border-radius: 12px;
    padding: 12px 15px;
    font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 15px; color: #123E5A;
    outline: none;
  }
.field__input:focus { border-color: #13A6C6; background: #fff; }
.field__input::placeholder { color: #8AA6B3; }
/* "Forgot password?" links out to rogerfilms.com (external, not a modal) */
  .forgot-link {
    align-self: flex-end;
    font-size: 13px; font-weight: 600; color: #0E86A9;
  }
.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 13px;
    background: linear-gradient(180deg, #FFDA5E, #FFBE28);
    color: #0C4A63;
    font-family: 'Baloo Thai 2', sans-serif; font-weight: 800; font-size: 16px;
    cursor: pointer;
    box-shadow: 0 12px 26px -8px rgba(255, 190, 40, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    margin-top: 4px;
  }
.login-btn:hover { transform: translateY(-2px); }
.login-modal__foot {
    font-size: 12.5px; color: #8AA6B3; margin-top: 20px; line-height: 1.5;
  }
.av-blue { background: linear-gradient(145deg, #1E63AD, #174F8C); }
.av-yellow { background: linear-gradient(145deg, #FFBE28, #E8A410); }
/* ===== toast ===== */
.sg-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #123E5A; color: #fff; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px;
  padding: 11px 20px; border-radius: 999px; box-shadow: 0 14px 34px -12px rgba(4,40,55,.6);
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 200; }
.sg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sim-wrap { position: relative; display: inline-flex; }
.sim-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border-radius: 14px;
  border: 1px solid rgba(18,164,196,.14); box-shadow: 0 18px 44px -16px rgba(4,40,55,.5);
  min-width: 200px; padding: 6px; display: none; z-index: 150; }
.sim-menu.open { display: block; }
.sim-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px; color: #123E5A; text-align: left; }
.sim-menu__item:hover { background: #F2F6F8; }
.sim-menu__item.active { background: rgba(19,166,198,.10); font-weight: 600; }
.post__image img, .photo-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caption-tag { color: #0E86A9; font-weight: 600; text-decoration: none; }
.caption-mention { color: #5B3FC4; font-weight: 600; }

/* ===== tag pins on post image (phase C) ===== */
.post__image--tagged { position: relative; }
.tag-pin { position: absolute; transform: translate(-50%, -50%); z-index: 5; text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.tag-pin__dot { width: 14px; height: 14px; border-radius: 999px; background: rgba(255,255,255,.95);
  border: 3px solid #13A6C6; box-shadow: 0 2px 8px rgba(4,40,55,.5); }
.tag-pin__label { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; font-weight: 600;
  color: #fff; background: rgba(18,62,90,.86); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: translateY(-4px); transition: all .18s ease; pointer-events: none; }
.tag-pin:hover .tag-pin__label { opacity: 1; transform: translateY(0); }
/* tap-to-reveal: pins hidden until image tapped */
.post__image--tagged .tag-pin { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.post__image--tagged.revealed .tag-pin { opacity: 1; pointer-events: auto; }
.post__image--tagged.revealed .tag-pin__label { opacity: 1; transform: translateY(0); }
.post__image--tagged.has-tags { cursor: pointer; }
.tag-hint { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(18,62,90,.82); color: #fff; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; transition: opacity .2s ease; }
.post__image--tagged.revealed .tag-hint { opacity: 0; }

/* ===== profile tabs (posts | tagged) ===== */
.profile-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.profile-tab { flex: 1; text-align: center; padding: 10px; border-radius: 12px; text-decoration: none;
  font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 14px; color: #5B7C8E;
  background: #fff; border: 1px solid rgba(18,164,196,.12); }
.profile-tab.active { background: rgba(19,166,198,.12); color: #0E86A9; }

/* ===== liked heart (red fill) ===== */
.action-btn--like svg { transition: transform .15s ease, fill .15s ease, stroke .15s ease; }
.action-btn--like.liked svg { fill: #ED4956; stroke: #ED4956; }
.action-btn--like.liked { color: #ED4956; }
.action-btn--like.liked svg { animation: heart-pop .3s ease; }
@keyframes heart-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ===== notification bell + dropdown ===== */
.noti-wrap { position: relative; display: inline-flex; }
.noti-bell { position: relative; border: 0; background: none; cursor: pointer; color: #123E5A;
  padding: 8px; border-radius: 12px; display: inline-flex; align-items: center; }
.noti-bell:hover { background: #F2F6F8; }
.noti-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: #ED4956; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
  font-family: 'IBM Plex Sans Thai', sans-serif; display: flex; align-items: center; justify-content: center;
  line-height: 1; }
.noti-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 440px; overflow-y: auto;
  background: #fff; border-radius: 16px; border: 1px solid rgba(18,164,196,.14);
  box-shadow: 0 20px 50px -18px rgba(4,40,55,.55); display: none; z-index: 160; }
.noti-menu.open { display: block; }
.noti-menu__head { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 15px; color: #123E5A;
  padding: 14px 16px 10px; position: sticky; top: 0; background: #fff; border-bottom: 1px solid #F0F4F6; }
.noti-menu__list { padding: 6px; }
.noti-empty { text-align: center; color: #8AA0AD; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; padding: 28px 12px; }
.noti-item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 12px; text-decoration: none; }
.noti-item:hover { background: #F5F8F9; }
.noti-item.unread { background: rgba(19,166,198,.07); }
.noti-item__ava { width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; color: #fff; font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 15px; }
.noti-item__body { flex: 1; min-width: 0; }
.noti-item__text { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; color: #1B2B34; line-height: 1.35; }
.noti-item__text b { font-weight: 600; }
.noti-item__time { font-size: 11px; color: #8AA0AD; margin-top: 2px; }
.noti-item__thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.noti-item__icon { font-size: 15px; flex: 0 0 auto; }

/* ===== profile avatar image + edit ===== */
.avatar--img { overflow: hidden; padding: 0; }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; }
.profile-header__namerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-edit-btn { border: 1px solid rgba(18,164,196,.3); background: #fff; color: #0E86A9;
  font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 13px; padding: 6px 14px;
  border-radius: 10px; cursor: pointer; }
.profile-edit-btn:hover { background: rgba(19,166,198,.08); }
.profile-header__bio--empty { color: #A9BAC4; font-style: italic; cursor: pointer; }

/* edit modal */
.edit-overlay { position: fixed; inset: 0; background: rgba(10,30,42,.55); display: grid; place-items: center; z-index: 220; }
.edit-modal { width: min(90vw, 380px); background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 30px 70px -20px rgba(4,40,55,.6); }
.edit-modal__head { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 17px; color: #123E5A; text-align: center; margin-bottom: 16px; }
.edit-avatar { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; margin-bottom: 16px; }
.edit-avatar img, .edit-avatar .avatar--xl { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; }
.edit-avatar__hint { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; color: #0E86A9; font-weight: 600; }
.edit-field__label { display: block; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; color: #5B7C8E; margin-bottom: 6px; font-weight: 600; }
.edit-field textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(18,164,196,.22); border-radius: 12px;
  padding: 10px 12px; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #1B2B34; resize: vertical; }
.edit-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.edit-btn { flex: 1; padding: 11px; border-radius: 12px; border: 0; font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; }
.edit-btn--cancel { background: #EEF3F5; color: #5B7C8E; }
.edit-btn--save { background: linear-gradient(145deg, #13A6C6, #0E86A9); color: #fff; }
.edit-btn--save:disabled { opacity: .6; cursor: default; }

/* ===== search bar ===== */
.sg-search { position: relative; display: flex; align-items: center; gap: 8px; background: #F2F6F8;
  border-radius: 12px; padding: 0 12px; height: 40px; width: 280px; max-width: 34vw; }
.sg-search__icon { color: #8AA0AD; flex: 0 0 auto; }
.sg-search__input { border: 0; background: none; outline: none; width: 100%; font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px; color: #123E5A; }
.sg-search__input::placeholder { color: #A9BAC4; }
.sg-search__menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 14px;
  border: 1px solid rgba(18,164,196,.14); box-shadow: 0 18px 44px -16px rgba(4,40,55,.5); padding: 6px; display: none;
  z-index: 155; max-height: 360px; overflow-y: auto; }
.sg-search__menu.open { display: block; }
.sg-search__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #123E5A; }
.sg-search__item:hover { background: #F2F6F8; }
.sg-search__item .avatar { width: 34px; height: 34px; }
.sg-search__name { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; font-weight: 500; }
.sg-search__tag { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; color: #0E86A9; }
.sg-search__count { margin-left: auto; font-size: 12px; color: #8AA0AD; font-family: 'IBM Plex Sans Thai', sans-serif; }
.sg-search__empty { text-align: center; color: #8AA0AD; font-size: 13px; padding: 18px; font-family: 'IBM Plex Sans Thai', sans-serif; }

/* ===== sim menu: submenu + logout ===== */
.sim-menu__item { position: relative; }
.sim-menu__chev { margin-left: auto; transition: transform .18s ease; }
.sim-menu__item.open .sim-menu__chev { transform: rotate(90deg); }
.sim-submenu { display: none; padding-left: 6px; margin: 2px 0; border-left: 2px solid rgba(19,166,198,.15); }
.sim-submenu.open { display: block; }
.sim-menu__item--sub { font-size: 13px; }
.sim-menu__item--logout { color: #D65745; border-top: 1px solid #F0F4F6; margin-top: 4px; padding-top: 11px; }
.sim-menu__item svg { flex: 0 0 auto; }

/* ===== follow / block buttons ===== */
.profile-actions { display: flex; gap: 8px; margin-top: 10px; }
.follow-btn { border: 0; border-radius: 10px; padding: 8px 22px; font-family: 'Baloo Thai 2', sans-serif;
  font-weight: 700; font-size: 14px; cursor: pointer; background: linear-gradient(145deg, #13A6C6, #0E86A9); color: #fff; }
.follow-btn.following { background: #EEF3F5; color: #5B7C8E; }
.follow-btn--blocked { background: #FBE9E7; color: #D65745; }
.follow-btn--icon { padding: 8px 10px; background: #EEF3F5; color: #8AA0AD; display: inline-flex; align-items: center; }
.follow-btn--icon:hover { background: #FBE9E7; color: #D65745; }
.profile-blocked-note { color: #A9BAC4; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; margin-top: 10px; display: inline-block; }
.profile-stats__btn { border: 0; background: none; cursor: pointer; font: inherit; }
.profile-stats__btn:hover { color: #0E86A9; }

/* ===== connections modal (followers / following) ===== */
.conn-overlay { position: fixed; inset: 0; background: rgba(10,30,42,.55); display: grid; place-items: center; z-index: 210; }
.conn-modal { width: min(90vw, 400px); max-height: 70vh; background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.conn-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid #F0F4F6;
  font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 16px; color: #123E5A; }
.conn-modal__close { border: 0; background: none; font-size: 24px; color: #8AA0AD; cursor: pointer; line-height: 1; }
.conn-modal__list { overflow-y: auto; padding: 8px; }
.conn-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: #123E5A; }
.conn-item:hover { background: #F5F8F9; }
.conn-item__name { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; font-weight: 500; }
.conn-item__remove { margin-left: auto; border: 1px solid rgba(214,87,69,.3); background: #fff; color: #D65745;
  font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; }

/* ===== profile ... menu + message btn + confirm modal ===== */
.follow-btn--msg { background: #EEF3F5; color: #123E5A; }
.follow-btn--msg:hover { background: #E3EBEE; }
.profile-more { position: relative; display: inline-block; }
.profile-more__menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border-radius: 12px;
  border: 1px solid rgba(18,164,196,.14); box-shadow: 0 16px 40px -14px rgba(4,40,55,.5); padding: 6px; display: none; z-index: 150; min-width: 180px; }
.profile-more__menu.open { display: block; }
.profile-more__item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px;
  border-radius: 9px; cursor: pointer; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #123E5A; }
.profile-more__item:hover { background: #F2F6F8; }
.profile-more__item--danger { color: #D65745; }
.confirm-overlay { position: fixed; inset: 0; background: rgba(10,30,42,.55); display: grid; place-items: center; z-index: 230; }
.confirm-modal { width: min(90vw, 360px); background: #fff; border-radius: 18px; padding: 24px; text-align: center; }
.confirm-modal__title { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 17px; color: #123E5A; margin-bottom: 8px; }
.confirm-modal__text { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; color: #5B7C8E; line-height: 1.5; margin-bottom: 20px; }
.confirm-modal__actions { display: flex; gap: 10px; }
.edit-btn--danger { background: #D65745; color: #fff; flex: 1; padding: 11px; border: 0; border-radius: 12px; font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; }

/* ===== DM chat dock ===== */
.dm-dock { position: fixed; right: 20px; bottom: 20px; z-index: 190; font-family: 'IBM Plex Sans Thai', sans-serif; }
.dm-launcher { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(145deg,#13A6C6,#0E86A9); color: #fff;
  border: 0; border-radius: 999px; padding: 12px 20px; font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 14px;
  cursor: pointer; box-shadow: 0 12px 30px -10px rgba(14,134,169,.6); position: relative; }
.dm-launcher__badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; background: #ED4956;
  border-radius: 999px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dm-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 340px; height: 460px; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(4,40,55,.6); display: none; flex-direction: column; overflow: hidden; }
.dm-panel.open { display: flex; }
.dm-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F0F4F6; }
.dm-panel__title { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 15px; color: #123E5A; }
.dm-panel__close { border: 0; background: none; font-size: 22px; color: #8AA0AD; cursor: pointer; line-height: 1; }
.dm-tabs { display: flex; border-bottom: 1px solid #F0F4F6; }
.dm-tab { flex: 1; border: 0; background: none; padding: 11px; font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 13px;
  color: #8AA0AD; cursor: pointer; border-bottom: 2px solid transparent; }
.dm-tab.active { color: #0E86A9; border-bottom-color: #13A6C6; }
.dm-tab__count { background: #ED4956; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10px; margin-left: 3px; }
.dm-list { flex: 1; overflow-y: auto; padding: 6px; }
.dm-list__item { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; cursor: pointer; }
.dm-list__item:hover { background: #F5F8F9; }
.dm-list__body { flex: 1; min-width: 0; }
.dm-list__name { font-size: 14px; font-weight: 600; color: #123E5A; }
.dm-list__last { font-size: 12px; color: #8AA0AD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-list__item.unread .dm-list__last { color: #123E5A; font-weight: 600; }
.dm-list__dot { width: 9px; height: 9px; border-radius: 999px; background: #13A6C6; flex: 0 0 auto; }
.dm-empty { text-align: center; color: #8AA0AD; font-size: 13px; padding: 30px 14px; }
.dm-thread { flex: 1; display: none; flex-direction: column; overflow: hidden; }  /* hidden until .in-thread */
.dm-thread__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #F0F4F6; }
.dm-thread__back { border: 0; background: none; font-size: 22px; color: #0E86A9; cursor: pointer; line-height: 1; }
.dm-thread__name { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; color: #123E5A; }
.dm-thread__msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-msg { max-width: 78%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.35; word-wrap: break-word; }
.dm-msg--in { align-self: flex-start; background: #F0F4F6; color: #1B2B34; border-bottom-left-radius: 5px; }
.dm-msg--out { align-self: flex-end; background: linear-gradient(145deg,#13A6C6,#0E86A9); color: #fff; border-bottom-right-radius: 5px; }
.dm-msg img { max-width: 180px; border-radius: 10px; display: block; }
.dm-request-bar { padding: 10px 14px; background: #FFF6E8; font-size: 12px; color: #8A6D3B; text-align: center; }
.dm-request-bar > div { margin-top: 8px; display: flex; gap: 8px; justify-content: center; }
.dm-req-btn { border: 0; border-radius: 8px; padding: 6px 16px; font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; }
.dm-req-btn--accept { background: #13A6C6; color: #fff; }
.dm-req-btn--decline { background: #EEE; color: #8A6D3B; }
.dm-compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #F0F4F6; }
.dm-compose__img { cursor: pointer; color: #8AA0AD; display: inline-flex; }
.dm-compose__img:hover { color: #0E86A9; }
.dm-compose__input { flex: 1; border: 0; background: #F2F6F8; border-radius: 999px; padding: 9px 14px; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; outline: none; }
.dm-compose__send { border: 0; background: none; color: #0E86A9; font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; }
.dm-img-preview { position: relative; padding: 8px 12px; }
.dm-img-preview img { max-height: 80px; border-radius: 8px; }
.dm-img-preview button { position: absolute; top: 4px; left: 12px; background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 999px; width: 20px; height: 20px; cursor: pointer; }

/* ===== DM: thread covers the panel (hide tabs+list when a chat is open) ===== */
.dm-panel.in-thread .dm-tabs { display: none; }
.dm-panel.in-thread .dm-list { display: none; }
.dm-thread { min-height: 0; }               /* allow flex child to scroll */
.dm-thread__msgs { min-height: 0; }
.dm-list { min-height: 0; }
/* header bar of a thread: name is clickable -> opens a small menu */
.dm-thread__name { cursor: pointer; flex: 1; }
.dm-thread__name:hover { text-decoration: underline; }
.dm-thread__menu { position: absolute; top: 46px; left: 12px; right: 12px; background: #fff; border-radius: 12px;
  border: 1px solid rgba(18,164,196,.14); box-shadow: 0 14px 36px -12px rgba(4,40,55,.45); padding: 6px; display: none; z-index: 30; }
.dm-thread__menu.open { display: block; }
.dm-thread__menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none;
  padding: 10px 11px; border-radius: 9px; cursor: pointer; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #123E5A; text-align: left; }
.dm-thread__menu button:hover { background: #F2F6F8; }
.dm-thread { position: relative; }

/* ===== DM visibility driven by .in-thread (fixes hidden-attr override by display) ===== */
.dm-panel .dm-thread { display: none; }
.dm-panel.in-thread .dm-thread { display: flex; }
.dm-panel.in-thread .dm-list { display: none; }
.dm-panel.in-thread .dm-tabs { display: none; }
.dm-panel:not(.in-thread) .dm-list { display: block; }

/* ===== comments: threaded + like/reply ===== */
.comment { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.comment--reply { margin-left: 46px; position: relative; }
.comment--reply::before { content: ''; position: absolute; left: -22px; top: -6px; bottom: 50%; width: 20px;
  border-left: 2px solid #D8E4E9; border-bottom: 2px solid #D8E4E9; border-bottom-left-radius: 10px; }
.comment--reply .avatar { width: 28px; height: 28px; font-size: 12px; }
.comment--reply .comment__bubble { background: #EAF1F4; }
.comment__replyto { display: inline-block; font-size: 12px; color: #0E86A9; font-weight: 700;
  background: rgba(19,166,198,.1); padding: 1px 7px; border-radius: 6px; margin-right: 5px; }
.comment .avatar { flex: 0 0 auto; margin-top: 2px; }
.comment__body { flex: 1; min-width: 0; }
.comment__bubble { background: #F2F6F8; border-radius: 16px; padding: 9px 15px; display: block; max-width: 100%; }
.comment__author { display: block; font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 13px; color: #123E5A; text-decoration: none; margin-bottom: 2px; }
.comment__author:hover { text-decoration: underline; }
.comment__replyto { font-size: 12px; color: #0E86A9; font-weight: 600; margin-right: 4px; }
.comment__text { display: block; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #1B2B34; word-wrap: break-word; line-height: 1.4; }
.comment__meta { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding-left: 6px; }
.comment__time { font-size: 12px; color: #8AA0AD; font-family: 'IBM Plex Sans Thai', sans-serif; }
.comment__act { border: 0; background: none; cursor: pointer; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; font-weight: 600; color: #8AA0AD; padding: 0; }
.comment__act:hover { color: #123E5A; }
.comment__like.liked .comment__like-label { color: #ED4956; }
.comment__like-n { color: #8AA0AD; }
.comment-replies { margin-left: 40px; margin-top: -4px; margin-bottom: 14px; }
.comment-replies__toggle { border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; font-weight: 600; color: #5B7C8E; padding: 4px 0; }
.comment-replies__toggle:hover { color: #0E86A9; }
.comment-replies__line { width: 24px; height: 1px; background: #C7D6DD; display: inline-block; }
.comment-reply-box { margin-left: 40px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.comment-reply-box input { flex: 1; border: 1px solid rgba(18,164,196,.22); border-radius: 999px; padding: 8px 14px;
  font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; outline: none; }
.comment-reply-box button { border: 0; background: none; color: #0E86A9; font-weight: 700; font-size: 13px; cursor: pointer; font-family: 'Baloo Thai 2', sans-serif; }
.comment-reply-box .cancel { color: #8AA0AD; }

/* ===== post + comment edit/delete menus ===== */
.post-more { position: relative; margin-left: auto; }
.post-more__btn, .comment__more-btn { border: 0; background: none; cursor: pointer; color: #8AA0AD; padding: 2px 6px; border-radius: 8px; }
.post-more__btn:hover { background: #F2F6F8; color: #123E5A; }
.post-more__menu, .comment__more-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border-radius: 12px;
  border: 1px solid rgba(18,164,196,.14); box-shadow: 0 14px 36px -12px rgba(4,40,55,.45); padding: 6px; display: none; z-index: 40; min-width: 150px; }
.post-more__menu.open, .comment__more-menu.open { display: block; }
.post-more__menu button, .comment__more-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px;
  border-radius: 8px; cursor: pointer; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #123E5A; }
.post-more__menu button:hover, .comment__more-menu button:hover { background: #F2F6F8; }
.post-more__menu button.danger, .comment__more-menu button.danger { color: #D65745; }
.comment__more { position: relative; display: inline-block; }
.comment__more-menu { min-width: 110px; }
.comment__edit-box { margin-top: 6px; display: flex; gap: 8px; }
.comment__edit-box input { flex: 1; border: 1px solid rgba(18,164,196,.22); border-radius: 999px; padding: 7px 13px; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; outline: none; }
.comment__edit-box button { border: 0; background: none; color: #0E86A9; font-weight: 700; font-size: 13px; cursor: pointer; }

/* login error message */
.login-error { background: #FBE9E7; color: #C0392B; border-radius: 10px; padding: 9px 13px;
  font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; margin-bottom: 4px; text-align: center; }

.comments { padding: 4px 16px 8px; }

/* ===== Post modal (IG/FB style) ===== */
.pm-overlay { position: fixed; inset: 0; background: rgba(8,24,34,.82); z-index: 300; display: grid; place-items: center; padding: 24px; }
.pm-close { position: fixed; top: 18px; right: 24px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; z-index: 310; }
.pm-dialog { display: flex; width: min(1040px, 94vw); height: min(88vh, 720px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.pm-media { flex: 1 1 58%; background: #0d1f28; display: flex; align-items: center; justify-content: center; min-width: 0; }
.pm-media img { width: 100%; height: 100%; object-fit: contain; }
.pm-spinner { color: #7d97a5; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; }
.pm-side { flex: 0 0 42%; max-width: 420px; display: flex; flex-direction: column; min-width: 0; }
.pm-head { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid #F0F4F6; position: relative; }
.pm-head__name { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; color: #123E5A; font-size: 15px; text-decoration: none; }
.pm-head__loc { font-size: 12px; color: #8AA0AD; font-family: 'IBM Plex Sans Thai', sans-serif; }
.pm-head__more { margin-left: auto; border: 0; background: none; cursor: pointer; color: #8AA0AD; padding: 4px 8px; border-radius: 8px; }
.pm-head__more:hover { background: #F2F6F8; color: #123E5A; }
.pm-head__menu { position: absolute; top: 48px; right: 12px; background: #fff; border-radius: 12px; border: 1px solid rgba(18,164,196,.14);
  box-shadow: 0 14px 36px -12px rgba(4,40,55,.45); padding: 6px; display: none; z-index: 20; min-width: 160px; }
.pm-head__menu.open { display: block; }
.pm-head__menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #123E5A; }
.pm-head__menu button:hover { background: #F2F6F8; }
.pm-head__menu button.danger { color: #D65745; }
.pm-scroll { flex: 1; overflow-y: auto; padding: 14px 16px; }
.pm-caption { display: flex; gap: 12px; margin-bottom: 16px; }
.pm-caption__body { flex: 1; min-width: 0; }
.pm-caption__text { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #1B2B34; line-height: 1.45; }
.pm-caption__text b { color: #123E5A; }
.pm-caption__time { font-size: 11.5px; color: #8AA0AD; margin-top: 5px; }
.pm-actions { border-top: 1px solid #F0F4F6; padding: 10px 16px; }
.pm-actions__row { display: flex; align-items: center; gap: 16px; }
.pm-like { border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #123E5A; font-weight: 700; font-family: 'Baloo Thai 2', sans-serif; font-size: 14px; }
.pm-like svg { width: 24px; height: 24px; stroke: #123E5A; fill: none; stroke-width: 2; }
.pm-like.liked svg { fill: #ED4956; stroke: #ED4956; }
.pm-compose { display: flex; align-items: center; gap: 10px; border-top: 1px solid #F0F4F6; padding: 12px 16px; }
.pm-compose__input { flex: 1; border: 0; background: none; outline: none; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 14px; color: #1B2B34; }
.pm-compose__post { border: 0; background: none; color: #0E86A9; font-weight: 700; font-size: 14px; cursor: pointer; font-family: 'Baloo Thai 2', sans-serif; }
/* clickable posts in feed/profile */
.post__image, .grid-item { cursor: pointer; }
@media (max-width: 720px){
  .pm-dialog { flex-direction: column; height: 92vh; width: 96vw; }
  .pm-media { flex: 0 0 50%; }
  .pm-side { flex: 1; max-width: none; }
}

/* ===== feed tabs (แนะนำ / กำลังติดตาม) ===== */
.feed-tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid rgba(18,164,196,.14); }
.feed-tab { border: 0; background: none; padding: 11px 4px; margin-right: 18px; cursor: pointer;
  font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 15px; color: #8AA0AD; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.feed-tab.active { color: #0E86A9; border-bottom-color: #13A6C6; }
.feed-empty { text-align: center; color: #8AA0AD; padding: 40px 16px; font-family: 'IBM Plex Sans Thai', sans-serif; }

/* ===== privacy toggle switch ===== */
.edit-privacy { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 4px 2px; }
.edit-privacy__text { flex: 1; }
.edit-privacy__label { display: block; font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 14px; color: #123E5A; }
.edit-privacy__hint { display: block; font-size: 12px; color: #8AA0AD; margin-top: 2px; line-height: 1.4; }
.toggle { flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; border: 0; background: #D6E1E6; cursor: pointer; position: relative; transition: background .2s; padding: 0; }
.toggle.on { background: #13A6C6; }
.toggle__dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.on .toggle__dot { transform: translateX(20px); }
.follow-btn.pending { background: #EEF3F5; color: #8AA0AD; }
/* ===== locked profile ===== */
.profile-locked { text-align: center; padding: 50px 20px; border-top: 1px solid rgba(18,164,196,.12); }
.profile-locked__icon { margin-bottom: 14px; }
.profile-locked__title { font-family: 'Baloo Thai 2', sans-serif; font-weight: 700; font-size: 17px; color: #123E5A; margin-bottom: 6px; }
.profile-locked__text { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; color: #8AA0AD; line-height: 1.5; max-width: 320px; margin: 0 auto; }
/* follow-request row actions */
.conn-item__approve { margin-left: auto; border: 0; background: #13A6C6; color: #fff; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.conn-item__reject { border: 1px solid #D8E4E9; background: #fff; color: #8AA0AD; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-left: 6px; }