.imsg{
  position:fixed;z-index:820;right:18px;bottom:18px;left:auto;top:auto;
  width:304px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  transform:scale(.6);transform-origin:100% 100%;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,visibility 0s linear .26s;
}
.imsg.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s ease,visibility 0s}
.imsg-b{
  max-width:100%;background:#0b93f6;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.32;letter-spacing:-.011em;
  padding:9px 14px 10px;border-radius:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  /* the pop: iOS scales a new bubble up from its own bottom-left */
  transform:scale(.82);transform-origin:0 100%;opacity:0;
  transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .2s ease;
}
.imsg-b.in{transform:none;opacity:1}
.imsg-b.tail{border-bottom-left-radius:5px}
/* what you send back reads as the other side of the thread */
.imsg-b.mine{background:#3b3b3d;align-self:flex-end;transform-origin:100% 100%}
.imsg-b.mine.tail{border-bottom-left-radius:18px;border-bottom-right-radius:5px}
.imsg-b.bad{background:#e0304a}
/* a link inside a bubble: an address, or a headline worth reading */
.imsg-b a{color:#fff;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;overflow-wrap:anywhere}
.imsg-b a:hover{color:#fff;opacity:.86}
.imsg-b .imsg-src{display:block;opacity:.72;font-size:.8em;margin-top:3px;letter-spacing:.02em}
/* the three dots, while the next one is "being typed" */
.imsg-typing{
  display:flex;gap:4px;align-items:center;background:#3b3b3d;
  padding:11px 13px;border-radius:18px;border-bottom-left-radius:5px;
  transform:scale(.82);transform-origin:0 100%;opacity:0;
  transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .2s ease;
}
.imsg-typing.in{transform:none;opacity:1}
.imsg-typing i{width:7px;height:7px;border-radius:50%;background:#9a9a9e;animation:imsgdot 1.25s infinite}
.imsg-typing i:nth-child(2){animation-delay:.18s}
.imsg-typing i:nth-child(3){animation-delay:.36s}
@keyframes imsgdot{0%,60%,100%{opacity:.38;transform:translateY(0)}30%{opacity:1;transform:translateY(-2.5px)}}
/* the field and the Send, as one pill row */
.imsg-row{
  display:flex;align-items:flex-end;gap:7px;width:100%;margin-top:2px;
  opacity:0;transform:translateY(4px);transition:opacity .24s ease,transform .24s ease;
}
.imsg-row.in{opacity:1;transform:none}
.imsg-row.off{display:none}
.imsg-row form{display:flex;align-items:center;gap:7px;width:100%}
.imsg-row input{
  flex:1;min-width:0;background:#1c1c1e;color:#fff;
  border:1px solid #48484a;border-radius:17px;padding:8px 13px;
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;letter-spacing:-.011em;
  /* 16px, and the thread is scaled rather than re-specified, so iOS never
     zooms the page on focus — see the note at the top */
}
.imsg-row input:focus{outline:none;border-color:#0b93f6}
.imsg-row input::placeholder{color:#8e8e93}
.imsg-send{
  flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;
  background:#0b93f6;color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease,transform .12s ease,opacity .15s ease;
}
.imsg-send:hover{background:#3aa9ff}
.imsg-send:active{transform:scale(.9)}
.imsg-send:disabled{background:#48484a;cursor:default}
.imsg-send svg{width:15px;height:15px;display:block;fill:currentColor}
/* the dismiss, top right of the thread — a note with no field needs a way out
   that is not the Escape key */
.imsg-x{
  position:absolute;top:-9px;right:-9px;width:22px;height:22px;border:0;
  border-radius:50%;background:#3b3b3d;color:#fff;cursor:pointer;
  font:600 15px/1 -apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  display:grid;place-items:center;padding:0 0 2px;opacity:0;
  transition:opacity .2s ease,background .15s ease;
}
.imsg:hover .imsg-x,.imsg-x:focus{opacity:1}
.imsg-x:hover{background:#5a5a5e}
/* the folder a locked thread belongs to keeps a hairline key while it is shut */
.pfold.locked .lab::after{content:' \1F512';font-size:.85em;opacity:.75}

@media(max-width:760px){
  /* the same corner, a little tighter into it */
  .imsg{right:10px;bottom:10px}
}


/* V34: original iMessage dimensions/colors and five-wavelength folder hover. */
.imsg{z-index:10050;bottom:18px!important}
body:has(.imsg.on) #xscontact{visibility:hidden}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-b{background:#0b93f6;color:#fff}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-b.mine{background:#3b3b3d}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-b.bad{background:#e0304a}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-row input{background:#1c1c1e;color:#fff;border-color:#48484a}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-row input:focus{border-color:#0b93f6;outline:none}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-send{background:#0b93f6;color:#fff}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-send:hover{background:#3aa9ff}
html body .imsg:is(:has(input[type="password"]),.imsg) .imsg-send:disabled{background:#48484a}
html body :is(a,button):is(:hover,:focus-visible) img[src*="img/physical/folder.png"],
html body .win-list tr:is(:hover,:focus-within) .ic img[src*="img/physical/folder.png"]{
 filter:drop-shadow(2px 0 0 rgba(226,35,26,.80)) drop-shadow(4px 0 0 rgba(247,148,30,.66)) drop-shadow(6px 0 0 rgba(255,212,0,.56)) drop-shadow(8px 0 0 rgba(0,166,81,.46)) drop-shadow(10px 0 0 rgba(0,0,255,.40))!important}
html body :is(.plate-head .pfold,.xs-site-folder,.lock-folder):is(:hover,:focus-visible) img[src*="img/physical/folder.png"]{filter:none!important}
html body .xs-folder-locked:is(:hover,:focus-visible) :is(.lab,.nm,.pm-folder-label,.wt,.bcard-t,.private-project-note){background:#0b93f6;color:#fff}
html body .xs-folder-locked:focus-visible{outline:2px solid #0b93f6;outline-offset:4px}
html body :is(.lock-panel,.sl-lock){position:fixed;inset:auto 18px 18px auto;width:304px;max-width:304px;margin:0;padding:0;border:0;background:none;z-index:10050;transform:scale(.6);transform-origin:100% 100%;gap:6px}
html body :is(.lock-panel,.sl-lock) .lock-bubble{max-width:100%;margin:0 0 6px;padding:9px 14px 10px;background:#0b93f6;color:#fff;border-radius:18px 18px 18px 5px;font:400 16px/1.32 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.011em;box-shadow:0 1px 2px rgba(0,0,0,.28)}
html body :is(.lock-form,.sl-lock .sl-form-row){display:flex;align-items:center;gap:7px;padding:0;margin:2px 0 0;border:0;background:none;border-radius:0}
html body :is(.lock-form,.sl-lock .sl-form-row) input:not([type=hidden]){flex:1;min-width:0;min-height:0;border:1px solid #48484a;border-radius:17px;background:#1c1c1e;color:#fff;padding:8px 13px;font:400 16px/1.32 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.011em}
html body :is(.lock-form,.sl-lock .sl-form-row) input:focus{outline:none;border-color:#0b93f6}
html body :is(.lock-form,.sl-lock .sl-form-row):focus-within{outline:none}
html body :is(.lock-submit,.sl-lock .sl-form-row .sl-button){flex:0 0 auto;width:30px;height:30px;min-height:30px;padding:0;background:#0b93f6;color:#fff;border:0;border-radius:50%;display:grid;place-items:center}
html body :is(.lock-submit,.sl-lock .sl-form-row .sl-button) svg{width:15px;height:15px}
html body :is(.lock-panel .lock-status,.sl-lock .sl-password-hint){font-size:11px;line-height:1.4;margin:4px 0 0}
html body .lock-panel .lock-back{margin-top:6px}
@media(max-width:760px){.imsg{right:10px;bottom:10px!important}html body :is(.lock-panel,.sl-lock){right:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.imsg,.imsg-b,.imsg-row{transition:none}.imsg-typing i{animation:none}}