/* ARTIZS.SAY v0.5.19 — responsive cleanup, multiline composer, typing, media viewer, audible notifications */

/* Conversation content always wins over decoration. */
.chat-panel{isolation:isolate}
.room-cover{position:relative!important;isolation:isolate!important;contain:paint!important;overflow:hidden!important;z-index:1!important}
.messages{position:relative!important;z-index:2!important;background:var(--panel,#fff)!important}
.messages::before,.messages::after{content:none!important;display:none!important}
.global-cover-mascot{pointer-events:none!important}

/* Prevent a room mascot/SVG from escaping its sidebar slot on intermediate widths. */
.sidebar .room-icon,.sidebar .room-icon-badge{overflow:hidden!important;position:relative!important}
.sidebar .room-icon::before,.sidebar .room-icon::after,.sidebar .room-icon-badge::before,.sidebar .room-icon-badge::after{content:none!important;display:none!important}
.sidebar .room-mascot-2d{display:block!important;width:100%!important;height:100%!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;position:static!important;transform:none!important}
.brand-logo-viewport{overflow:hidden!important}

/* Hashtags should read like inline text controls, not broken fragments. */
.msg-hashtag{font:inherit;border:0;background:transparent;color:#2469d8;padding:0;cursor:pointer;text-decoration:none;font-weight:700}
.msg-hashtag:hover{text-decoration:underline}

/* Multiline composer. */
.composer{align-items:end!important}
.composer textarea#messageInput{
  display:block;
  width:100%;
  min-width:0;
  min-height:22px;
  max-height:132px;
  margin:0;
  border:0;
  outline:0;
  resize:none;
  overflow-y:hidden;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:1.45;
  padding:8px 5px;
}

/* Typing indicator floats above the composer so message history never jumps. */
.typing-indicator{
  position:absolute;
  left:18px;
  bottom:calc(100% + 6px);
  z-index:33;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:min(440px,calc(100vw - 44px));
  min-height:28px;
  padding:5px 10px;
  border:1px solid #e6e9ee;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#69717d;
  font-size:10px;
  font-weight:650;
  line-height:1.2;
  box-shadow:0 8px 22px rgba(20,24,32,.09);
  backdrop-filter:blur(7px);
  pointer-events:none;
}
.typing-dots{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.typing-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#7b8490;animation:sayTypingDot 1.1s infinite ease-in-out}
.typing-dots i:nth-child(2){animation-delay:.14s}.typing-dots i:nth-child(3){animation-delay:.28s}
@keyframes sayTypingDot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-3px);opacity:1}}

/* Audible settings troubleshooting. */
.sound-test-button{
  width:100%;
  margin-top:11px;
  border:1px solid #dfe4ea;
  border-radius:10px;
  background:#f7f9fb;
  color:#454d58;
  padding:8px 10px;
  font-size:9px;
  font-weight:850;
}
.sound-test-button:hover{background:#eef2f6}
.sound-test-button:disabled{opacity:.45;cursor:not-allowed}

/* Message image is an intentional viewer control. */
.msg-media-open{display:block;width:100%;padding:0;border:0;border-radius:16px;background:transparent;cursor:zoom-in;text-align:left;overflow:hidden}
.msg-media-open img{transition:transform .16s ease,filter .16s ease}
.msg-media-open:hover img{transform:scale(1.012);filter:brightness(.98)}

/* Fullscreen image viewer. */
.chat-image-lightbox{
  position:fixed;
  inset:0;
  z-index:240;
  display:flex;
  flex-direction:column;
  background:rgba(7,9,13,.94);
  color:#fff;
  overscroll-behavior:none;
}
.chat-image-toolbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  pointer-events:none;
}
.chat-image-toolbar>*{pointer-events:auto}
.chat-image-toolbar-actions{display:flex;align-items:center;gap:7px}
.chat-image-tool,.chat-image-download{
  height:38px;
  min-width:38px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:11px;
  background:rgba(20,23,29,.72);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(8px);
}
.chat-image-close{font-size:25px;font-weight:400;padding:0;width:38px}
.chat-image-zoom{font-size:20px;padding:0;width:38px}
.chat-image-zoom-value{min-width:45px;text-align:center;font-size:10px;color:#dce2ea;font-variant-numeric:tabular-nums}
.chat-image-download span:first-child{font-size:18px;line-height:1}
.chat-image-stage{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  cursor:zoom-in;
}
.chat-image-stage.is-zoomed{cursor:grab}
.chat-image-stage.is-zoomed:active{cursor:grabbing}
.chat-image-stage img{
  display:block;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 44px);
  width:auto;
  height:auto;
  object-fit:contain;
  transform-origin:center center;
  will-change:transform;
  transition:transform .08s linear;
  pointer-events:none;
  -webkit-user-drag:none;
}
body.chat-image-viewer-open{overflow:hidden!important}

html[data-theme="dark"] .typing-indicator{background:rgba(23,29,37,.96);border-color:#333d49;color:#b4bfcc}
html[data-theme="dark"] .sound-test-button{background:#1a222b;border-color:#34404c;color:#e6edf5}
html[data-theme="dark"] .msg-hashtag{color:#72a7ff}

/* Medium desktop/tablet: remove decorative cover mascot before it can overlap chat. */
@media(max-width:1199px){
  .global-cover-mascot{display:none!important}
  .room-cover.source-global-cover:after{display:none!important}
  .sidebar{overflow:hidden!important}
  .sidebar .room-item{overflow:hidden!important}
}

@media(max-width:980px){
  /* Intermediate desktop/tablet must remain structurally clean. */
  .chat-panel{z-index:1}
  .room-cover{flex:0 0 auto!important;max-width:100%!important}
  .messages{flex:1 1 auto!important;min-height:0!important}
  .sidebar .room-icon,.sidebar .room-icon-badge{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;border-radius:10px!important}
}

@media(max-width:700px){
  /* Mobile is chat-first. No decorative mascot is allowed behind the conversation. */
  .global-cover-mascot,.global-empty-mascot{display:none!important}
  .room-cover{height:72px!important;max-height:72px!important;min-height:0!important}
  .room-cover.collapsed{height:0!important;max-height:0!important}
  .messages{background:#fff!important}
  .composer textarea#messageInput{font-size:16px!important;max-height:112px;padding:7px 3px!important}
  .typing-indicator{left:10px;bottom:calc(100% + 5px);max-width:calc(100vw - 20px);font-size:9px;min-height:26px;padding:5px 9px}
  .desktop-image-zoom{display:none!important}
  .chat-image-toolbar{padding-left:10px;padding-right:10px}
  .chat-image-download{height:40px;padding:0 12px;font-size:11px}
  .chat-image-tool{height:40px;min-width:40px}
  .chat-image-stage img{max-width:100vw;max-height:100dvh}
}

/* v0.5.19 hardening: the sidebar room mascot must never escape into a large circle/shape. */
.sidebar .room-icon,.sidebar .room-icon-badge{
  width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;
  flex:0 0 38px!important;border-radius:10px!important;overflow:hidden!important;
  contain:layout paint!important;isolation:isolate!important;
}
.sidebar .room-icon>img,.sidebar .room-icon-badge>img{
  width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;
  object-fit:contain!important;object-position:center!important;position:static!important;
  inset:auto!important;transform:none!important;filter:none!important;
}

/* The actual image receives pointer events; backdrop clicks close the viewer, image clicks do not. */
.chat-image-stage img{pointer-events:auto!important;touch-action:none}

@media(max-width:700px){
  html[data-theme="dark"] .messages{background:#0d1117!important}
}