:root {
  --bg: #070a17;
  --panel: #050a28;
  --panel-top: #101636;
  --tile: #0f163a;
  --tile2: #151d49;
  --line: rgba(255, 255, 255, 0.11);
  --text: #e6f0ff;
  --weak: #8c96af;
  --accent: #00beff;
  --accent-soft: #0078be;
  --ok: #00c88c;
  --err: #ff4646;
  --yellow: #ffd166;
}

* { box-sizing: border-box; }

html, body {
  overflow: hidden;
}

body {
  width: 640px;
  height: 700px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
}

.app {
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

.brand {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: var(--weak);
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 5px rgba(0, 200, 140, 0.16);
}

.dot.offline {
  background: var(--err);
  box-shadow: 0 0 0 5px rgba(255, 70, 70, 0.13);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

button, .tab {
  border: none;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
  padding: 9px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(1.12); }

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.tab {
  background: var(--panel-top);
  color: var(--weak);
  border: 1px solid var(--line);
  font-size: 12px;
}

.tab.active {
  background: var(--accent-soft);
  color: var(--text);
  border-color: var(--accent);
}

button.ghost {
  background: var(--panel-top);
  color: var(--text);
  border: 1px solid var(--line);
}

button.small {
  padding: 6px 10px;
  font-size: 12px;
}

button.wide { width: 100%; margin-top: 8px; }

.tabpane {
  display: none;
  min-height: 0;
  flex: 1;
}

.tabpane.active {
  display: block;
}

.card {
  background: var(--panel-top);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
}

#channelsTab.active {
  min-height: 0;
}

.channels-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.channel-sidebar {
  min-width: 0;
  height: 100%;
  background: var(--panel-top);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}

.channel-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px;
  gap: 6px;
  margin-bottom: 8px;
}

.channel-add-row input,
.channel-add-row button {
  height: 34px;
  padding: 7px 8px;
  font-size: 12px;
}

.sidebar-note {
  flex: 0 0 auto;
  color: var(--weak);
  font-size: 10.5px;
  line-height: 1.35;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.channel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.channel-tile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29px 29px;
  gap: 5px;
  margin-bottom: 6px;
}

.channel-tile {
  min-height: 47px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 7px 8px;
  cursor: pointer;
  overflow: hidden;
}

.channel-tile:hover { border-color: rgba(0, 190, 255, 0.55); }

.channel-tile.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.channel-tile-name {
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-preview {
  margin-top: 4px;
  color: var(--weak);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-btn,
.delete-channel-btn {
  min-width: 29px;
  width: 29px;
  height: 47px;
  padding: 0;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--weak);
  font-size: 13px;
}

.pin-btn.pinned {
  color: var(--accent);
  border-color: var(--accent);
}

.delete-channel-btn {
  color: #ff9b9b;
}

.channel-main {
  min-width: 0;
  height: 100%;
  background: var(--panel-top);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.channel-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.channel-title-wrap { min-width: 0; }

.channel-title-row {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.channel-title-row h2 {
  margin: 0;
  font-size: 20px;
  word-break: break-all;
}

.badge {
  font-size: 10.5px;
  font-weight: 900;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--weak);
  white-space: nowrap;
}

.badge.ok { color: var(--ok); border-color: rgba(0, 200, 140, 0.45); }
.badge.warn { color: var(--yellow); border-color: rgba(255, 209, 102, 0.45); }
.badge.bad { color: #ff9b9b; border-color: rgba(255, 70, 70, 0.45); }

.owner-line {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--weak);
  word-break: break-all;
}

.channel-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.compact-btn {
  padding: 7px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.channel-status {
  min-height: 16px;
  padding: 6px 0;
  color: var(--weak);
  font-size: 11.5px;
  flex: 0 0 auto;
}

.message-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 4px 4px 2px;
  scrollbar-gutter: stable;
}

.empty-state {
  color: var(--weak);
  text-align: center;
  margin-top: 45px;
  font-size: 12.5px;
  line-height: 1.45;
}

.msg-bubble {
  max-width: 96%;
  border-radius: 13px;
  padding: 8px 10px;
  margin: 0 0 7px;
  background: var(--tile);
  border: 1px solid #2a345c;
}

.msg-bubble.mine {
  margin-left: auto;
  background: rgba(0, 120, 190, 0.25);
  border-color: rgba(0, 190, 255, 0.48);
}

.msg-bubble.pending {
  margin-left: auto;
  background: rgba(0, 120, 190, 0.18);
  border-color: rgba(255, 209, 102, 0.5);
}

.msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--weak);
  font-size: 10px;
  margin-bottom: 5px;
}

.msg-head strong { color: var(--text); }
.msg-head .you { color: var(--accent); font-weight: 900; }
.msg-head .height { color: var(--accent); }

.msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.32;
}

.compose-box {
  border-top: 1px solid var(--line);
  padding-top: 7px;
  flex: 0 0 auto;
}

.compose-box textarea {
  min-height: 64px;
  max-height: 64px;
  resize: none;
  margin-bottom: 6px;
}

.compose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: end;
}

.fee-inline {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.fee-inline span {
  color: var(--weak);
  font-weight: 800;
  font-size: 11.5px;
}

.fee-inline input,
.send-btn {
  height: 36px;
}

.compose-stats {
  margin-top: 5px;
  font-size: 10.8px;
  color: var(--weak);
}

.compose-stats.warn { color: var(--yellow); }
.compose-stats.bad { color: #ff9b9b; }

.send-status {
  margin-top: 3px;
  min-height: 14px;
  font-size: 10.8px;
  color: var(--weak);
}

.send-status.ok { color: var(--ok); }
.send-status.err { color: #ff9b9b; }
.send-status.warn { color: var(--yellow); }

h2 { margin: 0 0 10px; font-size: 18px; }
p { margin: 8px 0 12px; }

label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

input, textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: var(--panel);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

input:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 76px; resize: vertical; }

.row { display: flex; align-items: center; gap: 10px; }
.row input { min-width: 0; }
.between { justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.muted { color: var(--weak); font-size: 12px; }
.mono { font-family: Consolas, Monaco, monospace; }
.wrap { word-break: break-all; }
.hidden { display: none !important; }

.address {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px;
  word-break: break-all;
  font-size: 12px;
}

.notice {
  border: 1px solid rgba(0, 190, 255, 0.25);
  background: rgba(0, 120, 190, 0.16);
  color: var(--text);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}

.danger { color: #ff9999; font-weight: 900; margin-bottom: 8px; }
.seedbox {
  border: 1px solid rgba(255, 70, 70, 0.35);
  background: rgba(255, 70, 70, 0.08);
  border-radius: 14px;
  padding: 10px;
  margin-top: 12px;
}
.seedbox textarea { min-height: 88px; font-family: Consolas, Monaco, monospace; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.stat {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px;
}
.stat span { display: block; color: var(--weak); font-size: 12px; margin-bottom: 5px; }
.stat strong { display: block; font-size: 15px; word-break: break-all; }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--weak); flex: 0 0 90px; }
.kv strong { text-align: right; }

#logBox {
  max-height: 160px;
  overflow: hidden;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 12px;
  background: #020617;
  color: #dbeafe;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}


/* v0.8: keep internal channel scrolling, but no outer popup scrolling. */
.channel-list::-webkit-scrollbar,
.message-scroll::-webkit-scrollbar {
  width: 8px;
}

.channel-list::-webkit-scrollbar-track,
.message-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.channel-list::-webkit-scrollbar-thumb,
.message-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 190, 255, 0.35);
  border-radius: 999px;
}

.channel-list::-webkit-scrollbar-thumb:hover,
.message-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 190, 255, 0.55);
}


/* v1.0 wallet onboarding */
.wallet-choice-box {
  display: grid;
  gap: 8px;
  margin: 12px 0 8px;
}

#walletAuthTitle {
  margin-bottom: 6px;
}

#walletPasswordBox,
#walletPasswordRepeatBox,
#walletMnemonicBox {
  margin-top: 8px;
}


/* v1.1 wallet-first mode.
   Until the wallet is created/unlocked, the extension shows only the wallet screen. */
body.wallet-locked .tabs {
  display: none !important;
}

body.wallet-locked #channelsTab,
body.wallet-locked #sendTab,
body.wallet-locked #networkTab {
  display: none !important;
}

body.wallet-locked #walletTab {
  display: block !important;
  flex: 1;
}

body.wallet-locked .app {
  justify-content: flex-start;
}

body.wallet-locked #walletLockedView {
  margin-top: 14px;
}

body.wallet-locked .topbar {
  margin-bottom: 12px;
}

body.wallet-locked #walletOpenView {
  display: none !important;
}


/* v1.5 channel click fix */
.channel-tile {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}

.channel-tile-name,
.channel-preview {
  pointer-events: none;
}

.pin-btn,
.delete-channel-btn {
  user-select: none;
}


/* v1.7 stable native channel list */
.native-channel-list {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  color: var(--text);
  outline: none;
}

.native-channel-list option {
  padding: 8px 8px;
  margin: 3px 0;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
}

.native-channel-list option:checked {
  background: var(--accent-soft);
  color: var(--text);
}

.channel-manage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}

.channel-manage-row button {
  height: 34px;
  padding: 7px 8px;
  font-size: 12px;
}

.danger-btn {
  color: #ff9b9b !important;
}


/* v1.8 clean channel list */
.native-channel-list option {
  font-weight: 900;
  font-size: 14px;
}

.channel-manage-row button {
  font-weight: 900;
}


/* v1.9 GUI-like channel sidebar, stable radio card implementation */
.channel-search-input {
  height: 34px;
  padding: 7px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.channel-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px 38px;
  gap: 6px;
  margin-bottom: 10px;
}

.channel-add-row input,
.channel-add-row button {
  height: 32px;
  padding: 7px 8px;
  font-size: 12px;
}

.gui-channel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.channel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 7px;
  margin-bottom: 8px;
}

.channel-radio-card {
  position: relative;
  display: block;
  min-height: 46px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.channel-radio-card:hover {
  border-color: rgba(0, 190, 255, 0.55);
}

.channel-radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.channel-radio-inner {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 12px;
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-radio-card.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 190, 255, 0.12);
}

.channel-radio-card.selected .channel-radio-inner {
  color: var(--text);
}

.pin-channel-btn {
  height: 46px;
  min-width: 36px;
  width: 36px;
  padding: 0;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--weak);
  font-size: 15px;
}

.pin-channel-btn.pinned {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 120, 190, 0.22);
}

/* v1.9.1 robust real button channel switching */
.channel-open-btn {
  position: relative;
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}

.channel-open-btn:hover {
  border-color: rgba(0, 190, 255, 0.55);
}

.channel-open-btn.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 190, 255, 0.12);
}

.danger-btn {
  color: #ff9b9b !important;
}

.sidebar-note {
  flex: 0 0 auto;
  color: var(--weak);
  font-size: 10.5px;
  line-height: 1.35;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* v1.9.3 hard channel switch fix */
.channel-row[data-open-channel] {
  cursor: pointer;
}
.channel-row[data-open-channel] .channel-open-btn {
  pointer-events: auto;
}
.channel-row[data-open-channel] .pin-channel-btn {
  pointer-events: auto;
}
.channel-open-btn:active {
  transform: translateY(1px);
}


/* v1.9.4 channel create/display fix */
.channel-add-row {
  grid-template-columns: minmax(0, 1fr) 36px 36px !important;
}
.channel-add-row button {
  min-width: 36px;
  width: 36px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.channel-open-btn {
  appearance: none;
}
.channel-row[data-open-channel] {
  user-select: none;
}


/* v1.9.6 send message modal like the desktop GUI */
.write-top-btn,
.write-message-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.compact-compose-box {
  display: grid;
  gap: 4px;
}

.compact-compose-box .wide {
  margin-top: 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.58);
}

.modal-card {
  width: min(610px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  background: var(--panel-top);
  border: 1px solid rgba(0, 190, 255, 0.38);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.modal-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.modal-subtitle,
.modal-help {
  color: var(--weak);
  font-size: 11.5px;
  line-height: 1.35;
}

.modal-close {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.modal-message-text {
  min-height: 150px;
  max-height: 260px;
  resize: vertical;
}

.modal-fee-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.modal-actions button {
  min-width: 104px;
}

@media (max-width: 560px) {
  .channel-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .modal-fee-row {
    grid-template-columns: 1fr;
  }
}


/* v1.9.10 clean channel bottom: modal-only write UI, no clipped lower compose strip */
.channel-main {
  padding-bottom: 12px;
}

.message-scroll {
  padding-bottom: 12px;
  border-bottom: 0;
}

.compact-compose-box {
  display: none !important;
}

#messageScroll::after {
  content: "";
  display: block;
  height: 10px;
}

/* v1.9.11 beautiful Channels bottom cap: clear visual ending instead of abrupt cut */
#channelsTab.active {
  padding-bottom: 4px;
}

.channels-shell {
  padding-bottom: 4px;
}

.channel-main,
.channel-sidebar {
  position: relative;
  overflow: hidden;
}

.channel-main {
  padding-bottom: 18px;
  box-shadow:
    inset 0 -1px 0 rgba(0, 190, 255, 0.18),
    inset 0 -18px 26px rgba(5, 10, 40, 0.38);
}

.channel-sidebar {
  box-shadow:
    inset 0 -1px 0 rgba(0, 190, 255, 0.12),
    inset 0 -18px 24px rgba(5, 10, 40, 0.32);
}

.message-scroll {
  margin-bottom: 6px;
  padding-bottom: 30px;
}

.channel-main::after,
.channel-sidebar::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 190, 255, 0.26), transparent);
  pointer-events: none;
}

.channel-main::before,
.channel-sidebar::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 24px;
  border-radius: 0 0 17px 17px;
  background: linear-gradient(180deg, rgba(16, 22, 54, 0), rgba(16, 22, 54, 0.96));
  pointer-events: none;
}

/* v1.9.12 taller clean Channels bottom: give the message area a real visual end */
body {
  height: 735px;
}

.app {
  padding-bottom: 18px;
}

#channelsTab.active {
  padding-bottom: 16px;
}

.channels-shell {
  height: calc(100% - 6px);
  padding-bottom: 14px;
}

.channel-main,
.channel-sidebar {
  border-radius: 18px;
}

.channel-main {
  padding-bottom: 26px;
  box-shadow:
    inset 0 -1px 0 rgba(0, 190, 255, 0.22),
    inset 0 -28px 34px rgba(5, 10, 40, 0.46);
}

.channel-sidebar {
  padding-bottom: 24px;
  box-shadow:
    inset 0 -1px 0 rgba(0, 190, 255, 0.15),
    inset 0 -28px 32px rgba(5, 10, 40, 0.38);
}

.message-scroll {
  padding-bottom: 76px !important;
  margin-bottom: 14px;
}

#messageScroll::after {
  content: "";
  display: block;
  height: 36px;
}

.channel-main::before,
.channel-sidebar::before {
  height: 34px;
}

.channel-main::after,
.channel-sidebar::after {
  bottom: 12px;
  height: 12px;
}


/* v1.9.13 Channels bottom breathing space: leave a small visible app background below the panels, like Wallet */
body {
  height: 735px;
}

.app {
  padding-bottom: 14px;
}

#channelsTab.active {
  padding-bottom: 24px;
}

#channelsTab.active .channels-shell {
  height: calc(100% - 24px);
  padding-bottom: 0;
}

#channelsTab.active .channel-main,
#channelsTab.active .channel-sidebar {
  height: 100%;
  padding-bottom: 20px;
}

#channelsTab.active .message-scroll {
  margin-bottom: 0;
  padding-bottom: 58px !important;
}

#channelsTab.active #messageScroll::after {
  height: 26px;
}

#channelsTab.active .channel-main::after,
#channelsTab.active .channel-sidebar::after {
  bottom: 10px;
}


/* v1.9.14 real cropped Channels bottom: do not let the panels run to the popup edge */
#channelsTab.active {
  padding-bottom: 0 !important;
  overflow: visible;
}

#channelsTab.active .channels-shell {
  height: calc(100% - 40px) !important;
  max-height: calc(100% - 40px) !important;
  padding-bottom: 0 !important;
}

#channelsTab.active .channel-main,
#channelsTab.active .channel-sidebar {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

#channelsTab.active .message-scroll {
  padding-bottom: 42px !important;
}

#channelsTab.active #messageScroll::after {
  height: 18px;
}

/* v1.9.15 slightly larger Channels bottom background strip */
#channelsTab.active .channels-shell {
  height: calc(100% - 58px) !important;
  max-height: calc(100% - 58px) !important;
}


/* v1.9.16 clear user warnings */
.inline-warning {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 209, 102, 0.42);
  background: rgba(255, 209, 102, 0.10);
  color: var(--yellow);
  font-size: 12px;
  line-height: 1.35;
}

.inline-warning.err {
  border-color: rgba(255, 70, 70, 0.45);
  background: rgba(255, 70, 70, 0.10);
  color: #ffb1b1;
}

.inline-warning.ok {
  border-color: rgba(0, 200, 140, 0.35);
  background: rgba(0, 200, 140, 0.09);
  color: var(--ok);
}

input.input-error,
textarea.input-error {
  border-color: rgba(255, 70, 70, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(255, 70, 70, 0.10);
}

.send-status.err,
.compose-stats.bad {
  font-weight: 800;
}


/* v1.9.17 Network settings: scrollable PC-GUI-like settings layout */
#networkTab.active {
  height: calc(100% - 0px);
  min-height: 0;
  overflow: hidden;
}

.network-scroll {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  padding-bottom: 18px;
  scrollbar-gutter: stable;
}

.network-scroll::-webkit-scrollbar,
.ops-box::-webkit-scrollbar,
.modal-card::-webkit-scrollbar {
  width: 8px;
}

.network-scroll::-webkit-scrollbar-track,
.ops-box::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.network-scroll::-webkit-scrollbar-thumb,
.ops-box::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(0, 190, 255, 0.35);
  border-radius: 999px;
}

.settings-shell {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.settings-sidebar {
  position: sticky;
  top: 0;
  background: var(--panel-top);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
}

.settings-sidebar h2 {
  margin-bottom: 6px;
}

.settings-nav {
  display: block;
  width: 100%;
  margin-top: 7px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}

.settings-nav.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 190, 255, 0.10);
}

.settings-content {
  min-width: 0;
}

.network-section {
  display: none;
}

.network-section.active {
  display: block;
}

.compact-grid {
  margin-top: 4px;
}

.inline-label {
  margin: 0;
  min-width: 42px;
  color: var(--weak);
}

.history-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0 10px;
}

.history-tab {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--weak);
}

.history-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.history-controls input {
  max-width: 80px;
}

.ops-box {
  margin-top: 10px;
  min-height: 96px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
}

.op-row {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.op-row:last-child {
  border-bottom: 0;
}

.op-row span {
  color: var(--weak);
}

.op-row code {
  color: var(--accent);
  white-space: pre-wrap;
  word-break: break-all;
}

#settingsSeedText {
  min-height: 92px;
  font-family: Consolas, Monaco, monospace;
}

#logBox {
  max-height: 420px;
  overflow-y: auto;
}

@media (max-width: 620px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    position: static;
  }
}

/* v1.9.18: show seed phrase immediately after creating a wallet */
.seed-created-card {
  width: min(620px, calc(100vw - 28px));
}

.seed-created-warning {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(255, 190, 70, 0.45);
  border-radius: 14px;
  background: rgba(255, 190, 70, 0.10);
  color: #ffe3a3;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.created-seed-text {
  min-height: 96px;
  font-family: Consolas, Monaco, monospace;
  line-height: 1.45;
}


/* v1.9.19 Wallet coin operation history: PC GUI-like Refresh + Show 30 more */
.wallet-coin-history {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.wallet-history-head {
  align-items: flex-start;
  gap: 10px;
}

.wallet-history-head h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.wallet-history-head p {
  margin: 0;
}

.wallet-ops-box {
  max-height: 300px;
  min-height: 118px;
}

#walletOpsLoadMoreBtn {
  margin-top: 10px;
}

.op-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.op-status {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--weak);
  font-size: 11px;
  text-transform: capitalize;
}

.op-detail-line {
  padding: 2px 0;
  color: var(--weak);
}

/* v1.9.22 SAFE popup scroll fix.
   Do not use aggressive flex/hidden overrides. The browser popup itself becomes
   scrollable, so Wallet can always move down to the coin history and Show 30 more. */
html,
body {
  width: 640px !important;
  min-width: 640px !important;
  height: auto !important;
  min-height: 590px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  margin: 0 !important;
}

.app {
  height: auto !important;
  min-height: 590px !important;
  overflow: visible !important;
}

#walletTab.active {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 28px !important;
}

#walletOpenView:not(.hidden),
#walletLockedView:not(.hidden) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 28px !important;
}

#walletCoinOpsBox {
  max-height: none !important;
  overflow: visible !important;
}


/* v1.9.25 Wallet coin direction colors */
.wallet-op-dir-in {
  color: var(--ok) !important;
  font-weight: 800;
}

.wallet-op-dir-out {
  color: var(--err) !important;
  font-weight: 800;
}

/* v1.9.18 static Channels layout
   Keep the Channels tab fixed in the popup. Many channel names or many messages
   must scroll inside their own boxes instead of increasing the popup/panel height. */
html,
body {
  width: 640px;
  height: 735px;
  min-height: 735px;
  max-height: 735px;
  overflow: hidden !important;
}

.app {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.tabpane {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#channelsTab.active {
  display: block !important;
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#channelsTab.active .channels-shell {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  align-items: stretch;
}

#channelsTab.active .channel-sidebar,
#channelsTab.active .channel-main {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#channelsTab.active .channel-list,
#channelsTab.active .gui-channel-list {
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

#channelsTab.active .message-scroll {
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  padding-bottom: 22px !important;
  margin-bottom: 0 !important;
}

#channelsTab.active .msg-bubble {
  flex: 0 0 auto;
}

/* v1.9.17 colored channel action icons */
#addChannelBtn {
  background: rgba(0, 200, 140, 0.18) !important;
  border: 1px solid rgba(0, 200, 140, 0.45) !important;
  color: #3ee6aa !important;
  box-shadow: inset 0 0 0 1px rgba(0, 200, 140, 0.10);
}

#addChannelBtn:hover {
  background: rgba(0, 200, 140, 0.26) !important;
  border-color: rgba(62, 230, 170, 0.62) !important;
}

#removeSelectedChannelBtn {
  background: rgba(255, 70, 70, 0.16) !important;
  border: 1px solid rgba(255, 70, 70, 0.42) !important;
  color: #ff7f7f !important;
  box-shadow: inset 0 0 0 1px rgba(255, 70, 70, 0.08);
}

#removeSelectedChannelBtn:hover {
  background: rgba(255, 70, 70, 0.24) !important;
  border-color: rgba(255, 127, 127, 0.60) !important;
}


/* v1.9.18 RU/ENG language selector */
.language-auth-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -2px 0 10px;
}

.language-auth-row label,
.settings-language-box label {
  color: var(--weak);
  font-size: 11px;
  font-weight: 800;
}

.language-select {
  min-width: 112px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-top);
  color: var(--text);
  font-weight: 800;
  padding: 0 8px;
  outline: none;
}

.language-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 190, 255, 0.12);
}

.settings-language-box {
  margin: 8px 0 12px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.settings-language-box .language-select {
  width: 100%;
  margin-top: 6px;
}


/* v1.9.26 Wallet-only internal scroll fix.
   Only the Wallet tab gets its own scroll area. Channels, Send and Network are not changed. */
#walletTab.active {
  display: block !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

#walletTab.active #walletOpenView:not(.hidden),
#walletTab.active #walletLockedView:not(.hidden) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin-bottom: 18px !important;
}

#walletTab.active #walletCoinOpsBox {
  max-height: none !important;
  overflow: visible !important;
}

/* Mozilla review safety notice */
.wallet-safety-notice { margin: 10px 0 12px; line-height: 1.35; }
#apiBase[readonly] { cursor: default; }


/* v1.0.6 cleanup: remove Channels bottom decorative strip and extra helper texts */
.sidebar-note { display: none !important; }
.notice { display: none !important; }
#channelsTab.active .channel-main,
#channelsTab.active .channel-sidebar {
  box-shadow: none !important;
  padding-bottom: 12px !important;
}
#channelsTab.active .message-scroll {
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
}
#channelsTab.active #messageScroll::after,
#channelsTab.active .channel-main::before,
#channelsTab.active .channel-main::after,
#channelsTab.active .channel-sidebar::before,
#channelsTab.active .channel-sidebar::after {
  content: none !important;
  display: none !important;
}
#channelsTab.active .channels-shell {
  height: 100% !important;
  max-height: 100% !important;
}


/* v1.0.8 channels bottom spacing + install guide */
#channelsTab.active {
  padding-bottom: 8px !important;
  overflow: visible !important;
}
#channelsTab.active .channels-shell {
  height: calc(100% - 14px) !important;
  max-height: calc(100% - 14px) !important;
}
.install-app-btn {
  margin-top: 2px;
}
.install-guide-card {
  max-width: 430px;
}
.install-guide-box {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.install-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 190, 255, 0.28);
  border-radius: 14px;
  background: rgba(0, 190, 255, 0.08);
}
.install-step span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-weight: 900;
}
.install-guide-note {
  display: block !important;
}

/* v1.0.9 Mobile smoothness upgrade: softer movement, better touch feel, Telegram-like transitions. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  animation: opstanAppIn 360ms var(--ease-out) both;
}

@keyframes opstanAppIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

button,
.tab,
.settings-nav,
.history-tab,
.channel-tile,
.pin-channel-btn,
.delete-channel-btn,
input,
textarea,
select,
.card,
.msg-bubble,
.notice,
.inline-warning {
  transition:
    transform 180ms var(--ease-smooth),
    opacity 180ms var(--ease-smooth),
    background-color 220ms var(--ease-smooth),
    border-color 220ms var(--ease-smooth),
    color 220ms var(--ease-smooth),
    box-shadow 220ms var(--ease-smooth),
    filter 180ms var(--ease-smooth);
}

button,
.tab,
.settings-nav,
.history-tab,
.channel-tile,
.pin-channel-btn,
.delete-channel-btn {
  will-change: transform;
  touch-action: manipulation;
}

button:active,
.tab:active,
.settings-nav:active,
.history-tab:active,
.channel-tile:active,
.pin-channel-btn:active,
.delete-channel-btn:active {
  transform: scale(0.972);
  filter: brightness(1.08);
}

button:disabled:active {
  transform: none;
}

.tab.active {
  box-shadow: 0 8px 24px rgba(0, 120, 190, 0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}

.tabpane.active {
  animation: opstanPaneIn 240ms var(--ease-out) both;
  transform-origin: 50% 55%;
}

@keyframes opstanPaneIn {
  from { opacity: 0; transform: translateX(8px) scale(0.992); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.card {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(0, 190, 255, 0.62) !important;
  box-shadow: 0 0 0 4px rgba(0, 190, 255, 0.10) !important;
  outline: none !important;
}

.message-scroll,
.channel-list,
.network-scroll,
.ops-box,
#walletTab.active,
#sendTab.active,
#networkTab.active,
.modal-card {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.msg-bubble {
  animation: opstanMessageIn 220ms var(--ease-out) both;
  transform-origin: 50% 100%;
}

@keyframes opstanMessageIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.channel-tile {
  will-change: transform, background-color, border-color;
}

.channel-tile:hover,
.channel-tile.selected,
.channel-tile.active {
  transform: translateY(-1px);
}

.modal:not(.hidden) {
  animation: opstanModalFade 180ms var(--ease-out) both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal:not(.hidden) .modal-card {
  animation: opstanModalCard 260ms var(--ease-out) both;
  transform-origin: 50% 55%;
}

@keyframes opstanModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes opstanModalCard {
  from { opacity: 0; transform: translateY(16px) scale(0.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.inline-warning:not(.hidden),
.notice:not(.hidden),
.seedbox:not(.hidden) {
  animation: opstanSoftPop 220ms var(--ease-out) both;
}

@keyframes opstanSoftPop {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dot.online,
.dot.offline {
  animation: opstanDotPulse 1800ms ease-in-out infinite;
}

@keyframes opstanDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* v1.0.10 iOS/Telegram-like tactile press + softer window open/close. */
:root {
  --ease-ios-spring: cubic-bezier(0.18, 1.18, 0.24, 1);
  --ease-ios-press: cubic-bezier(0.2, 0.95, 0.22, 1);
}

button,
.tab,
.settings-nav,
.history-tab,
.channel-tile,
.pin-channel-btn,
.delete-channel-btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition:
    transform 140ms var(--ease-ios-press),
    filter 140ms var(--ease-ios-press),
    box-shadow 210ms var(--ease-smooth),
    background-color 210ms var(--ease-smooth),
    border-color 210ms var(--ease-smooth) !important;
}

button.ios-pressing,
.tab.ios-pressing,
.settings-nav.ios-pressing,
.history-tab.ios-pressing,
.channel-tile.ios-pressing,
.pin-channel-btn.ios-pressing,
.delete-channel-btn.ios-pressing {
  transform: scale(0.955) translateY(1px) translateZ(0) !important;
  filter: brightness(1.12) saturate(1.08);
}

button:active,
.tab:active,
.settings-nav:active,
.history-tab:active,
.channel-tile:active,
.pin-channel-btn:active,
.delete-channel-btn:active {
  transform: scale(0.955) translateY(1px) translateZ(0) !important;
}

.opstan-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0) 72%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.8;
  animation: opstanRippleIOS 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

button > :not(.opstan-ripple),
.tab > :not(.opstan-ripple),
.settings-nav > :not(.opstan-ripple),
.history-tab > :not(.opstan-ripple) {
  position: relative;
  z-index: 1;
}

@keyframes opstanRippleIOS {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.78; }
  55% { opacity: 0.32; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.modal:not(.hidden) {
  animation: opstanModalFadeIOS 260ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(13px) saturate(1.18);
  -webkit-backdrop-filter: blur(13px) saturate(1.18);
}

.modal:not(.hidden) .modal-card {
  animation: opstanModalCardIOS 430ms var(--ease-ios-spring) both !important;
  transform-origin: 50% 78%;
  will-change: transform, opacity, filter;
}

.modal.modal-closing {
  animation: opstanModalFadeOutIOS 220ms cubic-bezier(0.4, 0, 1, 1) both !important;
}

.modal.modal-closing .modal-card {
  animation: opstanModalCardOutIOS 220ms cubic-bezier(0.4, 0, 1, 1) both !important;
}

@keyframes opstanModalFadeIOS {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes opstanModalFadeOutIOS {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes opstanModalCardIOS {
  0% { opacity: 0; transform: translateY(34px) scale(0.90); filter: blur(2px); }
  58% { opacity: 1; transform: translateY(-3px) scale(1.012); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes opstanModalCardOutIOS {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(18px) scale(0.965); filter: blur(1px); }
}

.card:not(.modal-card) {
  transition:
    transform 220ms var(--ease-smooth),
    opacity 220ms var(--ease-smooth),
    box-shadow 260ms var(--ease-smooth),
    border-color 220ms var(--ease-smooth),
    background-color 220ms var(--ease-smooth) !important;
}

.tabpane.active .card:not(.modal-card),
.tabpane.active .msg-bubble,
.tabpane.active .channel-tile {
  animation-duration: 300ms !important;
  animation-timing-function: var(--ease-ios-spring) !important;
}

@media (max-width: 560px) {
  .modal {
    align-items: flex-end;
    padding: 10px;
  }
  .modal-card {
    width: 100%;
    border-radius: 24px 24px 18px 18px;
    padding: 16px;
  }
  .modal:not(.hidden) .modal-card {
    animation-name: opstanModalSheetIOS !important;
    transform-origin: 50% 100%;
  }
  .modal.modal-closing .modal-card {
    animation-name: opstanModalSheetOutIOS !important;
  }
}

@keyframes opstanModalSheetIOS {
  0% { opacity: 0; transform: translateY(52px) scale(0.96); filter: blur(2px); }
  62% { opacity: 1; transform: translateY(-4px) scale(1.004); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes opstanModalSheetOutIOS {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(38px) scale(0.98); }
}


/* v1.0.14 — cleaner operation history rows for mempool channel messages */
.op-row-message {
  gap: 7px;
  padding: 12px 0;
}

.op-row-message .op-row-title strong {
  font-size: 14px;
}

.op-message-meta {
  color: var(--weak);
  font-size: 12px;
  line-height: 1.35;
}

.op-info-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.op-info-label {
  color: var(--weak) !important;
  font-weight: 700;
}

.op-info-line strong {
  font-weight: 700;
  color: var(--text);
}

.op-info-accent strong {
  color: var(--accent);
}

.op-status.mempool,
.op-status.pending {
  color: var(--yellow);
  border-color: rgba(255, 209, 102, 0.45);
  background: rgba(255, 209, 102, 0.08);
}

@media (max-width: 620px) {
  .op-info-line {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px;
  }
}


/* v1.0.15 locked wallet recovery/change-wallet button */
#forgetWalletLockedBtn {
  color: #ffb0b0 !important;
  border-color: rgba(255, 90, 90, 0.35) !important;
}
#forgetWalletLockedBtn:active {
  transform: scale(0.985);
}
body.wallet-locked #walletLockedView .actions {
  align-items: center;
}


/* v1.0.19 mobile Telegram-style channel navigation
   Mobile behavior: first show a clean channel list. Tap a channel -> open it as a full-screen page.
   Desktop/tablet split view remains unchanged. */
.channel-back-btn {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 34px;
  line-height: 34px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px 0;
  flex: 0 0 auto;
}
.channel-list-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.channel-list-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.channel-list-preview {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  opacity: .9;
}
.channel-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #eaf6ff;
  background:
    radial-gradient(circle at 35% 30%, rgba(65,205,255,.65), transparent 34%),
    linear-gradient(145deg, rgba(4,130,210,.95), rgba(8,31,82,.98));
  box-shadow: inset 0 0 0 3px rgba(0,190,255,.28), 0 8px 22px rgba(0,0,0,.28);
}

@media (max-width: 700px) {
  html, body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body {
    background: #070a17 !important;
  }

  .app {
    width: 100% !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 12px) 14px !important;
    overflow: hidden !important;
  }

  .topbar {
    flex: 0 0 auto;
    padding-top: 2px;
  }

  .brand {
    font-size: clamp(38px, 10vw, 56px) !important;
    line-height: 1 !important;
  }

  .subtitle {
    font-size: 16px !important;
    max-width: 280px;
  }

  .tabs {
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
  }

  .tab {
    min-width: 0 !important;
    height: 50px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    padding: 0 6px !important;
  }

  .tabpane.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #channelsTab.active {
    height: auto !important;
    overflow: hidden !important;
  }

  #channelsTab.active .channels-shell {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #channelsTab.active .channel-sidebar,
  #channelsTab.active .channel-main {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #channelsTab.active .channel-main {
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.channel-detail-open #channelsTab.active .channel-sidebar {
    display: none !important;
  }

  body.channel-detail-open #channelsTab.active .channel-main {
    display: flex !important;
    animation: opstanSlideIn .20s ease-out both;
  }

  @keyframes opstanSlideIn {
    from { opacity: .2; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .sidebar-title {
    display: none !important;
  }

  .channel-search-input {
    height: 50px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.10) !important;
    text-align: left !important;
    font-size: 17px !important;
    margin: 0 0 10px 0 !important;
  }

  .channel-add-row {
    display: grid !important;
    grid-template-columns: 1fr 52px 52px !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .channel-add-row input,
  .channel-add-row button {
    height: 52px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
  }

  #channelsTab.active .channel-list,
  #channelsTab.active .gui-channel-list {
    height: calc(100dvh - 260px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    padding: 2px 0 80px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .channel-row {
    display: grid !important;
    grid-template-columns: 1fr 46px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 74px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .channel-open-btn {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 74px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    padding: 8px 4px !important;
    text-align: left !important;
  }

  .channel-open-btn.selected {
    background: rgba(0, 170, 255, .10) !important;
  }

  .channel-list-title {
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
  }

  .channel-list-preview {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .pin-channel-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: .75;
  }

  .pin-channel-btn.pinned {
    opacity: 1;
  }

  .channel-header {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 4px 0 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .channel-back-btn {
    display: inline-flex !important;
  }

  .channel-title-row h2 {
    font-size: 24px !important;
    max-width: 100% !important;
  }

  .channel-actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .channel-actions button {
    height: 48px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }

  #channelsTab.active .message-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0 90px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .msg-bubble {
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  .compose-box {
    display: none !important;
  }
}

/* v1.0.20 clean mobile Telegram-like layout fix */
@media (max-width: 700px) {
  * { box-sizing: border-box; }

  html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #070a17 !important;
    overscroll-behavior: none !important;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
  }

  .app {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px) 12px !important;
    gap: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .topbar {
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .brand {
    font-size: clamp(34px, 9.4vw, 46px) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;
  }

  .subtitle {
    margin-top: 4px !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
    max-width: 270px !important;
  }

  .dot {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 10px !important;
  }

  .tabs {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    padding: 0 3px !important;
    border-radius: 16px !important;
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .tabpane.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* Clean list screen */
  #channelsTab.active,
  #channelsTab.active .channels-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  #channelsTab.active .channels-shell { display: block !important; }

  #channelsTab.active .channel-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .sidebar-title { display: none !important; }

  .channel-search-input {
    flex: 0 0 auto !important;
    height: 44px !important;
    margin: 2px 0 8px 0 !important;
    padding: 0 18px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.11) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    color: var(--text) !important;
    font-size: 16px !important;
    text-align: left !important;
  }

  .channel-add-row {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
  }

  .channel-add-row input,
  .channel-add-row button {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
  }

  #channelsTab.active .channel-list,
  #channelsTab.active .gui-channel-list {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 22px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .channel-row {
    width: 100% !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px 4px 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
  }

  .channel-row:active { background: rgba(255,255,255,.055) !important; }

  .channel-open-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    color: var(--text) !important;
  }

  .channel-open-btn.selected {
    background: transparent !important;
  }

  .channel-avatar {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    font-size: 15px !important;
    border-radius: 50% !important;
  }

  .channel-list-text {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .channel-list-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
  }

  .channel-list-preview {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
    color: rgba(235,242,255,.58) !important;
    font-weight: 650 !important;
  }

  .pin-channel-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
    opacity: .82 !important;
    padding: 0 !important;
  }

  /* Full-screen channel detail like a chat screen */
  body.channel-detail-open .topbar,
  body.channel-detail-open .tabs {
    display: none !important;
  }

  body.channel-detail-open .app {
    padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px) 12px !important;
    gap: 0 !important;
  }

  body.channel-detail-open #channelsTab.active,
  body.channel-detail-open #channelsTab.active .channels-shell {
    height: 100% !important;
  }

  #channelsTab.active .channel-main {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.channel-detail-open #channelsTab.active .channel-sidebar { display: none !important; }

  body.channel-detail-open #channelsTab.active .channel-main {
    display: flex !important;
    animation: opstanChatOpen .18s ease-out both;
  }

  @keyframes opstanChatOpen {
    from { opacity: .35; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .channel-header {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 4px 0 8px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(7,10,23,.94) !important;
    backdrop-filter: blur(16px) !important;
  }

  .channel-back-btn {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    font-size: 35px !important;
    line-height: 1 !important;
    padding: 0 0 5px 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.065) !important;
  }

  .channel-title-wrap { min-width: 0 !important; }

  .channel-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .channel-title-row h2 {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 23px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .badge {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  .owner-line {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    margin-top: 3px !important;
  }

  .channel-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  .channel-actions button {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
    padding: 0 8px !important;
  }

  .channel-status {
    flex: 0 0 auto !important;
    margin: 8px 0 6px 0 !important;
    padding: 0 2px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #channelsTab.active .message-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 22px 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .message-scroll .empty-state {
    margin: 18px 4px !important;
    border-radius: 18px !important;
  }

  .msg-bubble {
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 12px 13px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .compose-box { display: none !important; }

  /* General mobile cards so other tabs stop clipping */
  #walletTab.active,
  #sendTab.active,
  #networkTab.active {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 30px !important;
  }

  .card,
  .settings-shell,
  .network-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
  }

  .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .actions button { flex: 1 1 140px !important; }
}

/* v1.0.21 true phone UI: Telegram-like list -> full channel screen */
@media (max-width: 768px) {
  :root {
    --phone-bg: #070a17;
    --phone-panel: #11172e;
    --phone-line: rgba(255,255,255,.09);
    --phone-muted: rgba(235,242,255,.58);
    --phone-text: #edf4ff;
    --phone-blue: #078bd3;
  }

  * { box-sizing: border-box !important; }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--phone-bg) !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body::before,
  body::after,
  .app::before,
  .app::after,
  .channel-sidebar::before,
  .channel-sidebar::after,
  .channel-main::before,
  .channel-main::after {
    display: none !important;
    content: none !important;
  }

  .app {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 10px) 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: hidden !important;
    background: var(--phone-bg) !important;
  }

  .topbar {
    width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .brand {
    font-size: clamp(30px, 8.3vw, 40px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    margin: 0 !important;
  }

  .subtitle {
    margin-top: 3px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1.22 !important;
    max-width: 240px !important;
    color: var(--phone-muted) !important;
  }

  .dot {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 2px 6px 0 !important;
    box-shadow: 0 0 0 8px rgba(0, 214, 170, .12) !important;
  }

  .tabs {
    width: 100% !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 4px !important;
    border-radius: 13px !important;
    font-size: clamp(10.5px, 3.05vw, 13px) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tabpane.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* CHANNELS LIST SCREEN */
  #channelsTab.active,
  #channelsTab.active .channels-shell {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #channelsTab.active .channel-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar-title { display: none !important; }

  .channel-search-input {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 auto !important;
    margin: 0 0 8px 0 !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.105) !important;
    color: var(--phone-text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-align: left !important;
  }

  .channel-add-row {
    width: 100% !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 7px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
  }

  .channel-add-row input,
  .channel-add-row button {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    padding: 0 12px !important;
  }

  .channel-add-row button {
    padding: 0 !important;
    font-size: 20px !important;
  }

  #channelAddWarning {
    flex: 0 0 auto !important;
    margin: 0 0 6px 0 !important;
  }

  #channelsTab.active .channel-list,
  #channelsTab.active .gui-channel-list {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 0 calc(env(safe-area-inset-bottom) + 18px) 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0 !important;
    background: transparent !important;
  }

  .channel-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    height: 64px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .channel-row:active { background: rgba(255,255,255,.055) !important; }

  .channel-open-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 0 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    color: var(--phone-text) !important;
  }

  .channel-open-btn.selected { background: transparent !important; }

  .channel-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .channel-list-text {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .channel-list-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
  }

  .channel-list-preview {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
    line-height: 1.12 !important;
    color: var(--phone-muted) !important;
    font-weight: 650 !important;
  }

  .pin-channel-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 18px !important;
    opacity: .82 !important;
    padding: 0 !important;
  }

  /* DETAIL SCREEN: one full screen only, no split */
  #channelsTab.active .channel-main {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.channel-detail-open .topbar,
  body.channel-detail-open .tabs {
    display: none !important;
  }

  body.channel-detail-open .app {
    padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px) 12px !important;
    gap: 0 !important;
  }

  body.channel-detail-open #channelsTab.active,
  body.channel-detail-open #channelsTab.active .channels-shell {
    height: 100% !important;
    width: 100% !important;
  }

  body.channel-detail-open #channelsTab.active .channel-sidebar {
    display: none !important;
  }

  body.channel-detail-open #channelsTab.active .channel-main {
    display: flex !important;
    animation: opstanChatOpenV21 .18s ease-out both;
  }

  @keyframes opstanChatOpenV21 {
    from { opacity: .25; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .channel-header {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 2px 0 8px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.085) !important;
    border-radius: 0 !important;
    background: rgba(7,10,23,.96) !important;
    box-shadow: none !important;
  }

  .channel-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    font-size: 30px !important;
    line-height: 1 !important;
    padding: 0 0 4px 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.07) !important;
    color: var(--phone-text) !important;
  }

  .channel-title-wrap { min-width: 0 !important; }

  .channel-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .channel-title-row h2 {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 21px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    letter-spacing: -.025em !important;
  }

  .badge {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
  }

  .owner-line {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    color: var(--phone-muted) !important;
  }

  .channel-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr .82fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 7px 0 0 0 !important;
  }

  .channel-actions button {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .channel-status {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 8px 0 6px 0 !important;
    padding: 0 2px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: var(--phone-muted) !important;
  }

  #channelsTab.active .message-scroll {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 0 calc(env(safe-area-inset-bottom) + 18px) 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .message-scroll .empty-state {
    margin: 14px 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
  }

  .msg-bubble {
    width: auto !important;
    max-width: 100% !important;
    margin: 7px 0 !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
    font-size: 14.5px !important;
    line-height: 1.36 !important;
  }

  .compose-box { display: none !important; }

  /* Other tabs remain usable on phone */
  #walletTab.active,
  #sendTab.active,
  #networkTab.active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px) !important;
  }

  .card,
  .settings-shell,
  .network-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
  }

  .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .actions button { flex: 1 1 130px !important; }
}

/* v1.0.22 mobile fix: true single-screen phone UI, no split, full readable channel list/detail */
@media (max-width: 768px) {
  html, body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    background: #070a17 !important;
  }

  .app {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 10px) 14px !important;
    overflow: hidden !important;
  }

  .topbar { flex-shrink: 0 !important; }
  .brand { font-size: clamp(30px, 9vw, 42px) !important; }
  .subtitle { font-size: 12px !important; max-width: 245px !important; }

  .tabs {
    flex: 0 0 38px !important;
    height: 38px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .tab {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 13px !important;
    font-size: 11px !important;
    padding: 0 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tabpane.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #channelsTab.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #channelsTab.active .channels-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.channel-detail-open) #channelsTab.active .channel-main {
    display: none !important;
  }

  body:not(.channel-detail-open) #channelsTab.active .channel-sidebar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .channel-search-input {
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
  }

  .channel-add-row {
    flex: 0 0 40px !important;
    height: 40px !important;
    grid-template-columns: minmax(0, 1fr) 40px 40px !important;
    gap: 7px !important;
    margin: 0 0 8px 0 !important;
  }

  .channel-add-row input,
  .channel-add-row button {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  #channelsTab.active .channel-list,
  #channelsTab.active .gui-channel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 calc(env(safe-area-inset-bottom) + 90px) 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .channel-row {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
  }

  .channel-open-btn {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 0 0 0 2px !important;
    overflow: hidden !important;
  }

  .channel-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .channel-list-title {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  .channel-list-preview {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .pin-channel-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  /* Detail is a real full-screen overlay on phones. This prevents any side-by-side split. */
  body.channel-detail-open .topbar,
  body.channel-detail-open .tabs,
  body.channel-detail-open #channelsTab.active .channel-sidebar {
    display: none !important;
  }

  body.channel-detail-open .app,
  body.channel-detail-open #channelsTab.active,
  body.channel-detail-open #channelsTab.active .channels-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.channel-detail-open #channelsTab.active .channel-main {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: calc(env(safe-area-inset-top) + 8px) 14px calc(env(safe-area-inset-bottom) + 8px) 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #070a17 !important;
    box-shadow: none !important;
  }

  body.channel-detail-open .channel-header {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    background: #070a17 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }

  body.channel-detail-open .channel-back-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 28px !important;
  }

  body.channel-detail-open .channel-title-row h2 {
    font-size: 19px !important;
    max-width: 100% !important;
  }

  body.channel-detail-open .owner-line {
    font-size: 11px !important;
  }

  body.channel-detail-open .channel-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr .8fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
  }

  body.channel-detail-open .channel-actions button {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 12px !important;
    border-radius: 13px !important;
    padding: 0 6px !important;
  }

  body.channel-detail-open .channel-status {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 8px 0 8px 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.channel-detail-open #messageScroll,
  body.channel-detail-open .message-scroll {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 0 calc(env(safe-area-inset-bottom) + 18px) 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
  }

  body.channel-detail-open .msg-bubble,
  body.channel-detail-open .message-card,
  body.channel-detail-open .empty-state {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* v1.0.23: real phone UI forced by JS class. Fix hidden channels and prevent split view on iPhone/Telegram/Safari. */
html.opstan-phone-ui,
html.opstan-phone-ui body,
body.opstan-phone-ui {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #070a17 !important;
  -webkit-text-size-adjust: 100% !important;
}

body.opstan-phone-ui .app {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  padding: calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 24px) 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

body.opstan-phone-ui .topbar {
  flex: 0 0 auto !important;
  margin: 0 0 10px 0 !important;
}
body.opstan-phone-ui .brand {
  font-size: clamp(28px, 8vw, 38px) !important;
  line-height: 0.98 !important;
}
body.opstan-phone-ui .subtitle {
  font-size: 11px !important;
  line-height: 1.25 !important;
  max-width: 230px !important;
}
body.opstan-phone-ui .dot {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

body.opstan-phone-ui .tabs {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 0 12px 0 !important;
  overflow: visible !important;
}
body.opstan-phone-ui .tab {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 4px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.opstan-phone-ui .tabpane.active {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.opstan-phone-ui #channelsTab.active,
body.opstan-phone-ui #channelsTab.active .channels-shell {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-main {
  display: none !important;
}

body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-sidebar {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.opstan-phone-ui .sidebar-title { display: none !important; }

body.opstan-phone-ui .channel-search-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
}

body.opstan-phone-ui .channel-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px 38px !important;
  gap: 8px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 10px 0 !important;
}
body.opstan-phone-ui .channel-add-row input,
body.opstan-phone-ui .channel-add-row button {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}

body.opstan-phone-ui #channelsTab.active .channel-list,
body.opstan-phone-ui #channelsTab.active .gui-channel-list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 160px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 0 calc(env(safe-area-inset-bottom) + 120px) 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

body.opstan-phone-ui .channel-row {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 66px !important;
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
body.opstan-phone-ui .channel-row::after {
  content: "" !important;
  position: absolute !important;
  left: 54px !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,.08) !important;
}

body.opstan-phone-ui .channel-open-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 66px !important;
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  text-align: left !important;
}
body.opstan-phone-ui .channel-open-btn.selected { background: transparent !important; }
body.opstan-phone-ui .channel-open-btn:active { background: rgba(255,255,255,.055) !important; }

body.opstan-phone-ui .channel-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
}
body.opstan-phone-ui .channel-list-text {
  min-width: 0 !important;
  overflow: hidden !important;
}
body.opstan-phone-ui .channel-list-title {
  display: block !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.opstan-phone-ui .channel-list-preview {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12.5px !important;
  line-height: 1.15 !important;
  color: var(--weak) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.opstan-phone-ui .pin-channel-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 18px !important;
  box-shadow: none !important;
}

body.opstan-phone-ui.channel-detail-open {
  overflow: hidden !important;
}
body.opstan-phone-ui.channel-detail-open .topbar,
body.opstan-phone-ui.channel-detail-open .tabs,
body.opstan-phone-ui.channel-detail-open #channelsTab.active .channel-sidebar {
  display: none !important;
}
body.opstan-phone-ui.channel-detail-open .app,
body.opstan-phone-ui.channel-detail-open #channelsTab.active,
body.opstan-phone-ui.channel-detail-open #channelsTab.active .channels-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.opstan-phone-ui.channel-detail-open #channelsTab.active .channel-main {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 10px) 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #070a17 !important;
  box-shadow: none !important;
}
body.opstan-phone-ui.channel-detail-open .channel-header {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 0 8px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  background: #070a17 !important;
}
body.opstan-phone-ui.channel-detail-open .channel-back-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 24px !important;
}
body.opstan-phone-ui.channel-detail-open .channel-title-wrap { min-width: 0 !important; }
body.opstan-phone-ui.channel-detail-open .channel-title-row h2 {
  font-size: 18px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.opstan-phone-ui.channel-detail-open .owner-line {
  font-size: 10.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.opstan-phone-ui.channel-detail-open .channel-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr .8fr 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
}
body.opstan-phone-ui.channel-detail-open .channel-actions button {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  padding: 0 6px !important;
}
body.opstan-phone-ui.channel-detail-open .channel-status {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  overflow: visible !important;
}
body.opstan-phone-ui.channel-detail-open #messageScroll,
body.opstan-phone-ui.channel-detail-open .message-scroll {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 0 calc(env(safe-area-inset-bottom) + 24px) 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
}
body.opstan-phone-ui.channel-detail-open .msg-bubble,
body.opstan-phone-ui.channel-detail-open .message-card,
body.opstan-phone-ui.channel-detail-open .empty-state {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* v1.0.24: stable mobile app viewport, no iOS input zoom, fixed header/tabs, internal scrolling only. */
@media (max-width: 768px), (pointer: coarse) {
  html.opstan-phone-ui,
  html.opstan-phone-ui body,
  body.opstan-phone-ui {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--opstan-stable-vh, 100dvh) !important;
    min-height: var(--opstan-stable-vh, 100dvh) !important;
    max-height: var(--opstan-stable-vh, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    touch-action: manipulation !important;
    background: #070a17 !important;
  }

  body.opstan-phone-ui {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
  }

  body.opstan-phone-ui *,
  body.opstan-phone-ui *::before,
  body.opstan-phone-ui *::after {
    box-sizing: border-box !important;
    max-width: 100%;
  }

  body.opstan-phone-ui input,
  body.opstan-phone-ui textarea,
  body.opstan-phone-ui select {
    font-size: 16px !important;
    line-height: 1.25 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body.opstan-phone-ui button {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  body.opstan-phone-ui .app {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--opstan-stable-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--opstan-stable-vh, 100dvh) !important;
    padding: calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 12px) 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
  }

  body.opstan-phone-ui .topbar,
  body.opstan-phone-ui .tabs {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 20 !important;
    transform: none !important;
  }

  body.opstan-phone-ui .topbar {
    margin: 0 0 10px 0 !important;
  }

  body.opstan-phone-ui .brand {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: .98 !important;
  }

  body.opstan-phone-ui .subtitle {
    font-size: 12px !important;
    line-height: 1.2 !important;
    max-width: calc(100vw - 90px) !important;
  }

  body.opstan-phone-ui .tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 0 12px 0 !important;
    overflow: hidden !important;
  }

  body.opstan-phone-ui .tab {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 4px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    line-height: 38px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  body.opstan-phone-ui .tab.active {
    transform: none !important;
    min-height: 38px !important;
  }

  body.opstan-phone-ui .tabpane.active {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.opstan-phone-ui #walletTab.active,
  body.opstan-phone-ui #sendTab.active,
  body.opstan-phone-ui #networkTab.active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px) !important;
  }

  body.opstan-phone-ui .card,
  body.opstan-phone-ui .network-scroll,
  body.opstan-phone-ui #walletOpenView,
  body.opstan-phone-ui #walletLockedView {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.opstan-phone-ui .address-box,
  body.opstan-phone-ui .mono,
  body.opstan-phone-ui code,
  body.opstan-phone-ui pre {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.opstan-phone-ui #channelsTab.active,
  body.opstan-phone-ui #channelsTab.active .channels-shell {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-sidebar {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.opstan-phone-ui .channel-search-input,
  body.opstan-phone-ui .channel-add-row {
    flex: 0 0 auto !important;
  }

  body.opstan-phone-ui #channelsTab.active .channel-list,
  body.opstan-phone-ui #channelsTab.active .gui-channel-list {
    flex: 1 1 auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 0 0 calc(env(safe-area-inset-bottom) + 96px) 0 !important;
    margin: 0 !important;
  }

  body.opstan-phone-ui.channel-detail-open,
  body.opstan-phone-ui.channel-detail-open .app {
    overflow: hidden !important;
  }

  body.opstan-phone-ui.channel-detail-open #channelsTab.active .channel-main {
    height: var(--opstan-stable-vh, 100dvh) !important;
    min-height: var(--opstan-stable-vh, 100dvh) !important;
    max-height: var(--opstan-stable-vh, 100dvh) !important;
    padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 10px) 12px !important;
  }

  body.opstan-phone-ui.channel-detail-open .channel-header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    z-index: 4 !important;
    transform: none !important;
  }

  body.opstan-phone-ui.channel-detail-open #messageScroll,
  body.opstan-phone-ui.channel-detail-open .message-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px) !important;
  }

  body.opstan-phone-ui .modal {
    height: var(--opstan-stable-vh, 100dvh) !important;
    max-height: var(--opstan-stable-vh, 100dvh) !important;
    overflow: hidden !important;
    padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px) 10px !important;
  }

  body.opstan-phone-ui .modal-card {
    max-height: calc(var(--opstan-stable-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* v1.0.25: restore soft mobile motion without breaking stable viewport/layout. */
@media (max-width: 768px), (pointer: coarse) {
  body.opstan-phone-ui {
    scroll-behavior: smooth;
  }

  body.opstan-phone-ui button,
  body.opstan-phone-ui .tab,
  body.opstan-phone-ui .channel-radio-card,
  body.opstan-phone-ui .telegram-channel-row,
  body.opstan-phone-ui .mobile-back-btn,
  body.opstan-phone-ui .compact-btn,
  body.opstan-phone-ui .copy-btn,
  body.opstan-phone-ui .danger-btn,
  body.opstan-phone-ui .secondary-btn,
  body.opstan-phone-ui .icon-btn {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
    transition:
      transform 120ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      opacity 180ms ease,
      filter 180ms ease !important;
    will-change: transform;
  }

  body.opstan-phone-ui button:not(:disabled):active,
  body.opstan-phone-ui button:not(:disabled).is-pressing,
  body.opstan-phone-ui .tab.is-pressing,
  body.opstan-phone-ui .channel-radio-card.is-pressing,
  body.opstan-phone-ui .telegram-channel-row.is-pressing,
  body.opstan-phone-ui .mobile-back-btn.is-pressing,
  body.opstan-phone-ui .compact-btn.is-pressing {
    transform: translateY(1px) scale(0.985) !important;
    filter: brightness(1.08);
  }

  body.opstan-phone-ui .tab.active {
    box-shadow: 0 8px 24px rgba(0, 190, 255, 0.18) !important;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      color 180ms ease !important;
  }

  body.opstan-phone-ui .card,
  body.opstan-phone-ui .channel-sidebar,
  body.opstan-phone-ui .channel-main,
  body.opstan-phone-ui .modal-card {
    animation: opstanSoftPanelInV25 180ms ease both;
  }

  body.opstan-phone-ui .tabpane.active {
    animation: opstanSoftTabInV25 160ms ease both;
  }

  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-sidebar {
    animation: opstanSoftPanelInV25 180ms ease both;
  }

  body.opstan-phone-ui.channel-detail-open #channelsTab.active .channel-main {
    animation: opstanChannelSlideInV25 220ms cubic-bezier(.2,.8,.2,1) both;
  }

  body.opstan-phone-ui .channel-radio-card,
  body.opstan-phone-ui .telegram-channel-row {
    transition:
      transform 120ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  body.opstan-phone-ui .channel-radio-card:hover,
  body.opstan-phone-ui .telegram-channel-row:hover {
    background-color: rgba(0, 190, 255, 0.07) !important;
    border-color: rgba(0, 190, 255, 0.28) !important;
  }

  body.opstan-phone-ui input,
  body.opstan-phone-ui textarea,
  body.opstan-phone-ui select {
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background-color 180ms ease !important;
  }

  body.opstan-phone-ui input:focus,
  body.opstan-phone-ui textarea:focus,
  body.opstan-phone-ui select:focus {
    box-shadow: 0 0 0 3px rgba(0, 190, 255, 0.14) !important;
    border-color: rgba(0, 190, 255, 0.65) !important;
    transform: none !important;
    outline: none !important;
  }

  body.opstan-phone-ui .msg-bubble {
    animation: opstanMessageInV25 180ms ease both;
  }

  body.opstan-phone-ui .tap-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.28);
    transform: translate(-50%, -50%) scale(0);
    animation: opstanTapRippleV25 420ms ease-out forwards;
    z-index: 2;
  }
}

@keyframes opstanSoftPanelInV25 {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opstanSoftTabInV25 {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opstanChannelSlideInV25 {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes opstanMessageInV25 {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opstanTapRippleV25 {
  to { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* v1.0.26: Telegram-like softness + safe channel-list scrolling. */
@media (max-width: 768px), (pointer: coarse) {
  body.opstan-phone-ui {
    scroll-behavior: smooth;
  }

  body.opstan-phone-ui #channelList,
  body.opstan-phone-ui .channel-list,
  body.opstan-phone-ui .channel-sidebar {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  body.opstan-phone-ui .channel-row,
  body.opstan-phone-ui .channel-open-btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: pan-y !important;
    transition:
      transform 145ms cubic-bezier(.2,.8,.2,1),
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      opacity 200ms ease,
      filter 180ms ease !important;
  }

  body.opstan-phone-ui .channel-row.is-pressing,
  body.opstan-phone-ui .channel-open-btn.is-pressing,
  body.opstan-phone-ui .pin-channel-btn.is-pressing,
  body.opstan-phone-ui .channel-back-btn.is-pressing,
  body.opstan-phone-ui button.is-pressing,
  body.opstan-phone-ui .tab.is-pressing {
    transform: translateY(1px) scale(.988) !important;
    filter: brightness(1.06) !important;
  }

  body.opstan-phone-ui .channel-row:active,
  body.opstan-phone-ui .channel-open-btn:active {
    background: rgba(0, 190, 255, .075) !important;
  }

  body.opstan-phone-ui .channel-row .tap-ripple,
  body.opstan-phone-ui .channel-open-btn .tap-ripple,
  body.opstan-phone-ui button .tap-ripple,
  body.opstan-phone-ui .tab .tap-ripple {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(255, 255, 255, .24);
    transform: translate(-50%, -50%) scale(0);
    animation: opstanTapRippleV26 460ms cubic-bezier(.2,.8,.2,1) forwards;
    z-index: 3;
  }

  body.opstan-phone-ui .tabpane.active {
    animation: opstanTabSoftInV26 210ms cubic-bezier(.2,.8,.2,1) both !important;
  }

  body.opstan-phone-ui .card,
  body.opstan-phone-ui .channel-sidebar,
  body.opstan-phone-ui .channel-main,
  body.opstan-phone-ui .modal-card {
    animation-duration: 210ms !important;
    animation-timing-function: cubic-bezier(.2,.8,.2,1) !important;
  }

  body.opstan-phone-ui.channel-detail-open #channelsTab.active .channel-main {
    animation: opstanChannelEnterV26 260ms cubic-bezier(.2,.82,.2,1) both !important;
  }

  body.opstan-phone-ui.channel-detail-leaving #channelsTab.active .channel-main {
    animation: opstanChannelLeaveV26 170ms ease both !important;
  }

  body.opstan-phone-ui .msg-bubble,
  body.opstan-phone-ui .message-card {
    animation: opstanMsgSoftInV26 190ms cubic-bezier(.2,.8,.2,1) both !important;
  }

  body.opstan-phone-ui input:focus,
  body.opstan-phone-ui textarea:focus,
  body.opstan-phone-ui select:focus {
    box-shadow: 0 0 0 3px rgba(0, 190, 255, .16), 0 8px 22px rgba(0,0,0,.12) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
  }
}

@keyframes opstanChannelEnterV26 {
  from { opacity: .01; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes opstanChannelLeaveV26 {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: .01; transform: translateX(14px); }
}

@keyframes opstanTabSoftInV26 {
  from { opacity: .01; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opstanMsgSoftInV26 {
  from { opacity: .01; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opstanTapRippleV26 {
  0% { opacity: .34; transform: translate(-50%, -50%) scale(0); }
  60% { opacity: .18; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(22); }
}


/* v1.0.27: bugfix — real scrollable channel list + wallet button fit on mobile.
   Keeps v1.0.26 Telegram-like soft touch, but prevents list clipping and button overflow. */
@media (max-width: 768px), (pointer: coarse) {
  body.opstan-phone-ui #channelsTab.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.opstan-phone-ui #channelsTab.active .channels-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-sidebar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.opstan-phone-ui .channel-search-input,
  body.opstan-phone-ui .channel-add-row,
  body.opstan-phone-ui #channelAddWarning {
    flex: 0 0 auto !important;
  }

  body.opstan-phone-ui:not(.channel-detail-open) #channelList,
  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-list,
  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .gui-channel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding: 2px 0 calc(34px + env(safe-area-inset-bottom)) 0 !important;
    margin: 0 !important;
    scrollbar-width: thin;
  }

  body.opstan-phone-ui:not(.channel-detail-open) #channelList .channel-row,
  body.opstan-phone-ui:not(.channel-detail-open) #channelList [data-open-channel],
  body.opstan-phone-ui:not(.channel-detail-open) #channelList .channel-open-btn,
  body.opstan-phone-ui:not(.channel-detail-open) #channelList .channel-radio-card,
  body.opstan-phone-ui:not(.channel-detail-open) #channelList .telegram-channel-row {
    touch-action: pan-y !important;
  }

  /* Wallet: buttons must fit without horizontal overflow. */
  body.opstan-phone-ui #walletOpenView .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  body.opstan-phone-ui #walletOpenView .actions button,
  body.opstan-phone-ui #refreshBalanceBtn,
  body.opstan-phone-ui #copyAddressBtn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  body.opstan-phone-ui #walletOpenView .row.between,
  body.opstan-phone-ui .wallet-history-head {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  body.opstan-phone-ui .wallet-history-head {
    align-items: stretch !important;
  }

  body.opstan-phone-ui .wallet-history-head > div {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.opstan-phone-ui #walletOpsRefreshBtn {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body.opstan-phone-ui .address,
  body.opstan-phone-ui #walletAddress,
  body.opstan-phone-ui #balanceText,
  body.opstan-phone-ui #availableText,
  body.opstan-phone-ui #reservedText,
  body.opstan-phone-ui #nonceText {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}


/* v1.0.28: final bugfixes — exact channel delete, compact wallet refresh, no bottom clipping.
   Keeps v1.0.27 scrolling and v1.0.26 Telegram-like softness. */
.channel-row {
  grid-template-columns: minmax(0, 1fr) 29px 29px;
}

.remove-channel-btn {
  width: 29px;
  height: 29px;
  min-width: 29px;
  padding: 0;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 768px), (pointer: coarse) {
  html,
  body {
    height: 100%;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  body.opstan-phone-ui .app {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  body.opstan-phone-ui .tabpane.active {
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Non-channel screens must not be cut in the lower part of the phone screen. */
  body.opstan-phone-ui #walletTab.active,
  body.opstan-phone-ui #sendTab.active,
  body.opstan-phone-ui #networkTab.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }

  body.opstan-phone-ui .card,
  body.opstan-phone-ui .wallet-panel,
  body.opstan-phone-ui #walletOpenView,
  body.opstan-phone-ui #walletLockedView {
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
  }

  /* Channel list rows now include open + pin + delete; keep all controls visible. */
  body.opstan-phone-ui .channel-row {
    grid-template-columns: minmax(0, 1fr) 36px 36px !important;
    gap: 7px !important;
  }

  body.opstan-phone-ui .pin-channel-btn,
  body.opstan-phone-ui .remove-channel-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 13px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }

  body.opstan-phone-ui .remove-channel-btn {
    background: rgba(255, 72, 104, 0.10) !important;
    border-color: rgba(255, 72, 104, 0.24) !important;
    color: #ff9aac !important;
  }

  body.opstan-phone-ui .remove-channel-btn:active,
  body.opstan-phone-ui .remove-channel-btn.is-pressing {
    background: rgba(255, 72, 104, 0.18) !important;
  }

  /* Keep the full channel list reachable and avoid bottom clipping by Safari bars. */
  body.opstan-phone-ui:not(.channel-detail-open) #channelList,
  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .channel-list,
  body.opstan-phone-ui:not(.channel-detail-open) #channelsTab.active .gui-channel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  body.opstan-phone-ui.channel-detail-open #messageScroll,
  body.opstan-phone-ui.channel-detail-open .message-scroll {
    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }

  /* Wallet buttons: compact, not huge, no horizontal overflow. */
  body.opstan-phone-ui #walletOpenView .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.opstan-phone-ui #walletOpenView .actions button,
  body.opstan-phone-ui #refreshBalanceBtn,
  body.opstan-phone-ui #copyAddressBtn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  body.opstan-phone-ui #walletOpsRefreshBtn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 104px !important;
    max-width: 150px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  body.opstan-phone-ui .wallet-history-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.opstan-phone-ui .wallet-history-head > div {
    flex: 1 1 190px !important;
    min-width: 0 !important;
  }
}

/* v1.0.29: iPhone-like mobile channel delete mode. Keeps desktop unchanged. */
@media (max-width: 768px) {
  body.opstan-phone-ui:not(.mobile-delete-mode) #channelList .remove-channel-btn,
  body.opstan-phone-ui:not(.mobile-delete-mode) #channelList .channel-delete-btn {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.86) !important;
  }

  body.opstan-phone-ui:not(.mobile-delete-mode) #channelList .channel-row {
    grid-template-columns: minmax(0, 1fr) 36px !important;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-row {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    animation: opstanChannelWiggle 185ms ease-in-out infinite alternate;
    will-change: transform;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-row:nth-child(2n) {
    animation-delay: -65ms;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-row:nth-child(3n) {
    animation-delay: -115ms;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .pin-channel-btn {
    display: none !important;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .remove-channel-btn,
  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-delete-btn {
    display: inline-flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 72, 104, 0.15) !important;
    border-color: rgba(255, 72, 104, 0.34) !important;
    color: #ff9aac !important;
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease !important;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .remove-channel-btn:active,
  body.opstan-phone-ui.mobile-delete-mode #channelList .remove-channel-btn.is-pressing,
  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-delete-btn:active,
  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-delete-btn.is-pressing {
    background: rgba(255, 72, 104, 0.26) !important;
    transform: translateY(1px) scale(.96) !important;
  }

  body.opstan-phone-ui #removeSelectedChannelBtn.delete-mode-active {
    background: rgba(255, 72, 104, 0.20) !important;
    border-color: rgba(255, 72, 104, 0.44) !important;
    color: #ffd3dc !important;
    box-shadow: 0 0 0 3px rgba(255, 72, 104, 0.10) !important;
  }

  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-open-btn {
    pointer-events: none !important;
  }

  @keyframes opstanChannelWiggle {
    from { transform: rotate(-0.35deg) translateX(-0.5px); }
    to { transform: rotate(0.35deg) translateX(0.5px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.opstan-phone-ui.mobile-delete-mode #channelList .channel-row {
    animation: none !important;
  }
}