html:not(.dark) body:not([data-theme="dark"]) .bubble:not(.me) a.msg-link,
html:not(.dark) body:not([data-theme="dark"]) a.msg-link-other,
.bubble:not(.me) a.msg-link-other {
    color: var(--accent) !important;
}
html.dark .bubble:not(.me) a.msg-link,
body[data-theme="dark"] .bubble:not(.me) a.msg-link,
html.dark a.msg-link-other,
body[data-theme="dark"] a.msg-link-other {
    color: #ffffff !important;
}
.chathead .dot, .topbar .dot, [fill="#00FF00"], [fill="green"], .status-indicator, .online-dot { display: none !important; }
:root body:not(.dark):not([data-theme="dark"]) div.bubble:not(.me) a,
:root body:not(.dark):not([data-theme="dark"]) div.bubble:not(.me) a.msg-link,
:root body:not(.dark):not([data-theme="dark"]) div.bubble:not(.me) a.msg-link-other,
:root body:not(.dark):not([data-theme="dark"]) div.bubble:not(.me) a[href] {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    text-shadow: none !important;
}
:root html.dark div.bubble:not(.me) a.msg-link,
:root body[data-theme="dark"] div.bubble:not(.me) a.msg-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.link-preview-card { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--glass2)); padding: 8px 10px; margin-top: 8px; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.lp-site { font-size: 11px; font-weight: 600; color: var(--accent); }
.lp-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.lp-desc { font-size: 12px; color: var(--muted); }
.lp-img { max-width: 100%; border-radius: 4px; margin-top: 4px; }
.msg-media { margin-top: 6px; position: relative; }
.msg-image { max-width: 100%; border-radius: 8px; display: block; object-fit: cover; }
.msg-video-placeholder { background: var(--bg); height: 160px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -6px; margin-bottom: 4px; margin-left: 12px; position: relative; z-index: 2; }
.reaction-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--glass2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--t-snap); color: var(--fg); }
.reaction-pill.active { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { .reaction-pill:hover { filter: brightness(1.2); } }
.typing-indicator { display: inline-flex; gap: 4px; align-items: center; padding: 10px 14px; font-size: 13px; color: var(--muted); background: var(--glass2); border-radius: 16px; width: fit-content; margin: 4px 28px; }
.typing-dot { width: 6px; height: 6px; background: var(--muted); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
.sep { text-align: center; font-size: 12px; color: var(--muted); padding: 12px 0 6px; z-index: 1; position: relative; font-weight: 500; }
.seen { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
.system-msg { text-align: center; font-size: 12.5px; color: var(--muted); padding: 8px 16px; margin: 8px auto 12px; background: var(--glass2); border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 12px; width: max-content; max-width: 85%; word-break: break-word; font-weight: 500; }
.time-cluster-sep { font-size: 11px; color: var(--muted2); text-align: center; margin: 8px 0; }
.composer-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin: 4px 12px;
  background: var(--bg-surface, #f8f9fa);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.composer-attachment--entering {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}
.composer-attachment--closing {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}
.composer-attachment__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--accent-light, #ebf8ff);
  color: var(--accent, #3182ce);
  border-radius: 8px;
}
.composer-attachment__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.composer-attachment__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.composer-attachment__meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.composer-attachment__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.composer-attachment__remove:hover {
  background: var(--bg-hover, #fee2e2);
  color: var(--error, #ef4444);
}
@media (prefers-color-scheme: dark) {
  .composer-attachment {
    background: var(--bg-surface-dark, #1e293b);
    border-color: var(--border-dark, #334155);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
  }
  .composer-attachment__icon {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
  }
  .composer-attachment__name {
    color: var(--text-primary-dark, #f8fafc);
  }
  .composer-attachment__meta {
    color: var(--text-secondary-dark, #94a3b8);
  }
  .composer-attachment__remove:hover {
    background: rgba(239, 68, 68, 0.15);
  }
}
.composer-attachments-scroll {
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.composer-attachments-scroll::-webkit-scrollbar {
  width: 4px;
}
.composer-attachments-scroll::-webkit-scrollbar-thumb {
  background: var(--line, #cbd5e1);
  border-radius: 4px;
}
.comp-prev-content { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.comp-prev-title { color: var(--accent); font-weight: 600; }
.comp-prev-desc { color: var(--muted); }
.composer-pill {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--glass2);
    border-radius: 22px;
    min-height: 44px;
    padding: 0 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 2px rgba(255,255,255,0.2), 0 0 0 1px rgba(255,255,255,0.1);
    transition: all var(--t-base);
    position: relative;
}
.composer-pill .iconbtn {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  transition: color var(--t-snap);
  border: none;
  cursor: pointer;
}
.composer-pill .iconbtn .ic {
  width: 23px;
  height: 23px;
  pointer-events: none;
}
.composer-pill .iconbtn:hover {
  color: var(--accent);
}
.composer-pill .ta {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  min-height: 22px;
  max-height: 130px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 11px 8px;
  color: var(--fg);
  font-size: 16px;
  resize: none;
  outline: none !important;
  line-height: 1.4;
}
.composer-pill .ta:focus,
.composer-pill .ta:active,
.composer-pill .ta:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.composer .iconbtn.send, .composer .iconbtn.voice {
  background: var(--accent);
  color: #fff;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border-radius: 50%;
  width: 42px; 
  height: 42px;
  margin-left: 5px; 
  flex-shrink: 0;
}
.composer .iconbtn.send .ic {
  width: 20px; 
  height: 20px;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
  transform: rotate(-45deg) translate(1px, -1px);
  stroke-width: 0.5px;
  stroke-linejoin: round;
}
.composer .iconbtn.voice .ic { width: 23px; height: 23px; fill: currentColor; }
.composer.blocked .composer-pill {
  pointer-events: none;
  filter: saturate(0.9);
}
.composer-block-overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(15px + env(safe-area-inset-bottom));
  min-height: 50px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--glass) 72%, transparent);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  z-index: 14;
  pointer-events: auto;
}
.composer-block-overlay__text {
  color: var(--fg);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.45;
  text-align: center;
}
@media (hover: hover) { .composer .iconbtn.send:hover, .composer .iconbtn.voice:hover { transform: scale(1.05); } }
.composer .iconbtn.send:active, .composer .iconbtn.voice:active { transform: scale(0.95); }
.message .bubble {
    background-image: none !important;
}
.message .bubble:has(.tg-audio-player-wrap) {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.composer .iconbtn.cbtn {
  color: var(--muted);
  -webkit-tap-highlight-color: transparent !important;
}
.composer .iconbtn.cbtn:hover,
.composer .iconbtn.cbtn:active,
.composer .iconbtn.cbtn:focus {
  background: transparent !important;
}
.composer .iconbtn.cbtn:active {
  background: transparent;
}
.composer-pill.is-recording .ta,
.composer-pill.is-recording #btn-emoji,
.composer-pill.is-recording #btn-attach { 
    display: none !important; 
}
.voice-recording-ui {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    padding: 0 10px;
    z-index: 10;
    pointer-events: none;
    background: transparent !important;
}
.voice-recording-ui > * {
    pointer-events: auto; 
}
.voice-recording-ui-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}
.discard-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 1; transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); backdrop-filter: blur(2px); }
.discard-modal.hidden { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.discard-modal-content { background: var(--bg); padding: 24px; border-radius: 16px; width: 85%; max-width: 340px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); transform: scale(1); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; gap: 8px; }
.discard-modal.hidden .discard-modal-content { transform: scale(0.95); transition: transform 0.15s; }
.discard-modal-title { margin: 0; color: var(--fg); font-size: 18px; font-weight: 600; }
.discard-modal p { margin: 0 0 16px; color: #8E8E93; font-size: 15px; line-height: 1.5; }
.discard-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.discard-modal-actions button { background: none; border: none; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 8px; transition: background 0.15s; }
.discard-modal-actions button:active { background: rgba(128,128,128,0.1); }
.btn-cancel { color: var(--accent); }
.btn-discard { color: #FF3B30; }
.record-timer-wrap { 
    display: flex; 
    align-items: center; 
    gap: 8px;
    margin-left: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 11;
}
.mic-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 4px rgba(255,59,48,0.5);
    animation: blink-record 1s infinite;
}
@keyframes blink-record {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes tg-pulse { 0% { opacity: 1; } 100% { opacity: 0.3; } }
.mic-timer { color: var(--fg); font-size: 16px; font-variant-numeric: tabular-nums; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 500; min-width: 45px; }
.voice-waveform { flex: 1; height: 30px; margin: 0 12px; pointer-events: none; opacity: 1; transition: opacity 0.2s; }
.voice-waveform.hidden { display: none; }
.btn-trash { color: #ffffff; padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; opacity: 1; transition: transform 0.2s, opacity 0.2s, color 0.2s; transform: scale(1); border: none; cursor: pointer; }
.btn-trash.hidden { display: none !important; }
.btn-trash:hover { color: #ff453a; }
.btn-trash:active { transform: scale(0.9); }
.btn-trash svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; }
.voice-recording-ui.locked-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.voice-recording-ui.locked-mode #tg-locked-overlay {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.voice-recording-ui.locked-mode .record-slide-wrap,
.voice-recording-ui.locked-mode .record-timer-wrap:not(#tg-locked-overlay *) {
    display: none;
}
#tg-voice-cancel:hover {
    opacity: 0.8;
}
.voice-recording-ui.locked-mode .record-slide-wrap {
  display: none !important;
}
.voice-recording-ui.locked-mode #tg-locked-overlay {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
#tg-voice-timer {
    color: var(--fg) !important; 
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
#tg-voice-cancel {
    color: var(--accent) !important; 
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    position: absolute !important;
    left: 0;
    right: 0;
    margin: 0 auto !important;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 10;
}
.voice-recording-ui.slide-shrink { animation: slideShrinkOut 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes slideShrinkOut { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(-20px) scale(0.9); } }
.record-slide-wrap { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0; 
    opacity: 1; 
    transition: none; 
    flex: 1; 
    position: static; 
    transform: none !important;
}
.ic-chevron { display: none !important; } 
@keyframes slideAnim { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
.slide-text {
    color: #8E8E93;
    font-size: 15px;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
#record-slide-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#tg-voice-send {
    background: var(--accent) !important;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position: absolute !important;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 20;
}
#tg-voice-send:active {
    transform: translateY(-50%) scale(0.9) !important;
}
.composer .iconbtn.voice.mic-recording { transform: scale(1.6) translateY(-4px); background: var(--accent); box-shadow: none; }
.composer .iconbtn.voice.mic-recording .ic { transform: scale(1.1); }
.composer .iconbtn.voice .mic-halo {
    position: absolute;
    right: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-right: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent) 20%, color-mix(in srgb, var(--accent) 20%, transparent) 50%, transparent 80%);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 20%, transparent);
    filter: blur(1px);
    transform: scale(var(--halo-scale, 1));
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0s;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
.composer .iconbtn.voice.mic-recording .mic-halo {
    opacity: 1;
    visibility: visible;
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
}
.message-content .message-voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    height: 48px;
    padding: 0 6px 0 0;
    box-sizing: border-box;
}
.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.voice-play-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--outgoing-message-bg);
}
.voice-play-btn .icon-pause {
    display: none;
}
.message-voice-player.playing .voice-play-btn .icon-play {
    display: none;
}
.message-voice-player.playing .voice-play-btn .icon-pause {
    display: block;
}
.voice-waveform-wrapper {
    flex-grow: 1;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.voice-waveform-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
:root:not(.dark) .voice-waveform-wrapper canvas,
[data-theme="light"] .voice-waveform-wrapper canvas {
    filter: brightness(0.2) contrast(2.2) !important;
}
:root:not(.dark) .tg-wave-bg-wrap,
[data-theme="light"] .tg-wave-bg-wrap {
    color: rgba(0, 0, 0, 0.35) !important; 
}
:root:not(.dark) .tg-waveform-progress,
[data-theme="light"] .tg-waveform-progress {
    color: rgba(0, 0, 0, 0.85) !important; 
}
.voice-meta {
    position: absolute;
    bottom: 2px;
    right: 8px;
    color: var(--text-secondary-color);
    font-size: 12px;
    font-family: monospace, sans-serif;
    background: linear-gradient(to top, var(--outgoing-message-bg) 40%, transparent);
    padding: 3px 1px 0 5px;
}
.caption-input-container {
    flex-grow: 1;
    background-color: rgba(30, 30, 30, 0.7);
    border-radius: 20px;
    padding: 0 15px;
}
#media-caption-input {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    height: 40px;
    font-size: 16px;
    outline: none;
}
#send-media-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--theme-primary-color);
    border: none;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#send-media-btn svg {
    fill: white;
    width: 24px;
    height: 24px;
}
.composer-mic-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mic-lock-icon {
    position: absolute;
    bottom: 60px; 
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, bottom 0.2s;
    pointer-events: none;
}
.mic-lock-icon.visible {
    opacity: 0.8;
}
.mic-lock-icon.locked {
    background-color: var(--theme-primary-color);
    opacity: 1;
}
.mic-lock-icon svg {
    fill: white;
    width: 24px;
    height: 24px;
}
.mic-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--halo-scale, 1));
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent) 0%, transparent 75%);
    pointer-events: none;
    z-index: -1;
    transition: transform 0.05s linear;
    will-change: transform;
}
.mic-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--ripple-scale, 1));
    opacity: var(--ripple-opacity, 0);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 0%, transparent 85%);
    pointer-events: none;
    z-index: -2;
    transition: transform 0.05s linear, opacity 0.1s linear;
    will-change: transform, opacity;
}
.voice-lock-capsule {
    position: absolute;
    bottom: 95px;
    right: 8px;
    width: 50px;
    height: 150px;
    background: var(--bg-glass, rgba(28, 36, 47, 0.85));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.33, 1, 0.68, 1), transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    border: 0.5px solid rgba(255,255,255,0.1);
}
.voice-lock-capsule.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.voice-lock-capsule.active {
    background: var(--accent);
}
.voice-lock-capsule.active .ic-lock {
    transform: translateY(-5px);
    color: #fff;
}
.voice-lock-capsule .ic-lock {
    width: 22px;
    height: 22px;
    color: var(--accent);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tg-audio-player-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
}
.voice-recording-ui-inner {
    display: flex;
    align-items: center;
    background: transparent;
    height: 100%;
    border-radius: 20px;
    padding: 0 4px;
    flex-grow: 1;
    transition: background 0.3s;
}
.voice-recording-ui.locked-mode .voice-recording-ui-inner {
    background: transparent !important;
    border-radius: 24px;
    margin: 4px;
    height: calc(100% - 8px);
}
.btn-play-preview {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    padding: 4px;
}
.voice-recording-ui.locked-mode #btn-voice-trash {
    color: var(--accent) !important; 
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    cursor: pointer;
    background: none;
    border: none;
    margin-right: 0px; 
}
.voice-recording-ui.locked-mode .record-slide-wrap {
    display: none !important;
}
.voice-recording-ui.locked-mode .mic-timer {
    color: var(--fg);
}
.voice-recording-ui.locked-mode .mic-rec-dot {
    background-color: #ff3b30 !important;
    border-radius: 50% !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    animation: blink-record 1s infinite !important;
}
.bubble.me:not(.voice-bubble) .tg-audio-control {
    background: #ffffff !important;
}
.bubble.me:not(.voice-bubble) .tg-play-btn {
    background: #ffffff !important;
    color: var(--accent) !important;
}
.bubble:not(.me):not(.voice-bubble) .tg-audio-control {
    color: var(--accent) !important;
}
.bubble:not(.me):not(.voice-bubble) .tg-play-btn {
    background: var(--accent) !important;
    color: #ffffff !important;
}
.bubble.voice-bubble .body {
    padding-bottom: 6px !important;
}
.bubble.voice-bubble .meta {
    position: absolute !important;
    bottom: 2px !important;
    right: 8px !important;
    margin: 0 !important;
    left: auto !important;
}
html[dir="rtl"] .bubble.voice-bubble .meta {
    right: 8px !important;
    left: auto !important;
}
.tg-audio-player {
    display: flex;
    align-items: center;
    background: var(--glass2, rgba(0,0,0,0.05));
    border-radius: 25px;
    height: 50px;
    padding: 0 8px;
    gap: 8px;
    box-sizing: border-box;
}
.tg-audio-control .tg-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    cursor: pointer;
}
.tg-audio-control .tg-play-btn svg {
    width: 24px;
    height: 24px;
}
.tg-audio-waveform-container {
    flex: 1;
    height: 32px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0 12px;
}
.tg-audio-waveform-base,
.tg-audio-waveform-progress {
    display: flex;
    gap: 1px;
    align-items: center;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.tg-audio-waveform-base {
    opacity: 0.35;
    color: currentColor;
}
.tg-audio-waveform-progress {
    color: currentColor;
    overflow: hidden;
    z-index: 2;
}
.tg-audio-waveform-bar {
    width: 2px;
    min-width: 2px;
    flex-shrink: 0;
    background-color: currentColor;
    border-radius: 2px;
    transition: height 0.15s ease;
}
.tg-wave-bg-wrap .tg-audio-waveform-bar {
    opacity: 0.4;
}
.tg-waveform-progress .tg-audio-waveform-bar {
    opacity: 1;
}
.bubble.me.voice-bubble .tg-wave-bg-wrap {
    color: rgba(7, 74, 72, 0.42) !important;
}
.bubble.me.voice-bubble .tg-waveform-progress {
    color: #ffffff !important;
}
.tg-audio-meta .tg-audio-time {
    font-family: monospace;
    font-size: 11px;
    color: var(--fg);
    margin-right: 4px;
}
.voice-lock-capsule .ic-arrow {
    width: 14px;
    height: 14px;
    margin-top: 10px;
    opacity: 0.5;
    color: #fff;
    animation: tgBounceUp 1.8s infinite ease-in-out;
}
@keyframes tgBounceUp {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-12px); opacity: 0.8; }
}
.composer .iconbtn.voice.mic-sending { background: var(--accent); }
.composer .iconbtn.voice.mic-sending .mic-wave-bar { height: 2px !important; }
.mic-send-icon { animation: sendIconAnim 130ms forwards; }
@keyframes sendIconAnim { 0% { transform: rotate(45deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }
.sticker-panel { height: 250px; background: var(--wall1); border-top: 1px solid var(--line2); display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; padding: 10px; overflow-y: auto; contain: strict; }
.sticker-item { width: 100%; aspect-ratio: 1; cursor: pointer; transition: transform var(--t-snap); }
.sticker-item:hover, .sticker-item:focus, .sticker-item:active { transform: scale(1.1); }
.offline { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 950; border-radius: 999px; padding: 10px 20px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); box-shadow: var(--shadow); color: var(--muted); font-size: 13px; font-weight: 650; white-space: nowrap; animation: scaleIn 0.3s var(--t-base) backwards; }
.daysep {
  position: relative;        
  display: block;
  margin: 12px auto 8px;
  width: fit-content;
  z-index: 3;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--fg);
  letter-spacing: .2px;
  pointer-events: none;
}
.daysep-hidden {
  display: none;             
}
.daysep.sticky-active {
  opacity: 0.9;
  border-color: var(--accent);
}
.daysep.sticky-active { opacity: 0.9; border-color: var(--accent); transition: all var(--t-base); }
.loadmore { display: block; margin: 10px auto 6px; position: sticky; top: 10px; z-index: 3; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 999; border-radius: 999px; padding: 10px 20px; display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 14px; font-weight: 600; background: var(--glass2); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--fg); animation: slideUpFade 0.4s var(--t-base) backwards; }
.toast.toast-error { background: rgb(255, 77, 79) !important; border: 1.5px solid rgb(207, 19, 34) !important; color: #fff !important; }
.toast.toast-success { background: rgb(82, 196, 26) !important; border: 1.5px solid rgb(56, 158, 13) !important; color: #fff !important; }
.toast .tbtn { border: 0; background: transparent; color: var(--accent); font-weight: 750; font-size: 14px; cursor: pointer; padding: 0; transition: opacity var(--t-snap); }
@media (hover: hover) { .toast .tbtn:hover { opacity: 0.8; } }
.modal-list {
  max-height: 420px;
  overflow-y: auto;
  margin-top: 12px;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.modal-list::-webkit-scrollbar { width: 4px; }
.modal-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.modal-title { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; margin-bottom: 16px; color: var(--fg); }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.small { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; opacity: 0.8; }
.sheetsec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheetrow { display: flex; gap: 12px; align-items: center; background: var(--bg-item); padding: 12px; border-radius: 12px; transition: background 0.2s; }
.sheetttl { font-weight: 700; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
.media-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    font-family: 'Vazir', sans-serif;
}
.media-hidden {
    display: none !important;
}
.media-header {
    height: 56px;
    width: 100%;
    background-color: rgba(28, 28, 29, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.media-selection-title {
    flex-grow: 1;
    font-family: 'Vazir', sans-serif;
    font-weight: 500;
    font-size: 19px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}
.media-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #FFFFFF;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}
.media-context-menu {
    position: absolute;
    top: 60px;
    right: 16px;
    background-color: #2B2B2B;
    border-radius: 14px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    padding: 8px 0;
    z-index: 20;
    transform-origin: top right;
    animation: scaleInMenu 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes scaleInMenu {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.media-menu-item {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
}
.media-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.media-menu-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
}
.media-menu-text {
    color: #FFFFFF;
    font-size: 16px;
    margin-left: 16px;
    white-space: nowrap;
}
.media-floating-send {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
    z-index: 15;
}
.media-send-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--accent);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}.composer .iconbtn.voice.mic-recording,
.mic-recording {
    background: #e53935 !important;
}
.composer .iconbtn.voice.mic-recording .mic-halo,
.composer .iconbtn.voice.mic-recording .mic-ripple,
.mic-recording .mic-halo,
.mic-recording .mic-ripple {
    background: radial-gradient(circle, rgba(229, 57, 53, 0.58) 0%, rgba(229, 57, 53, 0.22) 48%, transparent 82%) !important;
    box-shadow: 0 0 20px rgba(229, 57, 53, 0.36), 0 0 42px rgba(229, 57, 53, 0.18) !important;
}
#btn-stickers svg {
  width: 24px;
  height: 24px;
}
.sticker-picker {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  width: min(420px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 150px));
  transform: translateX(-50%);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface, #17212b) 88%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}
.sticker-picker.hidden,
.sticker-sheet-backdrop.hidden {
  display: none !important;
}
.sticker-picker-head {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sticker-picker-title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text, #fff);
}
.sticker-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(127,127,127,.14);
  color: currentColor;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.sticker-close:active {
  transform: scale(.94);
}
.sticker-pack-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid rgba(255,255,255,.06);
  scrollbar-width: none;
}
.sticker-pack-tabs::-webkit-scrollbar {
  display: none;
}
.sticker-tab {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background .16s ease, transform .16s ease;
}
.sticker-tab.active {
  background: color-mix(in srgb, var(--accent, #3390ec) 24%, transparent);
}
.sticker-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: var(--accent, #3390ec);
}
.sticker-tab:active {
  transform: scale(.94);
}
.sticker-pack-icon {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(127,127,127,.10);
}
.sticker-pack-icon.tab {
  width: 34px;
  height: 34px;
}
.sticker-pack-icon.sheet {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
}
.sticker-pack-icon-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sticker-grid-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  min-height: 180px;
}
.sticker-grid,
.sticker-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.sticker-cell,
.sticker-sheet-cell {
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: background .16s ease, transform .16s ease;
}
.sticker-cell:hover,
.sticker-sheet-cell:hover {
  background: rgba(127,127,127,.12);
}
.sticker-cell:active,
.sticker-sheet-cell:active {
  transform: scale(.92);
}
.sticker-media,
.tg-sticker-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.sticker-loadable.loaded .sticker-media,
.sticker-loadable.loaded .tg-sticker-media,
.sticker-loadable.loaded .sticker-pack-icon-media {
  opacity: 1;
  transform: scale(1);
}
.sticker-progress-ring {
  width: 30px;
  height: 30px;
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .9;
}
.sticker-progress-ring.large {
  width: 52px;
  height: 52px;
}
.sticker-progress-ring svg {
  width: 100%;
  height: 100%;
  animation: sticker-ring-rotate 1.05s linear infinite;
}
.sticker-progress-ring circle:first-child {
  fill: rgba(0,0,0,.28);
  stroke: rgba(255,255,255,.18);
  stroke-width: 2;
}
.sticker-progress-ring circle:last-child {
  fill: none;
  stroke: var(--accent, #3390ec);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 72 120;
}
.sticker-loadable.loaded > .sticker-progress-ring,
.sticker-loadable.failed > .sticker-progress-ring {
  opacity: 0;
  visibility: hidden;
}
@keyframes sticker-ring-rotate {
  to { transform: rotate(360deg); }
}
.sticker-empty {
  grid-column: 1 / -1;
  min-height: 130px;
  display: grid;
  place-items: center;
  text-align: center;
  color: color-mix(in srgb, currentColor 68%, transparent);
  line-height: 1.8;
  padding: 18px;
}
.sticker-empty.compact {
  min-height: 36px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 8px;
  font-size: 13px;
}
.sticker-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(0,0,0,.42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.sticker-sheet {
  width: min(560px, 100vw);
  max-height: min(78vh, 720px);
  border-radius: 30px 30px 0 0;
  background: color-mix(in srgb, var(--surface, #17212b) 94%, transparent);
  border: 1px solid rgba(255,255,255,.10);
  border-bottom: 0;
  box-shadow: 0 -26px 70px rgba(0,0,0,.36);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: sticker-sheet-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes sticker-sheet-in {
  from { transform: translateY(28px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.sticker-sheet-handle {
  width: 42px;
  height: 5px;
  margin: 10px auto 2px;
  border-radius: 999px;
  background: rgba(127,127,127,.38);
}
.sticker-sheet-x {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}
.sticker-sheet-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px 14px;
}
.sticker-sheet-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sticker-sheet-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticker-sheet-count {
  font-size: 13px;
  opacity: .68;
}
.sticker-sheet-grid-scroll {
  overflow: auto;
  padding: 8px 16px 14px;
  min-height: 220px;
  overscroll-behavior: contain;
}
.sticker-sheet-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sticker-sheet-actions {
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(to top, color-mix(in srgb, var(--surface, #17212b) 98%, transparent), color-mix(in srgb, var(--surface, #17212b) 82%, transparent));
}
.sticker-add-pack {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent, #3390ec), color-mix(in srgb, var(--accent, #3390ec) 74%, #ffffff 16%));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent, #3390ec) 30%, transparent);
}
.sticker-add-pack.added {
  background: rgba(127,127,127,.18);
  color: currentColor;
  box-shadow: none;
  cursor: default;
}
.sticker-add-pack.loading {
  opacity: .72;
}
.sticker-sheet-loading {
  height: 320px;
  display: grid;
  place-items: center;
}
.bubble.sticker-bubble .body {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
}
.bubble.sticker-bubble .sender,
.bubble.sticker-bubble .msg-text,
.bubble.sticker-bubble .meta-spacer {
  display: none !important;
}
.bubble.sticker-bubble .meta {
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tg-sticker-message {
  width: min(184px, 42vw);
  height: min(184px, 42vw);
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}
.tg-sticker-message .tg-sticker-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 768px) {
  .sticker-picker {
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    width: 100vw;
    max-height: 46vh;
    transform: none;
    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
  }
  .sticker-grid,
  .sticker-sheet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sticker-sheet {
    width: 100vw;
    max-height: 82vh;
  }
  .tg-sticker-message {
    width: 164px;
    height: 164px;
  }
}

#btn-stickers {
  display: none !important;
}
#emoji-picker.sticker-mode-active .ep-search-bar {
  opacity: .72;
}
#emoji-picker .ep-categories.ep-categories-with-stickers {
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 4px !important;
  padding: 0 8px !important;
  scrollbar-width: none;
}
#emoji-picker .ep-categories.ep-categories-with-stickers::-webkit-scrollbar {
  display: none;
}
#emoji-picker .ep-categories.ep-categories-with-stickers .ep-cat {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  border: 0;
  background: transparent;
}
#emoji-picker .ep-sticker-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 26px;
  margin: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
#emoji-picker .ep-categories:not(.has-sticker-packs) .ep-sticker-divider {
  display: none;
}
#emoji-picker .ep-sticker-pack-tab {
  border-radius: 14px;
}
#emoji-picker .ep-sticker-pack-tab.active::before {
  opacity: .18;
}
#emoji-picker .ep-sticker-pack-tab.active::after {
  left: 9px !important;
  right: 9px !important;
}
#emoji-picker .ep-sticker-pack-tab .sticker-pack-icon.tab {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
#emoji-picker .ep-grid.sticker-mode {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 8px !important;
  align-content: start;
}
#emoji-picker .ep-grid-container.sticker-mode-scroll {
  padding: 10px 12px 14px !important;
  overscroll-behavior: contain;
}
.ep-sticker-cell {
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: background .16s ease, transform .16s ease;
}
.ep-sticker-cell:hover {
  background: rgba(127,127,127,.12);
}
.ep-sticker-cell:active {
  transform: scale(.92);
}
.sticker-progress-ring.tiny {
  width: 20px;
  height: 20px;
}
.sticker-icon-probe {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: -9999px;
}
.sticker-add-pack.nudge {
  animation: sticker-add-nudge .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes sticker-add-nudge {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-3px) scale(1.015); }
  70% { transform: translateY(1px) scale(.995); }
}
@media (max-width: 768px) {
  #emoji-picker .ep-grid.sticker-mode {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  #emoji-picker .ep-categories.ep-categories-with-stickers .ep-cat {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
  }
}


/* v4 Telegram-style unified emoji/sticker tray */
#emoji-picker {
  --sticker-cell-size: 82px;
}
#emoji-picker .sticker-modebar {
  order: 9;
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-top: 1px solid var(--ep-divider-light);
  background: color-mix(in srgb, var(--ep-bg-light, #fff) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.dark #emoji-picker .sticker-modebar {
  border-top-color: var(--ep-divider-dark);
  background: color-mix(in srgb, var(--ep-bg-dark, #17212b) 92%, transparent);
}
#emoji-picker .sticker-modebar::-webkit-scrollbar {
  display: none;
}
#emoji-picker .sticker-mode-tab {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 15px;
  display: grid;
  place-items: center;
  position: relative;
  background: transparent;
  color: var(--ep-gray);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
#emoji-picker .sticker-mode-tab:active {
  transform: scale(.92);
}
#emoji-picker .sticker-mode-tab.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
#emoji-picker .sticker-mode-tab.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}
#emoji-picker .sticker-emoji-tab .ic {
  width: 24px;
  height: 24px;
}
#emoji-picker .sticker-pack-icon.tab,
#btn-emoji .sticker-pack-icon.button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}
#btn-emoji.composer-sticker-entry .ic {
  display: none;
}
#emoji-picker[data-sticker-mode="sticker"] .ep-nav,
#emoji-picker[data-sticker-mode="sticker"] .ep-categories {
  display: none !important;
}
#emoji-picker[data-sticker-mode="emoji"] .ep-nav,
#emoji-picker[data-sticker-mode="emoji"] .ep-categories,
#emoji-picker:not([data-sticker-mode]) .ep-nav,
#emoji-picker:not([data-sticker-mode]) .ep-categories {
  display: flex;
}
#emoji-picker[data-sticker-mode="sticker"] .ep-grid-container {
  padding: 12px 12px 10px !important;
}
#emoji-picker .ep-grid.sticker-mode {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--sticker-cell-size), var(--sticker-cell-size))) !important;
  justify-content: space-evenly;
  align-content: start;
  gap: 10px !important;
}
#emoji-picker .ep-sticker-cell,
.sticker-sheet-cell {
  width: var(--sticker-cell-size);
  height: var(--sticker-cell-size);
  max-width: var(--sticker-cell-size);
  max-height: var(--sticker-cell-size);
}
#emoji-picker .ep-sticker-cell .sticker-media,
.sticker-sheet-cell .sticker-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sticker-sheet-grid {
  grid-template-columns: repeat(auto-fill, minmax(86px, 86px)) !important;
  justify-content: space-evenly;
  gap: 10px !important;
}
.sticker-sheet-cell {
  --sticker-cell-size: 86px;
}
.tg-sticker-message {
  width: 176px;
  height: 176px;
  max-width: 44vw;
  max-height: 44vw;
}
@media (max-width: 768px) {
  #emoji-picker {
    --sticker-cell-size: 76px;
  }
  #emoji-picker .sticker-modebar {
    height: 56px;
    min-height: 56px;
    padding-inline: 7px;
  }
  #emoji-picker .sticker-mode-tab {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-basis: 42px;
  }
  .sticker-sheet-cell {
    --sticker-cell-size: 78px;
  }
  .sticker-sheet-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 78px)) !important;
  }
  .tg-sticker-message {
    width: 158px;
    height: 158px;
  }
}

#emoji-picker {
  --sticker-cell-size: 82px;
}
#emoji-picker .sticker-modebar {
  order: 9;
  height: 60px;
  min-height: 60px;
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 7px 9px calc(7px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-top: 1px solid var(--ep-divider-light);
  background: color-mix(in srgb, var(--ep-bg-light, #fff) 94%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.dark #emoji-picker .sticker-modebar {
  border-top-color: var(--ep-divider-dark);
  background: color-mix(in srgb, var(--ep-bg-dark, #17212b) 94%, transparent);
}
#emoji-picker .sticker-modebar::-webkit-scrollbar {
  display: none;
}
#emoji-picker .sticker-mode-tab {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 15px;
  display: grid;
  place-items: center;
  position: relative;
  background: transparent;
  color: var(--ep-gray);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
#emoji-picker .sticker-mode-tab:active {
  transform: scale(.92);
}
#emoji-picker .sticker-mode-tab.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
#emoji-picker .sticker-mode-tab.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}
#emoji-picker .sticker-pack-tab.selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
#emoji-picker .sticker-pack-tab.selected::after {
  display: none;
}
#emoji-picker .sticker-emoji-tab .ic,
#emoji-picker .sticker-main-tab .ic,
#btn-emoji .sticker-main-svg {
  width: 24px;
  height: 24px;
}
#emoji-picker .sticker-tab-divider {
  width: 1px;
  height: 28px;
  flex: 0 0 1px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  margin: 0 1px;
}
#emoji-picker .sticker-pack-icon.tab,
#btn-emoji .sticker-pack-icon.button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}
#btn-emoji.composer-sticker-entry .ic {
  display: none;
}
#emoji-picker[data-sticker-mode="sticker"] .ep-nav,
#emoji-picker[data-sticker-mode="sticker"] .ep-categories {
  display: none !important;
}
#emoji-picker[data-sticker-mode="emoji"] .ep-nav,
#emoji-picker[data-sticker-mode="emoji"] .ep-categories,
#emoji-picker:not([data-sticker-mode]) .ep-nav,
#emoji-picker:not([data-sticker-mode]) .ep-categories {
  display: flex !important;
}
#emoji-picker[data-sticker-mode="sticker"] .ep-grid-container {
  padding: 12px 12px 10px !important;
}
#emoji-picker[data-sticker-mode="emoji"] .ep-grid-container,
#emoji-picker:not([data-sticker-mode]) .ep-grid-container {
  padding: 12px !important;
}
#emoji-picker .ep-grid.sticker-mode {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--sticker-cell-size), var(--sticker-cell-size))) !important;
  justify-content: space-evenly;
  align-content: start;
  gap: 10px !important;
}
#emoji-picker .ep-grid:not(.sticker-mode) {
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 8px;
}
#emoji-picker .ep-sticker-cell,
.sticker-sheet-cell {
  width: var(--sticker-cell-size);
  height: var(--sticker-cell-size);
  max-width: var(--sticker-cell-size);
  max-height: var(--sticker-cell-size);
}
#emoji-picker .ep-sticker-cell .sticker-media,
.sticker-sheet-cell .sticker-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sticker-empty {
  min-height: 220px;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--ep-gray);
  text-align: center;
  font-size: 14px;
  padding: 18px;
}
.sticker-empty small {
  max-width: 260px;
  line-height: 1.7;
  opacity: .78;
}
.sticker-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--accent);
}
.sticker-empty-icon .ic {
  width: 30px;
  height: 30px;
}
.sticker-sheet-grid {
  grid-template-columns: repeat(auto-fill, minmax(86px, 86px)) !important;
  justify-content: space-evenly;
  gap: 10px !important;
}
.sticker-sheet-cell {
  --sticker-cell-size: 86px;
}
.tg-sticker-message {
  width: 176px;
  height: 176px;
  max-width: 44vw;
  max-height: 44vw;
}
@media (max-width: 768px) {
  #emoji-picker {
    --sticker-cell-size: 76px;
  }
  #emoji-picker .sticker-modebar {
    height: 58px;
    min-height: 58px;
    padding-inline: 7px;
  }
  #emoji-picker .sticker-mode-tab {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-basis: 42px;
  }
  .sticker-sheet-cell {
    --sticker-cell-size: 78px;
  }
  .sticker-sheet-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 78px)) !important;
  }
  .tg-sticker-message {
    width: 158px;
    height: 158px;
  }
}

/* v6 Telegram-grade sticker tray and message polish */
#btn-emoji.composer-sticker-entry .sticker-main-svg,
#btn-emoji.composer-panel-open .ic,
#btn-emoji.composer-panel-open i {
  display: block !important;
}
#btn-emoji .sticker-pack-icon.button {
  background: transparent !important;
  box-shadow: none !important;
}
#emoji-picker .sticker-modebar {
  height: 62px !important;
  min-height: 62px !important;
  gap: 8px !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: color-mix(in srgb, var(--ep-bg-light, #fff) 88%, transparent) !important;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.38);
}
.dark #emoji-picker .sticker-modebar,
[data-theme="dark"] #emoji-picker .sticker-modebar {
  background: color-mix(in srgb, var(--ep-bg-dark, #17212b) 88%, transparent) !important;
  box-shadow: 0 -12px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
#emoji-picker .sticker-mode-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  height: 46px;
  border-radius: 18px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.12);
}
#emoji-picker .sticker-pack-strip {
  min-width: 0;
  flex: 1 1 auto;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#emoji-picker .sticker-pack-strip::-webkit-scrollbar {
  display: none;
}
#emoji-picker .sticker-mode-switch .sticker-mode-tab {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-basis: 40px !important;
  border-radius: 15px !important;
}
#emoji-picker .sticker-pack-strip .sticker-mode-tab {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex-basis: 44px !important;
  border-radius: 16px !important;
}
#emoji-picker .sticker-mode-tab.active {
  color: #fff !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #fff 8%), color-mix(in srgb, var(--accent) 82%, #000 10%)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 4px rgba(0,0,0,.18) !important;
}
#emoji-picker .sticker-mode-tab.active::after,
#emoji-picker .sticker-pack-tab.selected::after {
  display: none !important;
}
#emoji-picker .sticker-pack-tab.selected {
  background: color-mix(in srgb, var(--accent) 13%, transparent) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#emoji-picker .sticker-mode-tab .sticker-main-svg {
  width: 25px !important;
  height: 25px !important;
}
#emoji-picker .sticker-pack-icon.tab,
#btn-emoji .sticker-pack-icon.button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
}
#emoji-picker .sticker-pack-icon.fallback {
  color: var(--accent);
}
#emoji-picker .ep-grid.sticker-mode {
  grid-template-columns: repeat(auto-fill, minmax(var(--sticker-cell-size), var(--sticker-cell-size))) !important;
  justify-content: space-evenly !important;
  gap: 11px !important;
}
#emoji-picker .ep-sticker-cell,
.sticker-sheet-cell {
  border-radius: 20px !important;
  background: transparent !important;
}
#emoji-picker .ep-sticker-cell:hover,
.sticker-sheet-cell:hover,
#emoji-picker .ep-sticker-cell.focus-holding,
.sticker-sheet-cell.focus-holding {
  background: color-mix(in srgb, currentColor 8%, transparent) !important;
}
.sticker-sheet-actions {
  padding: 13px 16px calc(17px + env(safe-area-inset-bottom, 0px)) !important;
}
.sticker-add-pack {
  min-height: 52px !important;
  border-radius: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #3390ec) 94%, #ffffff 10%), color-mix(in srgb, var(--accent, #3390ec) 82%, #000000 12%)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.18), inset 0 0 28px color-mix(in srgb, var(--accent, #3390ec) 44%, transparent) !important;
  transform: translateY(0);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.sticker-add-pack::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 44%), linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  opacity: .9;
}
.sticker-add-pack:active:not(:disabled) {
  transform: translateY(2px);
  filter: saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 4px 10px rgba(0,0,0,.24), inset 0 0 18px color-mix(in srgb, var(--accent, #3390ec) 42%, transparent) !important;
}
.sticker-add-pack.added {
  color: color-mix(in srgb, currentColor 82%, transparent) !important;
  background: color-mix(in srgb, currentColor 9%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent) !important;
}
.sticker-add-pack.loading {
  opacity: 1 !important;
  cursor: progress;
}
.sticker-add-pack .sticker-add-label,
.sticker-add-pack .sticker-add-loader {
  position: relative;
  z-index: 1;
}
.sticker-add-loader {
  width: 28px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sticker-add-loader i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: sticker-add-pulse .8s ease-in-out infinite;
}
.sticker-add-loader i:nth-child(2) { animation-delay: .12s; }
.sticker-add-loader i:nth-child(3) { animation-delay: .24s; }
@keyframes sticker-add-pulse {
  0%, 80%, 100% { transform: translateY(0) scale(.68); opacity: .5; }
  38% { transform: translateY(-5px) scale(1); opacity: 1; }
}
.bubble.sticker-bubble,
.bubble.me.sticker-bubble,
.bubble:not(.me).sticker-bubble {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: min(210px, 54vw) !important;
  filter: none !important;
}
.bubble.sticker-bubble:hover {
  filter: none !important;
  box-shadow: none !important;
}
.bubble.sticker-bubble .body {
  position: relative !important;
  width: fit-content !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.bubble.sticker-bubble .bubble-avatar,
.bubble.sticker-bubble .sender,
.bubble.sticker-bubble .msg-text,
.bubble.sticker-bubble .meta-spacer {
  display: none !important;
}
.bubble.sticker-bubble .meta {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 5 !important;
  min-height: 21px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: rgba(18, 28, 38, .52) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 2px 10px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(9px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.25) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.bubble.sticker-bubble .meta-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}
.tg-sticker-message {
  width: 178px !important;
  height: 178px !important;
  max-width: 48vw !important;
  max-height: 48vw !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.sticker-focus-layer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.26);
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sticker-focus-layer.hidden {
  display: none !important;
}
.sticker-focus-card {
  width: min(250px, 58vw);
  height: min(250px, 58vw);
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: color-mix(in srgb, var(--surface, #17212b) 42%, transparent);
  box-shadow: 0 30px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
  transform: scale(.94);
  animation: sticker-focus-pop .12s ease-out forwards;
}
.sticker-focus-media {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}
@keyframes sticker-focus-pop {
  to { transform: scale(1); }
}
@media (max-width: 768px) {
  #emoji-picker {
    --sticker-cell-size: 78px !important;
  }
  #emoji-picker .sticker-modebar {
    height: 60px !important;
    min-height: 60px !important;
    padding-inline: 8px !important;
  }
  #emoji-picker .sticker-mode-switch .sticker-mode-tab {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-basis: 38px !important;
  }
  .tg-sticker-message {
    width: 164px !important;
    height: 164px !important;
  }
  .bubble.sticker-bubble .meta {
    right: 9px !important;
    bottom: 9px !important;
  }
  .sticker-focus-card {
    width: min(238px, 66vw);
    height: min(238px, 66vw);
  }
}

/* v7 sticker fixes: quieter Telegram-style timestamps, stable composer icon, faster sheet polish */
#btn-emoji[data-composer-mode="keyboard"] .composer-keyboard-svg,
#btn-emoji[data-composer-mode="sticker"] .sticker-main-svg,
#btn-emoji[data-composer-mode="emoji"] .ic {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}
#btn-emoji.composer-sticker-entry .sticker-pack-icon.button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
}
#btn-emoji .sticker-pack-icon.button .sticker-pack-icon-media,
#emoji-picker .sticker-pack-icon.tab .sticker-pack-icon-media,
.sticker-sheet-head .sticker-pack-icon.sheet .sticker-pack-icon-media {
  opacity: 1 !important;
  display: block !important;
  object-fit: contain !important;
}
#emoji-picker .sticker-main-tab .sticker-main-svg {
  stroke-width: 0 !important;
}
#emoji-picker .sticker-mode-switch {
  background: color-mix(in srgb, currentColor 5%, transparent) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12) !important;
}
#emoji-picker .sticker-mode-switch .sticker-mode-tab.active {
  background: color-mix(in srgb, var(--accent, #3390ec) 16%, transparent) !important;
  color: var(--accent, #3390ec) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #3390ec) 26%, transparent), 0 2px 8px rgba(0,0,0,.08) !important;
}
#emoji-picker .sticker-pack-strip .sticker-pack-tab.selected {
  background: color-mix(in srgb, var(--accent, #3390ec) 10%, transparent) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, #3390ec) 48%, transparent) !important;
}
.sticker-add-pack {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #3390ec) 91%, #ffffff 5%), color-mix(in srgb, var(--accent, #3390ec) 82%, #000000 10%)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -4px 8px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.10) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
}
.sticker-add-pack::before {
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 46%) !important;
  opacity: .65 !important;
}
.sticker-add-pack.loading {
  filter: saturate(1.04) !important;
}
.sticker-add-spinner {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
}
.sticker-add-spinner svg {
  width: 22px;
  height: 22px;
  animation: sticker-ring-rotate .78s linear infinite;
}
.sticker-add-spinner circle:first-child {
  fill: none;
  stroke: rgba(255,255,255,.22);
  stroke-width: 4;
}
.sticker-add-spinner circle:last-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 68 130;
}
.bubble.sticker-bubble .body {
  isolation: isolate !important;
}
.bubble.sticker-bubble .meta {
  right: 5px !important;
  bottom: 5px !important;
  min-height: 17px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  opacity: .76 !important;
  background: rgba(16, 24, 32, .38) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important;
  transform: translateZ(0) !important;
}
.bubble.sticker-bubble .meta .t,
.bubble.sticker-bubble .meta .ticks,
.bubble.sticker-bubble .meta .edited-label {
  font-size: 10px !important;
  opacity: .92 !important;
}
.bubble.sticker-bubble .meta-right {
  gap: 2px !important;
}
.bubble.sticker-bubble .tg-sticker-message {
  display: grid !important;
  place-items: center !important;
}
.tg-sticker-message .tg-sticker-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 768px) {
  .bubble.sticker-bubble .meta {
    right: 4px !important;
    bottom: 4px !important;
    padding: 2px 5px !important;
  }
}

#btn-emoji[data-composer-mode="sticker"] .sticker-pack-icon.button,
#btn-emoji[data-composer-mode="sticker"] .sticker-main-svg {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#btn-emoji .sticker-pack-icon.button {
  position: relative !important;
  overflow: hidden !important;
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
}
.sticker-pack-icon {
  position: relative;
  isolation: isolate;
}
.sticker-pack-icon-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent, #3390ec);
  opacity: .72;
  z-index: 0;
}
.sticker-pack-icon-fallback .ic {
  width: 62% !important;
  height: 62% !important;
}
.sticker-pack-icon.loaded:not(.fallback) .sticker-pack-icon-fallback {
  opacity: 0;
}
.sticker-pack-icon .sticker-pack-icon-media {
  position: relative;
  z-index: 1;
}
.sticker-pack-icon.loaded .sticker-pack-icon-media {
  opacity: 1 !important;
  transform: scale(1) !important;
}
#emoji-picker .sticker-main-tab .sticker-main-svg,
#btn-emoji .sticker-main-svg,
.sticker-pack-icon-fallback .sticker-main-svg {
  stroke-width: initial !important;
  display: block !important;
}
.sticker-add-pack.remove {
  color: #fff !important;
  background: linear-gradient(180deg, #ef5350, #d93025) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -4px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
.sticker-add-pack.remove::before {
  background: linear-gradient(180deg, rgba(255,255,255,.13), transparent 45%) !important;
}
.sticker-focus-layer {
  z-index: 2147483000 !important;
  background: rgba(0,0,0,.30) !important;
  backdrop-filter: blur(2px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.06) !important;
}
.sticker-focus-card {
  width: min(292px, 72vw) !important;
  height: min(292px, 72vw) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.sticker-focus-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.42)) drop-shadow(0 4px 10px rgba(0,0,0,.30));
}
@media (max-width: 768px) {
  .sticker-focus-card {
    width: min(284px, 76vw) !important;
    height: min(284px, 76vw) !important;
  }
}

/* v9 sticker stability and Telegram parity fixes */
#btn-emoji[data-composer-mode="sticker"] {
  color: var(--accent, #3390ec) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#btn-emoji[data-composer-mode="sticker"] .sticker-main-svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
}
#btn-emoji[data-composer-mode="sticker"] .sticker-pack-icon,
#btn-emoji[data-composer-mode="sticker"] .sticker-pack-icon.button {
  display: none !important;
}
.sticker-pack-icon {
  overflow: hidden !important;
  background: color-mix(in srgb, var(--accent, #3390ec) 9%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #3390ec) 16%, transparent) !important;
}
.sticker-pack-icon .sticker-pack-icon-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 2 !important;
}
.sticker-pack-icon:not(.loaded) .sticker-pack-icon-fallback,
.sticker-pack-icon.fallback .sticker-pack-icon-fallback {
  opacity: .82 !important;
  visibility: visible !important;
}
.sticker-pack-icon.loaded:not(.fallback) .sticker-pack-icon-fallback {
  opacity: 0 !important;
  visibility: hidden !important;
}
.sticker-pack-icon.tab {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}
.sticker-sheet-head .sticker-pack-icon.sheet {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 18px !important;
}
.sticker-focus-layer {
  pointer-events: none !important;
}
.sticker-focus-card {
  pointer-events: none !important;
}
.bubble.sticker-bubble .tg-sticker-message {
  pointer-events: auto !important;
}

#pane-chat #messages-scroll,
#pane-chat .messages,
#messages {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#pane-chat #messages-scroll::-webkit-scrollbar,
#pane-chat .messages::-webkit-scrollbar,
#messages::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#btn-emoji[data-composer-mode="sticker"] {
  color: var(--muted, #8a96a3) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#btn-emoji[data-composer-mode="sticker"] .sticker-main-svg {
  color: currentColor !important;
  stroke: currentColor !important;
}
#btn-emoji[data-composer-mode="sticker"]:hover,
#btn-emoji[data-composer-mode="sticker"]:active {
  color: var(--fg, #d7dde5) !important;
}
#emoji-picker .sticker-pack-strip.empty {
  min-width: 0 !important;
}
#emoji-picker[data-sticker-mode="emoji"] .sticker-pack-strip.empty {
  display: none !important;
}
#emoji-picker[data-sticker-mode="sticker"] .sticker-pack-strip.empty {
  display: flex !important;
}
.sticker-empty-polished {
  min-height: 190px !important;
  max-width: 320px !important;
  margin: 16px auto !important;
  border-radius: 28px !important;
  background: color-mix(in srgb, currentColor 5%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent) !important;
}
.sticker-empty-polished .sticker-empty-title {
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}
.sticker-empty-polished small {
  max-width: 230px !important;
  line-height: 1.85 !important;
}
.sticker-focus-layer,
.sticker-focus-card,
.sticker-focus-media {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.sticker-empty-polished {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  min-height: 214px !important;
  width: min(88%, 340px) !important;
  max-width: 340px !important;
  padding: 26px 22px !important;
  margin: 18px auto !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--accent, #5ac8fa) 14%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 3%, transparent)) !important;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 48px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  text-align: center !important;
}
.sticker-empty-orbit {
  position: absolute !important;
  inset: 18px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .72 !important;
}
.sticker-empty-orbit span {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent, #5ac8fa) 52%, currentColor) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #5ac8fa) 34%, transparent) !important;
  animation: sticker-empty-float 2.8s ease-in-out infinite !important;
}
.sticker-empty-orbit span:nth-child(1) { top: 14%; left: 22%; }
.sticker-empty-orbit span:nth-child(2) { top: 23%; right: 18%; animation-delay: .32s !important; }
.sticker-empty-orbit span:nth-child(3) { bottom: 18%; left: 50%; animation-delay: .64s !important; }
.sticker-empty-polished .sticker-empty-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, currentColor 8%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent) !important;
}
.sticker-empty-polished .sticker-empty-icon .ic {
  width: 30px !important;
  height: 30px !important;
}
.sticker-empty-polished .sticker-empty-title {
  font-size: 15.5px !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}
.sticker-empty-polished small {
  max-width: 245px !important;
  line-height: 1.78 !important;
  opacity: .74 !important;
  font-size: 12.5px !important;
}
@keyframes sticker-empty-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.9); opacity: .42; }
  50% { transform: translate3d(0, -8px, 0) scale(1); opacity: .9; }
}

/* v13 final sticker tray polish, stable inbox title, direct sticker entry */
#btn-emoji[data-composer-mode="sticker"],
#btn-emoji.composer-sticker-entry,
#btn-emoji.composer-sticker-entry .sticker-main-svg {
  color: var(--muted, #8a96a3) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#btn-emoji[data-composer-mode="sticker"]:hover,
#btn-emoji[data-composer-mode="sticker"]:active,
#btn-emoji.composer-sticker-entry:hover,
#btn-emoji.composer-sticker-entry:active {
  color: var(--muted, #8a96a3) !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v13 {
  width: min(92%, 420px) !important;
  min-height: clamp(210px, 38vh, 310px) !important;
  margin: clamp(10px, 3vh, 26px) auto !important;
  padding: clamp(22px, 5vw, 34px) clamp(18px, 5vw, 30px) !important;
  border-radius: 34px !important;
  color: var(--fg, #e7edf5) !important;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--accent, #3390ec) 20%, transparent), transparent 34%),
    radial-gradient(circle at 82% 20%, color-mix(in srgb, #8fd3ff 18%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, currentColor 7%, transparent), color-mix(in srgb, currentColor 3%, transparent)) !important;
  border: 1px solid color-mix(in srgb, currentColor 9%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 44px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 12px !important;
}
.sticker-empty-card-glow {
  position: absolute !important;
  inset: auto -20% -45% -20% !important;
  height: 62% !important;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent, #3390ec) 22%, transparent), transparent 60%) !important;
  pointer-events: none !important;
}
.sticker-empty-preview {
  position: relative !important;
  width: clamp(72px, 18vw, 92px) !important;
  height: clamp(72px, 18vw, 92px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.14) !important;
}
.sticker-empty-preview-main {
  width: 52% !important;
  height: 52% !important;
  display: grid !important;
  place-items: center !important;
  color: var(--muted, #8a96a3) !important;
}
.sticker-empty-preview-main .ic {
  width: 100% !important;
  height: 100% !important;
}
.sticker-empty-preview-dot {
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent, #3390ec) 34%, rgba(255,255,255,.22)) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}
.sticker-empty-preview-dot.one { right: -5px !important; top: 16px !important; }
.sticker-empty-preview-dot.two { left: 6px !important; bottom: -4px !important; width: 12px !important; height: 12px !important; opacity: .75 !important; }
.sticker-empty-v13 .sticker-empty-title {
  font-size: clamp(15px, 4vw, 17px) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  margin-top: 2px !important;
}
.sticker-empty-v13 small {
  max-width: 310px !important;
  font-size: clamp(12px, 3.2vw, 13px) !important;
  line-height: 1.85 !important;
  opacity: .72 !important;
}
.sticker-empty-steps {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 4px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, currentColor 6%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: color-mix(in srgb, currentColor 76%, transparent) !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}
.sticker-empty-steps span {
  width: 19px !important;
  height: 19px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent, #3390ec) 20%, transparent) !important;
  color: color-mix(in srgb, var(--accent, #3390ec) 82%, currentColor) !important;
  font-weight: 900 !important;
}
.sticker-empty-steps b {
  font-weight: 800 !important;
}
.sticker-empty-steps i {
  width: 14px !important;
  height: 1px !important;
  background: color-mix(in srgb, currentColor 18%, transparent) !important;
}
@media (max-width: 420px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v13 {
    width: min(94%, 360px) !important;
    min-height: 230px !important;
    padding: 24px 16px !important;
  }
  .sticker-empty-steps {
    transform: scale(.94) !important;
  }
}

/* v14: compact Telegram-style empty sticker state */
#emoji-picker .ep-grid.sticker-mode .sticker-empty,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-polished,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v13,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v14 {
  all: unset !important;
  box-sizing: border-box !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v14 {
  width: min(100%, 390px) !important;
  min-height: 0 !important;
  margin: clamp(18px, 5vh, 34px) auto 0 !important;
  padding: 14px 14px 13px !important;
  border-radius: 22px !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  direction: rtl !important;
  color: var(--fg, #e7edf5) !important;
  background: color-mix(in srgb, var(--panel, #101820) 82%, transparent) !important;
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(12px) !important;
}
.sticker-empty-v14-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--muted, #8a96a3) !important;
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sticker-empty-v14-icon .ic {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
}
.sticker-empty-v14-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  text-align: right !important;
}
.sticker-empty-v14-copy b {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  color: color-mix(in srgb, currentColor 92%, transparent) !important;
}
.sticker-empty-v14-copy span {
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  color: color-mix(in srgb, currentColor 58%, transparent) !important;
}
.sticker-empty-v14-hint {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  margin-top: 4px !important;
  padding: 9px 11px !important;
  border-radius: 16px !important;
  text-align: center !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
  color: color-mix(in srgb, var(--accent, #3390ec) 78%, currentColor) !important;
  background: color-mix(in srgb, var(--accent, #3390ec) 9%, transparent) !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-card-glow,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-preview,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-steps,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-orbit {
  display: none !important;
}
@media (max-width: 420px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v14 {
    width: calc(100% - 18px) !important;
    margin-top: 14px !important;
    padding: 12px !important;
    grid-template-columns: 40px 1fr !important;
    gap: 10px !important;
    border-radius: 20px !important;
  }
  .sticker-empty-v14-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }
  .sticker-empty-v14-copy b {
    font-size: 13px !important;
  }
  .sticker-empty-v14-copy span,
  .sticker-empty-v14-hint {
    font-size: 11.2px !important;
  }
}


/* v15: rebuilt professional empty sticker state */
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v15,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v15 * {
  box-sizing: border-box !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v15 {
  all: unset !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: clamp(168px, 32vh, 248px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(8px, 2.4vh, 18px) 10px 14px !important;
  direction: rtl !important;
  color: var(--fg, #e7edf5) !important;
}
.sticker-empty-v15-shell {
  width: min(100%, 430px) !important;
  min-height: clamp(148px, 27vh, 218px) !important;
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: clamp(18px, 4.2vw, 28px) clamp(16px, 4vw, 26px) !important;
  overflow: hidden !important;
  text-align: center !important;
  border-radius: clamp(26px, 6vw, 34px) !important;
  background:
    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--accent, #3390ec) 15%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 3%, transparent)) !important;
  border: 1px solid color-mix(in srgb, currentColor 9%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.08) !important;
  isolation: isolate !important;
}
.sticker-empty-v15-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 14% -42% 14% !important;
  height: 70% !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, #3390ec) 14%, transparent), transparent 68%) !important;
  opacity: .72 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.sticker-empty-v15-art {
  width: 86px !important;
  height: 72px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 1px !important;
}
.sticker-empty-v15-card,
.sticker-empty-v15-badge {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 23px !important;
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
  border: 1px solid color-mix(in srgb, currentColor 9%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.10) !important;
}
.sticker-empty-v15-card {
  width: 48px !important;
  height: 48px !important;
  opacity: .52 !important;
}
.sticker-empty-v15-card.a {
  transform: translate(-23px, 7px) rotate(-11deg) !important;
}
.sticker-empty-v15-card.b {
  transform: translate(23px, 9px) rotate(12deg) !important;
}
.sticker-empty-v15-badge {
  width: 64px !important;
  height: 64px !important;
  color: color-mix(in srgb, var(--accent, #3390ec) 72%, currentColor) !important;
  background: linear-gradient(180deg, color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 5%, transparent)) !important;
}
.sticker-empty-v15-badge .ic,
.sticker-empty-v15-badge .sticker-main-svg {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
}
.sticker-empty-v15-copy {
  display: grid !important;
  gap: 5px !important;
  justify-items: center !important;
  max-width: 318px !important;
}
.sticker-empty-v15-copy b {
  margin: 0 !important;
  font-size: clamp(14.5px, 3.8vw, 16px) !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  color: color-mix(in srgb, currentColor 94%, transparent) !important;
}
.sticker-empty-v15-copy span {
  margin: 0 !important;
  font-size: clamp(11.7px, 3.15vw, 12.8px) !important;
  line-height: 1.75 !important;
  font-weight: 650 !important;
  color: color-mix(in srgb, currentColor 63%, transparent) !important;
}
.sticker-empty-v15-rail {
  display: grid !important;
  grid-auto-flow: column !important;
  gap: 6px !important;
  margin-top: 2px !important;
  opacity: .7 !important;
}
.sticker-empty-v15-rail i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent, #3390ec) 58%, currentColor) !important;
  display: block !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v14,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v13,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-polished {
  display: none !important;
}
@media (max-width: 430px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v15 {
    min-height: clamp(154px, 29vh, 214px) !important;
    padding: 8px 8px 12px !important;
  }
  .sticker-empty-v15-shell {
    min-height: 154px !important;
    padding: 17px 14px 18px !important;
    border-radius: 28px !important;
    gap: 8px !important;
  }
  .sticker-empty-v15-art {
    width: 78px !important;
    height: 62px !important;
  }
  .sticker-empty-v15-badge {
    width: 56px !important;
    height: 56px !important;
    border-radius: 20px !important;
  }
  .sticker-empty-v15-badge .ic,
  .sticker-empty-v15-badge .sticker-main-svg {
    width: 30px !important;
    height: 30px !important;
  }
  .sticker-empty-v15-card {
    width: 42px !important;
    height: 42px !important;
    border-radius: 18px !important;
  }
}
@media (min-width: 900px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v15 {
    min-height: 222px !important;
  }
  .sticker-empty-v15-shell {
    max-width: 400px !important;
  }
}


/* v16: compact production empty sticker state */
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v16,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v16 * {
  box-sizing: border-box;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v16 {
  grid-column: 1 / -1;
  width: min(420px, calc(100% - 28px));
  min-height: 0;
  height: auto;
  margin: 18px auto 10px;
  padding: 0;
  display: block;
  direction: rtl;
}
.sticker-empty-v16-shell {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
  backdrop-filter: blur(10px);
}
.sticker-empty-v16-mark {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: rgba(80, 210, 202, .92);
  background: linear-gradient(180deg, rgba(80, 210, 202, .14), rgba(80, 210, 202, .045));
  border: 1px solid rgba(80, 210, 202, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sticker-empty-v16-mark .ic,
.sticker-empty-v16-mark .sticker-main-svg {
  width: 24px;
  height: 24px;
  display: block;
}
.sticker-empty-v16-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: right;
}
.sticker-empty-v16-copy b {
  color: rgba(255, 255, 255, .91);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 750;
  letter-spacing: -.01em;
}
.sticker-empty-v16-copy span {
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 500;
  overflow-wrap: anywhere;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v15,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v14,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v13,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-polished {
  display: none !important;
}
@media (max-width: 520px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v16 {
    width: calc(100% - 18px);
    margin: 12px auto 8px;
  }
  .sticker-empty-v16-shell {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px;
    border-radius: 18px;
  }
  .sticker-empty-v16-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .sticker-empty-v16-copy b {
    font-size: 13.5px;
  }
  .sticker-empty-v16-copy span {
    font-size: 12px;
    line-height: 1.6;
  }
}
@media (min-width: 900px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v16 {
    margin-top: 22px;
  }
}


#emoji-picker .ep-grid.sticker-mode .sticker-empty-v17,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v17 * {
  box-sizing: border-box !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v17 {
  grid-column: 1 / -1 !important;
  inline-size: 100% !important;
  min-block-size: 118px !important;
  block-size: auto !important;
  margin: 0 !important;
  padding: 14px 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: initial !important;
  color: inherit !important;
  line-height: normal !important;
}
.sticker-empty-v17-shell {
  direction: ltr !important;
  inline-size: min(100%, 348px) !important;
  min-inline-size: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-template-areas: "copy icon" !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--ep-surface, #151b2b) 86%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ep-border, rgba(255,255,255,.13)) 72%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 24px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}
.sticker-empty-v17-copy {
  grid-area: copy !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: right !important;
  direction: rtl !important;
  gap: 2px !important;
}
.sticker-empty-v17-copy b,
.sticker-empty-v17-copy span {
  display: block !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  text-align: right !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}
.sticker-empty-v17-copy b {
  color: rgba(255,255,255,.9) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 760 !important;
  letter-spacing: -.01em !important;
}
.sticker-empty-v17-copy span {
  color: rgba(255,255,255,.55) !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  font-weight: 520 !important;
}
.sticker-empty-v17-mark {
  grid-area: icon !important;
  inline-size: 42px !important;
  block-size: 42px !important;
  min-inline-size: 42px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--accent, #35c8bf) !important;
  background: color-mix(in srgb, var(--accent, #35c8bf) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #35c8bf) 18%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.sticker-empty-v17-mark .ic,
.sticker-empty-v17-mark .sticker-main-svg {
  inline-size: 23px !important;
  block-size: 23px !important;
  display: block !important;
}
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v16,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v15,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v14,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-v13,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-polished,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-card-glow,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-preview,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-steps,
#emoji-picker .ep-grid.sticker-mode .sticker-empty-orbit {
  display: none !important;
}
@media (max-width: 520px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v17 {
    min-block-size: 104px !important;
    padding: 10px 8px 12px !important;
  }
  .sticker-empty-v17-shell {
    inline-size: min(100%, 318px) !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    column-gap: 10px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }
  .sticker-empty-v17-mark {
    inline-size: 38px !important;
    block-size: 38px !important;
    min-inline-size: 38px !important;
    border-radius: 14px !important;
  }
  .sticker-empty-v17-mark .ic,
  .sticker-empty-v17-mark .sticker-main-svg {
    inline-size: 21px !important;
    block-size: 21px !important;
  }
  .sticker-empty-v17-copy b {
    font-size: 13.5px !important;
  }
  .sticker-empty-v17-copy span {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}
@media (min-width: 900px) {
  #emoji-picker .ep-grid.sticker-mode .sticker-empty-v17 {
    min-block-size: 126px !important;
  }
  .sticker-empty-v17-shell {
    inline-size: 356px !important;
  }
}

.sticker-sheet-backdrop:not(.hidden) {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.sticker-sheet {
  height: min(76dvh, 640px) !important;
  max-height: calc(100dvh - 18px) !important;
  min-height: 420px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#sticker-sheet-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.sticker-sheet-head,
.sticker-sheet-actions {
  flex: 0 0 auto !important;
}
.sticker-sheet-grid-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
.sticker-sheet-grid {
  align-content: start !important;
  padding-bottom: 8px !important;
}
@media (max-width: 640px) {
  .sticker-sheet {
    width: 100vw !important;
    height: min(74dvh, 610px) !important;
    max-height: calc(100dvh - 12px) !important;
    min-height: 380px !important;
    border-radius: 26px 26px 0 0 !important;
  }
  .sticker-sheet-grid-scroll {
    padding: 6px 12px 12px !important;
  }
}
@media (max-height: 620px) {
  .sticker-sheet {
    height: calc(100dvh - 8px) !important;
    min-height: 0 !important;
  }
}


/* v26 composer/panel geometry: Telegram-like reserved space, no masking. */
body .composer.emoji-active {
  transform: none !important;
}
@media (max-width: 767px), (pointer: coarse) {
  #emoji-picker:not(.hidden) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--emoji-panel-height, 330px) !important;
    max-height: min(42svh, 360px) !important;
    min-height: 286px !important;
    border-radius: 20px 20px 0 0 !important;
    transform: none !important;
    z-index: 1190 !important;
    contain: layout paint style;
    will-change: height, bottom;
  }
  #emoji-picker.hidden {
    pointer-events: none !important;
  }
  #emoji-picker .ep-grid-container,
  #emoji-picker .sticker-grid,
  #emoji-picker .sticker-panel-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #messages {
    scroll-padding-bottom: var(--composer-reserved-space, 88px) !important;
  }
}

/* v27 Telegram panel geometry: composer sits above the emoji/sticker tray; tray sits at the screen bottom. */
body.sticker-panel-open .composer,
body.sticker-panel-open #composer {
  bottom: var(--emoji-panel-height, 330px) !important;
  transform: none !important;
  z-index: 1215 !important;
}
@media (max-width: 767px), (pointer: coarse) {
  body.sticker-panel-open #emoji-picker:not(.hidden) {
    bottom: 0 !important;
    top: auto !important;
    z-index: 1190 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  body.sticker-panel-open #messages {
    scroll-padding-bottom: var(--composer-reserved-space, calc(var(--emoji-panel-height, 330px) + 88px)) !important;
  }
}