/* Preview-only Telegram bot — FULL WIDTH + compact kibar controls
   Loaded last. Does not affect live. */

/* Kill half-page look: use full content width */
html.tg-bot-page .ph-page,
html.tg-bot-page .ph-page > .card,
html.tg-bot-page .ph-page .card,
html.tg-bot-page .ph-page form.form,
html.tg-bot-page .ph-page .card.help,
html.tg-bot-page .ph-page .help {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html.tg-bot-page .ph-page {
  overflow: visible !important;
  padding-bottom: 2rem !important;
}

/* Tabs */
html.tg-bot-page main.ph-main .ph-page .tabs,
html.tg-bot-page .ph-page .tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 12px !important;
  width: 100% !important;
}
html.tg-bot-page .ph-page .tabs .tab-status {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html.tg-bot-page .ph-page .tabs button.tab {
  appearance: none !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html.tg-bot-page .ph-page .tabs button.tab.on {
  background: rgba(59,130,246,.18) !important;
  color: #e2e8f0 !important;
  border-color: #3b82f6 !important;
}

/* 2-col horizontal form */
html.tg-bot-page main.ph-main .ph-page form.form .pane,
html.tg-bot-page .ph-page form.form .pane,
html.tg-bot-page .ph-page .pane {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 16px !important;
  align-items: start !important;
  width: 100% !important;
}
html.tg-bot-page .ph-page .pane > label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  grid-column: auto !important;
}
html.tg-bot-page .ph-page .pane > label > small {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}
html.tg-bot-page .ph-page .pane > label > input:not([type=checkbox]):not([type=radio]) {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: #141922 !important;
  color: #eef2f7 !important;
  box-shadow: none !important;
  transform: none !important;
}
html.tg-bot-page .ph-page .pane > label > textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 60px !important;
  height: 60px !important;
  max-height: 90px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: #141922 !important;
  color: #eef2f7 !important;
  resize: vertical !important;
  box-shadow: none !important;
  transform: none !important;
}
html.tg-bot-page .ph-page .pane > label:has(> textarea),
html.tg-bot-page .ph-page .pane > label.check,
html.tg-bot-page .ph-page .pane > .actions {
  grid-column: 1 / -1 !important;
}
html.tg-bot-page .ph-page .pane > label.check {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: max-content !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
}
html.tg-bot-page .ph-page .pane > label.check > input[type=checkbox],
html.tg-bot-page .ph-page input[type=checkbox] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  flex: 0 0 15px !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  accent-color: #3b82f6 !important;
  transform: none !important;
}

/* ===== BUTTONS: small + kibar — beat tg-bot-page-fix / overlay / fit-05 ===== */
html.tg-bot-page main.ph-main .ph-page .actions,
html.tg-bot-page .ph-page .actions,
html.tg-bot-page .ph-page form.form .actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

html.tg-bot-page main.ph-main .ph-page .actions .btn,
html.tg-bot-page main.ph-main .ph-page .actions button.btn,
html.tg-bot-page main.ph-main .ph-page .pane .btn,
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn,
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn.btn-primary,
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn.btn-ghost,
html.tg-bot-page .ph-page .actions .btn,
html.tg-bot-page .ph-page .actions button.btn,
html.tg-bot-page .ph-page form.form .actions .btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 22px !important;
  height: 22px !important;
  max-height: 22px !important;
  padding: 0 9px !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

html.tg-bot-page main.ph-main .ph-page .actions .btn.btn-primary,
html.tg-bot-page main.ph-main .ph-page .actions .btn:not(.btn-ghost),
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn.btn-primary,
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn:not(.btn-ghost),
html.tg-bot-page .ph-page .actions .btn.btn-primary,
html.tg-bot-page .ph-page .actions .btn:not(.btn-ghost) {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
}

html.tg-bot-page main.ph-main .ph-page .actions .btn.btn-ghost,
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn.btn-ghost,
html.tg-bot-page .ph-page .actions .btn.btn-ghost {
  background: transparent !important;
  background-color: transparent !important;
  color: #475569 !important;
  border: 1px solid rgba(100,116,139,.35) !important;
  font-weight: 500 !important;
}
html.tg-bot-page[data-theme="dark"] main.ph-main .ph-page .actions .btn.btn-ghost,
html.tg-bot-page[data-theme="dark"] main.ph-main .ph-page form.form .actions .btn.btn-ghost,
html.tg-bot-page[data-theme="dark"] .ph-page .actions .btn.btn-ghost {
  color: #cbd5e1 !important;
  border: 1px solid rgba(148,163,184,.28) !important;
}

html.tg-bot-page .ph-page .actions .btn.btn-primary:hover:not(:disabled) {
  background: #2563eb !important;
}
html.tg-bot-page .ph-page .actions .btn.btn-ghost:hover:not(:disabled) {
  background: rgba(148,163,184,.08) !important;
}

/* Pills */
html.tg-bot-page .ph-page span.pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html.tg-bot-page .ph-page span.pill.on {
  background: rgba(34,197,94,.16) !important;
  color: #86efac !important;
  border: 1px solid rgba(34,197,94,.32) !important;
}
html.tg-bot-page .ph-page span.pill.off {
  background: rgba(239,68,68,.14) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239,68,68,.32) !important;
}

/* Kurulum card — full width, visible */
html.tg-bot-page .ph-page .card.help,
html.tg-bot-page .ph-page .help {
  display: block !important;
  margin-top: 14px !important;
  margin-bottom: 1.5rem !important;
}
html.tg-bot-page .ph-page .card.help h3 {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
}
html.tg-bot-page .ph-page .card.help ol {
  margin: 0 0 8px !important;
  padding-left: 1.15rem !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #94a3b8 !important;
}
html.tg-bot-page .ph-page .card.help .muted {
  font-size: 11.5px !important;
  color: #64748b !important;
}

/* Header description visible */
html.tg-bot-page .ph-page .ph-page-header__desc,
html.tg-bot-page .ph-page-header__desc {
  display: block !important;
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
}

@media (max-width: 720px) {
  html.tg-bot-page .ph-page .pane {
    grid-template-columns: 1fr !important;
  }
}

/* TG COMPACT — buttons + type (preview) */
html.tg-bot-page main.ph-main .ph-page .actions .btn,
html.tg-bot-page main.ph-main .ph-page .actions button.btn,
html.tg-bot-page main.ph-main .ph-page .pane .actions .btn,
html.tg-bot-page main.ph-main .ph-page .pane .btn,
html.tg-bot-page main.ph-main .ph-page form.form .actions .btn,
html.tg-bot-page main.ph-main .ph-page form.form .actions button.btn,
html.tg-bot-page main.ph-main .ph-page button.btn.btn-primary,
html.tg-bot-page main.ph-main .ph-page button.btn.btn-ghost,
html.tg-bot-page .ph-page .actions .btn,
html.tg-bot-page .ph-page .actions button.btn,
html.tg-bot-page .ph-page button.btn:not(.tab){
  box-sizing:border-box!important;
  min-height:22px!important;height:22px!important;max-height:22px!important;
  padding:0 8px!important;margin:0!important;
  font-size:11px!important;font-weight:600!important;line-height:1!important;
  letter-spacing:0!important;border-radius:5px!important;
  width:auto!important;min-width:0!important;max-width:max-content!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-shadow:none!important;transform:none!important;filter:none!important;
}
html.tg-bot-page main.ph-main .ph-page .actions .btn.btn-primary,
html.tg-bot-page main.ph-main .ph-page button.btn.btn-primary,
html.tg-bot-page .ph-page .actions .btn.btn-primary,
html.tg-bot-page .ph-page .actions .btn:not(.btn-ghost){
  background:#3b82f6!important;color:#fff!important;border:1px solid transparent!important;
}
html.tg-bot-page main.ph-main .ph-page .actions .btn.btn-ghost,
html.tg-bot-page main.ph-main .ph-page button.btn.btn-ghost,
html.tg-bot-page .ph-page .actions .btn.btn-ghost{
  background:transparent!important;color:#94a3b8!important;border:1px solid rgba(148,163,184,.3)!important;font-weight:500!important;
}
html.tg-bot-page main.ph-main .ph-page .actions{gap:6px!important;margin-top:2px!important;align-items:center!important}
html.tg-bot-page main.ph-main .ph-page .pane>label{
  font-size:11.5px!important;font-weight:600!important;gap:4px!important;color:#94a3b8!important;
}
html.tg-bot-page main.ph-main .ph-page .pane>label>small{
  font-size:10.5px!important;font-weight:400!important;line-height:1.35!important;
}
html.tg-bot-page main.ph-main .ph-page .pane>label>input:not([type=checkbox]):not([type=radio]),
html.tg-bot-page main.ph-main .ph-page .pane>label>textarea{
  min-height:28px!important;height:auto!important;padding:4px 8px!important;
  font-size:12px!important;font-weight:400!important;line-height:1.3!important;
  border-radius:6px!important;
}
html.tg-bot-page main.ph-main .ph-page .pane>label>textarea{min-height:64px!important}
html.tg-bot-page main.ph-main .ph-page .tabs button.tab{
  min-height:26px!important;height:auto!important;padding:3px 10px!important;
  font-size:11.5px!important;font-weight:600!important;
}
html.tg-bot-page main.ph-main .ph-page span.pill{
  font-size:10.5px!important;padding:1px 7px!important;font-weight:700!important;
}