/* ClokIt USA Communications / Phase 1 — Desktop workspace.
   Scoped to the existing Team page. Mobile screens retain their approved UI.
   Message delivery continues to use existing authenticated Supabase tables. */
@media screen and (min-width:901px) {
  .v221-page:has(.team-layout) .v221-main{min-width:0;padding-top:24px}
  .v221-page:has(.team-layout) .v221-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:15px}
  .v221-page:has(.team-layout) .v221-head h1{font-size:clamp(27px,2.1vw,36px);letter-spacing:-.045em;color:#0c2c45;margin:4px 0 2px}
  .v221-page:has(.team-layout) .v221-head p{max-width:640px;font-size:13px;color:#678398;line-height:1.45}
  .clokit-comms-eyebrow{display:flex;align-items:center;gap:7px;font-weight:900;letter-spacing:.14em;font-size:10px;color:#148cbd;text-transform:uppercase}
  .clokit-comms-eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:#21c4a5;box-shadow:0 0 0 4px #e2f9f3}
  .clokit-comms-top-actions,.clokit-comms-chat-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .clokit-comms-action{min-height:39px;padding:9px 13px;border-radius:10px;border:1px solid #d5e6f0;background:#fff;color:#17425e;font-size:12px;font-weight:800;line-height:1.15;cursor:pointer;box-shadow:0 3px 10px rgba(10,51,78,.035);white-space:nowrap}
  .clokit-comms-action:hover{border-color:#91c5e6;background:#f0f9ff;color:#087ab9}
  .clokit-comms-action.primary{color:#fff;background:linear-gradient(120deg,#0b77bd,#138fdb);border-color:#0b78bd;box-shadow:0 5px 15px rgba(13,113,179,.18)}
  .clokit-comms-action.primary:hover{background:#0769a7}
  .clokit-comms-action:focus-visible,.team-contact:focus-visible,.clokit-comms-search input:focus-visible{outline:2px solid #159ade;outline-offset:2px}
  .v221-page:has(.team-layout) .team-layout{grid-template-columns:minmax(288px,315px) minmax(0,1fr);gap:12px;height:clamp(550px,calc(100dvh - 250px),820px);min-height:550px}
  .v221-page:has(.team-layout) .team-sidebar,.v221-page:has(.team-layout) .team-chat{min-height:0;min-width:0;border-color:#d9e7f1;border-radius:17px;box-shadow:0 10px 35px rgba(17,57,89,.055)}
  .v221-page:has(.team-layout) .team-sidebar{display:flex;flex-direction:column;background:#f9fcff}
  .v221-page:has(.team-layout) .team-sidebar-head{flex:0 0 auto;padding:17px 17px 14px;background:linear-gradient(160deg,#12314a,#174863);color:#fff;border-bottom:1px solid #30617c}
  .v221-page:has(.team-layout) .team-sidebar-head>b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#c2e5fa}
  .v221-page:has(.team-layout) .team-code{margin-top:10px;border-color:rgba(161,213,245,.32);background:rgba(255,255,255,.12);color:#fff}
  .v221-page:has(.team-layout) .team-code b{font-size:23px;letter-spacing:.11em;color:#fff}
  .v221-page:has(.team-layout) .team-code .btn{background:#f4fbff!important;color:#143b57!important;border:0!important;min-height:36px;border-radius:9px}
  .v221-page:has(.team-layout) .team-add input{background:#fff;border-color:#b6d0e2;min-width:0}
  .v221-page:has(.team-layout) .team-add button{background:#1395d3;color:#fff;border-radius:10px;min-height:42px}
  .clokit-comms-private-hint{font-size:11px;line-height:1.35;margin:9px 0 0;color:#bfdae9}
  .clokit-comms-search{flex:0 0 auto;background:#fff;padding:13px 13px 9px;border-bottom:1px solid #e5edf3}
  .clokit-comms-search label{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:900;color:#6c889f;margin-bottom:7px}
  .clokit-comms-search input{height:39px!important;min-height:39px!important;border:1px solid #d8e7ef!important;border-radius:10px!important;background:#f7fbff!important;padding:0 12px!important;width:100%;font-size:13px!important}
  .v221-page:has(.team-layout) .team-list{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 6px 13px}
  .clokit-comms-list-label{flex:0 0 auto;padding:10px 17px 7px;font-size:10px;font-weight:950;letter-spacing:.11em;color:#607f98;background:#f9fcff}
  .v221-page:has(.team-layout) .team-contact{display:flex;align-items:center;gap:11px;min-width:0;min-height:64px;padding:9px 12px;margin:3px 0;border-radius:12px;border:1px solid transparent;text-align:left}
  .v221-page:has(.team-layout) .team-contact:hover{background:#eff7fc;border-color:#d9e9f3}
  .v221-page:has(.team-layout) .team-contact.active{background:#e7f4fc;border-color:#cee6f6;box-shadow:inset 3px 0 0 #1194df}
  .v221-page:has(.team-layout) .team-contact > div:nth-child(2){min-width:0;flex:1}
  .v221-page:has(.team-layout) .team-contact b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:#17374e;font-size:13px}
  .v221-page:has(.team-layout) .team-contact span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v221-page:has(.team-layout) .team-avatar{flex:0 0 auto;background:linear-gradient(150deg,#13435e,#116e9b)}
  .v221-page:has(.team-layout) .team-chat{display:flex;flex-direction:column;background:#fff}
  .v221-page:has(.team-layout) .team-chat-head{min-height:78px;padding:15px 18px;gap:12px;align-items:center;background:linear-gradient(115deg,#fff,#f6fbff);border-bottom:1px solid #e1edf5}
  .v221-page:has(.team-layout) .team-chat-head b{font-size:16px;letter-spacing:-.015em;color:#102e44}
  .v221-page:has(.team-layout) .team-chat-head small{margin-top:4px!important}
  .clokit-comms-chat-actions{margin-left:auto;flex-wrap:nowrap}
  .clokit-comms-chat-actions .clokit-comms-action{min-height:35px;font-size:11px;padding:7px 10px}
  .v221-page:has(.team-layout) .team-messages{background:linear-gradient(175deg,#f9fcff,#f0f7fc);padding:22px 25px;gap:11px}
  .v221-page:has(.team-layout) .team-msg{max-width:min(74%,570px);padding:12px 15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;border:1px solid #dce9f2;border-radius:16px 16px 16px 5px;box-shadow:0 2px 8px rgba(17,60,90,.025)}
  .v221-page:has(.team-layout) .team-msg.mine{background:#dceffd;border-color:#bedef3;border-radius:16px 16px 5px 16px}
  .v221-page:has(.team-layout) .team-msg small{font-size:10px;margin-top:6px}
  .v221-page:has(.team-layout) .team-compose{align-items:flex-end;gap:11px;padding:13px 16px;background:#fff;border-top:1px solid #dcebf4}
  .v221-page:has(.team-layout) .team-compose textarea{min-height:52px;max-height:110px;line-height:1.4;font-size:13px;padding:12px 13px;border-radius:12px;background:#f9fcff;border:1px solid #d5e5f0}
  .v221-page:has(.team-layout) .team-compose .btn.primary{height:46px;border-radius:11px;background:#118ad4;font-weight:900}
  .v221-page:has(.team-layout) .team-empty{color:#6a8499}
  .clokit-comms-empty{max-width:310px;display:flex;flex-direction:column;align-items:center;gap:10px}
  .clokit-comms-empty-icon{font-size:22px;color:#0c7db4;background:#e8f5fd;width:58px;height:58px;border-radius:16px;display:grid;place-items:center}
  .clokit-comms-empty h3{margin:0;color:#183d56;font-size:18px}
  .clokit-comms-empty p{margin:0;color:#6c879b;font-size:12px;line-height:1.5}
  .v221-page:has(.team-layout) .clokit-orgchat-entry{flex:0 0 auto;margin:5px 7px 2px;width:calc(100% - 14px);border:1px solid #dfeaf1;min-height:63px;background:#fff}
  .v221-page:has(.team-layout) .clokit-orgchat-entry.active,.v221-page:has(.team-layout) .clokit-orgchat-entry:hover{background:#e8f5ff;border-color:#cde4f4}
  .v221-page:has(.team-layout) .clokit-orgchat-inline-head{background:linear-gradient(120deg,#fff,#f4faff)}
}
@media screen and (min-width:901px) and (max-width:1190px){
  .v221-page:has(.team-layout) .v221-head{align-items:flex-start;flex-direction:column}
  .v221-page:has(.team-layout) .team-layout{grid-template-columns:270px minmax(0,1fr)}
  .clokit-comms-action{font-size:11px;padding:8px 10px}
}
.clokit-comms-dialog[hidden]{display:none!important}
.clokit-comms-dialog{position:fixed;inset:0;z-index:300000;display:grid;place-items:center;background:rgba(8,28,46,.62);padding:16px;backdrop-filter:blur(5px)}
.clokit-comms-dialog-panel{background:#fff;color:#13334b;max-width:490px;width:min(100%,490px);border-radius:19px;padding:23px;box-shadow:0 20px 65px rgba(6,28,46,.26);border:1px solid #d6e9f5}
.clokit-comms-dialog-panel h2{margin:0 0 5px;color:#12334d;font-size:22px}
.clokit-comms-dialog-panel p{color:#607e95;font-size:13px;line-height:1.5}
.clokit-comms-dialog-panel label{display:block;margin:13px 0 4px;font-size:12px;font-weight:850}
.clokit-comms-dialog-panel input,.clokit-comms-dialog-panel select{width:100%;padding:11px;border:1px solid #cedfec;border-radius:9px;font:inherit;font-size:14px;min-height:42px;box-sizing:border-box;background:#f8fbff}
.clokit-comms-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.clokit-comms-dialog-actions button{border-radius:10px;border:1px solid #cbdfea;background:#f3faff;padding:10px 13px;font-size:13px;font-weight:850;cursor:pointer}
.clokit-comms-dialog-actions button.primary{background:#1189cd;color:white;border-color:#1189cd}
@media(prefers-reduced-motion:reduce){.clokit-comms-action{transition:none!important}}

/* CLOKIT COMMUNICATIONS — Fixed-height desktop messenger v2.
   Only the authenticated Team page, no dashboard, published reports or mobile changes.
   No document scroll: conversation list/messages scroll independently.
   Avoid fixed pixel page heights; respect the actual topbar and browser viewport. */
@media screen and (min-width:901px) {
 html:has(body .v221-page .team-layout),
 body:has(.v221-page .team-layout) {
   width:100%!important;height:100dvh!important;
   overflow:hidden!important;overscroll-behavior:none!important;
 }
 body .page:has(.v221-page .team-layout) {
   width:100%!important;max-width:none!important;
   height:calc(100dvh - var(--clokit-comms-header-height,82px))!important;
   min-height:0!important;
   padding:4px 8px 5px!important;
   margin:0 auto!important;
   overflow:hidden!important;
   display:block!important;
 }
 body .v221-page:has(.team-layout) {
   display:grid!important;
   grid-template-columns:210px minmax(0,1fr)!important;
   height:100%!important;max-height:100%!important;
   min-height:0!important;max-width:100%!important;
   margin:0!important;overflow:hidden!important;
   border-radius:15px!important;
   border:1px solid #d7e7f1!important;
   background:#f5f9fd!important;
   box-shadow:0 4px 18px rgba(17,54,83,.04)!important;
 }
 body .v221-page:has(.team-layout) > .v221-side {
   display:flex!important;flex-direction:column!important;
   padding:18px 12px!important;min-height:0!important;
   overflow:auto!important;background:#edf6fc!important;
 }
 body .v221-page:has(.team-layout) > .v221-main {
   display:flex!important;flex-direction:column!important;
   width:100%!important;min-width:0!important;min-height:0!important;
   height:100%!important;max-height:100%!important;
   padding:9px 12px 10px!important;
   gap:9px!important;overflow:hidden!important;
 }
 body .v221-page:has(.team-layout) .v221-head {
   display:flex!important;align-items:center!important;
   justify-content:space-between!important;
   gap:12px!important;min-height:47px!important;max-height:64px!important;
   flex:0 0 auto!important;margin:0!important;padding:0 4px!important;
 }
 body .v221-page:has(.team-layout) .v221-head > div:first-child{
   min-width:0!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-eyebrow {
   font-size:9px!important;line-height:1.2!important;
   margin-bottom:3px!important;
 }
 body .v221-page:has(.team-layout) .v221-head h1 {
   font-size:24px!important;line-height:1.07!important;
   letter-spacing:-.045em!important;margin:0!important;
 }
 body .v221-page:has(.team-layout) .v221-head p {
   font-size:11px!important;line-height:1.2!important;
   margin:4px 0 0!important;white-space:nowrap!important;
   overflow:hidden!important;text-overflow:ellipsis!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-top-actions{
   display:flex!important;gap:6px!important;
   flex-wrap:nowrap!important;flex:0 0 auto!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-top-actions .clokit-comms-action {
   min-height:35px!important;padding:7px 11px!important;
   border-radius:9px!important;font-size:11px!important;
 }
 body .v221-page:has(.team-layout) .team-layout {
   display:grid!important;grid-template-columns:minmax(256px,292px) minmax(0,1fr)!important;
   grid-template-rows:minmax(0,1fr)!important;
   flex:1 1 0!important;min-height:0!important;
   max-height:none!important;height:auto!important;
   gap:0!important;overflow:hidden!important;
   border:1px solid #d5e5ef!important;
   border-radius:15px!important;background:#fff!important;
   box-shadow:0 6px 18px rgba(18,63,96,.055)!important;
 }
 body .v221-page:has(.team-layout) .team-sidebar {
   display:flex!important;flex-direction:column!important;
   min-width:0!important;min-height:0!important;max-height:none!important;
   height:100%!important;overflow:hidden!important;
   border:0!important;border-right:1px solid #d7e5ee!important;
   border-radius:0!important;box-shadow:none!important;
   background:#fbfdff!important;
 }
 body .v221-page:has(.team-layout) .team-sidebar-head {
   position:relative!important;
   flex:0 0 auto!important;min-height:0!important;
   display:grid!important;grid-template-columns:1fr auto!important;
   gap:8px 6px!important;align-items:center!important;
   padding:11px 12px!important;
   border-bottom:1px solid #2b5c77!important;
   background:linear-gradient(145deg,#0e2d45,#155678)!important;
 }
 body .v221-page:has(.team-layout) .team-sidebar-head > b {
   font-size:15px!important;letter-spacing:-.02em!important;
   font-weight:850!important;color:white!important;
   text-transform:none!important;line-height:1.2!important;
 }
 body .v221-page:has(.team-layout) .team-code {
   margin:0!important;min-width:0!important;
   display:flex!important;gap:5px!important;
   border:1px solid #386885!important;
   border-radius:9px!important;padding:4px!important;
   background:rgba(255,255,255,.09)!important;
 }
 body .v221-page:has(.team-layout) .team-code > b {
   font-size:12px!important;letter-spacing:.035em!important;
   white-space:nowrap!important;padding-left:3px!important;
 }
 body .v221-page:has(.team-layout) .team-code > button {
   min-height:26px!important;height:26px!important;
   padding:2px 7px!important;border-radius:7px!important;
   font-size:10px!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-private-hint {
   display:none!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-add-contact{
   grid-column:1 / -1!important;
   min-height:0!important;color:#fff!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-add-contact summary{
   display:flex!important;align-items:center!important;
   justify-content:center!important;cursor:pointer!important;
   min-height:30px!important;padding:5px 8px!important;
   background:rgba(255,255,255,.12)!important;
   border:1px solid rgba(173,216,246,.32)!important;
   border-radius:8px!important;list-style:none!important;
   font-size:11px!important;font-weight:800!important;color:#e5f5ff!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-add-contact summary::-webkit-details-marker{display:none!important}
 body .v221-page:has(.team-layout) .clokit-comms-add-contact[open] summary{margin-bottom:9px!important;background:#245e81!important}
 body .v221-page:has(.team-layout) .clokit-comms-add-contact .team-add{
   display:flex!important;gap:6px!important;margin:0!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-add-contact .team-add input {
   min-height:35px!important;height:35px!important;
   padding:5px 8px!important;font-size:12px!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-add-contact .team-add button{
   min-height:35px!important;height:35px!important;
   padding:6px 10px!important;font-size:11px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-entry {
   min-height:52px!important;height:52px!important;
   margin:4px 8px!important;width:calc(100% - 16px)!important;
   padding:5px 9px!important;flex:0 0 auto!important;
   border-radius:10px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-icon{
   width:33px!important;height:33px!important;flex:0 0 33px!important;
   border-radius:10px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-entry b{font-size:12px!important}
 body .v221-page:has(.team-layout) .clokit-orgchat-sub{font-size:10px!important}
 body .v221-page:has(.team-layout) .clokit-comms-search {
   padding:8px 11px 7px!important;flex:0 0 auto!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-search label{display:none!important}
 body .v221-page:has(.team-layout) .clokit-comms-search input{
   height:35px!important;min-height:35px!important;
   font-size:12px!important;border-radius:9px!important;
 }
 body .v221-page:has(.team-layout) .clokit-comms-list-label{
   padding:8px 13px 6px!important;font-size:9px!important;
   flex:0 0 auto!important;min-height:0!important;
 }
 body .v221-page:has(.team-layout) .team-list{
   flex:1 1 0!important;min-height:0!important;
   max-height:none!important;overflow-y:auto!important;
   overscroll-behavior:contain!important;padding:2px 6px 9px!important;
 }
 body .v221-page:has(.team-layout) .team-contact{
   min-height:55px!important;padding:6px 8px!important;
   border-radius:10px!important;
 }
 body .v221-page:has(.team-layout) .team-contact .team-avatar{
   width:34px!important;height:34px!important;
 }
 body .v221-page:has(.team-layout) .team-chat{
   display:flex!important;flex-direction:column!important;
   min-height:0!important;height:100%!important;
   max-height:100%!important;overflow:hidden!important;
   border:0!important;border-radius:0!important;box-shadow:none!important;
 }
 body .v221-page:has(.team-layout) .team-chat-head {
   flex:0 0 auto!important;min-height:56px!important;
   padding:9px 14px!important;
 }
 body .v221-page:has(.team-layout) .team-chat-head b{font-size:14px!important}
 body .v221-page:has(.team-layout) .team-chat-head small{font-size:10px!important}
 body .v221-page:has(.team-layout) .clokit-comms-chat-actions .clokit-comms-action{
   min-height:32px!important;padding:6px 9px!important;font-size:10px!important;
 }
 body .v221-page:has(.team-layout) .team-messages {
   flex:1 1 0!important;
   min-height:0!important;
   height:auto!important;max-height:none!important;
   overflow-y:auto!important;
   overscroll-behavior:contain!important;
   padding:16px 21px!important;
   scrollbar-width:thin!important;
 }
 body .v221-page:has(.team-layout) .team-empty{
   min-height:0!important;
 }
 body .v221-page:has(.team-layout) .team-compose{
   flex:0 0 auto!important;min-height:65px!important;
   padding:9px 12px!important;gap:9px!important;
   align-items:center!important;
   background:#fff!important;
 }
 body .v221-page:has(.team-layout) .team-compose textarea{
   min-height:42px!important;height:44px!important;
   max-height:94px!important;overflow-y:auto!important;
   padding:10px 12px!important;resize:none!important;
   font-size:13px!important;
 }
 body .v221-page:has(.team-layout) .team-compose .btn.primary {
   min-height:42px!important;height:42px!important;
   padding:0 16px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-inline{
   flex:1 1 0!important;min-height:0!important;
   height:100%!important;max-height:100%!important;
   overflow:hidden!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-inline-head{
   flex:0 0 auto!important;padding:13px 17px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-inline-msgs{
   min-height:0!important;max-height:none!important;
   flex:1 1 0!important;overflow-y:auto!important;
   overscroll-behavior:contain!important;padding:14px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-compose{
   flex:0 0 auto!important;padding:9px 12px!important;
 }
 body .v221-page:has(.team-layout) .clokit-orgchat-compose textarea {
   min-height:41px!important;max-height:95px!important;
 }
}
/* Compact laptop widths: retain three panes without a horizontal scrollbar. */
@media screen and (min-width:901px) and (max-width:1210px) {
 body .v221-page:has(.team-layout){grid-template-columns:175px minmax(0,1fr)!important;}
 body .v221-page:has(.team-layout) > .v221-side{padding:14px 7px!important;}
 body .v221-page:has(.team-layout) .team-layout{
   grid-template-columns:minmax(224px,260px) minmax(0,1fr)!important;
 }
 body .v221-page:has(.team-layout) .v221-head p{display:none!important;}
}
/* Short-height desktop screens keep controls usable without document scroll. */
@media screen and (min-width:901px) and (max-height:660px){
 body .v221-page:has(.team-layout) .v221-head{
   max-height:45px!important;min-height:42px!important;
 }
 body .v221-page:has(.team-layout) .team-sidebar-head{padding:8px 10px!important;gap:5px!important}
 body .v221-page:has(.team-layout) .clokit-orgchat-entry{height:45px!important;min-height:45px!important}
 body .v221-page:has(.team-layout) .clokit-comms-search{padding:6px 9px!important}
 body .v221-page:has(.team-layout) .clokit-comms-list-label{padding:5px 11px!important}
}