.work-channels { color: #252628; }
.work-channel-heading h3 { margin: 6px 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.work-channel-heading p, .work-channel-description, .work-channel-privacy { color: #676b73; font-size: 16px; line-height: 1.65; }
.work-channel-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 24px 0 28px; }
.work-channel-choice { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 8px; border: 1px solid #e1e4e8; border-radius: 13px; background: #fff; color: #51565d; font: inherit; font-size: 16px; cursor: pointer; }
.work-channel-choice .work-channel-brand { color: #6d7f92; font-weight: 700; }
.work-channel-choice { position: relative; }
.work-channel-choice:has(.work-channel-state-icon) { padding-right: 27px; }
.work-channel-choice .work-channel-state-icon { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; }
.work-channel-choice .work-channel-state-icon svg { width: 14px; height: 14px; }
.work-channel-choice.selected { border-color: #638cba; background: #edf4fb; color: #175993; box-shadow: inset 0 0 0 1px #638cba; }
.work-channel-choice:focus-visible, .work-channels button:focus-visible, .work-channels summary:focus-visible { outline: 3px solid #aacbf0; outline-offset: 3px; }
.work-channels > .channel-section { padding: 8px 0 0; border: 0; }
.work-channel-body { border-top: 1px solid #e8e9ec; padding-top: 24px; }
.work-channel-title { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.work-channel-title h4 { margin: 0; font-size: 24px; }
.work-channel-title span { color: #737983; font-size: 15px; }
.work-channel-description { margin: 14px 0 22px; max-width: 78ch; }
.work-channel-description a { color: #1268b3; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.work-channel-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
#workChannelNgrokForm { display: grid; gap: 14px; }
#workChannelNgrokForm label { display: grid; gap: 9px; min-width: 0; }
#workChannelNgrokForm button { justify-self: start; }
.work-channel-fields label, .work-channel-pairing label { display: grid; gap: 9px; color: #434850; font-size: 17px; font-weight: 600; min-width: 0; }
.work-channel-fields input, .work-channel-pairing input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px; border: 1px solid #d7dbe1; border-radius: 12px; background: #fff; padding: 13px 16px; color: #252628; font: inherit; font-size: 17px; font-weight: 400; }
.work-channel-fields input:disabled { background: #f4f5f7; }
.work-channel-privacy { font-size: 14px; margin: 20px 0; }
.work-channels .button { min-height: 48px; font-size: 16px; padding: 13px 24px; }
.work-channel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.work-channel-install { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; margin-bottom: 24px; border-top: 1px solid #e8e9ec; border-bottom: 1px solid #e8e9ec; }
.work-channel-install > div { min-width: 0; }
.work-channel-install b { font-size: 17px; color: #3c454c; }
.work-channel-install p { margin: 7px 0; font-size: 15px; line-height: 1.65; color: #5f6d74; overflow-wrap: anywhere; }
.work-channel-install small { color: #77828b; font-size: 13px; line-height: 1.5; }
.work-channel-install .button { flex-shrink: 0; }
.work-channel-spinner { display: inline-block; width: 16px; height: 16px; margin-right: 9px; border: 2px solid #b9d2dc; border-top-color: #386c82; border-radius: 50%; vertical-align: -2px; animation: work-channel-spin 900ms linear infinite; }
@keyframes work-channel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .work-channel-spinner { animation: none; } }
.work-channel-status, .work-channel-error, .work-channel-notice { padding: 18px 20px; border-radius: 14px; background: #f1f4f8; font-size: 16px; line-height: 1.6; margin-bottom: 22px; overflow-wrap: anywhere; }
.work-channel-status { display: flex; align-items: flex-start; gap: 14px; }
.work-channel-status-copy { min-width: 0; }
.work-channel-state-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #e1e6eb; color: #596570; }
.work-channel-state-icon svg { width: 22px; height: 22px; }
.work-channel-state-icon.is-connected { background: #247a54; color: #fff; }
.work-channel-state-icon.is-warning { background: #f7e3b7; color: #805c17; }
.work-channel-state-icon.is-pending { background: #e7eff5; }
.work-channel-state-icon .work-channel-spinner { width: 16px; height: 16px; margin: 0; box-sizing: border-box; }
.work-channel-status.is-warning { background: #fff7e7; color: #70541e; }
.work-channel-status b { font-size: 18px; }
.work-channel-status p { margin: 6px 0; }
.work-channel-status small { color: #727984; font-size: 13px; }
.work-channel-status.is-connected { background: #edf6f1; color: #236348; }
.work-channel-error { background: #fff0f0; color: #a42e34; }
.work-channel-notice { background: #fff7e7; color: #70541e; }
.work-channel-qr { text-align: center; margin: 24px 0; }
.work-channel-qr img { width: 240px; max-width: 100%; height: auto; background: white; border: 12px solid white; box-sizing: border-box; }
.work-channel-qr p { color: #676b73; font-size: 15px; }
.work-channel-pairing { border-top: 1px solid #e4e6e9; margin-top: 26px; padding-top: 20px; }
.work-channel-pairing summary { cursor: pointer; min-height: 44px; font-size: 17px; color: #515b67; }
.work-channel-pairing p { font-size: 16px; line-height: 1.6; color: #6b727b; }
.work-channel-pairing form { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
@media (max-width: 900px) { .work-channel-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .work-channel-install { align-items: stretch; flex-direction: column; gap: 16px; }
  .work-channel-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-channel-fields { grid-template-columns: 1fr; gap: 20px; }
  .work-channel-actions .button, #workChannelForm > .button { width: 100%; }
  .work-channel-pairing form > * { width: 100%; }
  .work-channel-choice { min-height: 52px; }
}
.work-channel-feishu-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
/* A disabled fieldset only disables real controls; links that open Feishu pages keep working, so they keep looking clickable. */
.work-channel-feishu-fields:disabled button.button { opacity: .55; cursor: not-allowed; }
.wecom-connect-panel { padding: 22px 24px; margin: 18px 0 22px; border-radius: 18px; background: #f1f6f4; }
.wecom-connect-steps { display: flex; list-style: none; gap: 24px; padding: 0; margin: 0 0 22px; }
.wecom-connect-steps li { display: flex; align-items: center; gap: 9px; color: #78847f; font-size: 14px; }
.wecom-connect-steps li > span { font: 600 12px ui-monospace, monospace; border-radius: 50%; display: grid; place-items: center; width: 30px; height: 30px; background: #e6ece9; }
.wecom-connect-steps .is-current, .wecom-connect-steps .is-complete { color: #25654f; }
.wecom-connect-steps .is-current > span, .wecom-connect-steps .is-complete > span { background: #dcece3; }
.wecom-connect-hint { color: #42594f; font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.wecom-consent-note { display: block; color: #6d7973; font-size: 13px; line-height: 1.7; margin-top: 16px; max-width: 74ch; }
.wecom-connect-panel .work-channel-qr { margin-top: 0; }
.wecom-connect-panel .work-channel-qr img { border-radius: 12px; }
.wecom-manual { margin-top: 26px; border-top: 1px solid #e8e9ec; padding-top: 18px; }
.wecom-manual > summary { cursor: pointer; font-size: 15px; line-height: 1.6; min-height: 40px; color: #566570; }
@media (max-width: 560px) {
  .wecom-connect-panel { padding: 18px 16px; }
  .wecom-connect-steps { gap: 10px; justify-content: space-between; }
  .wecom-connect-steps li { font-size: 12px; flex-direction: column; gap: 6px; }
  .wecom-connect-panel > .button { width: 100%; }
}

/* Compact channel navigation and a sequential WhatsApp setup. */
.work-channel-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.work-channel-choice { flex: 0 1 auto; min-height: 42px; padding: 9px 13px; font-size: 14px; border-radius: 10px; }
.whatsapp-steps { display: grid; gap: 14px; }
.whatsapp-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 20px; border: 1px solid #e4e8e6; border-radius: 16px; background: #fff; }
.whatsapp-step-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf5f0; color: #286348; font-size: 13px; font-weight: 700; }
.whatsapp-step h5 { margin: 2px 0 8px; font-size: 17px; color: #252628; }
.whatsapp-step p, .whatsapp-help p { margin: 8px 0 14px; color: #676b73; font-size: 14px; line-height: 1.65; }
.whatsapp-setup .work-channel-fields { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
.whatsapp-setup .work-channel-fields label { font-size: 14px; }
.whatsapp-setup .work-channel-fields input { min-height: 46px; font-size: 16px; }
.whatsapp-setup .button { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.whatsapp-placeholder { padding: 16px; border-radius: 10px; background: #f5f7f6; }
.whatsapp-help { margin-top: 20px; border-top: 1px solid #e4e8e6; padding-top: 16px; }
.whatsapp-help summary { cursor: pointer; font-size: 14px; color: #57656a; }
.whatsapp-preparation .work-channel-install { margin: 0 0 16px; padding: 16px 20px; border: 1px solid #e4e8e6; border-radius: 14px; background: #f5f7f6; gap: 16px; }
.whatsapp-preparation .work-channel-install p { font-size: 13px; }
.whatsapp-preparation .work-channel-install b { font-size: 15px; }
@media (max-width: 520px) {
  .whatsapp-step { padding: 16px 12px; gap: 10px; }
  .work-channel-choice { padding: 9px 11px; }
}

.whatsapp-setup .work-channel-fields textarea { width: 100%; min-height: 100px; resize: vertical; font: inherit; padding: 12px 16px; border: 1px solid #d9dce0; border-radius: 12px; background: white; }

.guided-channel-setup .channel-platform-entry { display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; box-sizing: border-box; text-decoration: none; color: #303a3b; text-align: left; white-space: normal; }
.channel-platform-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 8px; background: #edf3f1; color: #356454; }
.channel-platform-icon svg { width: 19px; height: 19px; }
.channel-external-icon { flex-shrink: 0; margin-left: auto; color: #75827e; }
.channel-external-note { display: block; margin-top: 9px; color: #737b7b; font-size: 12px; line-height: 1.6; }
.channel-preparation { border: 1px solid #e4e8e6; border-radius: 16px; background: #fff; padding: 16px 20px; }
.channel-preparation > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; color: #57656a; list-style: none; }
.channel-preparation > summary::-webkit-details-marker { display: none; }
.channel-preparation > summary::after { content: "+"; margin-left: auto; font-size: 20px; }
.channel-preparation[open] > summary::after { content: "−"; }
.channel-preparation-body { padding-left: 40px; }
.channel-preparation-body p { font-size: 14px; line-height: 1.65; color: #676b73; }
.channel-help-links { display: flex; flex-wrap: wrap; gap: 10px; }
.channel-help-links a { display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid #e1e6e3; border-radius: 10px; color: #415e52; font-size: 13px; text-decoration: none; background: #fff; }
.channel-platform-entry:hover, .channel-help-links a:hover { background: #edf3f1; }
.channel-platform-entry:focus-visible, .channel-help-links a:focus-visible, .channel-preparation > summary:focus-visible { outline: 2px solid #478d75; outline-offset: 3px; }
@media (max-width: 520px) {
  .channel-preparation { padding: 14px 12px; }
  .channel-preparation-body { padding-left: 0; }
  .guided-channel-setup .channel-platform-entry { width: 100%; padding: 10px 12px; }
}

.channel-troubleshooting .work-channel-actions { margin: 14px 0; }

.guided-channel-setup .channel-platform-entry[href="https://t.me/BotFather"],
.guided-channel-setup .channel-platform-entry[href="https://api.slack.com/apps"] { white-space: nowrap; }
.telegram-pairing { margin-top: 16px; padding-top: 16px; }
.telegram-pairing label { flex: 1 1 240px; }

.feishu-bridge-update pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border-radius: 10px; background: #f3f6f7; font-size: 12px; line-height: 1.6; user-select: all; }

.whatsapp-help-content { display: grid; gap: 20px; padding-top: 20px; }
.whatsapp-help-content h5 { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: #303b36; }
.whatsapp-help-content p { margin: 6px 0 0; }
.whatsapp-help-item .channel-help-links { margin-top: 12px; }
.whatsapp-help-disconnect { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; background: #f7f8f7; border: 1px solid #e4e8e6; border-radius: 14px; }
.whatsapp-help-disconnect > div { min-width: 0; }
.whatsapp-help-disconnect > button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) { .whatsapp-help-disconnect { align-items: flex-start; flex-direction: column; gap: 14px; padding: 16px; } }

.slack-manifest-copy { margin: 20px 0; }
.slack-manifest-copy .channel-external-note:empty { display: none; }
.slack-manifest-copy textarea { display: block; width: 100%; margin-top: 10px; font-family: monospace; resize: vertical; }
.slack-manifest-next { margin-top: 24px; }

.channel-field-help { display: block; margin-top: 10px; color: var(--muted, #6b7280); font-size: 14px; font-weight: 400; line-height: 1.65; overflow-wrap: anywhere; }
/* Feishu: the existing panels shown as collapsible steps; only the first unfinished step opens. */
.feishu-steps { margin-top: 16px; border: 1px solid #e4e8e6; border-radius: 16px; background: #fff; overflow: hidden; }
.feishu-step + .feishu-step, .feishu-steps > .work-channel-feishu-fields, .feishu-steps > .work-channel-notice { border-top: 1px solid #edf0ee; }
.feishu-steps > .work-channel-notice { margin: 0; padding: 12px 18px; }
.feishu-scan-guide { margin: 4px 0 14px; padding: 14px 16px; border-radius: 12px; background: #eef5f0; color: #24402f; }
.feishu-scan-guide b { display: block; font-size: 17px; margin-bottom: 4px; }
.feishu-scan-guide p { margin: 0; font-size: 15px; line-height: 1.6; }
.feishu-scan-hint { color: #7d776d; font-size: 13px; }
.feishu-recheck { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.feishu-recheck p { margin: 0; flex: 1 1 260px; }
.feishu-recheck .button { flex: none; min-height: 40px; }
.feishu-step > summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 12px 18px; list-style: none; cursor: pointer; color: #1d1a14; }
.feishu-step > summary::-webkit-details-marker { display: none; }
.feishu-step > summary::after { content: ""; grid-column: 4; grid-row: 1; width: 7px; height: 7px; margin: 0 4px 3px 0; border: solid #8a968f; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform .2s ease; }
.feishu-step[open] > summary::after { transform: rotate(45deg); }
.feishu-step-num { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #eef1ef; color: #4d6055; font-size: 12px; font-weight: 700; }
.feishu-step.is-current .feishu-step-num { background: #1d1a14; color: #fff; }
.feishu-step.is-done .feishu-step-num { background: #e8f6ee; color: #147a43; }
.feishu-step-title { min-width: 0; font-size: 15px; font-weight: 600; }
.feishu-step.is-done .feishu-step-title { color: #718077; font-weight: 500; }
.feishu-step.is-upcoming .feishu-step-title { color: #8a968f; font-weight: 500; }
.feishu-step-summary { min-width: 0; color: #147a43; font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.feishu-step-body { padding: 0 18px 18px 56px; }
.feishu-step-body > .work-channel-install { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 0; border: 0; }
.feishu-step-body > .work-channel-install b { display: none; }
.feishu-create-first { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #f3f6f2; color: #334f3d; font-size: 14px; line-height: 1.6; }
.feishu-step-tip { margin: 14px 0 0; color: #718077; font-size: 12px; line-height: 1.6; }
.feishu-step-body > .channel-section { padding: 0; border: 0; }
.feishu-steps-done { margin: 0; padding: 14px 18px; border-top: 1px solid #cfe9d9; background: #e8f6ee; color: #147a43; font-weight: 600; }
.feishu-step > summary:focus-visible { outline: 3px solid #aacbf0; outline-offset: -3px; }
@media (max-width: 600px) { .feishu-step-body { padding: 0 14px 16px; } .feishu-step > summary { padding: 12px 14px; } .feishu-step-summary { grid-column: 2 / 4; grid-row: 2; text-align: left; } }

.teams-six-steps { display: grid; gap: 12px; min-width: 0; }
.teams-step-title { display: grid; gap: 4px; min-width: 0; }
.teams-step-state { font-size: 12px; font-weight: 400; color: #676b73; }
.teams-step.is-complete .teams-step-state { color: #36735c; }
.teams-step.is-current { border-color: #7f9c90; }
.teams-step .channel-preparation-body > .button { margin: 6px 8px 6px 0; max-width: 100%; }
.teams-step .channel-preparation-body { overflow-wrap: anywhere; }
.teams-step .work-channel-pairing { margin: 12px 0; }
/* Channel chips: soft pills; the selected one gets the brand green outline. */
.work-channel-choice { min-height: 40px; padding: 8px 16px; border-color: #e1e8e2; border-radius: 999px; background: #f3f6f2; color: #37473d; font-size: 15px; }
.work-channel-choice:hover { background: #eaf1ec; }
.work-channel-choice[aria-pressed="true"] { border-color: #c9a35a; background: #f6ecd6; color: #1d1a14; font-weight: 600; box-shadow: none; }
.work-channel-choice:has(.work-channel-state-icon) { padding-right: 30px; }

/* Feishu steps: larger titles and status; step 2's grey panel runs to the frame edges. */
.feishu-step-title { font-size: 16px; }
.feishu-step-summary { font-size: 13px; font-weight: 500; }
.feishu-step-2 > .feishu-step-body { padding: 0; }
.feishu-step-2 > .feishu-step-body > .channel-section { padding: 16px 18px 18px 56px; }
@media (max-width: 600px) { .feishu-step-2 > .feishu-step-body > .channel-section { padding: 14px; } }

/* Disabled secondary buttons look unavailable instead of silently ignoring clicks. */
.work-channels .button.secondary:disabled { opacity: .45; cursor: not-allowed; }
.work-channels .button .work-channel-spinner { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }

/* Other chat apps reuse the Feishu step layout. */
.feishu-step-body > .work-channel-install { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 0; border: 0; }
.channel-step-1 .feishu-step-body > .work-channel-install b { display: none; }
.feishu-step-body > p:first-child { margin-top: 0; }

/* Teams keeps its six-step logic; it only takes the same look as the other steps. */
.teams-six-steps { display: block; border: 1px solid #e4e8e6; border-radius: 16px; background: #fff; overflow: hidden; }
.teams-six-steps > .teams-step { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.teams-six-steps > .teams-step + .teams-step { border-top: 1px solid #edf0ee; }
.teams-six-steps > .teams-step > summary { min-height: 52px; padding: 12px 18px; color: #1d1a14; }
.teams-step .whatsapp-step-number { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #eef1ef; color: #4d6055; font-size: 12px; font-weight: 700; }
.teams-step.is-current .whatsapp-step-number { background: #1d1a14; color: #fff; }
.teams-step.is-complete .whatsapp-step-number { background: #e8f6ee; color: transparent; position: relative; }
.teams-step.is-complete .whatsapp-step-number::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #147a43; font-size: 12px; }
.teams-step-title { flex: 1; font-size: 16px; font-weight: 600; }
.teams-step.is-complete .teams-step-title { color: #718077; font-weight: 500; }
.teams-step-state { font-size: 13px; }
.teams-six-steps > .teams-step > .channel-preparation-body { padding: 0 18px 18px 56px; }
@media (max-width: 600px) { .teams-six-steps > .teams-step > .channel-preparation-body { padding: 0 14px 16px; } .teams-six-steps > .teams-step > summary { padding: 12px 14px; } }

/* Feishu step 4: first-chat approval in Terminal. */
.feishu-pair-intro { margin: 0 0 12px; color: #4d6055; font-size: 15px; }
.feishu-pair-steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.feishu-pair-steps li { padding-left: 4px; }
.feishu-pair-steps b { display: block; margin-bottom: 8px; color: #1d1a14; font-size: 15px; }
.feishu-pair-steps p { margin: 0; color: #5f6d74; font-size: 14px; line-height: 1.65; }
.feishu-pair-steps input { width: min(280px, 100%); height: 44px; padding: 0 12px; border: 1px solid #dfe5e0; border-radius: 10px; font: inherit; letter-spacing: .08em; text-transform: uppercase; }
.feishu-pair-command { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.feishu-pair-command code { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: 10px; background: #1f2a24; color: #e8f6ee; font-size: 14px; overflow-wrap: anywhere; }

/* Plain-language install failure; the raw error stays available for support. */
.work-channel-install-error { color: #b3261e; font-weight: 600; }
.work-channel-error-detail { margin: 2px 0 6px; font-size: 13px; color: #718077; }
.work-channel-error-detail summary { cursor: pointer; }
.work-channel-error-detail code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #f5f6f5; color: #4d6055; font-size: 12px; overflow-wrap: anywhere; }
.feishu-steps > .work-channel-notice:first-child { border-top: 0; }
.work-channel-error-detail > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.work-channel-error-detail > summary::-webkit-details-marker { display: none; }
.work-channel-error-detail > summary::after { content: ""; width: 6px; height: 6px; margin-bottom: 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .2s ease; }
.work-channel-error-detail[open] > summary::after { transform: rotate(45deg); }

/* QR codes stay small enough that the whole scan step fits on one screen. */
.work-channel-qr img, .feishu-permissions .work-channel-qr img { width: 176px; border-width: 8px; }
.wecom-connect-panel .work-channel-qr { display: grid; grid-template-columns: 176px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: center; margin: 4px 0 8px; text-align: left; }
.wecom-connect-panel .work-channel-qr img { grid-row: 1 / span 2; align-self: center; }
.wecom-connect-panel .work-channel-qr p { grid-column: 2; align-self: end; margin: 0; font-size: 14px; }
.wecom-connect-panel .work-channel-qr small { grid-column: 2; align-self: start; }
@media (max-width: 600px) { .wecom-connect-panel .work-channel-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } .wecom-connect-panel .work-channel-qr img, .wecom-connect-panel .work-channel-qr p, .wecom-connect-panel .work-channel-qr small { grid-row: auto; grid-column: 1; } }

/* Authorize-in-Feishu step: the QR sits beside what to do next, so the whole step fits on one screen.
   This QR carries the whole permission list (about 1,700 characters, 141 x 141 modules), so it cannot shrink like the
   other QR codes: at 176px a module is about 1 CSS pixel and phones cannot read it. 360px gives about 2.3. */
.feishu-permissions .feishu-qr img { width: 360px; max-width: 100%; }
.feishu-permissions .feishu-qr { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 12px 20px; align-items: center; margin: 14px 0 8px; text-align: left; }
.feishu-permissions .feishu-permissions-note { margin-top: -4px; color: #676b73; font-size: 13.5px; line-height: 1.65; }
.feishu-qr-side { display: grid; gap: 8px; min-width: 0; }
.feishu-qr-side p, .feishu-qr-side small { margin: 0; }
.feishu-qr-wait { display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.feishu-qr-side small { color: #676b73; font-size: 12.5px; line-height: 1.6; }
.feishu-qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.feishu-qr-side .feishu-qr-actions { margin-top: 6px; }
.feishu-permission-result { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid #e3e8e5; border-radius: 12px; background: #f6f8f7; }
.feishu-permission-result b { display: block; font-size: 15px; }
.feishu-permission-result p { margin: 6px 0 0; color: #55605a; font-size: 13.5px; line-height: 1.65; }
.feishu-permission-result.is-verified { border-color: #cfe3d6; background: #edf6f1; color: #236348; }
.feishu-permission-result.is-verified p { color: #3f6a56; }
.feishu-permission-error { margin: 10px 0 0; color: #97392f; }
@media (max-width: 600px) { .feishu-permissions .feishu-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } .feishu-qr-wait, .feishu-qr-actions { justify-content: center; } }

/* Step 4: already-paired bots can be marked done without repeating the Terminal approval. */
.feishu-paired { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #e3e8e5; border-radius: 12px; background: #f6f8f7; }
.feishu-paired p { flex: 1 1 220px; margin: 0; color: #55605a; font-size: 13.5px; line-height: 1.6; }
.feishu-paired.is-done { border-color: #cfe3d6; background: #edf6f1; }
.feishu-paired.is-done p { color: #3f6a56; }
.feishu-steps > .work-channel-feishu-fields + .feishu-step, .feishu-steps > .feishu-step + .work-channel-feishu-fields { border-top: 1px solid #edf0ee; }
.feishu-personal-intro { margin: 0 0 12px; color: #55605a; font-size: 13.5px; line-height: 1.65; }
.feishu-permissions .feishu-personal-qr { grid-template-columns: 200px minmax(0, 1fr); }
.feishu-personal .feishu-personal-qr img { width: 200px; }

/* One main action per step: creating the Feishu bot is a real button, not an inline link. */
.feishu-create-first { display: grid; gap: 10px; justify-items: start; }
.feishu-create-first p { margin: 0; }
.feishu-create-first .feishu-create-link { justify-self: start; color: #263e33; text-decoration: none; }
/* Disconnecting is rare: a small secondary button inside "更新连接信息". */
.channel-update .channel-disconnect { margin-top: 12px; min-height: 36px; padding: 6px 14px; font-size: 14px; color: #a1362c; }
.channel-section > .channel-intro { margin: 0 0 12px; color: #4d6055; font-size: 14px; }
.work-channel-actions .work-channel-check { min-height: 36px; padding: 6px 4px; border: 0; background: none; color: #4d6055; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* A company with some work apps or connectors switched off (PAdmin) gets a way to ask for more. */
.visible-items-more { margin: 10px 0 0; color: #8a7f6b; font-size: 13px; }
.visible-items-more a { margin-left: 4px; color: #9a6a12; font-weight: 600; }