#integrationsPage{overflow-y:auto}
.integrations-shell{max-width:1180px;margin:0 auto;padding:30px 28px 60px}
.integrations-head{margin-bottom:22px}
.integrations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.integration-card{background:#fff;border:1px solid #dfe6ec;border-radius:14px;padding:22px;box-shadow:0 4px 16px rgba(16,45,66,.04)}
.integration-card-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.integration-icon{width:42px;height:42px;border-radius:10px;background:#f3f6f8;display:grid;place-items:center;font-size:20px;font-weight:900}
.integration-category{font-size:11px;font-weight:900;letter-spacing:.09em;color:#f17a20}
.integration-card h3{margin:3px 0 0;font-size:20px}
.integration-card p{color:#647987;line-height:1.55;margin:16px 0}
.integration-status{font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px;background:#eef2f4;color:#607480}
.integration-status[data-state="connected"]{background:#e9f6ec;color:#247b3b}
.integration-connected-email{font-weight:800;background:#f6f9fa;border-radius:8px;padding:10px 12px;margin-bottom:14px}
.integration-actions{display:flex;gap:10px;flex-wrap:wrap}
.integration-card-future{border-style:dashed;background:#fafbfc}
@media(max-width:760px){.integrations-grid{grid-template-columns:1fr}.integrations-shell{padding:20px 16px 50px}}

/* Integrations is a catalog; configuration belongs to the selected detail view. */
#companyConnectionsPanel{display:block}.integration-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.integration-overview-card{display:flex;flex-direction:column;align-items:flex-start;min-height:230px;padding:24px}.integration-overview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:18px}.integration-overview-card h3{font-size:18px;margin:0}.integration-overview-card p{font-size:14px;line-height:1.6;flex:1;margin:12px 0 20px}.integration-overview-card>button{width:auto!important;min-height:42px}.integration-overview-card .integration-status{border-radius:6px;white-space:nowrap;font-weight:600}.integration-overview-card .integration-icon{font-size:18px;color:#9b213b;background:#f7eef1}.integration-refresh{margin-top:24px}.integration-back{margin-bottom:20px}.integration-detail{background:#fff;padding:28px;border:1px solid #dfe6ec;border-radius:14px;max-width:920px}.integration-detail h2,.integration-detail h3{margin:0 0 16px}.integration-detail p{color:#647987;line-height:1.6}.integration-detail label{display:block;margin:18px 0 8px}.integration-detail input:not([type=checkbox]),.integration-detail select{display:block;width:100%;max-width:560px;min-height:44px;padding:10px 12px;margin-top:8px;font:inherit;border:1px solid #bac6cf;border-radius:8px}.integration-detail form{margin:20px 0}.integration-detail table{width:100%;table-layout:fixed;border-collapse:collapse}.integration-detail th,.integration-detail td{text-align:left;padding:10px 8px;border-bottom:1px solid #e2e8ee;overflow-wrap:anywhere}.integration-detail details{margin:18px 0}.integration-detail section{margin-top:28px}.integration-detail button{min-height:42px}.integration-detail [role=status]{margin-top:12px}
@media(max-width:1050px){.integration-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.integration-catalog{grid-template-columns:1fr;gap:14px}.integration-overview-card{min-height:0;padding:20px}.integration-detail{padding:20px 16px}.integration-detail table{font-size:12px}.integration-detail th,.integration-detail td{padding:8px 4px}}


/* Keep the catalog out of the legacy two-column settings layout. */
#integrationsPage .integrations-shell{position:relative;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box}
#integrationsPage #companyConnectionsPanel{display:block!important;width:100%!important;min-width:0;box-sizing:border-box}
#integrationsPage .integrations-head{padding:24px 180px 20px 28px!important}
#integrationsPage .integration-catalog{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:20px}
#integrationsPage .integration-overview-card{min-width:0;min-height:240px;box-sizing:border-box;padding:24px}
#integrationsPage .integration-overview-card h3{line-height:1.35}
#integrationsPage .integration-overview-card p{max-width:48ch}
#integrationsPage .integration-icon{flex:0 0 42px}
#integrationsPage .integration-refresh{position:absolute;right:28px;top:28px;width:auto!important;margin:0;min-height:40px;padding:8px 14px}
@media(max-width:1050px){#integrationsPage .integration-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#integrationsPage .integrations-shell{padding:0!important}#integrationsPage .integrations-head{padding:20px 150px 20px 16px!important}#integrationsPage .integration-refresh{right:16px;top:24px;font-size:12px;padding:8px 10px}#integrationsPage .integration-catalog{grid-template-columns:minmax(0,1fr);gap:14px}#integrationsPage .integration-overview-card{min-height:220px;padding:20px}}

/* Shared detail rhythm: navigation, status, actions and settings occupy separate rows. */
#integrationsPage #companyConnectionsPanel:has(>.integration-detail){display:flex!important;flex-direction:column;align-items:flex-start;gap:20px}
#integrationsPage #companyConnectionsPanel>.integration-back{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;align-self:flex-start;width:auto!important;max-width:100%;margin:0!important;min-height:42px;box-sizing:border-box}
#integrationsPage .integration-detail{display:flex;flex-direction:column;align-items:stretch;gap:20px;width:100%;max-width:920px;min-width:0;box-sizing:border-box;padding:28px}
#integrationsPage .integration-detail>h2,#integrationsPage .integration-detail>h3,#integrationsPage .integration-detail>h4,#integrationsPage .integration-detail>p,#integrationsPage .integration-detail>form,#integrationsPage .integration-detail>details,#integrationsPage .integration-detail>section{margin:0!important}
#integrationsPage .integration-detail h2,#integrationsPage .integration-detail h3{font-size:24px;line-height:1.3}
#integrationsPage .integration-detail p{line-height:1.6;overflow-wrap:anywhere}
#integrationsPage .integration-detail>strong{display:block;align-self:flex-start;font-size:13px;line-height:1.5;padding:6px 10px;background:#f1f5f9;color:#475569;border-radius:6px}
#integrationsPage .integration-detail>strong[data-state=connected]{background:#eaf7ef;color:#197044}
#integrationsPage .integration-detail button{position:static!important;display:inline-flex;align-items:center;justify-content:center;width:auto!important;max-width:100%;min-height:42px;margin:0!important;padding:10px 16px;box-sizing:border-box;white-space:normal;line-height:1.35}
#integrationsPage .integration-detail>button{align-self:flex-start}
#integrationsPage .integration-detail form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:640px}
#integrationsPage .integration-detail form>button{justify-self:start}
#integrationsPage .integration-detail label{display:grid;gap:8px;margin:0!important;min-width:0;font-size:14px;line-height:1.5;font-weight:600}
#integrationsPage .integration-detail input:not([type=checkbox]),#integrationsPage .integration-detail select{width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin:0!important;min-height:44px}
#integrationsPage .integration-detail label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px}
#integrationsPage .integration-detail input[type=checkbox]{width:18px;height:18px;min-height:0;margin:0;flex-shrink:0}
#integrationsPage .integration-detail details{border-top:1px solid #e2e8f0;padding-top:20px}
#integrationsPage .integration-detail summary{cursor:pointer;font-weight:600;line-height:1.5;padding:4px 0}
#integrationsPage .integration-detail details[open]>summary{margin-bottom:20px}
#integrationsPage .integration-detail details>p{margin:16px 0}
#integrationsPage .integration-detail details>form{margin:20px 0 0}
#integrationsPage .integration-detail section{display:grid;gap:16px;border-top:1px solid #e2e8f0;padding-top:20px;overflow-x:auto}
#integrationsPage .integration-detail section>h4,#integrationsPage .integration-detail section>p{margin:0}
#integrationsPage .integration-detail section>button{justify-self:start}
#integrationsPage .integration-detail table{min-width:600px;font-size:13px}
#integrationsPage .integration-detail td button{display:flex;margin:8px 0 0!important;min-height:36px;padding:6px 10px;font-size:12px}
#integrationsPage .integration-detail [role=status]:empty{display:none}
@media(max-width:640px){#integrationsPage .integration-detail{padding:20px 16px;gap:18px}#integrationsPage .integration-detail h2,#integrationsPage .integration-detail h3{font-size:22px}#integrationsPage .integration-detail form{gap:18px}}
/* Mailbox setup uses the same action rows in company settings and My profile. */
.mailbox-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mailbox-section{padding:20px 0;border-top:1px solid #e2e8f0;display:grid;gap:16px;min-width:0}
.mailbox-section h4,.mailbox-section p{margin:0;line-height:1.5;overflow-wrap:anywhere}
.mailbox-threads{display:grid;gap:16px;min-width:0}
.mailbox-threads p{white-space:pre-wrap;overflow-wrap:anywhere}
.mailbox-threads summary{cursor:pointer;overflow-wrap:anywhere}
.field-mailbox-setup{display:grid;gap:18px;margin-top:24px;padding:20px;border:1px solid #dfe6ec;border-radius:12px;max-width:100%;box-sizing:border-box}
.field-mailbox-setup button{width:auto!important;min-height:42px;padding:10px 14px;margin:0!important}
.field-mailbox-setup>h4,.field-mailbox-setup>p{margin:0}
#integrationsPage .integration-detail .mailbox-actions>button{align-self:start}

.sq-chat-controls{display:flex;flex-wrap:wrap;gap:12px}.sq-chat-controls>p,.sq-chat-controls>details{flex-basis:100%}.sq-chat-conversations{margin-top:28px}.sq-chat-conversations article{padding:20px 0;border-bottom:1px solid #ddd}.sq-chat-conversations dl{display:grid;grid-template-columns:minmax(90px,180px) minmax(0,1fr);gap:8px}.sq-chat-conversations dd{margin:0;overflow-wrap:anywhere}.sq-chat-conversations textarea{width:100%;box-sizing:border-box}.sq-chat-conversations h1{font-size:24px}