/* Image editing owns its tokens; chat and member page themes cannot recolor it. */
[data-media-ui]{
  --media-accent:#0f766e;
  --media-accent-hover:#115e59;
  --media-soft:#e9f5f1;
  --media-surface:#fff;
  --media-stage:#eef3f2;
  --media-ink:#183631;
  --media-muted:#526963;
  --media-border:#d7e4de;
  --media-error:#b42318;
  color:var(--media-ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}
:is(#imageCrop,.avatar-editor,#uploadStatus) *, :is(#imageCrop,.avatar-editor,#uploadStatus) *::before,:is(#imageCrop,.avatar-editor,#uploadStatus) *::after{box-sizing:border-box}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:0;min-height:44px;height:auto;margin:0;padding:10px 14px;
  border:1px solid var(--media-border);border-radius:12px;
  background:var(--media-surface);color:var(--media-ink);
  font:600 15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center;white-space:normal;overflow-wrap:anywhere;
  box-shadow:none;cursor:pointer;transition:background .15s,border-color .15s;
}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button--primary{border-color:var(--media-accent);background:var(--media-accent);color:#fff}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button--icon{width:44px;min-width:44px;height:44px;padding:10px;flex:none}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-icon,:is(#imageCrop,.avatar-editor,#uploadStatus) .media-close svg{
  display:block;width:20px;height:20px;min-width:20px;margin:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none
}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-close{color:var(--media-muted);background:transparent;border-color:transparent;border-radius:50%}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-close svg{width:24px;height:24px}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button:disabled{opacity:.5;cursor:wait}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button:not(:disabled):active{background:var(--media-soft)}
:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button--primary:not(:disabled):active{background:var(--media-accent-hover)}
:where(body:not([data-member-page]):not(.auth-page):not(.customer)) :is(:is(#imageCrop,.avatar-editor,#uploadStatus) :focus-visible){outline:3px solid var(--media-accent);outline-offset:3px}
:is(#imageCrop,.avatar-editor,#uploadStatus) [hidden]{display:none!important}
:is(#imageCrop,.avatar-editor) .media-status{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere;color:var(--media-muted)}
:is(#imageCrop,.avatar-editor) .media-status:empty{display:none}
#imageCrop{
  width:min(760px,calc(100vw - 24px));max-width:none;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  margin:auto;padding:0;border:1px solid var(--media-border);border-radius:24px;
  background:var(--media-surface);color:var(--media-ink);overflow:hidden;
  box-shadow:0 24px 80px rgba(13,42,34,.22);overscroll-behavior:contain;
}
#imageCrop[open]{display:flex;flex-direction:column}
#imageCrop::backdrop{background:rgba(12,31,27,.58);backdrop-filter:blur(4px)}
#imageCrop .image-crop-heading{
  display:flex;align-items:center;gap:12px;flex:none;width:100%;
  padding:12px 16px;margin:0;border-bottom:1px solid var(--media-border);
  background:var(--media-surface);
}
#imageCrop .image-crop-symbol{display:grid;place-items:center;flex:none;width:40px;height:40px;background:var(--media-soft);color:var(--media-accent);border-radius:12px}
#imageCrop #imageCropTitle{flex:1;min-width:0;margin:0;padding:0;width:auto;max-width:none;color:var(--media-ink);font:700 20px/1.3 system-ui,sans-serif;white-space:nowrap}
#imageCrop .image-crop-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px;overflow:auto;min-height:0;overscroll-behavior:contain}
#imageCrop .image-crop-preview{min-width:0}
#imageCrop .image-crop-stage{display:flex;align-items:center;justify-content:center;height:clamp(180px,32dvh,280px);min-width:0;padding:16px;border:1px solid var(--media-border);border-radius:16px;background:var(--media-stage);overflow:hidden}
#imageCrop .image-crop-frame{position:relative;flex:none;line-height:0;border-radius:8px;box-shadow:0 8px 24px rgba(12,31,27,.16);overflow:hidden}
#imageCrop [data-crop-canvas]{display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;touch-action:none;cursor:grab}
#imageCrop [data-crop-canvas]:active{cursor:grabbing}
#imageCrop .image-crop-grid{position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.35) calc(33.333% - .5px),rgba(255,255,255,.35) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.35) calc(66.666% - .5px),rgba(255,255,255,.35) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.35) calc(33.333% - .5px),rgba(255,255,255,.35) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.35) calc(66.666% - .5px),rgba(255,255,255,.35) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
#imageCrop .image-crop-hint{margin:12px 0 0;padding:0;color:var(--media-muted);font:400 17px/1.5 system-ui,sans-serif;text-align:center;overflow-wrap:anywhere}
#imageCrop .image-crop-controls{display:flex;flex-direction:column;gap:8px;min-width:0}
#imageCrop .image-crop-control-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#imageCrop .image-crop-control-heading label{margin:0;padding:0;color:var(--media-ink);font:600 16px/1.5 system-ui,sans-serif}
#imageCrop [data-crop-scale]{margin:0;padding:4px 10px;border-radius:8px;background:var(--media-soft);color:var(--media-accent);font:600 14px/1.5 system-ui,sans-serif;font-variant-numeric:tabular-nums}
#imageCrop .image-crop-zoom{display:flex;align-items:center;gap:8px}
#imageCrop [data-crop-zoom]{display:block;flex:1;min-width:0;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--media-accent);cursor:pointer}
#imageCrop .image-crop-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#imageCrop .image-crop-tools .media-button{gap:6px;padding:10px 4px;background:var(--media-stage);font-size:14px}
#imageCrop .image-crop-fine{margin:0;padding:0;border-top:1px solid var(--media-border)}
#imageCrop .image-crop-fine summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px 0;margin:0;font:500 15px/1.5 system-ui,sans-serif;color:var(--media-muted);cursor:pointer;list-style:none}
#imageCrop .image-crop-fine summary::-webkit-details-marker{display:none}
#imageCrop .image-crop-fine[open] summary .media-icon{transform:rotate(180deg)}
#imageCrop .image-crop-pan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 0 8px}
#imageCrop .image-crop-pan .media-button{width:100%}
#imageCrop .image-crop-actions{display:flex;align-items:stretch;gap:12px;flex:none;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--media-border);background:var(--media-surface)}
#imageCrop .image-crop-actions .media-button{flex:1;min-height:48px}
#imageCrop .image-crop-actions .media-button--primary{flex:1.5}
body.ui-avatar-editor{--ui-primary:var(--media-accent);--ui-primary-soft:var(--media-soft)}
.avatar-editor{width:min(100% - 32px,760px);margin:0 auto 24px;padding-bottom:var(--avatar-save-height,88px)}
.avatar-editor .avatar-card{margin:0;padding:20px;border:1px solid var(--media-border);border-radius:20px;background:var(--media-surface);box-shadow:0 6px 24px rgba(13,42,34,.04)}
.avatar-editor .avatar-overview{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.avatar-editor #thisImg{display:block;flex:none;width:88px;height:88px;object-fit:cover;border:4px solid var(--media-surface);border-radius:50%;box-shadow:0 0 0 1px var(--media-border),0 4px 16px rgba(13,42,34,.12)}
.avatar-editor .avatar-copy{min-width:0}
.avatar-editor .avatar-copy h2,.avatar-editor .avatar-library h2{margin:0 0 6px;font:700 18px/1.5 system-ui,sans-serif;color:var(--media-ink)}
.avatar-editor .avatar-copy p,.avatar-editor .avatar-upload-hint{margin:0;font-size:15px;line-height:1.6;color:var(--media-muted);overflow-wrap:anywhere}
.avatar-editor .avatar-upload-button{width:100%;min-height:48px}
.avatar-editor .avatar-upload-hint{text-align:center;margin-top:12px}
.avatar-editor .avatar-library{margin-top:20px}
.avatar-editor #myUi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none}
.avatar-editor #myUi li{min-width:0;margin:0;padding:0}
.avatar-editor .avatar-choice{display:block;width:100%;aspect-ratio:1;padding:4px;margin:0;border:2px solid transparent;border-radius:16px;background:var(--media-stage);cursor:pointer}
.avatar-editor .avatar-choice img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11px}
.avatar-editor .avatar-choice[aria-pressed="true"]{border-color:var(--media-accent);background:var(--media-soft);box-shadow:0 0 0 2px var(--media-soft)}
.avatar-editor .avatar-choice:disabled{opacity:.55;cursor:wait}
.avatar-editor .avatar-save{position:fixed;z-index:900;bottom:calc(76px + env(safe-area-inset-bottom,0px));left:16px;right:16px;width:calc(100% - 32px);max-width:760px;margin:0 auto;padding:12px;border:1px solid var(--media-border);border-radius:16px;background:var(--media-surface);box-shadow:0 6px 24px rgba(13,42,34,.12)}
.avatar-editor #avatarSave{width:100%;min-height:48px}
.avatar-editor .media-status{padding-top:12px;text-align:center}
[data-im-workspace] #uploadStatus{--upload-tone:var(--media-accent);padding:16px;border-color:var(--media-border);border-radius:16px;background:var(--media-surface);color:var(--media-ink);font-size:15px}
[data-im-workspace] #uploadStatus .upload-file-icon{background:var(--media-soft);color:var(--media-accent);border-radius:12px}
[data-im-workspace] #uploadStatus .upload-file-info strong{font-size:15px;color:var(--media-ink)}
[data-im-workspace] #uploadStatus .upload-file-info span,[data-im-workspace] #uploadStatus .upload-hint{color:var(--media-muted);font-size:13px}
[data-im-workspace] #uploadStatus progress{height:8px}
[data-im-workspace] #uploadStatus .upload-status-actions{max-width:none}
[data-im-workspace] #uploadStatus[data-state="failed"]{--upload-tone:var(--media-error)}
[data-im-workspace] #uploadStatus[data-state="cancelled"],[data-im-workspace] #uploadStatus[data-state="stale"]{--upload-tone:var(--media-muted)}
@media(hover:hover){:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button:not(:disabled):hover{background:var(--media-soft);border-color:var(--media-accent)}:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button--primary:not(:disabled):hover{background:var(--media-accent-hover);color:#fff}.avatar-editor .avatar-choice:not(:disabled):hover{border-color:var(--media-accent)}}
@media(min-width:680px){
  #imageCrop .image-crop-heading{padding:16px 20px}
  #imageCrop .image-crop-body{grid-template-columns:minmax(0,1fr) 230px;gap:24px;padding:24px}
  #imageCrop .image-crop-controls{justify-content:center;gap:12px}
  #imageCrop .image-crop-tools .media-button{flex-direction:column}
  #imageCrop .image-crop-stage{height:340px}
  #imageCrop .image-crop-actions{justify-content:flex-end;padding:16px 20px}
  #imageCrop .image-crop-actions .media-button{flex:0 1 180px}
  #imageCrop .image-crop-actions .media-button--primary{flex:0 1 230px}
  .avatar-editor{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start;padding-bottom:0}
  .avatar-editor .avatar-library{margin:0}
  .avatar-editor .avatar-overview{flex-direction:column;text-align:center}
  .avatar-editor #thisImg{width:112px;height:112px}
  .avatar-editor #myUi{grid-template-columns:repeat(4,minmax(0,1fr))}
  .avatar-editor .avatar-save{position:static;grid-column:1/-1;inset:auto;padding:0;width:auto;max-width:none;margin:0;border:0;background:transparent;box-shadow:none}
  .avatar-editor #avatarSave{display:flex;width:260px;margin-left:auto}
}
@media(max-width:359px){#imageCrop .image-crop-heading,#imageCrop .image-crop-body,#imageCrop .image-crop-actions{padding-left:16px;padding-right:16px}#imageCrop .image-crop-tools .media-button{font-size:13px}.avatar-editor #myUi{gap:8px}.avatar-editor .avatar-card{padding:16px}}
@media(max-height:540px){#imageCrop .image-crop-heading{padding-top:8px;padding-bottom:8px}#imageCrop .image-crop-body{gap:12px;padding-top:12px;padding-bottom:12px}#imageCrop .image-crop-stage{height:220px}#imageCrop .image-crop-actions{padding-top:10px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){:is(#imageCrop,.avatar-editor,#uploadStatus) .media-button{transition:none}}