/* РЯДОМ · Chat 2026.11 — desktop, Android web and iPhone web.
   A skin only: preserve message DOM, read receipts, encryption, wallpapers,
   audio/recording handlers, attachments and native WebView keyboard behavior. */
#pane-chat{
  --chat-shadow:0 4px 16px rgba(50,38,88,.07);
  --chat-gutter:clamp(13px,2.8vw,32px);
  min-width:0;
  min-height:0;
  isolation:isolate;
}
body.rl-theme #pane-chat .chat-appearance-row{
  display:flex;align-items:center;gap:11px;min-height:66px;
  padding:10px var(--chat-gutter);
  background:var(--chat-surface);
  border-bottom:1px solid var(--chat-border);
}
#pane-chat .chat-header-mark{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  border-radius:15px;background:linear-gradient(145deg,#9676e2,#6e52c3);
  color:#fff;box-shadow:0 4px 12px rgba(100,75,170,.17);
}
#pane-chat .chat-header-mark svg{display:block;width:24px;height:24px}
#pane-chat .chat-section-intro{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:2px;min-width:0}
#pane-chat .chat-section-title{
  color:var(--chat-heading);font-size:16px;font-weight:740;
  line-height:1.2;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.rl-theme #pane-chat .chat-appearance-row .verified-presence{
  display:block;flex:none;min-width:0;margin:0;padding:0;
  color:var(--chat-muted);font-size:11.5px;line-height:1.35;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
body.rl-theme #pane-chat .chat-appearance-row :is(.chat-theme-button,.chat-history-help summary){
  display:grid;place-items:center;flex:none;width:40px;min-width:40px;
  height:40px;min-height:40px;padding:8px;border-radius:13px;
  color:var(--chat-accent);background:var(--chat-tint);
  border:1px solid var(--chat-border);box-shadow:none;
}
body.rl-theme #pane-chat .chat-appearance-row :is(.chat-theme-button,.chat-history-help summary):active{
  background:var(--chat-tint);transform:scale(.96);
}
#pane-chat .chat-history-help p{
  max-width:min(290px,calc(100vw - 24px));box-shadow:0 14px 40px rgba(39,25,77,.15);
}
body.rl-theme #pane-chat #log{
  min-height:0;flex:1 1 auto;
  padding:18px var(--chat-gutter) 15px;
  scroll-padding-bottom:24px;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(116,92,157,.35) transparent;
}
#pane-chat #log:empty::before{
  content:"Здесь появятся сообщения вашей комнаты";
  display:block;width:max-content;max-width:90%;
  margin:20px auto;padding:12px 16px;border-radius:15px;
  color:var(--chat-muted);background:var(--chat-surface);
  font-size:12px;text-align:center;
}
body.rl-theme #pane-chat .msg{margin-bottom:4px}
body.rl-theme #pane-chat .msg.group-start{margin-top:13px}
body.rl-theme #pane-chat .msg.grouped{margin-top:1px}
body.rl-theme #pane-chat .bubble{
  min-width:0;max-width:min(78%,610px);
  padding:10px 13px 7px;
  border-radius:17px 17px 17px 6px;
  box-shadow:0 2px 9px rgba(47,34,83,.06);
  line-height:1.46;overflow-wrap:anywhere;
}
body.rl-theme #pane-chat .msg.me .bubble{
  border-radius:17px 17px 6px 17px;
  box-shadow:0 2px 10px rgba(78,58,151,.08);
}
body.rl-theme #pane-chat .bubble > b{
  margin-bottom:4px;font-size:11px;font-weight:700;line-height:1.25;
}
body.rl-theme #pane-chat .message-text{
  font-size:14.5px;line-height:1.46;
  letter-spacing:.002em;overflow-wrap:anywhere;
}
body.rl-theme #pane-chat .message-meta{
  min-height:10px;margin-top:4px;gap:4px;
}
body.rl-theme #pane-chat .message-time{
  font-size:10px;line-height:1.15;opacity:.74;
  font-variant-numeric:tabular-nums;
}
body.rl-theme #pane-chat .bubble .quote{
  margin-bottom:6px;padding:7px 9px;
  background:color-mix(in srgb,var(--chat-accent) 9%,transparent);
}
body.rl-theme #pane-chat .bubble .quote span{font-size:12px;line-height:1.35}
body.rl-theme #pane-chat .msg.admin{margin:10px 0}
body.rl-theme #pane-chat .msg.admin .bubble{
  min-width:0;padding:5px 11px;border-radius:999px;
  box-shadow:none;border:1px solid var(--chat-border);
}
body.rl-theme #pane-chat #typing{
  padding:4px var(--chat-gutter) 0;font-size:11px;line-height:1.3;
}
body.rl-theme #pane-chat #replyDraft{
  padding:7px var(--chat-gutter) 0;gap:7px;
}
body.rl-theme #pane-chat #replyDraft .quote{padding:7px 10px}
body.rl-theme #pane-chat #cancelReply{min-width:40px;min-height:40px}
body.rl-theme #pane-chat > .chat-composer{
  display:grid;grid-template-columns:minmax(0,1fr) 44px 46px;
  align-items:end;gap:7px;
  padding:9px var(--chat-gutter) calc(9px + var(--ryadom-safe-bottom));
  border-top:1px solid var(--chat-border);
  background:var(--chat-surface);box-shadow:0 -5px 20px rgba(46,33,83,.035);
}
body.rl-theme #pane-chat .chat-input-shell{
  display:grid;grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:end;padding:1px 3px;min-width:0;
  border-radius:23px;background:var(--rl-surface-muted,var(--chat-tint));
  border:1px solid var(--chat-border);
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.rl-theme #pane-chat .chat-input-shell:focus-within{
  border-color:var(--chat-accent);box-shadow:0 0 0 3px rgba(118,96,189,.1);
}
body.rl-theme #pane-chat :is(#text,#richText){
  min-width:0;min-height:43px;max-height:112px;
  padding:10px 2px;font-size:16px;line-height:23px;
  background:transparent;color:var(--chat-heading);
}
body.rl-theme #pane-chat #text{height:43px}
body.rl-theme #pane-chat :is(#chatMoreBtn,#emojiToggleBtn){
  min-width:42px;width:42px;height:43px;min-height:43px;
  margin:0;padding:8px;border-radius:15px;box-shadow:none;
}
body.rl-theme #pane-chat #openRecorder{
  width:44px;min-width:44px;height:45px;min-height:45px;
  border-radius:15px;box-shadow:none;
}
body.rl-theme #pane-chat #send{
  width:46px;min-width:46px;height:46px;min-height:46px;
  border-radius:17px;
  box-shadow:0 5px 13px rgba(95,67,172,.19);
}
body.rl-theme #pane-chat #send:active{transform:scale(.96);box-shadow:none}
#pane-chat .record-mode-hint{
  /* Keep the dynamic recorder instruction available to screen readers. */
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}
body.rl-theme #pane-chat #chatMoreTools.on{
  padding:11px var(--chat-gutter);gap:8px;
  border-top:1px solid var(--chat-border);
}
body.rl-theme #pane-chat .chat-tool-pill{
  min-width:0;min-height:66px;padding:10px 7px;
  border:1px solid var(--chat-border);border-radius:15px;
  font-size:12px;line-height:1.25;
}
body.rl-theme #pane-chat #quickStatuses{padding:4px 0 0;gap:7px}
body.rl-theme #pane-chat .quick-status-btn{
  min-height:33px;padding:7px 11px;border-radius:999px;font-size:11.5px;
}
body.rl-theme #pane-chat #chatActionStatus{
  top:9px;max-width:calc(100% - 24px);
  padding:10px 14px;border-radius:13px;
}
/* The user can still select any custom wallpaper; no new background image replaces it. */
body.rl-theme[data-theme="night"] #pane-chat .chat-header-mark{
  background:linear-gradient(140deg,#8b74cd,#625296);
}
body.rl-theme[data-theme="night"] #pane-chat .chat-input-shell{
  background:var(--rl-surface-muted,#303144);
}
@media (min-width:900px){
  html.ryadom-desktop-ui body.rl-theme #pane-chat{
    width:calc(100% - 48px);max-width:1390px;
    margin:20px auto;border-radius:25px;
  }
  html.ryadom-desktop-ui body.rl-theme #pane-chat .chat-appearance-row{
    padding-inline:clamp(24px,4vw,45px);
  }
  html.ryadom-desktop-ui body.rl-theme #pane-chat #log{
    padding-top:22px;padding-bottom:22px;
  }
  html.ryadom-desktop-ui body.rl-theme #pane-chat .bubble{
    max-width:min(72%,650px);
  }
}
@media (max-width:700px) and (pointer:coarse){
  body.rl-theme #pane-chat{--chat-gutter:10px}
  body.rl-theme #pane-chat .chat-appearance-row{
    min-height:57px;padding:7px var(--chat-gutter);gap:8px;
  }
  #pane-chat .chat-header-mark{
    flex-basis:36px;width:36px;height:36px;border-radius:12px;box-shadow:none;
  }
  #pane-chat .chat-header-mark svg{width:21px;height:21px}
  #pane-chat .chat-section-title{font-size:14px;line-height:1.2}
  body.rl-theme #pane-chat .chat-appearance-row .verified-presence{
    font-size:10.5px;line-height:1.2;
  }
  body.rl-theme #pane-chat .chat-appearance-row :is(.chat-theme-button,.chat-history-help summary){
    width:38px;min-width:38px;height:38px;min-height:38px;
    border-radius:12px;padding:7px;
  }
  body.rl-theme #pane-chat #log{
    padding:8px var(--chat-gutter) 10px;
    scroll-padding-bottom:16px;
  }
  body.rl-theme #pane-chat .msg{margin-bottom:3px}
  body.rl-theme #pane-chat .msg.group-start{margin-top:10px}
  body.rl-theme #pane-chat .bubble{
    max-width:88%;padding:8px 11px 6px;
    border-radius:15px 15px 15px 5px;
  }
  body.rl-theme #pane-chat .msg.me .bubble{
    border-radius:15px 15px 5px 15px;
  }
  body.rl-theme #pane-chat .message-text{
    font-size:14px;line-height:1.4;
  }
  body.rl-theme #pane-chat .message-meta{margin-top:3px}
  body.rl-theme #pane-chat .bubble > b{margin-bottom:3px}
  body.rl-theme #pane-chat .msg.admin{margin:7px 0}
  body.rl-theme #pane-chat #typing{padding-top:3px}
  body.rl-theme #pane-chat #replyDraft{padding-top:5px}
  body.rl-theme #pane-chat > .chat-composer{
    grid-template-columns:minmax(0,1fr) 42px 44px;
    gap:5px;padding:5px var(--chat-gutter) calc(5px + var(--ryadom-safe-bottom));
  }
  body.rl-theme #pane-chat .chat-input-shell{
    grid-template-columns:40px minmax(0,1fr) 40px;
    border-radius:21px;padding:1px 2px;
  }
  body.rl-theme #pane-chat :is(#text,#richText){
    min-height:42px;max-height:102px;
    padding:9px 2px;font-size:16px;line-height:23px;
  }
  body.rl-theme #pane-chat #text{height:42px}
  body.rl-theme #pane-chat :is(#chatMoreBtn,#emojiToggleBtn){
    min-width:40px;width:40px;height:42px;min-height:42px;padding:8px;
  }
  body.rl-theme #pane-chat #openRecorder{
    min-width:42px;width:42px;height:44px;min-height:44px;
  }
  body.rl-theme #pane-chat #send{
    min-width:44px;width:44px;height:44px;min-height:44px;border-radius:15px;
  }
  body.rl-theme #pane-chat > .emojis{
    flex-basis:38%;max-height:260px;
  }
  body.rl-theme #pane-chat .telegram-emoji-grid{grid-template-columns:repeat(auto-fill,minmax(43px,1fr))}
  body.rl-theme #pane-chat .telegram-emoji-grid button{min-width:43px;height:43px}
  body.ryadom-ios-chat #app.chat-ios-focused > nav{display:none!important}
  body.ryadom-ios-chat #app.chat-ios-focused #pane-chat .chat-appearance-row{
    min-height:50px;padding-top:5px;padding-bottom:5px;
  }
  body.ryadom-ios-chat #app.chat-ios-keyboard{
    height:min(100dvh,var(--chat-ios-height,100dvh));
    max-height:min(100dvh,var(--chat-ios-height,100dvh));
  }
  body.ryadom-ios-chat #app.chat-ios-focused #pane-chat > .chat-composer{
    padding-bottom:5px;
  }
  body.ryadom-ios-chat #app.chat-ios-focused #pane-chat #log{
    padding-top:6px;padding-bottom:6px;
  }
}
@media (max-width:370px) and (pointer:coarse){
  body.rl-theme #pane-chat{--chat-gutter:7px}
  #pane-chat .chat-header-mark{flex-basis:33px;width:33px;height:33px}
  body.rl-theme #pane-chat .chat-appearance-row{gap:6px}
  body.rl-theme #pane-chat .chat-appearance-row :is(.chat-theme-button,.chat-history-help summary){
    min-width:35px;width:35px;min-height:35px;height:35px;
  }
  body.rl-theme #pane-chat .chat-input-shell{grid-template-columns:38px minmax(0,1fr) 38px}
  body.rl-theme #pane-chat :is(#chatMoreBtn,#emojiToggleBtn){width:38px;min-width:38px}
}
@media (max-height:540px) and (max-width:700px){
  body.rl-theme #pane-chat .chat-appearance-row{min-height:46px}
  body.rl-theme #pane-chat #log{padding-top:5px;padding-bottom:5px}
}
@media (prefers-reduced-motion:reduce){
  #pane-chat .chat-input-shell,#pane-chat #send{transition:none!important}
}