/* Telegram MTProto workspace — v8.8.3 */
.main-navigation {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  z-index: 18;
}

/* v8.8.13.12 — unified Upanuntsi Hub shell and dashboard redesign */
:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #f8faf7;
  --text: #17221c;
  --muted: #748078;
  --line: #dfe7e1;
  --primary: #0b9f59;
  --primary-dark: #08723f;
  --primary-soft: #e2f7eb;
  --shadow: 0 10px 30px rgba(20, 54, 37, .07);
  --hub-sidebar: #102d22;
}

.hub-sidebar { display: none; }
.hub-user-chip { display: none; }
.orders-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.overview-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(21, 61, 40, .035);
}
.overview-card > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 23px;
  font-weight: 900;
}
.overview-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 720; }
.overview-card strong { display: block; margin-top: 2px; font-size: 25px; line-height: 1; }
.overview-card.warning > span { background: #fff1d8; color: #a56500; }
.overview-card.payment > span { background: #fff4d9; color: #8f6100; }
.overview-card.shipping > span { background: #eeeafd; color: #6846b5; }

@media (min-width: 1180px) {
  html, body { width: 100%; height: 100%; }
  .app-view {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr);
    overflow: hidden;
    background: var(--bg);
  }
  .hub-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 14px 18px;
    overflow: hidden;
    background: var(--hub-sidebar);
    color: #fff;
  }
  .hub-sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 28px; }
  .hub-sidebar-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #15a766;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
  }
  .hub-sidebar-brand strong { display: block; font-size: 18px; letter-spacing: -.02em; }
  .hub-sidebar-brand span { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .22em; }
  .hub-sidebar .main-navigation {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .hub-sidebar .main-navigation-button {
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: rgba(255,255,255,.72);
    text-align: left;
    font-size: 14px;
  }
  .hub-sidebar .main-navigation-button > span:first-child { font-size: 20px; text-align: center; }
  .hub-sidebar .main-navigation-button b { font-weight: 790; }
  .hub-sidebar #ordersTabButton.active,
  .hub-sidebar #telegramTabButton.active {
    border: 0;
    background: #1b563c;
    color: #fff;
    box-shadow: none;
  }
  .hub-sidebar-foot {
    margin-top: auto;
    display: grid;
    grid-template-columns: 10px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 13px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
  }
  .hub-online-dot { width: 9px; height: 9px; border-radius: 50%; background: #52d68f; box-shadow: 0 0 0 4px rgba(82,214,143,.1); }
  .hub-sidebar-foot strong { display: block; font-size: 11px; }
  .hub-sidebar-foot small { display: block; margin-top: 2px; color: rgba(255,255,255,.48); font-size: 9px; }

  .topbar {
    grid-column: 2;
    grid-row: 1;
    height: 72px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.96);
  }
  .topbar .brand-mark.small { display: none; }
  .topbar-brand strong { font-size: 23px; letter-spacing: -.025em; }
  .topbar-brand small { font-size: 11px; }
  .topbar-actions { align-items: center; }
  .topbar .icon-button { width: 42px; height: 42px; border-radius: 13px; box-shadow: none; }
  .hub-user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 4px 11px 4px 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  .hub-user-chip span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 900; }
  .hub-user-chip strong { max-width: 130px; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

  .workspace {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(310px, 350px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 16px 18px 18px;
    overflow: hidden;
    background: var(--bg);
  }
  .orders-overview { grid-column: 1 / -1; grid-row: 1; }
  .orders-pane {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .orders-pane .search-wrap { height: 44px; border-radius: 13px; background: #f8faf8; box-shadow: none; }
  .orders-pane .search-wrap input { height: 42px; font-size: 13px; }
  .list-meta { padding: 12px 4px 8px; }
  .list-meta strong { font-size: 15px; }
  .orders-list { display: grid; align-content: start; gap: 6px; padding: 0 2px 12px 0; }
  .order-card.order-row-card {
    min-height: 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "number total"
      "customer total"
      "status open";
    gap: 4px 10px;
    margin: 0;
    padding: 11px 12px 11px 14px;
    border: 1px solid #e2e9e4;
    border-left: 3px solid #b1cbbc;
    border-radius: 13px;
    background: #fff;
    box-shadow: none;
  }
  .order-card.order-row-card:hover { border-color: #acd1bb; background: #fbfefc; box-shadow: 0 7px 18px rgba(16,72,43,.06); }
  .order-card.order-row-card.active { border-color: #51b985; background: #f1fbf6; box-shadow: 0 0 0 2px rgba(11,159,89,.1); }
  .order-row-number { grid-area: number; display: flex; align-items: baseline; gap: 7px; }
  .order-row-number strong { font-size: 13px; }
  .order-row-number time { display: inline; font-size: 9px; }
  .order-row-customer { grid-area: customer; }
  .order-row-customer strong { font-size: 13px; }
  .order-row-customer small { display: none; }
  .order-row-status { grid-area: status; }
  .order-row-status .order-status-badge { padding: 4px 7px; border-radius: 8px; font-size: 9px; white-space: nowrap; }
  .order-row-total { grid-area: total; align-self: center; }
  .order-row-total small { display: none; }
  .order-row-total b { font-size: 13px; }
  .order-row-open { grid-area: open; align-self: center; font-size: 22px; }
  .order-row-items, .order-row-responsible, .order-row-ttn { display: none; }

  .detail-pane {
    grid-column: 2;
    grid-row: 2;
    position: static;
    inset: auto;
    min-width: 0;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: none;
    transition: none;
  }
  body.detail-open .detail-pane { transform: none; }
  .empty-detail { min-height: 100%; }
  .order-detail { width: 100%; max-width: none; }
  .back-button { display: none; }
  .detail-header {
    position: static;
    margin: 0 0 12px;
    padding: 0 0 13px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    backdrop-filter: none;
  }
  .detail-title h1 { font-size: 27px; }
  .detail-total strong { font-size: 20px; }
  .customer-card { padding: 14px 15px; margin-bottom: 10px; border-radius: 16px; box-shadow: none; }
  .customer-card h2 { font-size: 16px; }
  .workflow-info-card { gap: 8px; margin-bottom: 10px; }
  .workflow-info-cell, .workflow-responsible { padding: 11px 13px; border-radius: 14px; }
  .message-send-summary { margin-bottom: 10px; border-radius: 14px; }
  .next-action-card {
    min-height: 82px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-color: #bfe3cf;
    border-radius: 16px;
    background: #f1fbf6;
  }
  .next-action-card.payment { border-color: #bfe3cf; background: #f1fbf6; }
  .next-action-card strong { font-size: 16px; }
  .next-action-card span { font-size: 11px; }
  .next-action-card > button, .workflow-button-stack > button { min-height: 44px; border-radius: 12px; font-size: 12px; }
  .pick-launch { padding: 14px 16px; margin-bottom: 10px; border-radius: 16px; background: #173f2f; box-shadow: none; }
  .pick-launch-copy strong { font-size: 16px; }
  .pick-launch-copy span { font-size: 11px; }
  .pick-launch button { min-height: 44px; border-radius: 12px; font-size: 12px; }
  .receipt-card { border-radius: 16px; }
  .receipt-head { padding: 13px 15px; }
  .receipt-head h2 { font-size: 17px; }
  .add-item-button { min-height: 38px; border-radius: 11px; font-size: 11px; }
  .receipt-row { grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; padding: 9px 13px; }
  .receipt-thumb { width: 54px; height: 54px; border-radius: 11px; }
  .receipt-copy strong { font-size: 13px; }
  .receipt-copy small, .receipt-copy em { margin-top: 3px; font-size: 10px; }
  .receipt-value b { font-size: 13px; }
  .item-state { margin-top: 4px; padding: 3px 6px; font-size: 9px; }
  .receipt-total { padding: 14px 16px; }
  .receipt-total-main strong { font-size: 25px; }

  .telegram-workspace {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 350px minmax(0,1fr);
    padding: 16px 18px 18px;
    gap: 14px;
    overflow: hidden;
    background: var(--bg);
  }
  .telegram-list-pane {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: #fff;
    box-shadow: var(--shadow);
  }
  .telegram-chat-pane {
    position: relative;
    inset: auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: #eef5f0;
    box-shadow: var(--shadow);
    transform: none;
    transition: none;
  }
  body.telegram-chat-open .telegram-chat-pane,
  .telegram-workspace.chat-open .telegram-chat-pane { transform: none; }
  .telegram-back-button { display: none; }
}

@media (min-width: 761px) and (max-width: 1179px) {
  .app-view { display: flex; flex-direction: column; }
  .hub-sidebar { display: contents; }
  .hub-sidebar-brand, .hub-sidebar-foot { display: none; }
  .topbar { order: 0; }
  .main-navigation { order: 1; }
  .workspace, .telegram-workspace { order: 2; }
  .workspace {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0,1fr);
    gap: 10px;
    padding: 10px 12px 14px;
  }
  .orders-overview { grid-column: 1; grid-row: 1; }
  .orders-pane { grid-column: 1; grid-row: 2; width: 100%; height: auto; border-radius: 18px; }
  .detail-pane { inset: 58px 0 0; }
}

@media (max-width: 760px) {
  .app-view { display: flex; flex-direction: column; }
  .hub-sidebar { display: contents; }
  .hub-sidebar-brand, .hub-sidebar-foot { display: none; }
  .topbar { order: 0; }
  .main-navigation { order: 1; }
  .workspace, .telegram-workspace { order: 2; }
  .workspace {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0,1fr);
    min-height: 0;
    overflow: hidden;
  }
  .orders-overview {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    gap: 8px;
    padding: 9px 10px 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .orders-overview::-webkit-scrollbar { display: none; }
  .overview-card { flex: 0 0 138px; grid-template-columns: 36px minmax(0,1fr); gap: 8px; padding: 9px 10px; border-radius: 14px; }
  .overview-card > span { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
  .overview-card small { font-size: 9px; }
  .overview-card strong { font-size: 19px; }
  .orders-pane { grid-column: 1; grid-row: 2; height: auto; min-height: 0; padding-top: 8px; }
  .detail-pane { background: #f6f4ee; }
  .topbar-brand strong { font-size: 17px; }
  .topbar-actions { gap: 5px; }
  .topbar .icon-button { width: 40px; height: 40px; }
}

/* v8.8.13.12 final shell overrides — intentionally last in the cascade */
@media (min-width: 1180px) {
  #appView {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
    background: #f6f4ee;
  }
  #appView > .hub-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 14px 18px;
    background: #102d22;
    color: #fff;
  }
  #appView > .topbar {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    inset: auto;
    min-height: 72px;
    padding: 0 24px;
    border-bottom: 1px solid #dfe7e1;
    background: rgba(255,255,255,.94);
    box-shadow: none;
  }
  #appView > .workspace,
  #appView > .telegram-workspace {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
  }
  .hub-sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 28px; }
  .hub-sidebar-logo {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 13px; background: linear-gradient(145deg,#19bb70,#087440);
    box-shadow: 0 8px 20px rgba(0,0,0,.2); font-size: 21px;
  }
  .hub-sidebar-brand strong { display: block; font-size: 18px; }
  .hub-sidebar-brand span { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .2em; }
  .hub-sidebar .main-navigation {
    display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px;
    padding: 0; border: 0; background: transparent; backdrop-filter: none;
  }
  .hub-sidebar .main-navigation-button {
    display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center;
    width: 100%; min-height: 48px; padding: 0 13px; border: 0; border-radius: 13px;
    color: rgba(255,255,255,.68); text-align: left; box-shadow: none;
  }
  .hub-sidebar #ordersTabButton.active,
  .hub-sidebar #telegramTabButton.active {
    background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 #25cf7d;
  }
  .hub-sidebar-foot { padding: 13px; border-radius: 14px; background: rgba(255,255,255,.07); }
  .hub-sidebar-foot strong { display: block; font-size: 11px; }
  .hub-sidebar-foot small { color: rgba(255,255,255,.48); font-size: 9px; }
  .hub-user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid #dfe7e1; border-radius: 14px; background: #fff; }
  .hub-user-chip > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #dff5e8; color: #08723f; font-weight: 900; }
  .hub-user-chip small { display: block; color: #748078; font-size: 9px; }
  .hub-user-chip strong { display: block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
  #ordersWorkspace {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 14px 18px 18px;
    overflow: hidden;
    background: #f6f4ee;
  }
  #ordersWorkspace .orders-overview { grid-column: 1 / -1; grid-row: 1; }
  #ordersWorkspace .orders-pane {
    grid-column: 1; grid-row: 2; position: relative; inset: auto; width: auto; height: auto;
    padding: 10px; overflow: auto; border: 1px solid #dfe7e1; border-radius: 20px;
    background: #fff; box-shadow: 0 10px 30px rgba(20,54,37,.05);
  }
  #ordersWorkspace .detail-pane {
    grid-column: 2; grid-row: 2; position: relative; inset: auto; display: block;
    min-width: 0; min-height: 0; width: auto; height: auto; overflow: auto;
    transform: none; transition: none; border: 1px solid #dfe7e1; border-radius: 20px;
    background: #fff; box-shadow: 0 10px 30px rgba(20,54,37,.05);
  }
  #ordersWorkspace .detail-pane[hidden] { display: block; }
  #ordersWorkspace .detail-backdrop { display: none !important; }
  #ordersWorkspace .order-detail-header { position: sticky; top: 0; z-index: 4; background: rgba(255,255,255,.96); }
  #ordersWorkspace .order-detail-back { display: none; }
  #ordersWorkspace .orders-header { padding: 7px 6px 11px; }
  #ordersWorkspace .orders-search { margin: 0 2px 8px; }
  #ordersWorkspace .order-list { gap: 7px; }
  #ordersWorkspace .order-card { padding: 11px; border-radius: 14px; box-shadow: none; }
  #ordersWorkspace .order-card.active { border-color: #7fd6aa; background: #eefaf3; box-shadow: inset 3px 0 #0b9f59; }
  #ordersWorkspace .order-card-number { font-size: 15px; }
  #ordersWorkspace .order-card-customer { font-size: 12px; }
  #ordersWorkspace .order-card-meta { font-size: 10px; }
  #ordersWorkspace .order-detail-body { max-width: 1040px; margin: 0 auto; padding: 14px 18px 26px; }
  #ordersWorkspace .detail-card { border-color: #e1e8e3; border-radius: 16px; box-shadow: none; }
  #telegramWorkspace {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 14px 18px 18px;
    overflow: hidden;
    background: #f6f4ee;
  }
  #telegramWorkspace .telegram-list-pane {
    grid-column: 1; position: relative; inset: auto; width: auto; height: auto;
    padding: 10px; overflow: auto; border: 1px solid #dfe7e1; border-radius: 20px 0 0 20px;
    background: #fff; transform: none;
  }
  #telegramWorkspace .telegram-chat-pane {
    grid-column: 2; position: relative; inset: auto; min-width: 0; min-height: 0;
    border: 1px solid #dfe7e1; border-left: 0; border-radius: 0 20px 20px 0;
    background: #edf5f0; transform: none; box-shadow: none;
  }
  #telegramWorkspace .telegram-back-button { display: none; }
  #telegramWorkspace .telegram-messages { padding-inline: max(18px, calc((100% - 900px) / 2)); }
  #telegramWorkspace .telegram-composer { padding-inline: max(18px, calc((100% - 900px) / 2)); }
}
.main-navigation-button {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 820;
  cursor: pointer;
}
.main-navigation-button.active {
  border-color: #cfe5d9;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.nav-unread {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e23d3d;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}

.assigned-chat-alert {
  position: fixed;
  z-index: 140;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  width: min(calc(100vw - 24px), 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(20, 125, 77, .3);
  border-radius: 19px;
  background: rgba(247, 255, 250, .98);
  box-shadow: 0 16px 46px rgba(11, 49, 31, .24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -18px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  backdrop-filter: blur(18px);
}
.assigned-chat-alert.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.assigned-chat-alert-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 8px 12px 13px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.assigned-chat-alert-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #d9f5e6; font-size: 21px; }
.assigned-chat-alert-copy { min-width: 0; display: grid; gap: 2px; font-style: normal; }
.assigned-chat-alert-copy small { overflow: hidden; color: #087545; font-size: 11px; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.assigned-chat-alert-copy strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.assigned-chat-alert-copy em { overflow: hidden; color: var(--muted); font-size: 13px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.assigned-chat-alert-close { border: 0; border-left: 1px solid rgba(20, 125, 77, .14); background: transparent; color: #587064; font-size: 25px; cursor: pointer; }
.assigned-chat-alert-close:active, .assigned-chat-alert-main:active { background: rgba(19, 143, 87, .08); }

.telegram-workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  background: var(--bg);
}
.telegram-list-pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 18px;
  border-right: 1px solid var(--line);
  background: #f8f9f7;
}
.telegram-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 8px;
}
.telegram-search-wrap { min-width: 0; }
.telegram-sync-button {
  width: 50px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
}
.telegram-sync-button.is-spinning,
#telegramManualSync.is-spinning { animation: spin .8s linear infinite; }
.telegram-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 4px 9px;
}
.telegram-list-meta strong { font-size: 17px; }
.telegram-connection-badge {
  max-width: 56%;
  overflow: hidden;
  padding: 5px 8px;
  border-radius: 999px;
  background: #ecefec;
  color: #646c65;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.telegram-connection-badge.connected { background: var(--primary-soft); color: var(--primary-dark); }
.telegram-connection-badge.pending { background: var(--warning-soft); color: var(--warning); }
.telegram-connection-badge.error { background: #fde8e8; color: var(--danger-dark); }
.telegram-connect-notice {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid #d9e8df;
  border-radius: 18px;
  background: #f4fbf7;
}
.telegram-connect-notice strong { font-size: 16px; }
.telegram-connect-notice span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.telegram-connect-notice button {
  min-height: 44px;
  margin-top: 3px;
  border: 0;
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
  font-weight: 820;
}
.telegram-chats-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(18px + var(--safe-bottom));
}
.telegram-chat-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.telegram-chat-card.active {
  border-color: rgba(24, 138, 85, .58);
  box-shadow: 0 0 0 3px rgba(24, 138, 85, .08);
}
.telegram-chat-card:active { transform: scale(.996); }
.telegram-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #dff3e8, #c7e8d5);
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 900;
}
.telegram-avatar-initials { position: relative; z-index: 0; }
.telegram-avatar img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e9efeb;
}
.telegram-chat-card-copy { min-width: 0; display: grid; gap: 4px; }
.telegram-chat-card-top { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.telegram-chat-card-top strong { min-width: 0; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-chat-card-top time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.telegram-chat-card-identity {
  min-width: 0;
  overflow: hidden;
  color: #9a3d76;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.telegram-chat-card-preview {
  min-width: 0;
  overflow: hidden;
  color: #5f675f;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.telegram-chat-card-meta { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.telegram-chat-card-meta em {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}
.telegram-chat-card-meta small { min-width: 0; overflow: hidden; color: #899089; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-unread {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.telegram-list-empty,
.telegram-empty-chat {
  min-height: 50vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}
.telegram-list-empty div,
.telegram-empty-chat div { font-size: 50px; }
.telegram-list-empty strong,
.telegram-empty-chat strong { color: var(--text); font-size: 18px; }
.telegram-list-empty span,
.telegram-empty-chat span { max-width: 330px; font-size: 13px; line-height: 1.45; }

.telegram-chat-pane { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: #edf1ed; }
.telegram-chat-detail { position: relative; height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
.telegram-chat-header { grid-row: 1; }
.telegram-order-bar { grid-row: 2; }
.telegram-suggestion-bar { grid-row: 3; }
.telegram-messages { grid-row: 4; }
.telegram-quick-actions { grid-row: 5; }
.telegram-composer { grid-row: 6; }
.telegram-chat-header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(18px);
  z-index: 4;
}
.telegram-chat-header .telegram-avatar { width: 44px; height: 44px; font-size: 14px; }
.telegram-back-button {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font-size: 28px;
}
.telegram-chat-heading { min-width: 0; flex: 1; display: grid; }
.telegram-chat-heading strong { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-chat-heading small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-open-native {
  flex: 0 0 auto;
  padding: 9px 11px;
  border-radius: 12px;
  background: #e7f2ff;
  color: #1767a4;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.telegram-order-bar {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8faf8;
}
.telegram-linked-order { min-width: 0; flex: 1; display: flex; align-items: stretch; gap: 5px; }
.telegram-order-empty { min-width: 0; flex: 1; align-self: center; padding: 0 4px; color: var(--muted); font-size: 12px; }
.telegram-linked-order > div { min-width: 0; display: grid; align-content: center; padding: 3px 4px; }
.telegram-linked-order > div small { color: var(--muted); font-size: 10px; }
.telegram-linked-order > div strong { margin-top: 2px; font-size: 12px; }
.telegram-order-chip {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #cfe8da;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--text);
  text-align: left;
}
.telegram-order-chip span { min-width: 0; display: grid; }
.telegram-order-chip small { color: var(--primary-dark); font-size: 9px; }
.telegram-order-chip strong { overflow: hidden; margin-top: 2px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-order-chip b { flex: 0 0 auto; font-size: 12px; }
.telegram-unlink-order {
  width: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
}
#telegramLinkOrderButton {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}
.telegram-suggestion-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #eadbaa;
  background: #fff9e9;
}
.telegram-suggestion-bar > div { min-width: 0; flex: 1; display: grid; }
.telegram-suggestion-bar small { color: #8d650a; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.telegram-suggestion-bar strong { margin-top: 2px; font-size: 12px; }
.telegram-suggestion-bar span { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-suggestion-bar button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: var(--warning);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}
.telegram-messages {
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px clamp(12px, 4vw, 38px) 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(160deg, #eef3ef, #e8eee9);
}
.telegram-messages-list { width: min(100%, 850px); margin: 0 auto; display: flex; flex-direction: column; gap: 7px; }
.telegram-older-messages {
  display: block;
  min-height: 38px;
  margin: 0 auto 12px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.telegram-message {
  width: fit-content;
  max-width: min(78%, 620px);
  display: grid;
  gap: 5px;
  padding: 9px 11px 6px;
  border-radius: 17px;
  box-shadow: 0 2px 8px rgba(33, 49, 39, .07);
  word-break: break-word;
}
.telegram-message.incoming { align-self: flex-start; border-bottom-left-radius: 5px; background: #fff; }
.telegram-message.outgoing { align-self: flex-end; border-bottom-right-radius: 5px; background: #dff5e9; }
.telegram-message-text {
  font-size: 14px;
  line-height: 1.38;
  white-space: pre-wrap;
}
.telegram-message-text.order-created-confirmation {
  padding: 3px 2px;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.28;
  text-align: center;
}
.telegram-message-text.receipt-chat-message {
  min-width: min(66vw, 330px);
  display: grid;
  gap: 2px;
  white-space: normal;
}
.receipt-chat-brand,
.receipt-chat-order,
.receipt-chat-title,
.receipt-chat-subtitle { text-align: center; }
.receipt-chat-brand { font-size: 19px; font-weight: 900; letter-spacing: .02em; }
.receipt-chat-order { font-size: 15px; font-weight: 780; }
.receipt-chat-title { margin-top: 2px; font-size: 17px; font-weight: 900; text-transform: uppercase; }
.receipt-chat-subtitle { color: #47705a; font-size: 12px; font-weight: 760; }
.receipt-chat-spacer { height: 7px; }
.receipt-chat-item-name { margin-top: 3px; font-weight: 720; }
.receipt-chat-item-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  padding-left: 13px;
  font-size: 13px;
}
.receipt-chat-item-price strong { flex: 0 0 auto; font-size: 14px; font-weight: 950; }
.receipt-chat-missing-title { margin-top: 2px; color: #a44242; font-weight: 850; }
.receipt-chat-missing-item { padding-left: 8px; color: #8b4d4d; font-weight: 680; }
.receipt-chat-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid rgba(35, 111, 72, .22);
  font-size: 16px;
  font-weight: 850;
}
.receipt-chat-total strong { flex: 0 0 auto; font-size: 18px; font-weight: 950; color: var(--primary-dark); }
.receipt-chat-note { margin-top: 4px; color: #788078; font-size: 10px; text-align: center; }
.telegram-message-text.payment-details-card {
  min-width: min(72vw, 350px);
  display: grid;
  gap: 8px;
  white-space: normal;
}
.payment-card-title { font-size: 18px; font-weight: 900; text-align: center; }
.payment-card-order { margin-top: -4px; color: #47705a; font-size: 13px; font-weight: 760; text-align: center; }
.payment-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 9px;
  padding: 9px 10px;
  border: 1px solid rgba(35, 111, 72, .16);
  border-radius: 12px;
  background: rgba(255,255,255,.6);
}
.payment-copy-field > span { grid-column: 1; color: #667168; font-size: 10px; font-weight: 760; }
.payment-copy-field > strong { min-width: 0; grid-column: 1; overflow-wrap: anywhere; font-size: 14px; font-weight: 900; }
.payment-copy-button {
  min-height: 36px;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 0 10px;
  border: 1px solid rgba(13, 138, 80, .25);
  border-radius: 10px;
  background: #e7f7ee;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 900;
}
.payment-copy-button:active { transform: scale(.97); }
.payment-card-note { color: #6f776f; font-size: 11px; line-height: 1.4; text-align: center; }
.telegram-message time { justify-self: end; color: #798079; font-size: 9px; }
.telegram-media-image { display: block; overflow: hidden; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: zoom-in; }
.telegram-media-image img { display: block; max-width: min(100%, 380px); max-height: 360px; min-height: 180px; object-fit: contain; background: #f1f3f1; } /* v14-media-reserved-space */
.telegram-media-audio { width: min(300px, 65vw); height: 42px; }
.telegram-media-video { display: block; max-width: min(100%, 390px); max-height: 360px; border-radius: 12px; background: #111; }
.telegram-media-file {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 180px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(255,255,255,.66);
  color: #175f94;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}
.telegram-media-file span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.telegram-messages-empty,
.telegram-chat-loading { display: grid; place-items: center; gap: 8px; min-height: 30vh; color: var(--muted); font-size: 13px; }
.telegram-chat-loading .spinner { border-color: rgba(24,138,85,.2); border-top-color: var(--primary); }
.telegram-quick-actions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 7px 12px 4px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
}
.telegram-quick-actions button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #cfe6d9;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 850;
}
.telegram-quick-actions button:disabled { opacity: .42; cursor: not-allowed; }
.telegram-composer {
  display: grid;
  grid-template-columns: 46px 46px minmax(0, 1fr) 50px;
  align-items: end;
  gap: 7px;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .98);
}
.telegram-composer textarea {
  width: 100%;
  height: 46px;
  min-height: 46px;
  max-height: 200px; /* v2-always-bottom */
  resize: none;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #f6f8f6;
  color: var(--text);
  line-height: 1.35;
}
.telegram-composer button {
  height: 46px;
  border: 0;
  border-radius: 15px;
  font-weight: 900;
}
.telegram-attach-button { background: #eef1ee; color: #546057; font-size: 25px; }
#telegramSendButton { background: var(--primary); color: #fff; font-size: 20px; }
.telegram-composer button:disabled { opacity: .5; }

/* Telegram setup and order linking */
.telegram-settings-sheet { width: min(100%, 620px); }
.telegram-settings-body { min-height: 0; overflow-y: auto; padding: 18px 18px calc(26px + var(--safe-bottom)); }
.telegram-setup-state { display: grid; gap: 5px; margin-bottom: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-2); }
.telegram-setup-state strong { font-size: 17px; }
.telegram-setup-state span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.telegram-env-help { display: grid; gap: 8px; margin-bottom: 14px; padding: 15px; border-radius: 17px; background: #fff7e8; color: #68420b; }
.telegram-env-help code { display: block; overflow-x: auto; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.72); font-size: 12px; white-space: nowrap; }
.telegram-env-help small { line-height: 1.4; }
.telegram-qr-block { display: grid; justify-items: center; gap: 9px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fff; text-align: center; }
.telegram-qr-block img { width: min(78vw, 300px); aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.telegram-qr-block span { max-width: 390px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.telegram-qr-block button,
.telegram-password-form button,
.telegram-connected-actions button {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font-weight: 820;
}
.telegram-password-form { display: grid; gap: 10px; margin-bottom: 14px; padding: 15px; border: 1px solid #ecdba9; border-radius: 17px; background: #fffaf0; }
.telegram-password-form label { display: grid; gap: 6px; }
.telegram-password-form label span { color: var(--muted); font-size: 12px; font-weight: 760; }
.telegram-password-form input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.telegram-connected-block { display: grid; justify-items: center; gap: 7px; margin-bottom: 14px; padding: 20px; border: 1px solid #cce8d8; border-radius: 20px; background: #f4fbf7; text-align: center; }
.telegram-connected-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-size: 30px; font-weight: 900; }
.telegram-connected-block > span { color: var(--muted); font-size: 13px; }
.telegram-connected-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.telegram-connected-actions .danger-outline { border-color: #efcaca; color: var(--danger-dark); }
.telegram-start-button { margin-top: 6px; }
.secondary-settings-button {
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font-weight: 820;
}
.integration-badge.connected { background: var(--primary-soft); color: var(--primary-dark); }
.integration-badge.pending { background: var(--warning-soft); color: var(--warning); }
.integration-badge.error { background: #fde8e8; color: var(--danger-dark); }

.telegram-order-sheet { width: min(100%, 620px); }
.telegram-order-search-body { min-height: 0; overflow-y: auto; padding: 15px 16px calc(26px + var(--safe-bottom)); }
.telegram-order-results { display: grid; gap: 8px; margin-top: 10px; }
.telegram-order-result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--text);
  text-align: left;
}
.telegram-order-result span { min-width: 0; display: grid; gap: 4px; }
.telegram-order-result strong { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-order-result small { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-order-result b { flex: 0 0 auto; font-size: 13px; }

@media (max-width: 760px) {
  .main-navigation { padding: 7px 10px; }
  .main-navigation-button { min-height: 42px; font-size: 14px; }
  .telegram-workspace { display: block; position: relative; min-height: 0; overflow: hidden; }
  .telegram-list-pane {
    height: calc(100dvh - 64px - 57px - var(--safe-top));
    padding: 11px 10px 12px;
    border-right: 0;
  }
  .telegram-chat-pane {
    position: fixed;
    z-index: 35;
    inset: calc(64px + var(--safe-top)) 0 0;
    background: #edf1ed;
    transform: translateX(100%);
    transition: none;
  }
  body.telegram-chat-open .telegram-chat-pane, .telegram-workspace.chat-open .telegram-chat-pane { transform: translateX(0); }
  .telegram-back-button { display: grid; place-items: center; }
  .telegram-chat-header { min-height: 64px; padding: 7px 10px; }
  .telegram-chat-header .telegram-avatar { width: 40px; height: 40px; }
  .telegram-open-native { padding: 8px; font-size: 10px; }
  .telegram-order-bar { padding: 7px 9px; }
  #telegramLinkOrderButton { padding: 0 10px; }
  .telegram-message { max-width: 88%; }
  .telegram-messages { padding: 11px 9px 14px; }
  .telegram-composer { grid-template-columns: 46px minmax(0, 1fr) 50px; padding-left: 8px; padding-right: 8px; } /* v4-attach-menu */
  .telegram-composer:focus-within, body.telegram-keyboard-open .telegram-composer { padding-bottom: 8px; }
}

@media (max-width: 390px) {
  .telegram-chat-card { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 10px; }
  .telegram-chat-card .telegram-avatar { width: 46px; height: 46px; }
  .telegram-order-chip b { display: none; }
  .telegram-open-native { max-width: 75px; overflow: hidden; white-space: nowrap; }
}

/* v8.6.9: create a WooCommerce order directly from an unlinked Telegram chat. */
.telegram-create-order-inline {
  min-width: 0;
  flex: 1;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(24, 138, 85, .28);
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 860;
  white-space: nowrap;
}
.telegram-create-order-inline:active { background: #d9f0e4; }
.telegram-create-order-sheet { width: min(100%, 720px); max-height: min(94dvh, 930px); }
.telegram-create-order-body {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 16px 18px;
  -webkit-overflow-scrolling: touch;
}
.telegram-create-order-note {
  padding: 11px 13px;
  border-radius: 14px;
  background: #f0f6f2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}
.telegram-create-order-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.telegram-create-order-fields label { min-width: 0; display: grid; gap: 6px; }
.telegram-create-order-fields label.wide { grid-column: 1 / -1; }
.telegram-create-order-fields label > span { color: var(--text); font-size: 12px; font-weight: 800; }
.telegram-create-order-fields label > span small { color: var(--muted); font-size: 10px; font-weight: 650; }
.telegram-create-order-fields input,
.telegram-create-order-fields textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
}
.telegram-create-order-fields input { height: 49px; padding: 0 13px; }
.telegram-create-order-fields textarea { min-height: 76px; padding: 12px 13px; resize: vertical; line-height: 1.4; }
.telegram-create-order-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 3px;
}
.telegram-create-order-heading > div { display: grid; gap: 2px; }
.telegram-create-order-heading strong { font-size: 18px; }
.telegram-create-order-heading small { color: var(--muted); font-size: 11px; }
.telegram-create-order-heading b { color: var(--primary-dark); font-size: 17px; }
.telegram-create-order-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.telegram-create-order-search input {
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 15px;
}
.telegram-create-order-search button {
  min-width: 88px;
  border: 0;
  border-radius: 14px;
  background: #173e2e;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}
.telegram-create-order-hint { min-height: 17px; color: var(--muted); font-size: 11px; text-align: center; }
.telegram-create-order-catalog,
.telegram-create-order-items { display: grid; gap: 8px; }
.telegram-create-order-catalog { min-height: min-content; overflow: visible; }
.telegram-create-order-selected-heading { margin-top: 2px; font-size: 13px; font-weight: 850; }
.telegram-create-order-empty {
  padding: 20px 12px;
  border: 1px dashed var(--line);
  border-radius: 15px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.telegram-create-product,
.telegram-create-selected-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.telegram-create-selected-item { border-color: #cfe8da; background: #f6fbf8; }
.telegram-create-product-image {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f4f1;
  font-size: 25px;
}
.telegram-create-product-image img { width: 100%; height: 100%; object-fit: contain; }
.telegram-create-product-copy { min-width: 0; display: grid; gap: 3px; }
.telegram-create-product-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  line-height: 1.25;
}
.telegram-create-product-copy small { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.telegram-create-product-copy b { font-size: 12px; }
.telegram-create-product-action { display: grid; grid-template-columns: 56px auto; gap: 6px; }
.telegram-create-product-action input,
.telegram-create-selected-controls input {
  width: 56px;
  height: 39px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}
.telegram-create-product-action button,
.telegram-create-selected-controls button {
  min-height: 39px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 850;
}
.telegram-create-product-action button { background: var(--primary); color: #fff; }
.telegram-create-product-action button:disabled { opacity: .45; }
.telegram-create-selected-controls { display: grid; grid-template-columns: 56px auto; gap: 6px; }
.telegram-create-selected-controls button { background: #fde8e8; color: var(--danger-dark); }
.telegram-create-order-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #f7f9f7;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.telegram-create-order-confirmation input { width: 19px; height: 19px; margin: 0; accent-color: var(--primary); }
.telegram-create-order-footer {
  flex: 0 0 auto;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
}
.telegram-create-order-footer button {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.telegram-create-order-footer button:disabled { opacity: .55; }

@media (max-width: 520px) {
  .telegram-create-order-fields { grid-template-columns: 1fr; }
  .telegram-create-order-fields label.wide { grid-column: auto; }
  .telegram-create-product,
  .telegram-create-selected-item { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
  .telegram-create-product-image { width: 52px; height: 52px; }
  .telegram-create-product-action,
  .telegram-create-selected-controls { grid-column: 1 / -1; grid-template-columns: 74px minmax(0, 1fr); }
  .telegram-create-product-action input,
  .telegram-create-selected-controls input { width: 74px; }
}

/* v8.6.9: fast compositor-friendly swipe right to mark a chat unread. */
.telegram-chat-swipe {
  position: relative;
  isolation: isolate;
  contain: paint;
  overflow: hidden;
  margin-bottom: 7px;
  border-radius: 18px;
  background: #e8f4ed;
}
.telegram-chat-swipe .telegram-chat-card {
  z-index: 2;
  margin-bottom: 0;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.telegram-chat-swipe .telegram-chat-card:active { transform: none; }
.telegram-chat-swipe .telegram-chat-card.is-swiping,
.telegram-chat-swipe .telegram-chat-card.is-settling {
  will-change: transform;
  backface-visibility: hidden;
}
.telegram-chat-swipe .telegram-chat-card.is-swiping,
.telegram-chat-swipe .telegram-chat-card.no-swipe-transition {
  transition: none;
}
.telegram-chat-swipe .telegram-chat-card.is-settling {
  transition: transform 145ms cubic-bezier(.2,.82,.24,1);
}
.telegram-chat-swipe-action {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  background: #e8f4ed;
  color: var(--primary-dark);
  pointer-events: none;
  user-select: none;
}
.telegram-chat-swipe-action span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(24, 138, 85, .12);
  font-size: 15px;
  transform: scale(.92);
  transition: transform 110ms ease, background 110ms ease;
}
.telegram-chat-swipe-action small {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .01em;
}
.telegram-chat-swipe.is-swipe-ready .telegram-chat-swipe-action span,
.telegram-chat-swipe.is-swipe-done .telegram-chat-swipe-action span {
  background: rgba(24, 138, 85, .2);
  transform: scale(1.05);
}
.telegram-chat-swipe.is-swipe-done .telegram-chat-swipe-action small {
  font-weight: 900;
}
@media (hover: hover) and (pointer: fine) {
  .telegram-chat-swipe .telegram-chat-card { touch-action: auto; }
}

.telegram-chat-card-foot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.messenger-channel-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
}
.messenger-channel-badge.telegram { background: #e8f3ff; color: #1767a4; }
.messenger-channel-badge.instagram { background: #fceaf5; color: #9d286a; }
.messenger-channel-badge.messenger { background: #e8f0ff; color: #0866ff; }
.messenger-channel-badge.viber { background: #f0eaff; color: #6650a4; }
.telegram-chat-card.channel-messenger.active {
  border-color: rgba(8, 102, 255, .34);
  box-shadow: 0 12px 28px rgba(8, 102, 255, .12);
}
.telegram-chat-card.channel-instagram.active {
  border-color: rgba(196, 52, 139, .5);
  box-shadow: 0 0 0 3px rgba(196, 52, 139, .08);
}
.telegram-open-native.channel-instagram { background: #fceaf5; color: #9d286a; }
.telegram-open-native.channel-messenger { background: #e8f0ff; color: #0866ff; }
.telegram-open-native.channel-viber { background: #f0eaff; color: #6650a4; }
.telegram-message.is-deleted { outline: 1px solid rgba(197, 64, 64, .14); }
.telegram-deleted-label {
  padding-top: 5px;
  border-top: 1px solid rgba(181, 53, 53, .18);
  color: #b43232;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.3;
}
.telegram-media-file.deleted-file { color: #a73737; background: rgba(255, 239, 239, .8); }
.instagram-integration-settings { background: linear-gradient(145deg, #fff, #fff8fc); }
.messenger-integration-settings { background: linear-gradient(145deg, #fff, #f5f8ff); }
.viber-integration-settings { background: linear-gradient(145deg, #fff, #f8f5ff); }
.instagram-settings-sheet { width: min(100%, 660px); }
.instagram-meta-setup {
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid #eddce7;
  border-radius: 17px;
  background: #fff8fc;
}
.instagram-meta-setup > div { display: grid; gap: 5px; }
.instagram-meta-setup span { color: var(--muted); font-size: 11px; font-weight: 760; }
.instagram-meta-setup code {
  display: block;
  overflow-x: auto;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  color: #69204f;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}
.instagram-meta-setup small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.instagram-connected-icon { background: linear-gradient(145deg, #f5d8e9, #e9b8d5); color: #98215f; }
.messenger-connected-icon { background: linear-gradient(145deg, #dbe8ff, #bfd4ff); color: #0866ff; }

@media (max-width: 760px) {
  .telegram-chat-header { gap: 7px; }
  .telegram-chat-heading strong { font-size: 15px; }
  .telegram-open-native { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 390px) {
  .telegram-chat-header .telegram-avatar { width: 36px; height: 36px; }
  .telegram-open-native { max-width: 68px; padding: 7px; }
  .messenger-channel-badge { padding-inline: 6px; }
}


/* v8.6.9: open a conversation only after its final layout is ready. */
.telegram-chat-detail.is-opening { overflow: hidden; }
.telegram-chat-detail.is-opening::after {
  content: "Відкриваємо переписку…";
  position: absolute;
  z-index: 30;
  inset: 68px 0 0;
  display: grid;
  place-items: center;
  background: #edf1ed;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}
@media (max-width: 760px) {
  .telegram-chat-detail.is-opening::after { top: 64px; }
}

/* v8.6.9: personal Viber through E-chat.tech. */
.integration-last-event {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}


/* v8.6.9: never leave a messenger conversation on an endless spinner. */
.telegram-message-load-error {
  min-height: 220px;
  padding: 28px 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
}
.telegram-message-load-error strong { color: var(--text); font-size: 17px; }
.telegram-message-load-error span { max-width: 420px; line-height: 1.45; }
.telegram-message-load-error button {
  min-width: 150px;
  min-height: 46px;
  margin-top: 4px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 800;
}

/* v8.8.3: large inboxes (1000+ local threads) stay scrollable without
   laying out every off-screen card on each paint. */
.telegram-chat-swipe {
  content-visibility: auto;
  contain-intrinsic-size: 84px;
}

/* v8.8.3 — Instagram profile/backfill progress */
.instagram-profile-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 2px;
}
.instagram-profile-stats span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 8px;
  border: 1px solid rgba(38, 130, 93, .12);
  border-radius: 14px;
  background: rgba(235, 249, 242, .72);
  text-align: center;
}
.instagram-profile-stats b { font-size: 17px; line-height: 1; color: #146f4d; }
.instagram-profile-stats small { font-size: 10px; line-height: 1.25; color: var(--muted); }
.instagram-connected-actions { width: 100%; }
.instagram-connected-actions #instagramProfileSync { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .instagram-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instagram-connected-actions { display: grid; grid-template-columns: 1fr; }
}


/* v8.8.3 — Instagram professional account card for Meta App Review and daily admin diagnostics. */
.instagram-auth-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: -4px 0 14px;
}
.instagram-auth-mode {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.instagram-auth-mode.is-active {
  border-color: #b9dec9;
  background: #f2faf5;
  box-shadow: 0 0 0 2px rgba(38, 130, 93, .06);
}
.instagram-auth-mode > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.instagram-auth-mode strong { font-size: 12px; line-height: 1.2; }
.instagram-auth-mode span { color: var(--primary-dark); font-size: 10px; font-weight: 850; white-space: nowrap; }
.instagram-auth-mode small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.instagram-connected-block { justify-items: stretch; padding: 14px; text-align: left; }
.instagram-business-card {
  width: 100%;
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid #cde8d9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(25, 91, 61, .06);
}
.instagram-business-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.instagram-business-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ead7e3;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7d7e9, #f1b8d9 48%, #f9d78b);
  color: #7d275d;
  font-size: 15px;
  font-weight: 900;
}
.instagram-business-avatar img { width: 100%; height: 100%; object-fit: cover; }
.instagram-business-copy { min-width: 0; display: grid; gap: 3px; }
.instagram-professional-badge {
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #176944 !important;
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: .01em;
}
.instagram-business-copy strong { overflow: hidden; font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.instagram-business-copy > span:last-child { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.instagram-business-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.instagram-business-details > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(38, 130, 93, .11);
  border-radius: 13px;
  background: #f8fbf9;
}
.instagram-business-details span { color: var(--muted); font-size: 9px; font-weight: 760; text-transform: uppercase; letter-spacing: .03em; }
.instagram-business-details b { overflow-wrap: anywhere; color: var(--text); font-size: 11px; line-height: 1.35; }
.instagram-business-card .integration-last-event { margin: -2px 0 0; }

@media (max-width: 560px) {
  .instagram-auth-modes { grid-template-columns: 1fr; }
  .instagram-business-details { grid-template-columns: 1fr; }
  .instagram-business-identity { grid-template-columns: 50px minmax(0, 1fr); }
  .instagram-business-avatar { width: 50px; height: 50px; }
}

/* v8.8.5 — desktop-only emoji picker */
.telegram-emoji-button { display:none; }
.telegram-emoji-picker { display:none; }
@media (min-width: 761px) {
  .telegram-composer { position:relative; }
  .telegram-emoji-button { display:inline-grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border:0; border-radius:12px; background:transparent; font-size:22px; cursor:pointer; }
  .telegram-emoji-button:hover { background:var(--surface-2); }
  .telegram-emoji-picker:not(.hidden) { position:absolute; display:grid; grid-template-columns:repeat(8,36px); gap:4px; left:56px; bottom:58px; z-index:30; padding:10px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 16px 42px rgba(28,39,31,.16); }
  .telegram-emoji-picker button { width:36px; height:36px; border:0; border-radius:9px; background:transparent; font-size:21px; cursor:pointer; }
  .telegram-emoji-picker button:hover { background:var(--surface-2); }
}
@media (max-width: 760px) {
  .desktop-only-emoji, .telegram-emoji-picker { display:none !important; }
}

/* v8.8.7 — desktop chats use the same focus flow as the phone version. */
.main-navigation {
  padding: 7px 12px;
  gap: 8px;
  background: rgba(255,255,255,.98);
  border-bottom-color: #cfe1d6;
}
.main-navigation-button {
  min-height: 42px;
  border-radius: 13px;
  font-weight: 880;
}
#ordersTabButton.active {
  border-color: #a7dfc0;
  background: linear-gradient(135deg,#dcf9e9,#c9f2da);
  color: #06743e;
  box-shadow: inset 0 0 0 1px rgba(10,163,93,.05);
}
#telegramTabButton.active {
  border-color: #f2bad7;
  background: linear-gradient(135deg,#fff0f8,#ffe0f0);
  color: #aa1f64;
  box-shadow: inset 0 0 0 1px rgba(216,57,132,.05);
}
.nav-unread { background: #f04444; box-shadow: 0 3px 9px rgba(240,68,68,.25); }
.messenger-channel-badge.instagram { background:#ffe3f1; color:#b41961; }
.messenger-channel-badge.messenger { background:#dfeaff; color:#175bc1; }
.messenger-channel-badge.telegram { background:#e1f4ff; color:#0876a9; }
.messenger-channel-badge.viber { background:#eee5ff; color:#6d3cc7; }

@media (min-width: 761px) {
  .telegram-workspace {
    display: block;
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
  }
  .telegram-list-pane {
    width: 100%;
    height: 100%;
    padding: 10px 12px 14px;
    border-right: 0;
    background: linear-gradient(180deg,#f8fcfa 0,#eef6f1 100%);
  }
  .telegram-list-toolbar {
    grid-template-columns: minmax(0,1fr) 46px;
  }
  .telegram-list-toolbar .search-wrap { height:46px; border-radius:14px; border-color:#cfdfd5; }
  .telegram-list-toolbar .search-wrap input { height:44px; font-size:15px; }
  .telegram-sync-button { width:46px; height:46px; border-radius:14px; border-color:#cfdfd5; }
  .telegram-list-meta { padding:9px 4px 7px; }
  .telegram-chats-list { display:grid; align-content:start; gap:6px; padding-bottom:16px; }
  .telegram-chat-swipe { margin:0; }
  .telegram-chat-card {
    min-height:68px;
    grid-template-columns: 50px minmax(0,1fr) auto;
    gap:12px;
    margin:0;
    padding:8px 12px;
    border-radius:14px;
    border-color:#d4e3d9;
    box-shadow:0 3px 12px rgba(21,67,43,.035);
  }
  .telegram-chat-card:hover { border-color:#a7d1b8; background:#fbfffd; box-shadow:0 8px 22px rgba(21,67,43,.07); }
  .telegram-chat-card.active { border-color:#e56aa4; box-shadow:0 0 0 3px rgba(225,71,143,.10); }
  .telegram-chat-card-copy {
    display:grid;
    grid-template-columns:minmax(180px,.7fr) minmax(0,1.7fr) auto;
    grid-template-areas:
      "name preview foot"
      "identity preview foot";
    column-gap:18px;
    align-items:center;
  }
  .telegram-chat-card-top { grid-area:name; display:grid; gap:2px; justify-content:stretch; }
  .telegram-chat-card-top strong { font-size:15px; }
  .telegram-chat-card-top time { position:absolute; right:14px; top:8px; }
  .telegram-chat-card-identity { grid-area:identity; width:fit-content; max-width:100%; padding:2px 7px; }
  .telegram-chat-card-preview { grid-area:preview; align-self:center; font-size:13px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#445149; }
  .telegram-chat-card-foot { grid-area:foot; justify-self:end; padding-right:48px; align-items:center; }
  .telegram-chat-card-meta { min-width:120px; }
  .telegram-unread { margin-right:2px; }

  .telegram-chat-pane {
    position:fixed;
    z-index:43;
    inset:58px 0 0;
    background:#edf5f0;
    transform:translateX(100%);
    transition:transform .16s ease;
    box-shadow:-18px 0 50px rgba(20,59,39,.10);
  }
  body.telegram-chat-open .telegram-chat-pane,
  .telegram-workspace.chat-open .telegram-chat-pane { transform:translateX(0); }
  .telegram-back-button { display:grid; place-items:center; }
  .telegram-chat-header {
    min-height:60px;
    padding:7px 14px;
    background:rgba(255,255,255,.98);
  }
  .telegram-order-bar { padding:7px 14px; background:#f8fffb; }
  .telegram-messages { padding:14px clamp(18px,5vw,84px) 18px; }
  .telegram-message { max-width:min(72%,920px); }
  .telegram-composer { padding-left:clamp(16px,4vw,64px); padding-right:clamp(16px,4vw,64px); }
  .telegram-emoji-picker { right:clamp(72px,6vw,110px); }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .telegram-chat-card-copy { grid-template-columns:minmax(160px,.8fr) minmax(0,1.4fr) auto; column-gap:10px; }
  .telegram-chat-card-meta { display:none; }
  .telegram-chat-card-foot { padding-right:40px; }
}

@media (min-width: 761px) {
  /* Swipe wrappers use paint containment; give them an explicit row height so
     the full-width desktop grid keeps native wheel scrolling for thousands of chats. */
  .telegram-chat-swipe { min-height: 68px; border-radius:14px; }
}
/* Швидкі відповіді — шторка знизу, зручно і на телефоні, і на десктопі */
.telegram-quickreply-button { display:inline-grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border:0; border-radius:12px; background:transparent; font-size:19px; cursor:pointer; }
.telegram-quickreply-button:hover { background:var(--surface-2); }
.telegram-quickreply-sheet { max-height:min(80dvh,680px); }
.telegram-quickreply-list { overflow-y:auto; padding:10px 16px calc(16px + var(--safe-bottom)); display:flex; flex-direction:column; gap:6px; }
.telegram-quickreply-row { display:flex; align-items:stretch; gap:6px; }
.telegram-quickreply-item { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; border-radius:14px; cursor:pointer; text-align:left; border:1px solid var(--line); background:var(--surface-2); min-width:0; }
.telegram-quickreply-item:active { background:var(--line); }
.telegram-quickreply-item .title { font-weight:600; font-size:14px; }
.telegram-quickreply-item .body { font-size:13px; color:var(--muted,#8a8f89); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.telegram-quickreply-empty { padding:20px 4px; font-size:14px; color:var(--muted,#8a8f89); text-align:center; }
.telegram-quickreply-remove { flex:0 0 44px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:#c0392b; cursor:pointer; font-size:18px; border-radius:14px; }
.telegram-quickreply-manage { margin-top:10px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.telegram-quickreply-manage input, .telegram-quickreply-manage textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:15px; font-family:inherit; box-sizing:border-box; }
.telegram-quickreply-manage button { border:0; background:var(--accent,#2f6b3f); color:#fff; border-radius:12px; padding:12px; font-size:15px; font-weight:600; cursor:pointer; }
/* v5-keyboard-space: більше місця для чату й тексту, поки відкрита клавіатура */
body.telegram-keyboard-open .telegram-order-bar,
body.telegram-keyboard-open .telegram-suggestion-bar {
  display: none;
}
.telegram-attach-menu { display:none; } /* v4-attach-menu */
.telegram-attach-menu:not(.hidden) {
  display:flex; flex-direction:column; gap:2px;
  position:absolute; left:8px; bottom:58px; z-index:31;
  min-width:220px; padding:6px; border:1px solid var(--line); border-radius:16px;
  background:#fff; box-shadow:0 16px 42px rgba(28,39,31,.16);
}
.telegram-attach-menu-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:0; background:transparent; font-size:14px; text-align:left; cursor:pointer; }
.telegram-attach-menu-item:hover { background:var(--surface-2); }
/* v6-reply-state: кольорова смужка зліва — як у Upanuntsi OS */
.telegram-chat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 18px 0 0 18px; background: #d5ddd8; }
.telegram-chat-card.state-needs-reply { background: linear-gradient(90deg,#fff0f1 0%,#fff8f8 55%,#fff 100%); border-color: #f4cdd1; }
.telegram-chat-card.state-needs-reply::before { background: #f04a57; }
.telegram-chat-card.state-answered { background: linear-gradient(90deg,#e3f7ee 0%,#f4fbf8 55%,#fff 100%); border-color: #9fd9c0; }
.telegram-chat-card.state-answered::before { background: #00A86B; }
/* v9-badge-by-name: бейдж каналу одразу біля імені клієнта */
.telegram-chat-card-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.telegram-chat-card-name-line strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* v11-reply-to-message */
/* v12-reply-trigger-inline: Bнопка всередині бульбашки, поруч із часом */
.telegram-message time { display: none; }
.telegram-message-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.telegram-message-foot time { display: inline; justify-self: auto; }
.telegram-message-reply-trigger {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.7); color: #546057;
  font-size: 12px; line-height: 1; cursor: pointer; opacity: .6; padding: 0;
}
.telegram-message.outgoing .telegram-message-reply-trigger { background: rgba(255,255,255,.55); }
.telegram-message-reply-trigger:hover, .telegram-message-reply-trigger:active { opacity: 1; background: #fff; }
.telegram-reply-quote {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.04);
  font-size: 12px; color: var(--muted, #6b756e); cursor: pointer;
}
.telegram-reply-quote-bar { flex: 0 0 3px; align-self: stretch; border-radius: 3px; background: var(--primary, #188a55); }
.telegram-reply-quote-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.telegram-reply-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 0 12px; border-radius: 12px 12px 0 0;
  background: var(--surface-2, #f3f5f2); border-bottom: 1px solid var(--line);
}
.telegram-reply-preview.hidden { display: none; }
.telegram-reply-preview-bar { flex: 0 0 3px; align-self: stretch; border-radius: 3px; background: var(--primary, #188a55); }
.telegram-reply-preview-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
#telegramReplyPreviewCancel { flex: 0 0 auto; border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--muted, #6b756e); cursor: pointer; padding: 2px 4px; }

/* v8.8.13.11 — verified send actions and a stable, aligned chat workspace. */
.telegram-chat-detail {
  --chat-content-width: 1040px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.telegram-compose-dock {
  position: relative;
  z-index: 6;
  grid-row: 5;
  min-width: 0;
  background: rgba(255, 255, 255, .98);
}
.telegram-compose-dock .telegram-composer { grid-row: auto; }
.telegram-order-bar {
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
}
.telegram-order-bar .telegram-linked-order { flex: 1 1 280px; }
.telegram-order-bar .telegram-quick-actions {
  order: 3;
  width: 100%;
  flex: 1 0 100%;
  gap: 7px;
  padding: 2px 0 0;
  border: 0;
  background: transparent;
}
.telegram-quick-actions button {
  min-height: 36px;
  border-radius: 11px;
  font-variant-numeric: tabular-nums;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.telegram-quick-actions button:not(:disabled):active { transform: scale(.98); }
.telegram-quick-actions button.is-sent:disabled {
  border-color: #9edcba;
  background: #daf5e7;
  color: #087545;
  opacity: 1;
}
.telegram-quick-actions button.is-repeat {
  border-color: #7fd2a5;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24, 138, 85, .06);
}
.telegram-quick-actions button.is-pending:disabled {
  border-color: #ebd398;
  background: #fff8e7;
  color: #815d0c;
  opacity: 1;
}
.telegram-messages-list { width: min(100%, var(--chat-content-width)); }
.telegram-composer {
  padding-inline: max(12px, calc((100% - var(--chat-content-width)) / 2));
  box-shadow: 0 -5px 18px rgba(34, 67, 48, .035);
}
.telegram-composer textarea {
  overflow-y: hidden;
  scrollbar-width: thin;
}
.telegram-attach-button,
.telegram-emoji-button,
#telegramSendButton { border-radius: 14px; }
.telegram-compose-dock .telegram-reply-preview {
  margin-inline: max(12px, calc((100% - var(--chat-content-width)) / 2));
}
.telegram-compose-dock .telegram-attach-menu {
  left: max(12px, calc((100% - var(--chat-content-width)) / 2));
}
body.telegram-chat-open .toast {
  top: var(--telegram-toast-top, calc(180px + var(--safe-top)));
  right: 18px;
  bottom: auto;
  left: auto;
  width: min(calc(100vw - 28px), 360px);
  padding: 12px 15px;
  transform: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: #087545;
  text-align: left;
  box-shadow: 0 14px 36px rgba(8, 68, 41, .2);
  pointer-events: none;
}
body.telegram-chat-open .toast.error { background: #9a3030; }
@media (min-width: 1180px) {
  .telegram-workspace {
    display: grid;
    grid-template-columns: clamp(340px, 27vw, 410px) minmax(0, 1fr);
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
  }
  .telegram-list-pane {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 11px 10px 14px;
    border-right: 1px solid #cfe1d6;
    background: linear-gradient(180deg, #f8fcfa 0, #eef6f1 100%);
  }
  .telegram-chats-list {
    display: block;
    align-content: initial;
    gap: 0;
  }
  .telegram-chat-swipe { min-height: 68px; }
  .telegram-chat-card {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 11px;
    min-height: 68px;
    margin: 0 0 6px;
    padding: 9px 11px;
  }
  .telegram-chat-card-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 3px;
  }
  .telegram-chat-card-top,
  .telegram-chat-card-identity,
  .telegram-chat-card-preview,
  .telegram-chat-card-foot { grid-area: auto; }
  .telegram-chat-card-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .telegram-chat-card-top time {
    position: static;
    flex: 0 0 auto;
  }
  .telegram-chat-card-identity { width: fit-content; max-width: 100%; padding: 1px 6px; }
  .telegram-chat-card-preview {
    align-self: auto;
    font-size: 12px;
    line-height: 1.3;
  }
  .telegram-chat-card-foot {
    justify-self: stretch;
    padding-right: 0;
  }
  .telegram-chat-card-meta { min-width: 0; }
  .telegram-chat-pane {
    position: relative;
    z-index: auto;
    inset: auto;
    min-width: 0;
    min-height: 0;
    background: #edf5f0;
    transform: none;
    transition: none;
    box-shadow: none;
  }
  body.telegram-chat-open .telegram-chat-pane,
  .telegram-workspace.chat-open .telegram-chat-pane { transform: none; }
  .telegram-back-button { display: none; }
  .telegram-chat-header { min-height: 64px; padding: 8px 16px; }
  .telegram-order-bar {
    flex-wrap: nowrap;
    gap: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: max(18px, calc((100% - var(--chat-content-width)) / 2));
    padding-right: max(18px, calc((100% - var(--chat-content-width)) / 2));
  }
  .telegram-order-bar .telegram-linked-order { flex: 1 1 220px; }
  .telegram-order-bar .telegram-quick-actions {
    order: initial;
    width: auto;
    flex: 0 0 auto;
    padding: 0;
  }
  .telegram-order-bar .telegram-quick-actions button { padding-inline: 11px; }
  .telegram-messages {
    padding: 18px max(18px, calc((100% - var(--chat-content-width)) / 2)) 22px;
    background:
      radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .88), transparent 32%),
      linear-gradient(160deg, #eef5f0, #e8f0eb);
  }
  .telegram-message { max-width: min(76%, 720px); }
  .telegram-message-text { font-size: 15px; line-height: 1.42; }
  .telegram-message-foot time { font-size: 10px; }
  .telegram-composer {
    padding-left: max(18px, calc((100% - var(--chat-content-width)) / 2));
    padding-right: max(18px, calc((100% - var(--chat-content-width)) / 2));
  }
  .telegram-compose-dock .telegram-reply-preview {
    margin-left: max(18px, calc((100% - var(--chat-content-width)) / 2));
    margin-right: max(18px, calc((100% - var(--chat-content-width)) / 2));
  }
  .telegram-compose-dock .telegram-emoji-picker {
    right: auto;
    left: max(68px, calc((100% - var(--chat-content-width)) / 2 + 54px));
  }
  .telegram-compose-dock .telegram-attach-menu {
    left: max(18px, calc((100% - var(--chat-content-width)) / 2));
  }
}

@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .telegram-message-reply-trigger { opacity: 0; }
  .telegram-message:hover .telegram-message-reply-trigger,
  .telegram-message-reply-trigger:focus-visible { opacity: 1; }
}

@media (max-width: 760px) {
  .telegram-order-bar .telegram-linked-order { flex-basis: calc(100% - 112px); }
  .telegram-order-bar .telegram-quick-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .telegram-order-bar .telegram-quick-actions::-webkit-scrollbar { display: none; }
  .telegram-order-bar .telegram-quick-actions button { min-height: 42px; padding-inline: 12px; }
  body.telegram-chat-open .toast {
    right: 12px;
    width: min(calc(100vw - 24px), 340px);
    text-align: center;
  }
}