/* MEETUS 0.6.25.2 COMMUNITY2-TG11-WORKSPACE12 */

:root{
  --workspace12-accent:#8b73ed;
  --workspace12-accent-2:#6d5bdd;
  --workspace12-ease:cubic-bezier(.18,.78,.2,1);
  --workspace12-fast:170ms;
  --workspace12-normal:260ms;
  --workspace12-slow:340ms;
}

/* Uploaded audio: one reliable player in personal chats, groups, comments and Replies. */
.workspace12-audio-file{
  box-sizing:border-box;display:flex;align-items:center;gap:11px;
  width:min(420px,72vw);min-width:min(300px,72vw);padding:7px 8px 7px 6px;
  border-radius:14px;color:#fff;background:rgba(255,255,255,.035)
}
.workspace12-audio-play{
  position:relative;flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  border:0;border-radius:50%;background:linear-gradient(145deg,var(--workspace12-accent),var(--workspace12-accent-2));
  color:#fff;cursor:pointer;box-shadow:0 8px 22px rgba(84,65,183,.28);
  transition:transform var(--workspace12-fast) var(--workspace12-ease),filter var(--workspace12-fast) var(--workspace12-ease)
}
.workspace12-audio-play:hover{filter:brightness(1.08)}
.workspace12-audio-play:active{transform:scale(.92)}
.workspace12-audio-play svg{position:absolute;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.workspace12-audio-play-icon{fill:currentColor!important;stroke:none!important;transform:translateX(1px)}
.workspace12-audio-pause-icon{display:none}
.workspace12-audio-file.is-playing .workspace12-audio-play-icon{display:none}
.workspace12-audio-file.is-playing .workspace12-audio-pause-icon{display:block}
.workspace12-audio-content{min-width:0;flex:1;display:grid;gap:4px}
.workspace12-audio-title{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.workspace12-audio-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.workspace12-audio-title small{flex:0 0 auto;color:rgba(255,255,255,.62);font-size:10px}
.workspace12-audio-range{width:100%;height:18px;margin:0;accent-color:#d8d0ff;cursor:pointer}
.workspace12-audio-time{display:flex;justify-content:space-between;color:rgba(255,255,255,.66);font-size:10px;font-variant-numeric:tabular-nums}
.workspace12-audio-file audio{display:none}
.workspace12-audio-file.has-error{outline:1px solid rgba(255,104,126,.55)}

/* Immediate upload cards live inside chat from the first byte. */
.workspace12-upload-row{opacity:0;transform:translateY(8px) scale(.985);transition:opacity .2s var(--workspace12-ease),transform .24s var(--workspace12-ease)}
.workspace12-upload-row.workspace12-upload-visible{opacity:1;transform:none}
.workspace12-upload-bubble{
  position:relative!important;box-sizing:border-box!important;width:min(330px,72vw)!important;min-width:240px!important;
  padding:7px!important;overflow:hidden!important;border-radius:16px!important;background:rgba(135,116,225,.96)!important
}
.workspace12-upload-bubble.has-preview{width:min(360px,72vw)!important;padding:4px 4px 8px!important}
.workspace12-upload-preview{position:relative;display:grid;place-items:center;min-height:72px;border-radius:13px;overflow:hidden;background:#0b0e14}
.workspace12-upload-bubble.has-preview .workspace12-upload-preview{aspect-ratio:16/10;min-height:0}
.workspace12-upload-media{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.76)}
.workspace12-upload-file-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:rgba(255,255,255,.12);color:#fff}
.workspace12-upload-file-icon.audio{background:rgba(139,115,237,.28)}
.workspace12-upload-file-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.workspace12-upload-overlay{position:absolute;inset:4px 4px auto;aspect-ratio:16/10;display:grid;place-items:center;pointer-events:none}
.workspace12-upload-bubble:not(.has-preview) .workspace12-upload-overlay{position:absolute;inset:7px auto auto 7px;width:72px;height:72px;aspect-ratio:auto}
.workspace12-upload-ring{
  --progress:0;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(#fff calc(var(--progress)*1%),rgba(255,255,255,.2) 0);
  box-shadow:0 8px 28px rgba(0,0,0,.28)
}
.workspace12-upload-ring::before{content:"";position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(12,15,21,.78);backdrop-filter:blur(8px)}
.workspace12-upload-ring span{position:relative;z-index:1;color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.workspace12-upload-details{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 4px}
.workspace12-upload-details strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.workspace12-upload-details span{flex:0 0 auto;color:rgba(255,255,255,.72);font-size:10px}
.workspace12-upload-track{height:3px;margin:2px 4px 0;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.workspace12-upload-track i{display:block;width:0;height:100%;border-radius:inherit;background:#fff;transition:width .16s linear}
.workspace12-upload-retry{width:100%;min-height:34px;margin-top:7px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;cursor:pointer}
.workspace12-upload-retry.hidden{display:none!important}
.workspace12-upload-row.is-failed .workspace12-upload-ring{background:#d95168}
.workspace12-upload-row.is-failed .workspace12-upload-media{filter:grayscale(.35) brightness(.55)}

/* Folder actions are a compact pair, not two controls floating far apart. */
.workspace-folder-drawer-list>button.workspace12-folder-row{
  grid-template-columns:28px minmax(0,1fr) auto auto!important;padding-right:8px!important
}
.workspace12-folder-actions{position:static!important;display:inline-flex!important;align-items:center!important;gap:3px!important;margin-left:2px!important}
.workspace12-folder-actions .workspace5-folder-edit,
.workspace12-folder-actions .workspace9-folder-delete{
  position:static!important;inset:auto!important;transform:none!important;display:grid!important;place-items:center!important;
  width:30px!important;height:30px!important;margin:0!important;border-radius:9px!important;font-size:18px!important;line-height:1!important;opacity:.82!important
}
.workspace12-folder-actions .workspace5-folder-edit:hover{background:rgba(139,115,237,.17)!important;opacity:1!important}
.workspace12-folder-actions .workspace9-folder-delete:hover{background:rgba(255,91,113,.14)!important;opacity:1!important}

/* Content-protection lock never collides with the message menu or receipts. */
.workspace-content-protected .media-image-button::after,
.workspace-content-protected .media-video-button::after{
  top:8px!important;left:8px!important;right:auto!important;bottom:auto!important;z-index:7!important;
  width:26px!important;height:26px!important;border-radius:9px!important
}

/* Receipts must remain readable over media and normal bubbles. */
.message-check{min-width:17px!important;opacity:1!important}
.message-check svg{width:18px!important;height:13px!important;overflow:visible!important}
.message-check svg path,.message-check path{
  fill:none!important;stroke:currentColor!important;stroke-width:2.15!important;stroke-linecap:round!important;stroke-linejoin:round!important
}
.message-check.receipt-sent,.message-check.receipt-delivered{color:rgba(255,255,255,.86)!important}
.message-check.receipt-read{color:#d9d2ff!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.visual-media-bubble .message-meta{z-index:6!important}

/* Modern Telegram/WhatsApp-style media composer. */
#mediaPreviewModal[data-workspace12-modern="1"]:not(.hidden){
  background:linear-gradient(180deg,#0a0d12,#111722 56%,#0b0e14)!important
}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-header{
  min-height:62px!important;padding:9px max(12px,calc((100vw - 1180px)/2))!important;background:rgba(12,16,22,.86)!important;
  border-bottom-color:rgba(255,255,255,.055)!important;box-shadow:0 8px 30px rgba(0,0,0,.18)!important
}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-stage{padding:18px 76px 10px!important}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-content{
  border-radius:18px!important;box-shadow:0 26px 90px rgba(0,0,0,.48)!important;background:#05070a!important
}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-footer{
  gap:9px!important;padding:9px 14px max(12px,env(safe-area-inset-bottom))!important;background:rgba(13,17,23,.9)!important;
  box-shadow:0 -16px 42px rgba(0,0,0,.22)!important
}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-thumbnails{padding:2px 0 4px!important}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-thumbnail{
  width:54px!important;height:54px!important;flex-basis:54px!important;border:2px solid transparent!important;border-radius:12px!important;
  opacity:.72!important;transition:opacity .18s var(--workspace12-ease),transform .2s var(--workspace12-ease),border-color .2s var(--workspace12-ease)!important
}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-thumbnail:hover{opacity:1!important;transform:translateY(-2px)!important}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-thumbnail.active{opacity:1!important;border-color:var(--workspace12-accent)!important;transform:translateY(-2px)!important}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-caption-row{
  width:min(760px,100%)!important;min-height:50px!important;border-radius:24px!important;padding:5px 6px 5px 9px!important;
  background:rgba(36,41,51,.98)!important;border-color:rgba(255,255,255,.075)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important
}
#mediaPreviewModal[data-workspace12-modern="1"] .workspace9-media-caption-editor{padding:10px 4px!important;line-height:1.38!important}
#mediaPreviewModal[data-workspace12-modern="1"] .media-preview-send{width:42px!important;height:42px!important;box-shadow:0 8px 22px rgba(93,73,199,.38)!important}
#mediaPreviewModal[data-workspace12-modern="1"] .viewer-action{transition:transform .18s var(--workspace12-ease),background-color .18s var(--workspace12-ease)!important}
#mediaPreviewModal[data-workspace12-modern="1"] .viewer-action:hover{transform:translateY(-1px)!important;background:#343a47!important}

/* Video preview uses the edit button as a clear sound toggle. */
#mediaPreviewEdit.workspace12-video-muted::after{content:"×";position:absolute;right:5px;bottom:4px;font-size:11px;color:#ff8798;font-weight:800}
#mediaPreviewEdit{position:relative!important}

/* Modern image editor: clean stage, floating bottom tools, compact mobile controls. */
#imageEditorModal[data-workspace12-modern="1"]:not(.hidden){
  background:linear-gradient(180deg,#080b10,#111722 58%,#090c11)!important
}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-header{
  min-height:62px!important;background:rgba(12,16,22,.88)!important;border-bottom-color:rgba(255,255,255,.055)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.16)!important
}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-stage{padding:18px 18px 10px!important;background:radial-gradient(circle at 50% 42%,rgba(68,79,96,.3),transparent 58%)!important}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-stage canvas{border-radius:16px!important;box-shadow:0 26px 90px rgba(0,0,0,.5)!important}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar{
  width:min(900px,calc(100% - 24px))!important;margin:0 auto max(12px,env(safe-area-inset-bottom))!important;padding:8px!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:22px!important;background:rgba(28,33,42,.96)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.36)!important;backdrop-filter:blur(18px)!important
}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar>button{
  min-width:64px!important;border-radius:14px!important;transition:transform .18s var(--workspace12-ease),background-color .18s var(--workspace12-ease),color .18s var(--workspace12-ease)!important
}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar>button:hover{transform:translateY(-2px)!important}
#imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar>button.active{background:rgba(139,115,237,.24)!important;color:#fff!important}
#imageEditorModal[data-workspace12-modern="1"] .editor-save-button{box-shadow:0 8px 22px rgba(93,73,199,.34)!important}

/* Real motion: drawers, menus, modals, chat switching and new content. */
.workspace-folder-drawer,
.message-context-menu,
.attachment-menu,
.chat-header-menu,
.workspace-card,
.workspace9-modal-card,
.media-preview-modal,
.image-editor-modal,
.reaction-picker{
  transition:
    opacity var(--workspace12-normal) var(--workspace12-ease),
    transform var(--workspace12-normal) var(--workspace12-ease),
    filter var(--workspace12-normal) var(--workspace12-ease)!important;
  transition-behavior:allow-discrete!important
}
.workspace-folder-drawer:not(.hidden){animation:workspace12-drawer-in .28s var(--workspace12-ease) both!important}
.message-context-menu:not(.hidden),.attachment-menu:not(.hidden),.chat-header-menu:not(.hidden),.reaction-picker:not(.hidden){animation:workspace12-menu-in .2s var(--workspace12-ease) both!important}
.workspace-modal:not(.hidden) .workspace-card,.workspace9-modal:not(.hidden) .workspace9-modal-card{animation:workspace12-modal-in .26s var(--workspace12-ease) both!important}
.media-preview-modal:not(.hidden),.image-editor-modal:not(.hidden){animation:workspace12-fade-in .22s var(--workspace12-ease) both!important}
#chatPane{transition:opacity .16s var(--workspace12-ease),transform .2s var(--workspace12-ease)!important}
#chatPane.workspace12-chat-switching{opacity:.76;transform:translateX(3px)}
.chat-item{transition:background-color .2s var(--workspace12-ease),transform .2s var(--workspace12-ease),box-shadow .25s var(--workspace12-ease)!important}
.message-row .message-bubble{transition:transform .2s var(--workspace12-ease),box-shadow .25s var(--workspace12-ease),background-color .2s var(--workspace12-ease)!important}
.composer,.search-box,.workspace-folder-launch{transition:border-color .22s var(--workspace12-ease),box-shadow .25s var(--workspace12-ease),background-color .22s var(--workspace12-ease),transform .18s var(--workspace12-ease)!important}
button{ -webkit-tap-highlight-color:transparent }

@keyframes workspace12-drawer-in{from{opacity:0;transform:translateX(-24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes workspace12-menu-in{from{opacity:0;transform:translateY(7px) scale(.975)}to{opacity:1;transform:none}}
@keyframes workspace12-modal-in{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@keyframes workspace12-fade-in{from{opacity:0}to{opacity:1}}

@media(max-width:700px){
  .workspace12-audio-file{width:min(330px,82vw);min-width:min(260px,76vw)}
  .workspace12-upload-bubble,.workspace12-upload-bubble.has-preview{width:min(330px,84vw)!important;max-width:calc(100vw - 18px)!important}
  .workspace12-folder-actions .workspace5-folder-edit,.workspace12-folder-actions .workspace9-folder-delete{width:32px!important;height:32px!important;opacity:1!important}
  #mediaPreviewModal[data-workspace12-modern="1"] .media-preview-header{padding:8px 9px!important}
  #mediaPreviewModal[data-workspace12-modern="1"] .media-preview-stage{padding:8px 8px 4px!important}
  #mediaPreviewModal[data-workspace12-modern="1"] .media-preview-content{border-radius:13px!important}
  #mediaPreviewModal[data-workspace12-modern="1"] .media-preview-footer{padding:7px 8px max(8px,env(safe-area-inset-bottom))!important}
  #mediaPreviewModal[data-workspace12-modern="1"] .media-preview-thumbnails{justify-content:flex-start!important}
  #mediaPreviewModal[data-workspace12-modern="1"] .media-preview-caption-row{min-height:48px!important;border-radius:22px!important}
  #imageEditorModal[data-workspace12-modern="1"] .image-editor-stage{padding:8px!important}
  #imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar{
    width:calc(100% - 12px)!important;margin:0 6px max(7px,env(safe-area-inset-bottom))!important;border-radius:18px!important;
    overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none!important
  }
  #imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar::-webkit-scrollbar{display:none}
  #imageEditorModal[data-workspace12-modern="1"] .image-editor-toolbar>button{min-width:58px!important;flex:0 0 58px!important}
  #chatPane.workspace12-chat-switching{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .workspace12-upload-row,.workspace-folder-drawer,.message-context-menu,.attachment-menu,.chat-header-menu,.workspace-card,.workspace9-modal-card,.media-preview-modal,.image-editor-modal,.reaction-picker,#chatPane,.chat-item,.message-bubble{
    animation:none!important;transition-duration:.01ms!important
  }
}

.workspace12-upload-cancel{width:100%;min-height:34px;margin-top:7px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(12,15,21,.62);color:#fff;font-weight:700;cursor:pointer}
.workspace12-upload-cancel:hover{background:rgba(217,81,104,.28);border-color:rgba(255,103,126,.48)}
.workspace12-upload-cancel.hidden{display:none!important}
