/* =====================================================================
   chatfix.css  -  Chat on phones. LOADED LAST, so it wins over the older chat rules.

   What was wrong: chat.css, glass.css, refresh.css and coin.css each had their own idea of how tall the chat
   should be. Some of them let the whole chat scroll, which pushed the message box off the screen, and none of
   them dealt with the on-screen keyboard.

   Now, on phones:
     [ top bar ]
     [ Chat | Messages ]
     [ support / voice / search / trending ]   (scrolls on its own, never more than ~1/3 of the screen)
     [ messages ............................ ]   (the only part that grows; scrolls on its own)
     [ message box + send ]                      (always on screen)
     [ nav ]
   When the keyboard is up (html.ch-kb, set by chat.js) the chat is exactly as tall as the space above the
   keyboard, the nav is hidden, and the support / voice block folds away so the messages get the room.
   ===================================================================== */
@media(max-width:1023px){
  /* the whole chat is one fixed box between the top and the nav */
  html body #s-chat.on{
    position:fixed!important;left:0;right:0;
    top:var(--vv-t,0px);
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    height:auto!important;min-height:0!important;max-height:none!important;
    display:flex;flex-direction:column;overflow:hidden;
    animation:none!important;transform:none!important}
  html body.on-chat{padding-bottom:0!important}

  /* keyboard up: as tall as what's above the keyboard, no nav */
  html.ch-kb body #s-chat.on{bottom:auto;height:var(--vv-h,100%)!important}
  html.ch-kb body.on-chat .bar{display:none!important}
  html.ch-kb,html.ch-kb body{overflow:hidden!important}
  html.ch-kb body #s-chat .ch-side,
  html.ch-kb body #s-chat .ch-tabs{display:none!important}
  html.ch-kb body #s-chat .hd-row{padding-top:8px;padding-bottom:6px}

  html body #s-chat .hd,
  html body #s-chat .ch-tabs,
  html body #s-chat #ch-lock{flex:none}

  /* chat view: top block + messages + message box */
  html body #s-chat .ch-body:not([hidden]){
    flex:1 1 0!important;min-height:0!important;display:flex;flex-direction:column;
    overflow:hidden!important}
  html body #s-chat .ch-side{
    flex:0 1 auto!important;min-height:0;max-height:34%!important;
    overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html body #s-chat .ch-main{
    flex:1 1 0!important;min-height:0!important;
    display:flex;flex-direction:column;margin:8px 12px 10px!important}
  html body #s-chat .ch-main .ch-logwrap{flex:1 1 0;min-height:0!important}
  html body #s-chat .ch-log{-webkit-overflow-scrolling:touch}
  html body #s-chat .ch-compose{flex:none;padding:8px 0 2px!important}

  /* direct messages: inbox or thread fills the rest */
  html body #s-chat .ch-dmp:not([hidden]){
    flex:1 1 0!important;min-height:0!important;display:flex;flex-direction:column;
    overflow:hidden;padding-bottom:10px}
  html body #s-chat .dm-inbox:not([hidden]){flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  html body #s-chat .dm-thread:not([hidden]){flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  html body #s-chat .dm-log{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  /* iPhones zoom the whole page when you tap a box with text under 16px - that is what made chat jump around */
  html body #s-chat textarea,
  html body #s-chat input[type="text"],
  html body #s-chat input:not([type]){font-size:16px!important}
  html body #s-chat .ch-compose textarea{min-height:44px;line-height:1.3}

  /* long names / big coins never push the screen sideways */
  html body #s-chat .ch-main,html body #s-chat .ch-log,html body #s-chat .cm{max-width:100%;min-width:0}
  html body #s-chat .cm .cbd{overflow-wrap:anywhere}

  /* "new messages" pill sits above the message box, not behind it */
  html body #s-chat .ch-new{bottom:10px}
}

/* very short screens (landscape phones): the top block would eat everything */
@media(max-width:1023px) and (max-height:520px){
  html body #s-chat .ch-side{display:none!important}
  html body #s-chat .ch-tabs{padding-bottom:4px}
}