/* ARTIZS.SAY v0.5.19.1 — intermediate-width responsive hotfix
   Fixes the oversized black search SVG and switches narrow desktop/tablet to chat-first drawers. */

/* Keep Room Search self-contained at every breakpoint.
   Without an explicit SVG size/fill below the desktop handoff breakpoint,
   the browser can render the inline SVG at its intrinsic size with a black fill. */
.sidebar .room-search{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  margin:1px 0 12px!important;
  padding:0 12px!important;
  border:1px solid #e5e7eb!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#94a3b8!important;
  overflow:hidden!important;
}
.sidebar .room-search svg{
  display:block!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  overflow:visible!important;
}
.sidebar .room-search input{
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#232936!important;
  font-size:11px!important;
  line-height:1!important;
}
.sidebar .room-search input::placeholder{color:#9ca3af!important}
.sidebar .room-search:focus-within{border-color:#bfdbfe!important;box-shadow:0 0 0 3px #eff6ff!important}

html[data-theme="dark"] .sidebar .room-search{
  background:#171d25!important;
  border-color:#303a46!important;
  color:#9aa7b5!important;
}
html[data-theme="dark"] .sidebar .room-search input{color:#e5e7eb!important}

/* 3-column desktop starts at 1200px. Below that, conversation is the primary surface.
   Rooms and Room info become drawers instead of squeezing the conversation. */
@media(max-width:1199px){
  :root{--sidebar-w:0px!important;--people-w:0px!important}
  .app-shell{
    display:block!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .chat-panel{
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
  }

  .sidebar,.people-panel{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    height:100dvh!important;
    z-index:61!important;
    background:var(--panel,#fbfbfc)!important;
    transition:transform .22s cubic-bezier(.2,.75,.25,1)!important;
    will-change:transform;
  }
  .sidebar{
    left:0!important;
    right:auto!important;
    width:min(86vw,320px)!important;
    max-width:320px!important;
    transform:translateX(-103%)!important;
    box-shadow:14px 0 45px rgba(24,27,33,.13)!important;
    padding-top:16px!important;
  }
  .people-panel{
    left:auto!important;
    right:0!important;
    width:min(88vw,330px)!important;
    max-width:330px!important;
    transform:translateX(103%)!important;
    box-shadow:-14px 0 45px rgba(24,27,33,.13)!important;
    padding-top:16px!important;
  }
  .sidebar.open,.people-panel.open{transform:translateX(0)!important}

  .rooms-responsive-btn,.people-responsive-btn{display:inline-flex!important}
  .mobile-drawer-close{display:grid!important;place-items:center!important}
  .sidebar .brand{padding-right:38px!important}
  .layout-edge-toggle,.desktop-layout-action{display:none!important}

  /* Decorative artwork never enters the conversation at compact desktop widths. */
  .global-cover-mascot,.global-empty-mascot{display:none!important}
  .room-cover.source-global-cover:after{display:none!important}
  .messages{background:var(--panel,#fff)!important}
}

@media(max-width:700px){
  .sidebar{width:min(86vw,320px)!important}
  .people-panel{width:min(88vw,330px)!important}
}