:root { color-scheme: light dark; --top-h: 0px; --thread-sep: #e8e8e8; }
  @media (prefers-color-scheme: dark) {
    :root{ --thread-sep: #262626; }
  }
  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    -webkit-touch-callout: none !important;
  }
  /* iOS: disable touch callout & selection everywhere except text-entry controls */
  *:not(textarea):not(input) {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  
  /* ---- Post copy mode: allow selecting/copying text in posts area ---- */
  body.copyMode #posts,
  body.copyMode #posts *{
    -webkit-touch-callout: default !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
  .tbarDoneBtn{
    min-width: 54px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
  }
  .tbarDoneBtn:active{ opacity: .72; }
  .aahub_light {
    font-family: "aahub_light";
    white-space: pre;
    font-size: 14px;
    line-height: 1;
  }
  /* ---- AA view ---- */
  .aaPre{
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(127,127,127,.25);
    background: rgba(127,127,127,.08);
    overflow: auto;
    letter-spacing: 0;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
  html, body { height: 100%; overflow: hidden; }
  /* Keep text-entry controls selectable + allow callout there */
  textarea,
  input {
    -webkit-touch-callout: default !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
  a { color: inherit; }
  /* Allow native link long-press menu (copy/open/share) on touch devices. */
  a,
  a * {
    -webkit-touch-callout: default !important;
  }
  .top{
    position: sticky; top: 0; z-index: 30;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(127,127,127,.25);
    backdrop-filter: blur(10px);
    background: rgba(250,250,250,.85);
  }
  @media (prefers-color-scheme: dark) {
    .top{ background: rgba(18,18,18,.85); }
  }

  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .row + .row { margin-top: 8px; }

  .sessionMenuBody{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sessionCurrent{
    font-size: 14px;
    font-weight: 800;
    word-break: break-all;
  }
  .sessionList{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sessionItem{
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
  }
  .sessionItem.active{
    background: rgba(80,91,102,.14);
  }
  .sessionSwitchForm{
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .sessionInput{
    min-width: 0;
    flex: 1;
  }
  .sessionSwitchBtn{
    flex: 0 0 auto;
    font-weight: 800;
  }
  .sessionHint{
    font-size: 11px;
    opacity: .75;
  }

  input[type="text"]{
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(127,127,127,.35);
    min-width: 210px; flex: 1;
    box-sizing: border-box;
  }
  select, button, label, summary {
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(127,127,127,.35);
    background: transparent;
  }
  button { cursor: pointer; }
  label { border: none; padding: 0; }
  .meta { font-size: 12px; opacity: .85; word-break: break-all; }
  .muted { opacity: .75; }

  textarea{
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(127,127,127,.35);
    width: 100%;
    min-height: 120px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    box-sizing: border-box;
  }
  .pre {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(127,127,127,.25);
    background: rgba(127,127,127,.08);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.45;
  }

  /* Layout */
  .layout { max-width: none; margin: 0; }
  .panel { min-width: 0; overscroll-behavior: auto; scroll-padding-bottom: 0px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .modalBody{ overscroll-behavior: auto; }
  .threadsPanel { padding: 0; }
  .threadsPanel { position: relative; }
  .postsPanel { padding: 0; background: rgba(127,127,127,.18); }

  .threadTop{
    display:flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 6px 8px;
    margin: 0;
  }
  #boardLabel{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #boardLabel::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
    opacity: .9;
    flex: 0 0 auto;
  }
  .threadTop input[type="text"]{ min-width: 160px; }
  .threadTop button.autoActive{
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.98);
  }
  #threadsReload.spinning::after{
    content: "↻";
    display: inline-block;
    margin-left: 6px;
    animation: bbSpin .9s linear infinite;
    -webkit-animation: bbSpin .9s linear infinite;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
  }
  button.cancelMode{
    position: relative;
    color: transparent !important;
  }
  button.cancelMode > *{
    visibility: hidden;
  }
  button.cancelMode::after{
    content: "×";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.98);
    font-weight: 700;
    line-height: 1;
  }

  .boardMenuModal{
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(92vw, 820px);
    max-height: min(78vh, 920px);
    z-index: 120;
    transform: translate(-50%, -50%) scale(.98);
    border: 1px solid rgba(127,127,127,.24);
    border-radius: 14px;
    background: rgba(245,245,245,.98);
    box-shadow: 0 16px 44px rgba(0,0,0,.28);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .2s ease, transform .24s ease;
  }
  .boardMenuModal.open{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
  .boardMenuModalHeader{
    position: sticky;
    top: 0;
    z-index: 2;
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 8px;
    padding: 10px;
    backdrop-filter: blur(8px);
    background: rgba(248,248,248,.95);
    border-bottom: 1px solid rgba(127,127,127,.22);
  }
  .boardMenuTitle{ font-weight: 800; }
  .boardMenuHeaderActions{
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .boardMenuCategories{
    display: block;
    overflow: auto;
    max-height: calc(min(78vh, 920px) - 56px);
  }
  .boardMenuModalBackdrop{
    position: fixed;
    inset: 0;
    z-index: 119;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .boardMenuModalBackdrop.open{
    opacity: 1;
    pointer-events: auto;
  }

  @media (max-width: 700px) {
    .boardMenuModal{
      top: 50%;
      width: min(94vw, 820px);
      max-height: min(74vh, 920px);
    }
    .boardMenuCategories{
      max-height: calc(min(74vh, 920px) - 56px);
    }
  }
  .boardCatPair{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid rgba(127,127,127,.22);
  }
  .boardRecentBlock{
    border-bottom: 1px solid rgba(127,127,127,.22);
    background: rgba(90,90,90,.45);
  }
  .boardRecentTitle{
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: rgba(245,247,250,.88);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .boardCatCell{
    min-width: 0;
    border-right: 1px solid rgba(127,127,127,.22);
  }
  .boardCatCell:last-child{ border-right: 0; }
  .boardCatHead{
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 12px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    text-align: left;
    font-size: 16px;
    background: rgba(255,255,255,.82);
    transition: background .16s ease;
  }
  .boardCatHead:active{ background: rgba(127,127,127,.14); }
  .boardCatHead.active{
    background: rgba(0,140,255,.12);
    font-weight: 800;
  }
  .boardCatLabel{
    min-width: 0;
    font-weight: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .boardCatIndicator{
    justify-self: end;
    opacity: .62;
    font-size: 13px;
    align-self:center;
    font-weight: 700;
  }
  .boardCatBoards{
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: rgba(90,90,90,.45);
    transition: max-height .24s ease;
  }
  .boardCatBoards.open{ max-height: none; overflow: visible; }
  .boardListGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .boardItemBtn{
    border: 0;
    border-radius: 0;
    text-align:left;
    padding: 14px 12px;
    color: #f5f7fa;
    border-top: 1px solid rgba(255,255,255,.10);
    border-right: 1px solid rgba(255,255,255,.08);
    background: transparent;
    transition: background .16s ease, color .16s ease;
  }
  .boardItemBtn:first-child,
  .boardItemBtn:nth-child(2){ border-top: 0; }
  .boardItemBtn:nth-child(2n){ border-right: 0; }
  .boardItemBtn:active{ background: rgba(255,255,255,.08); }
  .boardItemBtn.active{
    background: rgba(0,140,255,.35);
    color: #fff;
    font-weight: 800;
  }
  @media (prefers-color-scheme: dark) {
    .boardMenuModalHeader{ background: rgba(26,26,26,.95); }
    .boardCatHead{ background: rgba(34,34,34,.90); }
    .boardCatHead.active{ background: rgba(32,92,160,.55); }
    .boardCatBoards{ background: rgba(28,28,28,.96); }
    .boardRecentBlock{ background: rgba(28,28,28,.96); }
    .boardMenuModal{ background: rgba(18,18,18,.98); }
  }
  /* Thread list (5chMate-like) */
  .threadList { border-top: 1px solid var(--thread-sep); border-bottom: none; border-left: none; border-right: none; border-radius: 0; overflow: hidden; }
  .titem{
    padding: 2px 6px 3px;
    border-bottom: 1px solid var(--thread-sep);
    cursor: pointer;
    display: flex;
    gap: 6px;
    align-items: stretch;
    position: relative;
  }
  .titem.hasUnread{ min-height: 49px; }
  .titem, .titem *{ -webkit-tap-highlight-color: transparent; }
  .titem:first-child{ /* keep */ }
  @media (hover: hover) and (pointer: fine) {
  .titem:hover{ background: rgba(127,127,127,.06); }
}

  .titem.press{ background: rgba(127,127,127,.06); }

  .titem.active{ background: rgba(0, 140, 255, .18); }
  /* active thread press: keep blue base, slightly darker */
  .titem.active.press{ background: rgba(0, 140, 255, .26); }

  .titem.dupTitleGray{ opacity: .40; }
  .titem.dupTitleGray.active{ opacity: .70; }
  .titem.ngTitleDim{ opacity: .40; }
  .titem.ngTitleDim.active{ opacity: .70; }

  /* dat落ち marker for threads that are not in current subject.txt (history only) */
  .titem.dead .ttitleLine{ opacity: .78; font-weight: 600; }
  .tdead{
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
    color: rgba(255, 110, 110, .95);
    background: rgba(255, 80, 80, .14);
    border: 1px solid rgba(255, 110, 110, .22);
    }
  @media (prefers-color-scheme: dark) {
    .tdead{
      color: rgba(255, 140, 140, .96);
      background: rgba(255, 90, 90, .18);
      border-color: rgba(255, 150, 150, .26);
    }
  }

  /* dat落ち marker after "log refresh attempted once": grey + excluded from next log refresh */
  .tdead.tried{
    color: rgba(130,130,130,.95);
    background: rgba(130,130,130,.14);
    border-color: rgba(130,130,130,.28);
  }
  @media (prefers-color-scheme: dark) {
    .tdead.tried{
      color: rgba(160,160,160,.95);
      background: rgba(160,160,160,.14);
      border-color: rgba(160,160,160,.26);
    }
  }


/* History list separator between alive and dat落ち */
.tdeadSep{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 2px 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(60,60,60,.72);
  background: rgba(127,127,127,.18);
  border-top: 1px solid rgba(127,127,127,.22);
  border-bottom: 1px solid rgba(127,127,127,.22);
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tdeadSepLabel{ flex: 1 1 auto; min-width: 0; }
.tdeadSepClear{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.28);
  background: rgba(255,255,255,.32);
  color: rgba(60,60,60,.78);
  -webkit-tap-highlight-color: transparent;
}
.tdeadSepClear:active{ opacity: .72; }
.tdeadSepClear:focus, .tdeadSepClear:focus-visible{ outline: none !important; box-shadow: none !important; }
.tdeadSepClear.armed{
  border-color: rgba(220, 60, 60, .35);
  background: rgba(220, 60, 60, .16);
  color: rgba(120, 20, 20, .86);
}

@media (prefers-color-scheme: dark) {
  .tdeadSep{
    color: rgba(235,235,235,.62);
    background: rgba(127,127,127,.20);
    border-top-color: rgba(127,127,127,.26);
    border-bottom-color: rgba(127,127,127,.26);
  }
  .tdeadSepClear{
    border-color: rgba(127,127,127,.30);
    background: rgba(20,20,20,.24);
    color: rgba(235,235,235,.70);
  }
  .tdeadSepClear.armed{
    border-color: rgba(255, 120, 120, .40);
    background: rgba(255, 90, 90, .18);
    color: rgba(255, 205, 205, .88);
  }
}
.tdeadSep + .titem{ border-top: none; }

.tleft{ min-width: 0; flex: 1; padding-right: 42px; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr; row-gap: 1px; }
  .tdate{ font-size: 12px; opacity: .48; margin-left: -2px; display:flex; align-items:center; gap: 6px; }
  .tdateText{ flex: 0 0 auto; }
  .tnew{
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    color: #fff;
    background: rgba(30, 136, 229, .92);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    opacity: .95;
  }
  .tnew.ngOnly{
    background: rgba(127, 127, 127, .76);
  }
  .tai{
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
    color: #fff;
    background: rgba(124, 77, 255, .92);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    opacity: .95;
  }
  .topStatus{
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    color: #fff;
    background: rgba(120, 120, 120, .78);
    box-shadow: 0 1px 2px rgba(0,0,0,.16);
    opacity: .95;
  }
  .topStatus-loading{ background: rgba(245, 158, 11, .92); }
  .topStatus-done{ background: rgba(67, 160, 71, .88); }
  .topStatus-error{ background: rgba(229, 57, 53, .90); }
  @media (prefers-color-scheme: dark) {
    .tnew{ background: rgba(66, 165, 245, .94); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
    .tnew.ngOnly{ background: rgba(150,150,150,.78); }
    .tai{ background: rgba(149, 117, 255, .96); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
    .topStatus{ background: rgba(150,150,150,.78); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
    .topStatus-loading{ background: rgba(245, 158, 11, .94); }
    .topStatus-done{ background: rgba(102, 187, 106, .88); }
    .topStatus-error{ background: rgba(239, 83, 80, .92); }
  }
  .ttitleLine{ margin: 4px 0;  align-self: center; font-size: 15px; line-height: 1.25; word-break: break-word; font-weight: 400; display:block; }
.ttitleText{ min-width: 0; display: inline; }
.tfavMark{ color: #ffd400; font-size: .78em; line-height: 1; display: inline; margin-right: 4px; vertical-align: baseline; }
  .titem.opened .ttitleLine{ font-weight: 700; }
  .titem:not(.opened) .ttitleLine{ font-weight: 400; }
    .tright{
    position: absolute;
    right: 6px;
    top: 2px;
    bottom: 3px;
    text-align: right;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0px;
    justify-items: end;
    align-items: start;
    pointer-events: none;
    z-index: 2;
  }
  .tright .tmom, .tright .tres{ line-height: 1; }

  .tmom{ font-size: 12px; color: #c44; opacity: .85; margin-right: -2px; white-space: nowrap; }
  .tres{ font-size: 15px; font-weight: 800; grid-row: 3; align-self: end; white-space: nowrap; }
  /* Unread badges for opened threads (based on readMark vs res count) */
  /* .tright grid alignment handled above */
  .tunreadBox{
    grid-row: 2;
    align-self: center;
    justify-self: end;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    margin: 0;
    width: 100%;
  }
  .tunreadCount{
    height: 18px;
    margin: 1px 0 1px 0;/* top + bottom */
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
    color: #fff;
    background: rgba(94, 150, 255, .92);
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }
  .tunreadCount.pending{
    width: 18px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 2px solid rgba(94, 150, 255, .70);
    border-top-color: transparent;
    animation: tunreadSpin .75s linear infinite;
  }
  .tunreadCount.ngOnly{ background: rgba(150,150,150,.78); }
  @keyframes tunreadSpin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-color-scheme: dark) {
    .tunreadCount{ background: rgba(110, 170, 255, .90); box-shadow: 0 1px 2px rgba(0,0,0,.55); }
    .tunreadCount.pending{
      background: transparent;
      box-shadow: none;
      border-color: rgba(110, 170, 255, .78);
      border-top-color: transparent;
    }
    .tunreadCount.ngOnly{ background: rgba(150,150,150,.78); }
  }

  /* Posts (5chMate-like) */
.titleUnderlay{
  display: none !important; /* no longer needed (title bar is opaque) */
}



.globalTitleBar{
  display: none;
  position: fixed;
  left: 0; right: 0;
  top: var(--top-h, 0px);
  z-index: 56;
  margin: 0;
  padding: 0 10px;
  padding-top: env(safe-area-inset-top);
  min-height: var(--bb-h);
  display: none;
  align-items: center;
  box-sizing: border-box;
  background: var(--bar-bg);
  border: none;
  box-shadow: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
  color: #f1f1f1;
  text-shadow: none;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
}
.tbarTitle{ flex: 1 1 auto; min-width: 0; }
.boardMenuTrigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.boardMenuTrigger::after{
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  opacity: .9;
  flex: 0 0 auto;
}
.tbarBtns{ flex: 0 0 auto; display:flex; gap: 6px; align-items:center; }
.tbarIconBtn{
  height: 30px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 0;
  border: none;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tbarIconBtn:focus,
.tbarIconBtn:focus-visible{ outline: none !important; box-shadow:none !important; -webkit-box-shadow:none !important; }
.tbarIconBtn:active{ opacity: .72; }
.tbarIconBtn svg{ width:22px; height:22px; }
.threadTitleBar{
  position: sticky;
  top: 0;
  z-index: 55;
  margin: 0;
  padding: 0 10px;
  min-height: var(--bb-h);
  display: flex;
  align-items: center;
  box-sizing: border-box;

  /* match bottom toolbar */
  background: var(--bar-bg);
  border-bottom: none;
  box-shadow: none;
  font-size: 15px;

  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
  color: #f1f1f1;
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
}

.globalTitleBar.embedded-webview,
.threadTitleBar.embedded-webview{
  padding-top: env(safe-area-inset-top);
  min-height: calc(var(--bb-h) + env(safe-area-inset-top));
}

html.embedded-native-ui .globalTitleBar,
html.embedded-native-ui .threadTitleBar,
html.embedded-native-ui .bottomBar{
  display: none !important;
}

html.embedded-native-ui .layout{
  margin-top: var(--titleBarH, 42px);
  height: calc(100vh - var(--titleBarH, 42px) - var(--bb-oh, 42px));
  height: calc(100dvh - var(--titleBarH, 42px) - var(--bb-oh, 42px));
}

html.embedded-native-ui .threadsPanel,
html.embedded-native-ui .postsPanel{
  height: calc(100vh - var(--titleBarH, 42px) - var(--bb-oh, 42px));
  height: calc(100dvh - var(--titleBarH, 42px) - var(--bb-oh, 42px));
}



.postsList{
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent; /* keep extended area showing panel bg */
}


@media (prefers-color-scheme: dark) { .postsList{ background: transparent; } }


/* iOS native rubber-band even when content is short:
   use top+bottom dynamic spacers (JS) so scrollHeight exceeds clientHeight by a tiny amount,
   while keeping the visible extra area as the panel background (not white). */
.bounceSpacerTop, .bounceSpacerBottom{ width:100%; height:0px; flex:0 0 auto; background: transparent; pointer-events:none; }

.postRow{
  padding: 4px 10px;
  border-top: 1px solid rgba(127,127,127,.18);
  background: rgba(255,255,255,1);
}
/* own-post marker: keep green tones by request */
.postRow.ownPost{
  border-left: 4px solid rgba(46, 170, 102, .88);
  padding-left: 6px;
}
.postRow.replyToOwn{
  box-shadow: inset 3px 0 0 rgba(232, 61, 70, .64);
}
.postRow:first-child{ border-top: none; }
.postRow[data-no="1"]{ border-top: none; }

  /* No gap between title and first row when status is empty */
  #status{ margin-top:0 !important; }
  #status:empty{ display:none; }

  /* If new-separator is placed at top, don't show a border above the first post */
  .postsList > .newSepRow:first-child + .postRow{ border-top: none; }
@media (prefers-color-scheme: dark) {
  .postRow{ background: rgba(18,18,18,1); }
  .postRow.ownPost{ border-left-color: rgba(88, 214, 141, .92); }
  .postRow.replyToOwn{ box-shadow: inset 3px 0 0 rgba(255, 121, 127, .72); }
}

.newSepRow{ background: rgba(0, 140, 255, .40); color:#fff; font-size:14px; font-weight:700; padding:4px 0 4px 10px; margin:0; line-height:1.2; }
.newSepRow{ border: none; }
.readSepRow{ background: rgba(0, 140, 255, .14); color: rgba(0, 90, 160, .92); font-size:13px; font-weight:700; padding:4px 0 4px 10px; margin:0; line-height:1.2; border:none; }

.postRow.ngHeaderFold{
  border-top: 1px solid rgba(127,127,127,.18);
}
.postRow.ngHeaderFold .phead{
  cursor: pointer;
  opacity: .58;
}
.postRow.ngHeaderFold.open .phead{ opacity: 1; }
/* Keep NG-folded rows truly collapsed even when child styles set display values (e.g. .thumbs{display:flex}) */
.postRow.ngHeaderFold > *[hidden]{ display:none !important; }
/* Also force-hide header spans marked hidden (normal .phead span rules set display:inline). */
.postRow.ngHeaderFold .phead > span[hidden]{ display:none !important; }

.phead{
  display:block;
  margin: 0 -4px;
  font-size: 10px;
  line-height: 1.25;
  color: rgba(0,0,0,.38);
  opacity: 1;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (prefers-color-scheme: dark) { .phead{ color: rgba(255,255,255,.48); } }
.phead > span{
  display:inline;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.phead > span + span{ margin-left: 6px; }
.phead > .pngDebug{
  display: block;
  margin: 4px 0 0;
  opacity: .9;
  font-size: 10px;
}
.pno{ font-weight: 600; }
.panc{ opacity: .85; font-weight: 600; }
.pmail{ opacity: .75; }
.pname{
  font-weight: 500;
  font-size: 10px;
}
.ptime{ opacity: .62; }
.pid{
  float: right;
  margin-left: 8px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  font-size: 10px;
  opacity: .95;
  text-align: right;
  overflow-wrap: anywhere;
}
.phead::after{ content:""; display:block; clear:both; }

.pbody{
  margin-top: 4px;
  line-height: 1.35;
  word-break: break-word;
  font-size: 14px;
}

/* ---- AA inline (per-post toggle) ---- */
.pbody.aaInline{
  font-family: "aahub_light", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  font-size: 14px;
  line-height: 1;
  word-break: normal;
  overflow-x: auto;
  overflow-y: hidden;
  font-variant-ligatures: none;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.pbody.aaInline *{
  font-family: inherit;
  white-space: inherit;
  word-break: inherit;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* In copy mode, allow selecting AA too */
body.copyMode .pbody.aaInline,
body.copyMode .pbody.aaInline *{
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.ref{ color: #06c; font-weight: 400; text-decoration: none; cursor: pointer; }
@media (prefers-color-scheme: dark) { .ref{ color: #4aa3ff; } }
.url { text-decoration: underline; word-break: break-all; }
.inlineFullImageWrap{ display:block; margin:0 0 2px; line-height:0; }
.inlineFullImage{ display:block; max-width:100%; width:auto; height:auto; object-fit:contain; background:transparent; image-rendering:auto; }
.inlineFullImage.isCrispImage{ image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; }

/* Inline MP4 embed (basic) */
.mp4Box{
  display:inline-flex;
  margin:6px 0;
  width: 120px;
  height: 120px;
  max-width: 100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  background:#000;
  overflow:hidden;
  align-items:center;
  justify-content:center;
}
@media (prefers-color-scheme: dark) { .mp4Box{ border:1px solid rgba(255,255,255,.14); } }
.mp4Embed{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  display: block;
}
.mp4Url{ display:block; margin-top: 4px; }
.mp4ThumbBox{
  width:120px;
  height:120px;
  flex:0 0 auto;
  padding:0;
  position:relative;
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  background:#000;
  background-clip:padding-box;
  color:#fff;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform: translateZ(0);
}
.mp4ThumbBox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
  -webkit-backface-visibility:hidden;
}
.mp4PlayIcon{
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.52);
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
  pointer-events:none;
}
.mp4PlayIcon::before{
  content:"";
  position:absolute;
  left:15px;
  top:10px;
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid rgba(255,255,255,.95);
}
@media (prefers-color-scheme: dark){ .mp4ThumbBox{ border:1px solid rgba(255,255,255,.14); } }


.thumbs { margin-top: 8px; display:flex; gap: 6px; flex-wrap: wrap; }
.thumbs img{ border:0; background:transparent; border-radius:0; max-height:none; }
/* Modal (popup) */
.modal{
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: none;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: rgba(0,0,0,.35);
}
.modal.show{ display: flex; align-items: center; justify-content: center; }
.modal:has(.postPopupBody){
  padding-left: 0;
  padding-right: 0;
}
.modal.keyboardOpen{
  top: var(--modal-vv-top, 0px);
  bottom: auto;
  height: var(--modal-vv-h, 100vh);
}
.modalBox{
  width: 100%;
  max-width: 980px;
  max-height: 86vh;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  background: rgba(250,250,250,.98);
}
.modal:has(.postPopupBody) .modalBox{
  border-radius: 0;
  border-left: none;
  border-right: none;
  max-width: none;
  max-height: 78vh;
}
.modal:has(.postPopupBody) .modalTop{
  display: none;
}
.modal:has(.postPopupBody) .modalClose{
  padding: 1px 8px;
  font-size: 16px;
}
.modal.keyboardOpen .modalBox{
  max-height: calc(var(--modal-vv-h, 100vh) - 20px);
}
@media (prefers-color-scheme: dark) {
  .modalBox{ background: rgba(18,18,18,.98); }
}
.modalBox .postsList{ border-top: none; }
.modalTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: none;font-weight: 800;
}
.modalTitle{ font-size: 14px; }
.modalClose{
  padding: 4px 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modalBody{
  padding: 8px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(86vh - 48px);
}
.modalBody.postPopupBody{
  padding-top: 0;
  padding-bottom: 0;
  max-height: 78vh;
}
.modal.keyboardOpen .modalBody{
  max-height: calc(var(--modal-vv-h, 100vh) - 68px);
  overscroll-behavior: contain;
}
.modal.keyboardOpen .modalBody.postPopupBody{
  max-height: calc(var(--modal-vv-h, 100vh) - 20px);
}
.modalBody .postRow{
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  margin: 0;
}
/* modal separators between posts (ID/anchor/related popup) */
.modalBody .postRow + .postRow{
  border-top: 1px solid rgba(127,127,127,.18);
}
@media (prefers-color-scheme: dark) {
  .modalBody .postRow + .postRow{
    border-top: 1px solid rgba(255,255,255,.12);
  }
}



/* Conversation popup (anchor chains) */
.modalBody.convList{
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.modalBody.convList .postRow{
  border: none;
  border-radius: 0;
  background: rgba(127,127,127,.04);
  padding: 8px 10px 10px;
  box-sizing: border-box;
}
.modalBody.convList .postRow + .postRow{ border-top: none !important; }

/* Conversation list uses normal .postRow markup; override negative margins/wrapping for narrow bubbles */
.modalBody.convList .phead{
  margin: 0;
}
.modalBody.convList .phead > span{
  min-width: 0;
}
.modalBody.convList .pid{
  margin-left: auto;
}
.modalBody.convList .pbody{
  margin-top: 6px;
}
@media (prefers-color-scheme: dark) {
  .modalBody.convList .postRow{
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .modalBody.convList .postRow.convNarrow{
    border-left: 1px solid rgba(255,255,255,.12);
  }
}
.modalBody.convList .postRow{
  border-bottom: 1px solid rgba(127,127,127,.18);
}
.modalBody.convList .postRow.convNarrow{
  border-left: 1px solid rgba(127,127,127,.18);
}
.modalBody.convList .postRow:last-child{
  border-bottom: none;
}
.modalBody.convList .postRow.convDepth{
  align-self: flex-end;
  margin-left: auto;
  width: clamp(180px, calc(100% - (var(--d,0) * 18px)), 100%);
}

/* Modal close button (icon-like) */
.modalClose{
  width: 34px;
  height: 34px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modalClose svg{
  width: 22px;
  height: 22px;
  display:block;
}

/* Imgur upload history modal */
.imgurHistWrap{ padding: 12px; display:flex; flex-direction:column; gap: 10px; }
.imgurHistTopRow{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.imgurHistHint{ font-size: 12px; opacity: .75; line-height: 1.25; }
.imgurHistActions{ display:flex; gap: 8px; align-items:center; }
.imgurHistBtn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.04);
  font-weight: 700;
  font-size: 12px;
}
.imgurHistBtnDanger{
  background: rgba(255, 0, 80, .10);
  border-color: rgba(255, 0, 80, .22);
}
.imgurHistList{ display:flex; flex-direction:column; gap: 8px; }
.imgurHistItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.18);
  background: rgba(127,127,127,.04);
}
.imgurHistThumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(127,127,127,.20);
  background: rgba(127,127,127,.06);
  object-fit: contain;
  flex: 0 0 auto;
}
.imgurHistMid{ flex: 1 1 auto; min-width: 0; display:flex; flex-direction:column; gap: 4px; }
.imgurHistLink{ font-size: 12px; word-break: break-all; line-height: 1.2; }
.imgurHistTime{ font-size: 11px; opacity: .7; line-height: 1.1; }
.imgurHistBtns{ flex: 0 0 auto; display:flex; gap: 8px; }
/* History tabs (upload / post) */
.histTabs{ display:flex; gap: 8px; }
.histTabBtn{
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.04);
  font-weight: 800;
  font-size: 12px;
}
.histTabBtn.on{
  background: rgba(127,127,127,.12);
  border-color: rgba(127,127,127,.45);
}
.postHistTitle{ font-size: 13px; font-weight: 900; line-height: 1.2; word-break: break-word; }
.postHistTitle.isReply{ color: #8a8a8a; }
.postHistPreview{ font-size: 12px; opacity: .85; line-height: 1.2; word-break: break-word; }
@media (prefers-color-scheme: dark) {
  .histTabBtn{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
  .histTabBtn.on{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
}
@media (prefers-color-scheme: dark) {
  .imgurHistItem{ border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
  .imgurHistThumb{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
  .imgurHistBtn{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
  .imgurHistBtnDanger{ background: rgba(255, 0, 80, .14); border-color: rgba(255, 80, 140, .26); }
}

/* NG register modal */
.ngWrap{ padding: 12px 12px 16px; display:flex; flex-direction:column; gap: 12px; }
.ngTop{ display:flex; flex-direction:column; gap: 4px; }
.ngTarget{ font-size: 13px; font-weight: 800; line-height: 1.25; }
.ngNote{ font-size: 11px; opacity: .75; line-height: 1.25; }
.ngForm{ display:flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.ngInput{
  flex: 1 1 260px;
  min-width: 0;
  font-size: 16px; /* prevent iOS zoom */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.28);
  background: rgba(127,127,127,.06);
  box-sizing: border-box;
}
.ngBtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.35);
  background: rgba(127,127,127,.02);
  font-weight: 700;
}
.ngBtnPrimary{
  background: rgba(0, 140, 255, .18);
  border-color: rgba(0, 140, 255, .30);
}
.ngBtnNormalRun{
  background: rgba(0, 140, 255, .18);
  border-color: rgba(0, 140, 255, .30);
}
.ngBtnAgitatingRun{
  background: rgba(214, 54, 69, .20);
  border-color: rgba(214, 54, 69, .40);
  color: #b31224;
}
.ngBtnDanger{
  background: rgba(255, 0, 80, .10);
  border-color: rgba(255, 0, 80, .24);
}
.ngBtnGhost{ background: transparent; }
.ngModeSelect{ flex: 0 0 auto; min-width: 112px; }
.ngModeSelectSmall{ min-width: 96px; padding-right: 24px; }
.ngStatus{ font-size: 12px; min-height: 1.2em; }
.ngStatus[data-kind="ok"]{ color: rgba(0, 140, 255, 1); }
.ngStatus[data-kind="err"]{ color: rgba(255, 0, 80, 1); }

/* NG post rules */
.ngPostForm{ display:flex; flex-direction:column; gap: 8px; }
.ngFieldRow{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.ngFieldLbl{ min-width: 44px; font-size: 12px; font-weight: 800; opacity: .85; }
.ngFieldChk{
  display:flex; align-items:center; gap: 6px;
  font-size: 12px;
  opacity: .92;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.22);
  background: rgba(127,127,127,.03);
  user-select: none;
}
.ngFieldChk.on{
  opacity: 1;
  border-color: rgba(0, 140, 255, .32);
  background: rgba(0, 140, 255, .12);
}
.ngFieldChk input{ width: 18px; height: 18px; }
.ngFieldDisabled .ngFieldLbl{ opacity: .55; }
.ngFieldDisabled .ngFieldInput{ opacity: .70; }
.ngFieldInput{ flex: 1 1 220px; }
.ngPostList{ display:flex; flex-direction:column; gap: 8px; }
.ngRuleRow{ display:flex; gap: 8px; align-items:center; justify-content: space-between; padding: 8px 10px; border-radius: 12px; border:1px solid rgba(127,127,127,.22); background: rgba(127,127,127,.04); }
.ngRuleText{ font-size: 12px; line-height: 1.25; word-break: break-word; flex: 1 1 auto; }
.ngSectionRow{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ngSectionTitle{ font-size: 13px; font-weight: 800; }
.ngCount{ font-size: 12px; opacity: .7; }
.ngList{ display:flex; flex-direction:column; gap: 8px; }
.ngItem{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.18);
  background: rgba(127,127,127,.04);
}
.ngWord{ flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.25; word-break: break-word; }
.ngItemActions{ flex: 0 0 auto; display:flex; gap: 8px; }
.ngActions{ display:flex; justify-content: flex-end; }
.ngEmpty{ font-size: 12px; opacity: .7; padding: 6px 2px; }
@media (max-width: 420px){
  .ngForm > button{ flex: 1 1 100%; }
}
@media (prefers-color-scheme: dark) {
  .ngItem{ border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
  .ngInput{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
  .ngBtnDanger{ background: rgba(255, 0, 80, .14); border-color: rgba(255, 80, 140, .28); }
  .ngStatus[data-kind="err"]{ color: rgba(255, 120, 160, 1); }
}



/* Inline search bars (threads / posts): hidden by default, shown via JS (.shown/.open) */
.postsSearchBar{
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  position: sticky;
  top: 0;
  z-index: 25;
  background: rgba(245,245,245,.96);
  border-bottom: 1px solid rgba(127,127,127,.18);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
}
.postsSearchBar.shown{ display: flex; }
.postsSearchBar.open{ opacity: 1; transform: translateY(0); }
.postsSearchBar .psInput{ flex: 1 1 auto; min-width: 0; }
.postsSearchBar .psBtn{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.postsSearchBar .psBtn svg{ width: 18px; height: 18px; }
.postsSearchBar .psStat{ flex: 0 0 auto; min-width: 52px; text-align: center; font-size: 12px; opacity: .75; }
@media (prefers-color-scheme: dark) {
  .postsSearchBar{
    background: rgba(18,18,18,.96);
    border-bottom-color: rgba(255,255,255,.14);
  }
}

/* Wide: split view (default) */
	.layout { display: flex; height: calc(100vh - var(--bb-oh, 80px)); height: calc(100dvh - var(--bb-oh, 80px)); }
.threadsPanel{
  flex: 0 0 420px;
  position: sticky;
  top: var(--top-h);
  height: calc(100vh - var(--top-h) - var(--bb-oh, 80px));
  height: calc(100dvh - var(--top-h) - var(--bb-oh, 80px));
  overflow: auto;
  overflow-anchor: none;
  padding-bottom: 0px;
  scroll-padding-bottom: 0px;
  border-right: 1px solid rgba(127,127,127,.18);
  box-sizing: border-box;
}
.postsPanel{
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  height: calc(100vh - var(--top-h) - var(--bb-oh, 80px));
  height: calc(100dvh - var(--top-h) - var(--bb-oh, 80px));
  overflow: auto;
  overflow-anchor: none;
  padding-top: 10px;
  padding-bottom: 0px;
  scroll-padding-bottom: 0px;
  box-sizing: border-box;
}
.onlyNarrow{ display:none; }
.controlsWide{ display:flex; }
.controlsNarrow{ display:none; }

@media (prefers-color-scheme: dark) {
  .threadsPanel{ border-right-color: rgba(127,127,127,.25); }
}

/* Narrow: switch view */
  @media (max-width: 900px) {
    html, body { height: 100%; overflow: hidden; }
    /* full-screen slide between Threads and Posts (animate after finger release) */
    .layout { display:block; position: fixed; left:0; right:0; top: var(--top-h, 0px); bottom: var(--bb-oh, 80px); overflow: hidden; }
    .panel { display:block; position: absolute; top: var(--titleBarH, var(--bb-h)); left:0; width:100%; height: calc(100% - var(--titleBarH, var(--bb-h))); overflow: auto; -webkit-overflow-scrolling: touch; }
    #threadsPanel, #postsPanel{ transition: transform .18s linear; will-change: transform; }
    #threadsPanel, #postsPanel{ overflow-anchor: none; }
    .layout[data-view="threads"] #threadsPanel { transform: translateX(0%); }
    .layout[data-view="threads"] #postsPanel { transform: translateX(100%); }
    .layout[data-view="posts"] #threadsPanel { transform: translateX(-100%); }
    .layout[data-view="posts"] #postsPanel { transform: translateX(0%); }
    /* Global fixed title bar (outside scroll/transform) */
    .globalTitleBar{ display:flex; }

    /* Hide per-panel title bars on narrow (they would be inside transformed scroll panels) */
    #threadsTitleBar, #threadTitleBar{ display:none !important; }

    /* Posts search bar is inside the scroll container; title bar is fixed outside */
    .postsSearchBar{ top: 0px; }

    /* override wide-only sticky sizing */
    .threadsPanel{ position:absolute; top: var(--titleBarH, var(--bb-h)); height: calc(100% - var(--titleBarH, var(--bb-h))); overflow:auto; overflow-anchor:none; border-right:none; }
    .postsPanel{ position:absolute; top: var(--titleBarH, var(--bb-h)); height: calc(100% - var(--titleBarH, var(--bb-h))); overflow:auto; overflow-anchor:none; padding-top:0; }
    html.embedded-native-ui .layout{
      margin-top: 0;
      top: var(--titleBarH, var(--bb-h));
      bottom: var(--bb-oh, 80px);
      height: auto;
    }
    html.embedded-native-ui .threadsPanel,
    html.embedded-native-ui .postsPanel{
      top: 0;
      height: 100%;
      transition: none !important;
      will-change: auto;
    }
    .onlyWide{ display:none !important; }
    .onlyNarrow{ display:inline-flex !important; }
    .controlsWide{ display:none; }
    .controlsNarrow{ display:block; }
    .top{ padding: 6px 8px; }
    input[type="text"]{ padding: 6px 8px; border-radius: 9px; }
    select, button, summary{ padding: 6px 8px; border-radius: 9px; }
    .row { gap: 8px; }
    .row + .row { margin-top: 6px; }
    .meta { display: none; } /* reduce sticky header height on mobile */
    textarea{ min-height: 92px; }
  }

  /* Remove big top header (keep only filter details when needed) */
  .top{ padding: 0; border-bottom: none; backdrop-filter: none; background: transparent; }
  .top > .row { display: none; }
  .top > .meta { display: none; }

  /* Remove thread list header area */
  .threadsPanel .threadTop { display: none; }
  .threadsPanel #threadsMeta { display: none; }

  /* Bottom bars */
  /* Disable iOS native tap highlight overlay (toolbar press effect) */
  .bottomBar, .bottomBar *{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

  :root{ --bb-h: 42px; --bb-oh: calc(var(--bb-h) + env(safe-area-inset-bottom)); --bar-bg: #505b66; --titleBarH: calc(var(--bb-h) + env(safe-area-inset-top)); }
  .bottomBar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--bar-bg);
    border-top: none;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom);
    backdrop-filter: none;
  }
    .bbInner{
    height: var(--bb-h);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    box-sizing: border-box;
  }

  /* Posts bottom bar: right align buttons */
  #bottomBarPosts .bbInner{ width:100%; justify-content: space-between; gap: 0px; padding: 0; }
  
  #bottomBarPosts .bbIconBtn{ flex: 1 1 0; min-width: 0; display:flex; align-items:center; justify-content:center; padding: 0; }
.bbSpacer{ flex: 1; }
  .bbBtn, .bbIconBtn{
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(127,127,127,.35);
    background: rgba(127,127,127,.02);
    padding: 0 12px;
    font-size: 13px;
  }

  /* Posts view: smaller icon buttons */
  #bottomBarPosts .bbIconBtn{
    height: 30px;
    padding: 0 10px;
    font-size: 26px;
    border-radius: 9px;
  
    line-height: 1;
  }
  #bottomBarPosts .bbIconBtn svg{ width:22px; height:22px; }
.bbIconBtn .bbIconSvg{width:22px;height:22px;display:block;pointer-events:none;}

  @keyframes bbSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @-webkit-keyframes bbSpin{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}
  .bbIconBtn.spinning .bbIconSvg,
  .bbIconBtn.spinning svg{
    animation: bbSpin .9s linear infinite;
    -webkit-animation: bbSpin .9s linear infinite;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    will-change: transform;
  }


.bbIconBtn{
    min-width: 42px;
    padding: 0 8px;
    font-size: 15px;
  }
  .bbBtn.active, .bbIconBtn.active{
    background: rgba(0, 140, 255, .18);
    border-color: rgba(0, 140, 255, .25);
  }
  @media (prefers-color-scheme: dark){
    .bbBtn.active, .bbIconBtn.active{
      background: rgba(0, 140, 255, .26);
      border-color: rgba(120,190,255,.32);
    }
  }

  .bbBtn:disabled, .bbIconBtn:disabled, .btn:disabled{ opacity: .45; }
  }

  
    /* ChMate-like segmented toolbar (threads list) */
  #bottomBarThreads.bottomBar{
    background: var(--bar-bg);
    border-top: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  #bottomBarThreads .bbInner{
    gap: 0;
    padding: 0;
    height: var(--bb-h);
  }
  #bottomBarThreads .bbBtn, #bottomBarThreads .bbIconBtn, #bottomBarThreads .bbGap{
    height: var(--bb-h);
    border-radius: 0;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.92);
    padding: 0 10px;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
  }
  #bottomBarThreads .bbBtn{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    min-width: 70px;
  }
  #bottomBarThreads #bbThreadsUnread{ min-width: 72px; }
  #bottomBarThreads #bbSortSubj, #bottomBarThreads #bbSortIkioi, #bottomBarThreads #bbSortNew{
    min-width: 62px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  #bottomBarThreads .bbGap{
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    pointer-events: none;
  }
  #bottomBarThreads .bbIconBtn{
    flex: 0 0 52px;
    min-width: 52px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
  }
  #bottomBarThreads .bbIconBtn svg{ width:22px; height:22px; }
  #bottomBarWide #bbWSortSubj, #bottomBarWide #bbWSortIkioi, #bottomBarWide #bbWSortNew{
    min-width: 62px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  #bottomBarThreads .bbInner > * + *{
    border-left: none;
  }

  /* Active tab */
  #bottomBarThreads .bbBtn.active, #bottomBarThreads .bbIconBtn.active{
    background: rgba(0,0,0,.14);
    color: rgba(255,255,255,.98);
  }
  #bottomBarThreads .bbBtn.autoActive, #bottomBarThreads .bbIconBtn.autoActive,
  #bottomBarWide .bbBtn.autoActive, #bottomBarWide .bbIconBtn.autoActive{
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.98);
  }
  /* No press/hover flash on touch (but keep .active visible) */
  #bottomBarThreads .bbBtn:focus, #bottomBarThreads .bbIconBtn:focus{ outline:none; }
  #bottomBarThreads .bbBtn:active:not(.active), #bottomBarThreads .bbIconBtn:active:not(.active){
    background: transparent;
  }
  #bottomBarThreads .bbBtn.active:active, #bottomBarThreads .bbIconBtn.active:active{
    background: rgba(0,0,0,.14);
  }

  /* Posts toolbar (same tone) */
  #bottomBarPosts.bottomBar{
    background: var(--bar-bg);
    border-top: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  #bottomBarPosts .bbBtn, #bottomBarPosts .bbIconBtn{
    border: none;
    background: transparent;
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
  }
  #bottomBarPosts .bbBtn.active, #bottomBarPosts .bbIconBtn.active{
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.98);
  }
  /* No press/hover flash on touch (but keep .active visible) */
  #bottomBarPosts .bbBtn:focus, #bottomBarPosts .bbIconBtn:focus{ outline:none; }
  #bottomBarPosts .bbBtn:active:not(.active), #bottomBarPosts .bbIconBtn:active:not(.active){
    background: transparent;
  }
  #bottomBarPosts .bbBtn.active:active, #bottomBarPosts .bbIconBtn.active:active{
    background: rgba(255,255,255,.10);
  }


  /* Wide toolbar (same tone) */
  #bottomBarWide.bottomBar{
    background: var(--bar-bg);
    border-top: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  #bottomBarWide .bbBtn, #bottomBarWide .bbIconBtn{
    border: none;
    background: transparent;
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
  }
  #bottomBarWide .bbBtn.active, #bottomBarWide .bbIconBtn.active{
    background: rgba(0,0,0,.14);
    color: rgba(255,255,255,.98);
  }
  #bottomBarWide .bbBtn:focus, #bottomBarWide .bbIconBtn:focus{ outline:none; }
  #bottomBarWide .bbBtn:active:not(.active), #bottomBarWide .bbIconBtn:active:not(.active){
    background: transparent;
  }
  #bottomBarWide .bbBtn.active:active, #bottomBarWide .bbIconBtn.active:active{
    background: rgba(0,0,0,.14);
  }

  /* iOS Safari sometimes keeps :hover state after tap; kill hover visuals on touch (but keep .active visible) */
  @media (hover: none) {
    #bottomBarThreads .bbBtn:hover:not(.active), #bottomBarThreads .bbIconBtn:hover:not(.active),
    #bottomBarPosts .bbBtn:hover:not(.active), #bottomBarPosts .bbIconBtn:hover:not(.active),
    #bottomBarWide .bbBtn:hover:not(.active), #bottomBarWide .bbIconBtn:hover:not(.active){
      background: transparent;
    }
  }

.bbUnreadBox{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.05;
  }
  .bbUnreadLabel{ font-size: 13px; opacity: .92; }
  .bbUnreadCount{ font-size: 13px; font-weight: 800; margin-top: 2px; }

  /* Make sure content doesn't hide behind the bottom bar */
  /* (use padding on scroll containers instead of relying on last-child margin collapsing) */
  .threadList{ margin-bottom: 0; }
  .postsList{ margin-bottom: 0; }

  /* Hide composer in normal view (open via bottom bar) */
  #composerDetails{ display: none; }
  #modal #composerDetails{ display: block; }
  #modal #composerDetails > summary{ display: none; }


  /* ---- UI tweaks (no status text, top loading bar, thumbs, image overlay) ---- */
  .loadBar{ position:fixed; top:calc(var(--top-h, 0px) + var(--titleBarH, 0px)); left:0; right:0; height:3px; z-index:10050; pointer-events:none; display:none; }
  .loadBarInner{ height:100%; width:0%; background: rgba(0,140,255,.92); transition: width .25s ease; border-radius: 0 2px 2px 0; }
  @media (prefers-color-scheme: dark){ .loadBarInner{ background: rgba(120,190,255,.92); } }

  #status, #threadsMeta{ display:none !important; }

  .tres{ font-size: 14px !important; }

  .thumbs{ display:flex; gap:6px; padding:0; margin:6px 0 2px; overflow-x:auto; }
  .thumbBox{ width:120px; height:120px; flex:0 0 auto; padding:0; position:relative; -webkit-appearance:none; appearance:none; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; background-clip:padding-box; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; transform: translateZ(0); }
  .thumbBox img{width:100%; height:100%; object-fit:contain; display:block; -webkit-backface-visibility:hidden; image-rendering:auto; background:transparent; }
  .thumbBox img.isCrispImage{ image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; }
  @media (prefers-color-scheme: dark){ .thumbBox{ border:1px solid rgba(255,255,255,.14); background:#111; } }
  .thumbProg{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background: rgba(255,255,255,.70); pointer-events:none; }
  .thumbSpin{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,0,0,.22); border-top-color: rgba(0,0,0,.70); box-sizing:border-box; animation: bbSpin .9s linear infinite; -webkit-animation: bbSpin .9s linear infinite; }
  .thumbProgPct{ font-size:12px; font-weight:800; opacity:.92; color:#000; pointer-events:none; }
  @media (prefers-color-scheme: dark){
    .thumbProg{ background: rgba(0,0,0,.35); }
    .thumbSpin{ border-color: rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.85); }
    .thumbProgPct{ color:#fff; }
  }

  .imgProg{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; background: rgba(0,0,0,.18); pointer-events:none; z-index:1; }
  .imgProg .thumbSpin{ width:28px; height:28px; border-width:3px; border-color: rgba(255,255,255,.28); border-top-color: rgba(255,255,255,.95); }
  .imgProgPct{ font-size:14px; font-weight:900; color:#fff; opacity:.92; }


  .imgOverlay{ position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; background:#000; touch-action:none; z-index:10060; display:none; align-items:center; justify-content:center; padding:0; contain:paint; isolation:isolate; }
  .imgOverlay.show{ display:flex; }
  .imgOverlay,
  .imgOverlay *{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  .thumbBox img,
  .inlineFullImage,
  .inlineFullImageBtn img,
  .imgOverlay img{
    -webkit-touch-callout: default !important;
  }
    .imgOverlay img{ max-width:100vw; max-height:100vh; max-height:100dvh; object-fit:contain; transform: translate(0px,0px) scale(1); transform-origin:center center; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; touch-action:none; image-rendering:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
    .imgOverlay img.isCrispImage{ image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; }

  /* Swipe HUD (iOS Safari-like) */
  .swipeHud{ position:fixed; left:50%; top:50%; transform: translate(-50%,-50%) scale(.98); opacity:0; pointer-events:none; z-index: 900; transition: opacity .10s linear, transform .10s linear; }
  .swipeHud.show{ opacity:1; transform: translate(-50%,-50%) scale(1); }
  .swipeHudBox{ background: rgba(0,0,0,.32); color:#fff; font-weight:800; font-size:20px; padding: 10px 22px; border-radius: 16px; letter-spacing: .06em; }}

  .bbIconBtn svg{ width:20px; height:20px; display:block; }
  .bbSortOne svg{ width:22px; height:22px; display:block; }

/* Fullscreen post composer (iOS-like) */
.postModal{ position:fixed; inset:0; z-index:10080; display:block; background: rgba(0,0,0,.0); opacity:0; pointer-events:none; will-change: opacity; transition: opacity .22s ease;}
.postModal.preShow{ opacity:0; pointer-events:auto; }
.postModal.show{ opacity:1; pointer-events:auto; }
.postModal.kbFill{ background: rgba(230,230,230,1); }
@media (prefers-color-scheme: dark){ .postModal.kbFill{ background: rgba(16,16,16,1); } }
  .postModal.closing{ pointer-events:auto; }
.postModal .postSheet{ transform: translateY(18px); opacity:0; will-change: transform, opacity; transition: transform .22s ease, opacity .22s ease;}
.postModal.show .postSheet{ transform: translateY(0); opacity:1; }
/* Post result popup (show response body text instead of inline under composer) */
.postResPopup{
  position: fixed;
  inset: 0;
  z-index: 10140; /* above postModal (10080) */
  display: none;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0,0,0,.35);
  touch-action: none;
}
.postResPopup.show{ display:flex; align-items:center; justify-content:center; }
.postResBox{
  width: 100%;
  max-width: 980px;
  max-height: 78vh;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(127,127,127,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  background: rgba(250,250,250,.98);
  display:flex;
  flex-direction:column;
  touch-action: pan-y;
}
@media (prefers-color-scheme: dark){
  .postResBox{ background: rgba(18,18,18,.98); }
}
.postResTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 800;
}
.postResTitle{ font-size: 14px; }
.postResClose{
  width: 34px;
  height: 34px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  border:none;
  background: transparent;
  color: inherit;
}
.postResClose svg{
  width: 22px;
  height: 22px;
  display:block;
}
.postResBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
}


  .postSheet{
    position:fixed;
    left:0; right:0;
    top: var(--vvTop, 0px);
    height: var(--vvH, 100vh);
    box-sizing: border-box;
    display:flex; flex-direction:column;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(245,245,245,1);
    overflow:hidden;
  }
  @media (prefers-color-scheme: dark){
    .postSheet{ background: rgba(18,18,18,1); }
  }
  .postHeader{
    flex: 0 0 auto;
    position: relative;
    height: 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: env(safe-area-inset-top) 10px 0;
    background: var(--bar-bg);
    color:#fff;
  }
  .postHeader .phBtn{
    position: relative;
    z-index: 2;
    border:none; background:transparent; color:#fff;
    padding: 10px;
    margin: -10px;
    border-radius: 10px;
  }
  .postHeader .phBtn:active{ background: rgba(255,255,255,.14); }
  .postHeader .phBtn:disabled{ opacity:.45; }
  .postHeader .phAction.busy{ opacity:.78; }
  .postHeader .phAction.busy::after{
    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    margin-left:8px;
    border:2px solid rgba(255,255,255,.70);
    border-top-color: rgba(255,255,255,.00);
    border-radius:50%;
    animation:_bbSpin .9s linear infinite;
    vertical-align:-2px;
  }
  .postHeader .phAction.busy.iconOnly::after{
    margin-left:0;
    vertical-align:middle;
  }
  @keyframes _bbSpin{ to{ transform: rotate(360deg); } }

  .postHeader .phClose{ font-size: 28px; line-height: 1; font-weight: 500; }
  .postHeader .phAction{ font-size: 16px; font-weight: 800; letter-spacing: .02em; }
  .postHeader .postDeviceName{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 132px);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .95;
    pointer-events: auto;
    cursor: pointer;
  }
  .postHeader .postDeviceName::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
    opacity: .9;
    flex: 0 0 auto;
  }
  .postHeader .postDeviceName:focus-visible{
    outline: 2px solid rgba(255,255,255,.7);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .postBody{
    flex: 1 1 auto;
    min-height: 0;
    overflow:hidden;
    -webkit-overflow-scrolling: touch;
    display:flex;
    flex-direction:column;
  }

  /* Restyle existing composer inside post modal */
  #postModal #composerDetails{ display:flex !important; flex-direction:column; flex:1 1 auto; height:100%; padding:0; margin:0; min-height:0; width:100%; }
  #postModal #composerDetails > summary{ display:none !important; }
  #postModal #composerDetails .post{ margin:0 !important; padding:0 !important; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  #postModal #composerDetails .row{
    margin:0 !important;
    padding: 0 6px;
    min-height: 36px;
    border-bottom: 1px solid rgba(127,127,127,.22);
    background: rgba(255,255,255,.92);
    border-radius: 0 !important;
    box-sizing: border-box;
    display:flex;
    gap: 8px;
    align-items:center;
  }
  @media (prefers-color-scheme: dark){
    #postModal #composerDetails .row{
      background: rgba(30,30,30,.98);
      border-bottom-color: rgba(255,255,255,.12);
    }
  }
  #postModal #composerDetails input[type="text"],
  #postModal #composerDetails select{
    border:none !important;
    background:transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: 24px;
    font-size: 15px;
    outline: none;
  }
  #postModal #composerDetails select{ flex: 0 1 160px !important; }
  #postModal #composerDetails button{
    border:none !important;
    background: transparent !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }
  #postModal #composerDetails button:active{ background: rgba(127,127,127,.18) !important; }

  #postModal #composerDetails textarea{
    border:none !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    resize: none !important;
    padding: 8px 6px !important;
    font-size: 15px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }





  /* Hard-disable any focus outline/glow inside the post modal (iOS Safari can still draw a ring) */
  #postModal, #postModal *{ -webkit-tap-highlight-color: transparent; }
  #postModal :focus,
  #postModal :focus-visible{
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  /* Remove iOS focus ring / glow on composer fields */
  #postModal #composerDetails input[type="text"],
  #postModal #composerDetails textarea{
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  #postModal #composerDetails input[type="text"]:focus,
  #postModal #composerDetails textarea:focus,
  #postModal #composerDetails input[type="text"]:focus-visible,
  #postModal #composerDetails textarea:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
  #postModal #composerDetails .row:focus-within{
    outline: none !important;
    box-shadow: none !important;
  }



  /* Also remove focus ring when the composer form is moved into .postForm (iOS workaround path) */
  #postModal .postForm input[type="text"],
  #postModal .postForm textarea,
  #postModal .postForm select{
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  #postModal .postForm input[type="text"]:focus,
  #postModal .postForm textarea:focus,
  #postModal .postForm select:focus,
  #postModal .postForm input[type="text"]:focus-visible,
  #postModal .postForm textarea:focus-visible,
  #postModal .postForm select:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
  #postModal .postForm .row:focus-within{
    outline: none !important;
    box-shadow: none !important;
  }
  /* Make MESSAGE row fill remaining space (no blank area) */
  #postModal #composerDetails .post > .row{ flex: 0 0 auto; }
  #postModal #composerDetails .row.msgRow,
  #postModal #composerDetails .row:has(#message){
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    padding: 0;
  }
  /* Hide original action buttons; header/footer handle actions */
  #postModal #composerDetails .actionRow button{ display:none !important; }
  #postModal #composerDetails .actionRow{ background: transparent !important; border-bottom: none !important; min-height: 0 !important; padding: 6px 6px 0 !important; }

  /* ---- post modal: when .post is moved out of <details> (iOS flex quirks workaround) ---- */
#postModal .postForm{ margin:0 !important; padding:0 !important; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
#postModal .postForm .row{
  margin:0 !important;
  padding: 0 6px;
  min-height: 36px;
  border-bottom: 1px solid rgba(127,127,127,.22);
  background: rgba(255,255,255,.92);
  border-radius: 0 !important;
  box-sizing: border-box;
  display:flex;
  gap: 8px;
  align-items:center;
}
.postHeader .phBtn svg{ width:22px; height:22px; display:block; }

@media (prefers-color-scheme: dark){
  #postModal .postForm .row{
    background: rgba(30,30,30,.98);
    border-bottom-color: rgba(255,255,255,.12);
  }
}
#postModal .postForm input[type="text"],
#postModal .postForm select{
  border:none !important;
  background:transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 24px;
  font-size: 15px;
  outline: none;
}
#postModal .postForm select{ flex: 0 1 160px !important; }
#postModal .postForm button{
  border:none !important;
  background: transparent !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}
#reloadDevices,
#deviceSettingReloadBtn{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
#postModal .postForm button:active{ background: rgba(127,127,127,.18) !important; }

.postSettingsPop{
  padding: 10px 12px 14px;
}
.postSettingsPop .row{
  padding: 8px 10px;
  border-radius: 12px;
}
.postSettingsPop .row + .row{
  margin-top: 8px !important;
}
.postSettingsPop input[type="text"]{
  padding: 8px 10px;
  border-radius: 8px;
}
.modalBody.deviceSettingsBody{
  background: linear-gradient(180deg, rgba(250,252,255,.98), rgba(245,248,253,.98));
}
.modalBody.deviceSettingsBody .postSettingsPop .row{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(84,110,146,.16);
}
.modalBody.deviceSettingsBody .postSettingsPop .row.deviceReloadRow{
  background: transparent;
  border-color: transparent;
}
.modalBody.deviceSettingsBody #deviceSettingReloadBtn{
  border: 1px solid rgba(53,115,210,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.98));
  color: #2f6dcb;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}
#reloadDevices.deviceReloadBusy,
#deviceSettingReloadBtn.deviceReloadBusy{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#boardMenuReload.boardReloadBusy{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#reloadDevices.deviceReloadBusy::after,
#deviceSettingReloadBtn.deviceReloadBusy::after,
#boardMenuReload.boardReloadBusy::after{
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: _bbSpin .9s linear infinite;
}

#composerDetails .devicePicker,
#postModal .devicePicker,
#modal .devicePicker{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
  flex: 1 1 auto;
}
#composerDetails .deviceButtons,
#postModal .deviceButtons,
#modal .deviceButtons{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
}
#composerDetails .deviceBtn,
#postModal .deviceBtn,
#modal .deviceBtn{
  border: 1px solid rgba(95,119,150,.34) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,255,.94)) !important;
  color: inherit;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  font-size: 12px;
  letter-spacing: .01em;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(44,62,80,.12);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
#composerDetails .deviceBtnGroup,
#postModal .deviceBtnGroup,
#modal .deviceBtnGroup{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
}
#composerDetails .deviceBtnGroup.deviceModeGroup,
#postModal .deviceBtnGroup.deviceModeGroup,
#modal .deviceBtnGroup.deviceModeGroup{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 6px;
}
#composerDetails .deviceBtnGroup.deviceModeGroup .deviceBtn,
#postModal .deviceBtnGroup.deviceModeGroup .deviceBtn,
#modal .deviceBtnGroup.deviceModeGroup .deviceBtn{
  width: 100%;
}
#composerDetails .deviceBtnGroup.deviceBtnGroupList,
#postModal .deviceBtnGroup.deviceBtnGroupList,
#modal .deviceBtnGroup.deviceBtnGroupList{
  display:grid;
  grid-template-columns: minmax(120px, 1.35fr) minmax(72px, .9fr) minmax(72px, .9fr);
  width: 100%;
  gap: 6px;
  align-items: stretch;
}
#composerDetails .deviceBtnGroup.deviceBtnGroupList.deviceModeGroup,
#postModal .deviceBtnGroup.deviceBtnGroupList.deviceModeGroup,
#modal .deviceBtnGroup.deviceBtnGroupList.deviceModeGroup{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#composerDetails .deviceBtnGroup.deviceBtnGroupList.deviceModeGroup .deviceBtn,
#postModal .deviceBtnGroup.deviceBtnGroupList.deviceModeGroup .deviceBtn,
#modal .deviceBtnGroup.deviceBtnGroupList.deviceModeGroup .deviceBtn{
  align-items: center;
  text-align: center;
}
#composerDetails .deviceTableHead,
#postModal .deviceTableHead,
#modal .deviceTableHead{
  display:grid;
  grid-template-columns: minmax(120px, 1.35fr) minmax(72px, .9fr) minmax(72px, .9fr);
  width: 100%;
  gap: 6px;
  align-items: center;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 700;
  opacity: .58;
  letter-spacing: .04em;
}
#composerDetails .deviceMiniBtn,
#postModal .deviceMiniBtn,
#modal .deviceMiniBtn{
  position: relative;
  border: 1px solid rgba(95,119,150,.30) !important;
  background: rgba(255,255,255,.82) !important;
  color: inherit;
  padding: 8px 9px !important;
  border-radius: 999px !important;
  font-size: 10px;
  letter-spacing: .02em;
  line-height: 1;
  opacity: .92;
}
#composerDetails .deviceMiniBtn.busy,
#postModal .deviceMiniBtn.busy,
#modal .deviceMiniBtn.busy{
  opacity: .82;
  pointer-events: none;
  min-width: 34px;
  width: 34px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 0;
}
#composerDetails .deviceMiniBtn.busy::after,
#postModal .deviceMiniBtn.busy::after,
#modal .deviceMiniBtn.busy::after{
  content:"";
  display:inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: _bbSpin .9s linear infinite;
  vertical-align: middle;
}
#composerDetails .deviceBtnGroup.deviceBtnGroupList .deviceBtn,
#postModal .deviceBtnGroup.deviceBtnGroupList .deviceBtn,
#modal .deviceBtnGroup.deviceBtnGroupList .deviceBtn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align: left;
  min-height: 34px;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}
#composerDetails .deviceBtnLabelMain,
#postModal .deviceBtnLabelMain,
#modal .deviceBtnLabelMain{
  display:block;
  width:100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#composerDetails .deviceBtnLabelSub,
#postModal .deviceBtnLabelSub,
#modal .deviceBtnLabelSub{
  display:block;
  width:100%;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.1;
  opacity: .62;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#composerDetails .deviceBtnLabelSub.hasId,
#postModal .deviceBtnLabelSub.hasId,
#modal .deviceBtnLabelSub.hasId{
  opacity: .72;
}
#composerDetails .deviceIdCell,
#postModal .deviceIdCell,
#modal .deviceIdCell{
  font-size: 10px;
  opacity: .7;
  white-space: nowrap;
}
#composerDetails .deviceIdCell.hasId,
#postModal .deviceIdCell.hasId,
#modal .deviceIdCell.hasId{
  opacity: .72;
}
#composerDetails .deviceBtnGroup.deviceBtnGroupList .deviceMiniBtn,
#postModal .deviceBtnGroup.deviceBtnGroupList .deviceMiniBtn,
#modal .deviceBtnGroup.deviceBtnGroupList .deviceMiniBtn{
  min-width: 0;
  min-height: 36px;
  width: 100%;
  text-align: center;
  font-weight: 600;
  border-radius: 12px !important;
}
#composerDetails .deviceCellBtn,
#postModal .deviceCellBtn,
#modal .deviceCellBtn{
  border: 1px solid rgba(95,119,150,.30) !important;
  background: rgba(255,255,255,.82) !important;
  color: inherit;
  min-height: 36px;
  width: 100%;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  text-align: left;
}
#composerDetails .deviceCellBtn:active,
#postModal .deviceCellBtn:active,
#modal .deviceCellBtn:active{
  transform: translateY(1px);
}
#composerDetails .deviceBtn:hover,
#postModal .deviceBtn:hover,
#modal .deviceBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(52,123,235,.45) !important;
  box-shadow: 0 3px 8px rgba(52,123,235,.16);
}
#composerDetails .deviceBtn.isActive,
#postModal .deviceBtn.isActive,
#modal .deviceBtn.isActive{
  background: linear-gradient(180deg, rgba(63,160,255,.97), rgba(34,123,232,.96)) !important;
  border-color: rgba(34,123,232,.96) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(34,123,232,.36);
}
#composerDetails .deviceButtonsEmpty,
#postModal .deviceButtonsEmpty,
#modal .deviceButtonsEmpty{
  opacity: .7;
  font-size: 13px;
}
#composerDetails .deviceSelected,
#postModal .deviceSelected,
#modal .deviceSelected{
  font-size: 12px;
  opacity: .8;
  padding-left: 2px;
}
#composerDetails .deviceCommandResult,
#postModal .deviceCommandResult,
#modal .deviceCommandResult{
  font-size: 12px;
  opacity: .85;
  min-height: 1.2em;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){
  .modalBody.deviceSettingsBody{
    background: linear-gradient(180deg, rgba(28,33,40,.98), rgba(22,27,34,.98));
  }
  .modalBody.deviceSettingsBody .postSettingsPop .row{
    background: rgba(47,57,70,.58);
    border-color: rgba(156,176,208,.24);
  }
  .modalBody.deviceSettingsBody .postSettingsPop .row.deviceReloadRow{
    background: transparent;
    border-color: transparent;
  }
  .modalBody.deviceSettingsBody #deviceSettingReloadBtn{
    background: linear-gradient(180deg, rgba(71,95,130,.88), rgba(57,77,106,.88));
    border-color: rgba(120,160,220,.42);
    color: rgba(232,242,255,.95);
  }
  #composerDetails .deviceBtn,
  #postModal .deviceBtn,
  #modal .deviceBtn{
    background: linear-gradient(180deg, rgba(70,80,94,.95), rgba(54,62,74,.95)) !important;
    border-color: rgba(156,176,208,.30) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  #composerDetails .deviceBtn.isActive,
  #postModal .deviceBtn.isActive,
  #modal .deviceBtn.isActive{
    background: linear-gradient(180deg, rgba(76,168,255,.98), rgba(43,130,240,.97)) !important;
    border-color: rgba(138,196,255,.78) !important;
    color:#fff !important;
  }
  #composerDetails .deviceMiniBtn,
  #postModal .deviceMiniBtn,
  #modal .deviceMiniBtn{
    background: rgba(68,78,92,.90) !important;
    border-color: rgba(156,176,208,.24) !important;
  }
}

#postModal .postForm textarea{
  border:none !important;
  border-radius: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  resize: none !important;
  padding: 8px 6px !important;
  font-size: 15px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}

/* --- unify subject/from/mail/message look --- */
#postModal .postForm,
#postModal #composerDetails{ font-size:15px; }

#postModal .postForm input[type="text"],
#postModal .postForm textarea,
#postModal #composerDetails input[type="text"],
#postModal #composerDetails textarea{
  font-size: 15px !important;
  line-height: 1.05 !important;
}

/* Name + Mail are originally in the same row; make them look like separate rows */
#postModal .postForm .row.nameMailRow,
#postModal #composerDetails .row.nameMailRow{
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
#postModal .postForm .row.nameMailRow input[type="text"],
#postModal #composerDetails .row.nameMailRow input[type="text"]{
  height: 32px;
  padding: 0 6px !important;
  box-sizing: border-box;
}
#postModal .postForm .row.nameMailRow input#pz2,
#postModal #composerDetails .row.nameMailRow input#pz2{
  border-top: 1px solid rgba(127,127,127,.22) !important;
}
@media (prefers-color-scheme: dark){
  #postModal .postForm .row.nameMailRow input#pz2,
  #postModal #composerDetails .row.nameMailRow input#pz2{
    border-top-color: rgba(255,255,255,.12) !important;
  }
}


/* Subject row: match Name/Mail compact height */
#postModal .postForm .row.subjRow,
#postModal #composerDetails .row.subjRow{
  min-height: 32px !important;
  padding: 0 !important;
  align-items: stretch !important;
}
#postModal .postForm .row.subjRow input#subject,
#postModal #composerDetails .row.subjRow input#subject{
  height: 32px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}
/* MESSAGE row fills remaining space */
#postModal .postForm > .row{ flex: 0 0 auto; }
#postModal .postForm .row.msgRow{
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  padding: 0;
}
/* Advanced rows/details toggle (keep More button behavior) */
  #postModal .advRow, #postModal .advDetails{ display:none !important; }
  #postModal .postSheet.showAdv .advRow{ display:flex !important; }
  #postModal .postSheet.showAdv .advDetails{ display:block !important; padding: 0 6px 8px; }

  /* Post result: show only when not empty */
  #postModal #postResult{ margin: 6px 6px 8px !important; }
  #postModal #postResult:empty{ display:none; }

  .postFooter{
    flex: 0 0 auto;
    height: 44px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    background: rgba(250,250,250,.92);
    overscroll-behavior: contain;
    touch-action: none;
  }
  @media (prefers-color-scheme: dark){
    .postFooter{
      background: rgba(25,25,25,.96);
    }
  }
  .postFooter button{
    width: 36px; height: 36px;
    border:none; background: transparent;
    border-radius: 10px;
    color: rgba(140,140,140,1);
  }
  .postFooter button:active{ background: rgba(127,127,127,.18); }
  .postFooter svg{ width: 22px; height: 22px; display:block; margin:0 auto; }

/* Long-press context menu */
.ctxOverlay{
  position:fixed; inset:0; z-index:10095;
  touch-action: none;
  display:block;
  opacity:0;
  pointer-events:none;
  will-change: opacity; transition: opacity .18s ease;}
.ctxOverlay.show{
  opacity:1;
  pointer-events:auto;
}
.ctxOverlay.closing{ pointer-events:auto; }
.ctxOverlay .ctxBg{
  position:absolute; inset:0;
  background: rgba(0,0,0,.18);
  opacity:0;
  will-change: opacity; transition: opacity .18s ease;}
.ctxOverlay.show .ctxBg{ opacity:1; }
.ctxMenu{
  position:absolute;
  touch-action: none;
  min-width: 200px;
  max-width: 280px;
  --ctxSep: rgba(127,127,127,.25);
  --ctxSepInset: 14px;
  background: rgba(34,34,34,.98);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(10px) scale(.985);
  opacity:0;
  will-change: transform, opacity; transition: transform .18s cubic-bezier(.2,.9,.2,1), opacity .18s ease;}
.ctxOverlay.show .ctxMenu{
  transform: translateY(0) scale(1);
  opacity:1;
}
@media (prefers-color-scheme: light){
  .ctxMenu{ background: rgba(255,255,255,.98); color: #111; border:1px solid rgba(0,0,0,.10); --ctxSep: rgba(0,0,0,.10); }
  .ctxOverlay .ctxBg{ background: rgba(0,0,0,.10); }
  .ctxBtn.active{ background: rgba(0,0,0,.06); }
}
.ctxBtn{
  width:100%;
  background: transparent;
  border: none;
  color: inherit;
  padding: 12px 14px;
  font-size: 15px;
  text-align:left;
}
.ctxBtn + .ctxBtn{ position: relative; }
.ctxBtn + .ctxBtn::before{
  content:"";
  position:absolute;
  left: var(--ctxSepInset);
  right: var(--ctxSepInset);
  top: 0;
  height: 1px;
  background: var(--ctxSep);
  pointer-events: none;
}

.ctxBtn:active{ background: rgba(127,127,127,.20); }
.ctxBtn.active{ background: rgba(127,127,127,.18); }
.ctxBtn.destructive{ color: rgb(235,70,70); }
/* While the long-press context menu is open, freeze panel scrolling so slide-select works. */
body.ctxOpen .panel{
  overflow: hidden !important;
}
/* Pointer-events scroll lock (iOS/Chrome): touch-action affects pointer panning. */
body.ctxOpen #postsPanel,
body.ctxOpen #threadsPanel{
  touch-action: none !important;
}
/* While fullscreen composer is open, stop background panels from scrolling. */
body.postModalOpen .panel{
  overflow: hidden !important;
}
body.postModalOpen #postsPanel,
body.postModalOpen #threadsPanel{
  touch-action: none !important;
}
@media (prefers-reduced-motion: reduce){
  .ctxOverlay, .ctxOverlay .ctxBg, .ctxMenu,
  .postModal, .postModal .postSheet,
  .imgOverlay, .imgOverlay img{
    transition: none !important;
  }
}



/* ---- iOS: disable tap highlight (the gray overlay) on buttons/interactive items ---- */
button, a, [role="button"], summary,
input[type="button"], input[type="submit"], input[type="reset"],
.titem, .postRow, .ctxBtn, .postFooter button{
  -webkit-tap-highlight-color: transparent;
}


/* ---- Disable our own pressed overlay backgrounds (keep only drag-highlight via .active class) ---- */
button:active,
#topBar button:active,
.postFooter button:active,
#postModal .postForm button:active,
#postModal #composerDetails button:active,
.ctxBtn:active{
  background: transparent !important;
}


/* ---- Press feedback (like the search button) ---- */
button:not(:disabled):active{
  opacity: .72;
}
button:not(:disabled){
  transition: opacity .06s linear;
}

/* Keep board menu backdrop visible while pressed */
#boardMenuBackdrop:active{
  background: rgba(0,0,0,.5) !important;
  opacity: 1 !important;
}

/* ---- Bottom bars: keep their own :active visuals (avoid darkening on press) ---- */
#bottomBarThreads .bbBtn:active, #bottomBarThreads .bbIconBtn:active,
#bottomBarPosts .bbBtn:active, #bottomBarPosts .bbIconBtn:active{
  background: transparent !important;
}
#bottomBarThreads .bbBtn.active:active, #bottomBarThreads .bbIconBtn.active:active,
#bottomBarPosts .bbBtn.active:active, #bottomBarPosts .bbIconBtn.active:active{
  background: rgba(255,255,255,.10) !important;
}

/* Keep Threads bar active state dark even while pressed */
#bottomBarThreads .bbBtn.active:active, #bottomBarThreads .bbIconBtn.active:active{
  background: rgba(0,0,0,.14) !important;
}


/* ---- Disable the blue focus ring on textareas (keep keyboard behavior) ---- */
textarea:focus,
textarea:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}


/* ---- Disable focus ring/glow on inputs inside generic modal (NG登録など) ---- */
#modal input:focus,
#modal input:focus-visible,
#modal textarea:focus,
#modal textarea:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* iOS: prevent UA styling that can add focus chrome on text inputs (DON'T nuke checkboxes) */
#modal input[type="text"],
#modal input[type="search"],
#modal input[type="password"],
#modal input[type="email"],
#modal input[type="url"],
#modal textarea{
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Ensure checkboxes/radios stay visible in modal */
#modal input[type="checkbox"],
#modal input[type="radio"]{
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: rgba(0,140,255,.92);
}

/* Keep NG input border from turning blue on focus */
.ngInput:focus,
.ngInput:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-color: rgba(127,127,127,.28) !important;
}


/* Thread creation (modeThread) */
.subjRow{ display:none; }
.postSheet.modeThread .subjRow{ display:flex; }

.titem, .postRow{ -webkit-touch-callout: none; }


/* Toast (new posts) */


/* AI progress overlay (AI reply) */
.aiProg{position:fixed; inset:0; z-index:2147483600; display:none; align-items:center; justify-content:center;
  padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom) 14px; background: rgba(0,0,0,.28); touch-action:none;}
.aiProg.show{display:flex;}
.aiProgBox{width:min(92vw,520px); padding:14px 16px; border-radius:16px; display:flex; align-items:center; gap:12px;
  color:#fff; background: rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 55px rgba(0,0,0,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.aiSpin{width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.92);
  animation: aiSpin 0.8s linear infinite; flex:0 0 auto;}
@keyframes aiSpin{to{transform:rotate(360deg);}}
.aiProgTextWrap{min-width:0;}
.aiProgText{font-size:14px; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.aiProgSub{margin-top:2px; font-size:12px; font-weight:700; line-height:1.2; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.toastWrap{
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--bb-oh, 0px) + 10px);
  z-index: 10110;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.toastWrap.show{
  opacity: 1;
  transform: translateY(0);
}
.toast{
  max-width: min(92vw, 520px);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Pull-to-refresh hint (threads panel) */
.threadsPullOverlay{
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 14px);
  transform: translate(-50%, -8px) scale(.98);
  z-index: 10120;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, background .12s ease, border-color .12s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.threadsPullOverlay.show{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.threadsPullOverlay.ready{
  background: rgba(28,120,72,.88);
  border-color: rgba(132,230,169,.45);
}
.threadsPullOverlay.bottom{
  top: auto;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  transform: translate(-50%, 8px) scale(.98);
}
.threadsPullOverlay.bottom.show{
  transform: translate(-50%, 0) scale(1);
}
.threadsPullGlyph{
  width: 18px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
}
.threadsPullText{
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
}
@media (prefers-color-scheme: dark) {
  .toast{
    background: rgba(20,20,20,.78);
    border-color: rgba(255,255,255,.12);
  }
}