/* ARTIZS.SAY v0.5.18 — live chat, guest read-only and mobile chat-first polish */

/* Message delivery / read-state details */
.msg-read-count{
  margin-left:5px;
  font-size:9px;
  line-height:1;
  color:#a0a4ad;
  white-space:nowrap;
}
.new-message-jump{
  position:absolute;
  right:22px;
  bottom:78px;
  z-index:24;
  border:1px solid #dfe3e9;
  background:#fff;
  color:#262a31;
  border-radius:999px;
  padding:8px 12px;
  font-size:10px;
  font-weight:800;
  box-shadow:0 10px 28px rgba(24,28,36,.13);
}
.new-message-jump:hover{background:#f7f8fa}

/* Guest can watch public rooms; writing is the login boundary. */
.guest-composer-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:48px;
  border:1px solid #e1e4e9;
  border-radius:15px;
  background:#f8f9fb;
  padding:7px 8px 7px 14px;
}
.guest-composer-cta>span{font-size:10px;color:#777d87;line-height:1.4}
.guest-composer-cta>button{
  flex:0 0 auto;
  border:0;
  border-radius:11px;
  background:#17191e;
  color:#fff;
  padding:10px 13px;
  font-size:10px;
  font-weight:850;
}

/* Sound settings now have two independent event types. */
.sound-popover .sound-row+.sound-row{margin-top:10px;padding-top:10px;border-top:1px solid #eef0f3}
.sound-popover .mini-toggle:disabled,.sound-popover input:disabled{opacity:.45;cursor:not-allowed}

/* Mobile drawers */
.mobile-drawer-scrim{position:fixed;inset:0;z-index:54;background:rgba(16,20,27,.28);backdrop-filter:blur(1.5px)}
.mobile-drawer-close{display:none!important;position:absolute;top:10px;right:10px;z-index:4;width:32px;height:32px;border:1px solid #e4e7eb;border-radius:10px;background:#fff;color:#59606a;font-size:20px;line-height:1}

html[data-theme="dark"] .msg-read-count{color:#7f8996}
html[data-theme="dark"] .new-message-jump{background:#1b222b;border-color:#35404d;color:#eef2f6}
html[data-theme="dark"] .guest-composer-cta{background:#151b22;border-color:#303945}
html[data-theme="dark"] .guest-composer-cta>span{color:#9da8b5}
html[data-theme="dark"] .guest-composer-cta>button{background:#eef2f6;color:#171b20}
html[data-theme="dark"] .sound-popover .sound-row+.sound-row{border-color:#303844}
html[data-theme="dark"] .mobile-drawer-close{background:#171d25;border-color:#303a46;color:#d8dfe7}

@media(max-width:980px){
  .people-panel{z-index:60}
  .mobile-drawer-scrim{display:block}
}

/* Mobile is a separate chat-first composition, not a scaled desktop canvas. */
@media(max-width:700px){
  :root{--cover-h:86px}
  .app-shell{height:100dvh;min-height:100dvh}
  .chat-panel{height:100dvh;min-height:0}

  .mobile-drawer-close{display:grid!important;place-items:center}
  .sidebar{
    z-index:61;
    width:min(86vw,320px);
    padding-top:16px;
  }
  .people-panel{
    z-index:61;
    width:min(88vw,330px);
    padding-top:16px;
  }
  .sidebar .brand{padding-right:38px}

  .room-meta-strip{
    min-height:58px;
    padding:7px 9px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:7px;
  }
  .room-meta-identity{width:100%;min-width:0;align-items:center}
  .room-meta-icon{width:28px;height:28px;flex:0 0 28px}
  .room-meta-copy{min-width:0;flex:1}
  .room-meta-copy p,.room-meta-presence{display:none!important}
  .room-meta-title-line{width:100%;min-width:0;gap:3px;flex-wrap:nowrap}
  .room-meta-title-line h1{font-size:15px;min-width:0;max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .room-meta-title-line #roomOnline{font-size:9px;white-space:nowrap}
  .room-title-action{width:28px;height:28px;flex:0 0 28px}
  .room-title-sound{margin-left:auto}
  .official-badge{font-size:7px;padding:3px 5px}
  .live-dot{width:6px;height:6px;flex:0 0 6px}

  .room-cover{height:86px;max-height:86px}
  .room-cover.collapsed{max-height:0}
  .message-filter{flex:0 0 auto}

  .messages{
    flex:1 1 auto;
    min-height:0;
    padding:9px 11px 16px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .message{grid-template-columns:32px minmax(0,1fr);gap:8px;padding:8px 0}
  .message .message-avatar,.message-avatar-presence .avatar{width:32px;height:32px}
  .msg-head{gap:5px;min-width:0;flex-wrap:wrap}
  .msg-name{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .msg-time,.msg-read-count{font-size:8px}
  .msg-body{font-size:12px;line-height:1.5}

  .composer-wrap{
    flex:0 0 auto;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  }
  .composer{
    min-height:44px;
    grid-template-columns:32px 32px 32px minmax(0,1fr) 38px;
    border-radius:15px;
    gap:2px;
    padding:4px;
  }
  .composer-icon-btn{width:30px;height:30px;border-radius:9px}
  .composer #messageInput{font-size:16px;padding:8px 3px} /* avoid iOS focus zoom */
  .send-btn{width:36px;height:34px;padding:0;display:grid;place-items:center}
  .send-btn svg{width:16px;height:16px}
  .guest-composer-cta{min-height:50px;padding:6px 6px 6px 11px;gap:8px}
  .guest-composer-cta>span{font-size:9px}
  .guest-composer-cta>button{padding:10px 11px;font-size:9px}

  .new-message-jump{
    right:12px;
    bottom:calc(70px + env(safe-area-inset-bottom));
    padding:8px 11px;
    font-size:9px;
  }

  .sound-popover{width:min(286px,calc(100vw - 18px));left:auto!important;right:0!important}
  .sound-row strong{font-size:11px}.sound-row small{font-size:8px}

  .people-utility{padding-right:38px}
}

@media(max-width:430px){
  .official-badge{display:none}
  .room-meta-title-line h1{max-width:29vw}
  .room-meta-title-line #roomOnline{max-width:62px;overflow:hidden;text-overflow:ellipsis}
  .guest-composer-cta>span{display:none}
  .guest-composer-cta>button{width:100%}
}