[hidden] { display: none !important; }

@media (min-width: 901px) {
  body { padding: 22px; min-height: 100vh; background: #eef0f6; }
  #app { width: min(1280px, 100%); min-height: 0; height: calc(100vh - 44px); margin: 0 auto; grid-template-columns: 205px minmax(0, 1fr); border: 1px solid #e2e5ed; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 55px rgba(34, 42, 72, .12); background: #f7f8fc; }
  aside { width: 205px; height: 100%; min-height: 0; position: relative; padding: 20px 14px 15px; overflow: hidden; }
  .brand { padding-bottom: 20px; }
  .workspace { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }
  .workspace header { height: 76px; padding: 16px 22px; }
  .workspace h1 { font-size: 19px; }
  .desk { height: auto; min-height: 0; flex: 1; grid-template-columns: 300px minmax(0, 1fr); padding: 15px 18px 18px; gap: 12px; overflow: hidden; }
  .tickets, .chat { height: 100%; min-height: 0; }
  .tickets { display: flex; flex-direction: column; }
  #ticketList { flex: 1; min-height: 0; overflow-y: auto; }
  .chat { display: block; }
  #chatView { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  #chatView[hidden] { display: none !important; }
  .ticket-title { height: 52px; }
  .ticket { padding: 12px 14px; }
  .chat-head { height: 68px; padding: 12px 17px; }
  #messages { height: auto !important; min-height: 0; flex: 1; padding: 15px 17px; overflow-y: auto; }
  #sendForm { flex: 0 0 auto; padding: 10px 14px; background: #fff; }
  #sendForm textarea { height: 46px; }
  .safe { flex: 0 0 auto; }
  .account { flex: 0 0 auto; background: #fff; }
}

@media (max-width: 900px) {
  body { padding: 0; background: #f5f6fa; }
  #app { display: block; min-height: 100vh; }
  aside { position: relative; width: 100%; height: 58px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; }
  .brand { padding: 0; gap: 8px; }
  .brand > b { width: 32px; height: 32px; }
  .brand span { font-size: 14px; }
  aside nav, .safe { display: none; }
  .account { position: static; margin: 0 0 0 auto; padding: 0; border: 0; }
  .account > span { width: 30px; height: 30px; }
  .account div { display: block; }
  .account a { margin-left: 5px; }
  .workspace header { height: 67px; padding: 12px 14px; }
  .workspace h1 { font-size: 17px; }
  .workspace header p { font-size: 10px; }
  .sound-btn, .primary { padding: 9px 11px !important; }
  .desk { display: grid; grid-template-columns: 1fr; height: auto; padding: 10px; gap: 10px; }
  .tickets { max-height: 230px; border-radius: 11px; }
  .ticket-title { height: 48px; }
  .ticket-title input { width: 130px; }
  .ticket { padding: 11px 13px; }
  .chat { min-height: 560px; border-radius: 11px; }
  #chatView { display: flex; flex-direction: column; min-height: 560px; }
  #chatView[hidden] { display: none !important; }
  .chat-head { height: 66px; padding: 11px 13px; }
  .chat-head h2 { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .privacy { padding: 7px 12px; font-size: 9px; }
  #messages { height: 355px; min-height: 0; padding: 13px; overflow-y: auto; }
  .message { max-width: 88%; }
  .attachment img, .attachment video { max-width: min(240px, 65vw); }
  #sendForm { padding: 10px 12px; }
  #sendForm textarea { height: 52px; }
  #fileName { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 480px) {
  .account div { display: none; }
  .workspace header p { display: none; }
  .tickets { max-height: 205px; }
  .chat { min-height: 535px; }
  #messages { height: 340px; }
  .chat-head h2 { max-width: 180px; }
}
.screen-shot { border: 0; background: transparent; padding: 0; white-space: nowrap; }