:root {
  --safe-top:max(env(safe-area-inset-top, 0px), var(--mini-safe-top, 0px));
  --safe-right:max(env(safe-area-inset-right, 0px), var(--mini-safe-right, 0px));
  --safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--mini-safe-bottom, 0px));
  --safe-left:max(env(safe-area-inset-left, 0px), var(--mini-safe-left, 0px));
}
[hidden],[data-denied="true"] { display:none !important; }
.top-actions a { text-decoration:none; }
.telegram {
  --bg1:var(--tg-theme-bg-color, #fff); --bg2:var(--tg-theme-secondary-bg-color, #f1f3f5);
  --txt:var(--tg-theme-text-color, #17212b); --sub:var(--tg-theme-hint-color, #667684);
  --dim:var(--tg-theme-hint-color, #667684); --acc:var(--tg-theme-button-color, #2481cc);
  --acc2:var(--tg-theme-button-color, #2481cc); --glass:rgba(128,128,128,.08);
  --glass-strong:rgba(128,128,128,.12); --glass-hover:rgba(128,128,128,.18);
  --line:rgba(128,128,128,.25);
  color-scheme:light;
}
.telegram[data-theme="dark"] { color-scheme:dark; }
.telegram body { background:var(--bg1); color:var(--txt); }
.telegram .modal,.telegram table.data th,.telegram .emoji-panel { background:var(--bg2); }
.telegram .field input,.telegram .field textarea,.telegram .field select,
.telegram .chat-input textarea,.telegram .cust-btn-item input,.telegram .cust-btn-item select,
.telegram .penalty-line select { background:var(--bg1); color:var(--txt); }
.telegram .btn.primary,.telegram .tbtn.primary,.telegram .login-page button {
  color:var(--tg-theme-button-text-color, #fff);
}
.telegram .menu-item.active,.telegram .bot-pill.active { color:var(--txt); }
.telegram .link-btn { color:var(--tg-theme-link-color, #2481cc); }
.telegram .btn.ok,.telegram .tag-ok { color:#16845b; }
.telegram .btn.danger,.telegram .link-btn.danger { color:var(--tg-theme-destructive-text-color, #d23848); }
.telegram .conv-badge { color:var(--txt); }
.telegram .conv-badge.v { color:var(--txt); }
.layout { height:100dvh; height:var(--app-height, 100dvh);
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.modal-mask { padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 8px)
  calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px);
  bottom:auto; height:var(--app-height, 100dvh); }
.modal { max-height:100%; }
.toast { top:calc(var(--safe-top) + 74px); max-width:calc(100vw - 32px); }
.chat-back { display:none; }
.modal-mask.message-menu-layer { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.message-menu { position:absolute; width:196px; max-width:calc(100% - 16px); padding:5px;
  border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; color:#17212b;
  box-shadow:0 3px 16px rgba(0,0,0,.16); overflow-y:auto; }
.message-menu > button { display:flex; align-items:center; gap:16px; width:100%; min-height:40px;
  padding:8px 12px; border:0; border-radius:5px; background:transparent; color:inherit;
  text-align:left; font-size:14px; }
.message-menu > button:hover,.message-menu > button:focus-visible { background:rgba(128,128,128,.14); outline:none; }
.message-menu svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.telegram[data-theme="dark"] .message-menu { background:var(--bg2); color:var(--txt); border-color:var(--line); }
.friend-search { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px;
  background:var(--glass); color:var(--txt); font-size:16px; }
.friend-list { overflow-y:auto; min-height:0; }
.friend-row { display:flex; gap:12px; align-items:center; padding:14px 8px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.friend-info { flex:1; min-width:120px; overflow-wrap:anywhere; }
.friend-info div { color:var(--sub); font-size:12px; }
.friend-actions { display:flex; gap:8px; }
.message-text { display:block; cursor:context-menu; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.message-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:30vh; overflow:auto;
  padding:12px; margin:12px 0; background:var(--glass); border-radius:10px; user-select:text; -webkit-user-select:text; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--acc, #5b8cff); outline-offset:2px;
}
.login-page { min-height:100dvh; min-height:var(--app-height, 100dvh);
  padding:calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px)
    calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px); overflow:auto; }
.login-page input { font-size:16px; }
.telegram .login-page .card { background:var(--bg2); border-color:var(--line); box-shadow:none; }
.telegram .login-page .sub { color:var(--sub); }
.telegram .login-page input { background:var(--bg1); color:var(--txt); border-color:var(--line); }
.telegram .login-page button { background:var(--acc); }

@media (max-width:600px) {
  .topbar { height:auto; min-height:58px; padding:8px 12px; gap:8px; flex-wrap:wrap; }
  .brand { flex:1; }
  .brand .txt { display:inline; font-size:14px; }
  .brand .logo { width:28px; height:28px; }
  .top-actions { gap:6px; }
  .tbtn { padding:8px 10px; min-height:40px; }
  .bot-tabs { flex-basis:100%; order:3; min-width:0; padding:2px 0; }
  .bot-tabs:empty { display:none; }
  .bot-pill { padding:7px 10px; }
  .bot-pill .pill-del { display:inline-block; width:28px; height:28px; line-height:28px; }
  .body { flex-direction:column; }
  .sidebar { order:2; width:100%; padding:4px; display:flex; overflow-x:auto;
    border-right:0; border-top:1px solid var(--line); }
  .menu-item { flex:1 0 54px; width:auto; flex-direction:column; gap:2px; padding:7px 4px;
    margin:0; font-size:10px; line-height:1.3; min-height:52px; }
  .menu-item .txt { display:block; white-space:nowrap; }
  .content { width:100%; }
  .conv-list { width:100%; border-right:0; }
  .chat-main { display:none; }
  .conversation-open .conv-list { display:none; }
  .conversation-open .chat-main { display:flex; }
  .chat-back { display:inline-flex; align-items:center; justify-content:center; }
  .chat-header { gap:8px; padding:8px 12px; flex-wrap:wrap; }
  .chat-header .info { flex-basis:calc(100% - 106px); }
  .chat-header .nm,.chat-header .meta { overflow-wrap:anywhere; }
  .chat-header .btn { min-height:36px; padding:6px 10px; }
  .chat-body { padding:12px; overscroll-behavior:contain; }
  .bubble { max-width:calc(100% - 50px); }
  .chat-input { display:flex; flex-wrap:wrap; gap:8px; padding:8px 12px; }
  .input-tools { flex-basis:100%; }
  .chat-input textarea { min-width:0; font-size:16px; }
  .emoji-panel { width:min(336px, calc(100vw - 48px)); }
  .rules-wrap { padding:12px; gap:10px; }
  .rules-toolbar { flex-wrap:wrap; }
  .rules-toolbar .hint { flex-basis:100%; order:3; }
  .table-box { min-height:0; }
  table.data th,table.data td { padding:10px; }
  .settings-wrap { padding:12px; max-width:none; width:100%; }
  .pad { padding:16px; }
  .modal { width:100%; padding:18px 14px; border-radius:16px; }
  .field input,.field textarea,.field select { font-size:16px; }
  .cust-row { flex-wrap:wrap; }
  .cust-row-body { min-width:0; }
  .cust-btn-item input { min-width:0; width:100%; flex-basis:100%; }
  .modal-acts .btn { min-height:44px; }
}