/* Shared safe-area and keyboard geometry for the two messaging screens. */
:root {
  --yl-chat-viewport-height:100dvh;
  --yl-chat-viewport-top:0px;
  --yl-chat-dock-space:calc(84px + env(safe-area-inset-bottom, 0px));
  --yl-chat-available:calc(var(--yl-chat-viewport-height) - var(--yl-chat-dock-space));
}
.yl-wa-app { height:var(--yl-chat-available)!important; }
.yl-wa-shell.yl-chat-shell { height:calc(var(--yl-chat-available) - 36px)!important; }
#ylAccountApp[hidden], #ylMessageForm[hidden] { display:none!important; }
.yl-wa-shell .yl-chat-composer {
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))!important;
  padding-left:max(16px, env(safe-area-inset-left, 0px))!important;
  padding-right:max(16px, env(safe-area-inset-right, 0px))!important;
}
.yl-chat-composer textarea,
.conversation-composer textarea,
.conversation-composer select {
  font-size:16px!important;
}
.conversation-composer {
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left:max(8px, env(safe-area-inset-left, 0px));
  padding-right:max(8px, env(safe-area-inset-right, 0px));
}
body.conversation-focus-mode {
  width:100%;
  max-width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body.conversation-focus-mode #tab-conversations,
body.conversation-focus-mode #tab-conversations .conversation-card,
body.conversation-focus-mode #tab-conversations .conversation-shell,
body.conversation-focus-mode #tab-conversations .conversation-main,
body.conversation-focus-mode #tab-conversations #conversationPanel:not(.hidden) {
  width:100%;
  max-width:100%;
  min-width:0;
}
body.conversation-focus-mode #tab-conversations .conversation-card,
body.conversation-focus-mode #tab-conversations .conversation-shell,
body.conversation-focus-mode #tab-conversations .conversation-main,
body.conversation-focus-mode #tab-conversations #conversationPanel:not(.hidden) {
  height:var(--yl-chat-viewport-height);
  min-height:0;
}
body.conversation-focus-mode #tab-conversations .conversation-card {
  position:fixed;
  inset-inline:0;
  top:0;
  width:100vw;
  max-width:100vw;
  overflow:hidden;
}
body.conversation-focus-mode .conversation-header { padding-top:max(6px, env(safe-area-inset-top, 0px)); }
.conversation-main, .conversation-list, .conversation-item { min-width:0; }
@media(max-width:900px) {
  .yl-wa-app, .yl-wa-shell.yl-chat-shell,
  .yl-wa-shell .yl-chat-sidebar, .yl-wa-shell .yl-chat-main {
    height:var(--yl-chat-available)!important;
  }
  .yl-wa-app { position:fixed!important; top:var(--yl-chat-viewport-top); inset-inline:0; }
  .yl-chat-keyboard-open { --yl-chat-dock-space:0px; }
  .yl-chat-keyboard-open .yl-community-dock { display:none!important; }
}

/* Override the legacy full-height frame, including its body-scoped rules. */
html body main.yl-wa-app {
  position:fixed!important; top:var(--yl-chat-viewport-top)!important;
  left:0!important; right:0!important; margin:0 auto!important;
  height:var(--yl-chat-available)!important; min-height:0!important;
}
html body main.yl-wa-app #ylAccountApp.yl-wa-shell {
  height:calc(var(--yl-chat-available) - 36px)!important; min-height:0!important;
}
html body main.yl-wa-app #ylAccountApp .yl-chat-main,
html body main.yl-wa-app #ylAccountApp .yl-chat-sidebar {
  height:100%!important; min-height:0!important;
}
@media(max-width:900px) {
  html body main.yl-wa-app #ylAccountApp.yl-wa-shell { height:var(--yl-chat-available)!important; }
}

@media(max-width:760px) {
  body.conversation-focus-mode #tab-conversations .conversation-header,
  body.conversation-focus-mode #tab-conversations .conversation-composer,
  body.conversation-focus-mode #tab-conversations .conversation-messages {
    width:100%;
    max-width:100vw;
    min-width:0;
  }
  body.conversation-focus-mode #tab-conversations .conversation-header {
    overflow:hidden;
  }
  body.conversation-focus-mode #tab-conversations .conversation-header-main {
    min-width:0;
    overflow:hidden;
  }
  body.conversation-focus-mode #tab-conversations .conversation-input-shell,
  body.conversation-focus-mode #tab-conversations .conversation-composer select,
  body.conversation-focus-mode #tab-conversations .conversation-composer textarea {
    width:100%;
    max-width:100%;
    min-width:0;
  }
}