/* Only included in the explicitly selected web entry build. */
@media (max-width: 600px) {
  body[data-web-entry] { overflow-y: auto; }
  body[data-web-entry] .tioimcontainer > .bodycontent { position: relative; height: auto; min-height: 100vh; display: block; }
  body[data-web-entry] .bodycontent > .swiper-content { display: none; }
  body[data-web-entry] .bodycontent > .form-content { width: 100%; padding: 40px 24px; box-sizing: border-box; background: none; }
  body[data-web-entry] .form-content > .login-content { width: 100%; padding-left: 0; align-items: center; }
  body[data-web-entry] .form-content .form-tab { max-width: 100%; justify-content: center; }
  body[data-web-entry] .form-content .user-form { max-width: 100%; }
  body[data-web-entry] .form-content .otherLogin { max-width: 100%; }
  body[data-web-entry] .form-content .smsTips { position: static; height: auto; }
  body[data-web-entry] .form-content .bothref { margin-left: 0; max-width: 100%; }
  body[data-web-entry] .el-message { min-width: 0; max-width: calc(100% - 24px); }
}

/* Authenticated chat must remain a flex shell, rather than the stacked login layout. */
@media (max-width: 760px) {
  body[data-web-entry] .tioimcontainer > .bodycontent.chat-shell {
    display: flex; position: relative; height: 100vh; height: 100dvh; min-height: 0;
    overflow: hidden; width: 100%;
  }
  body[data-web-entry] .chat-shell > .navbar { width: 44px; flex: 0 0 44px; min-width: 0; }
  body[data-web-entry] .chat-shell > .mainbody { position: relative; min-width: 0; min-height: 0; flex-direction: column; }
  body[data-web-entry] .mobile-chat-toolbar { display: flex; align-items: center; gap: 12px; height: 44px; flex: 0 0 44px; padding: 0 8px; border-bottom: 1px solid #eee; background: #fff; }
  body[data-web-entry] .mobile-chat-toolbar button { min-height: 36px; padding: 0 10px; color: #3185dc; border: 1px solid #ddd; border-radius: 6px; background: #fff; }
  body[data-web-entry] .mobile-chat .listcontent { position: absolute; top: 44px; bottom: 0; left: 0; width: 100% !important; min-width: 0 !important; z-index: 2; background: #fff; }
  body[data-web-entry] .mobile-list-collapsed .listcontent { display: none; }
  body[data-web-entry] .mobile-chat > .maincontent { width: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  body[data-web-entry] .mobile-chat:not(.mobile-list-collapsed) > .maincontent { visibility: hidden; pointer-events: none; }
  body[data-web-entry] .mobile-chat .chatinfo { flex-shrink: 0; }
  body[data-web-entry] .mobile-chat .chat-header { padding: 0 8px !important; }
  body[data-web-entry] .mobile-chat .chat-header-left { flex-shrink: 1; }
  body[data-web-entry] .mobile-chat .chat-name { font-size: 16px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-web-entry] .mobile-chat .chat-heal-actions { display: flex !important; gap: 2px; margin-right: 4px !important; }
  body[data-web-entry] .mobile-chat .chat-heal-btn { font-size: 11px !important; padding: 3px 4px !important; margin-left: 0 !important; }
  body[data-web-entry] .mobile-chat .info-opera { padding: 0 6px !important; }
  body[data-web-entry] .mobile-chat .msg-right { min-width: 0; max-width: calc(100% - 55px) !important; padding-left: 0 !important; }
  body[data-web-entry] .mobile-chat .msg-bot { max-width: 100% !important; }
  body[data-web-entry] .mobile-chat .msg-right img { max-width: 100% !important; }
  body[data-web-entry] .mobile-chat .msgcontainer { flex: 1; min-height: 0; height: auto !important; }
  body[data-web-entry] .mobile-chat .chat-bottom { flex: 0 0 180px; min-height: 0; }
  body[data-web-entry] .mobile-chat .chat-send-opera { overflow-x: auto; flex-shrink: 0; }
  body[data-web-entry] .mobile-chat .chat-send-icon { display: flex; flex: 0 0 auto; white-space: nowrap; align-items: center; }
  body[data-web-entry] .mobile-chat .chat-send-icon i { flex-shrink: 0; }
  body[data-web-entry] .mobile-chat .chat-send-tips { display: none; }
  body[data-web-entry] .mobile-chat .chat-send-bot { padding: 0 8px; }
  body[data-web-entry] .mobile-chat .back-bottom-container { position: absolute; right: 12px; bottom: 195px; z-index: 1; }
  body[data-web-entry] .mobile-chat .msg-col { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 600px) {
  body[data-web-entry] .bodycontent > .form-content.has-web-logo { padding-top: 80px; }
}

/* Explicit website portal mode; existing customer web/desktop builds are unchanged. */
body[data-web-portal] .tioimcontainer { background-image: var(--portal-background, none); background-position: center; background-size: cover; }
body[data-web-portal] .primarybtn { background: var(--portal-primary, #4C94E8); }

/* Mobile authenticated pages share one full-width pane and bottom navigation.
   Only explicit browser/iOS web builds receive this stylesheet/marker. */
@media (max-width: 760px) {
  body[data-web-entry] { margin: 0; }
  body[data-web-entry] .tioimcontainer { min-width: 0; }
  body[data-web-entry] .tioimcontainer > .bodycontent.chat-shell {
    position: fixed; inset: 0; width: 100%; max-width: 100%;
    height: var(--mobile-viewport-height, 100dvh); min-height: 0;
    flex-direction: column; box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    border-radius: 0;
  }
  body[data-web-entry] .chat-shell > .mainbody { order: 1; width: 100%; flex: 1 1 0; }
  body[data-web-entry] .chat-shell > .navbar {
    order: 2; width: 100%; flex: 0 0 auto; min-height: 60px; flex-direction: row;
    align-items: center; border: 0; border-top: 1px solid #e6e9ef; background: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; z-index: 5;
  }
  body[data-web-entry] .chat-shell > .navbar .nav-top.user { width: 42px; flex: 0 0 42px; }
  body[data-web-entry] .chat-shell > .navbar .nav-top.user > .user-avatar { width: 30px !important; height: 30px !important; margin: 0; }
  body[data-web-entry] .chat-shell > .navbar .nav-center { display: flex; min-width: 0; flex: 1; }
  body[data-web-entry] .chat-shell > .navbar .navbar-icon {
    width: auto; min-width: 0; flex: 1; height: 56px; margin: 0; padding: 31px 0 0;
    box-sizing: border-box; background-position: center 5px; background-size: 23px 23px;
    font-size: 11px; line-height: 20px;
  }
  body[data-web-entry] .chat-shell > .navbar .navbar-unread { display: block; }
  body[data-web-entry] .chat-shell > .navbar .unread-nav-count { position: absolute; right: 0; top: 0; }
  body[data-web-entry] .chat-shell > .navbar .notread { top: 0; right: 0; left: auto; }
  body[data-web-entry] .chat-shell > .navbar .nav-footer { padding: 0; width: 34px; flex: 0 0 34px; }
  body[data-web-entry] .chat-shell > .navbar .more-oper { left: auto; right: 6px; bottom: 45px; width: 180px; }
  body[data-web-entry] .chat-shell > .navbar .userinfo {
    position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: calc(100dvh - 100px); overflow-y: auto;
  }
  body[data-web-entry] .mobile-detail-toolbar {
    display: flex; align-items: center; gap: 12px; min-height: 44px; flex: 0 0 44px;
    padding: 0 12px; border-bottom: 1px solid #eee; background: #fff;
  }
  body[data-web-entry] .mobile-detail-toolbar button { min-height: 40px; padding: 0 8px; border: 0; color: #3185dc; background: #fff; }
  body[data-web-entry] .mobile-detail-pane > .listcontent { width: 100%; min-width: 0; min-height: 0; flex: 1; box-shadow: none; }
  body[data-web-entry] .mobile-detail-pane > .maincontent,
  body[data-web-entry] .mobile-detail-pane > .taginfo-container { display: none; }
  body[data-web-entry] .mobile-detail-pane.mobile-detail-open > .listcontent { display: none; }
  body[data-web-entry] .mobile-detail-pane.mobile-detail-open > .maincontent,
  body[data-web-entry] .mobile-detail-pane.mobile-detail-open > .taginfo-container {
    display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; flex: 1;
  }
  body[data-web-entry] .mobile-detail-pane .apply-list { flex: 1; min-height: 0; overflow-y: auto; }
  body[data-web-entry] .friend-detail-content > .infohead { display: none; }
  body[data-web-entry] .mobile-detail-pane .apply-item { padding: 12px; }
  body[data-web-entry] .mobile-detail-pane .apply-detail { min-width: 0; padding: 0 10px; }
  body[data-web-entry] .mobile-detail-pane .apply-agree { min-height: 40px; width: 65px; }
  body[data-web-entry] .mobile-detail-pane .friend-info { padding: 0 16px 24px; overflow-y: auto; }
  body[data-web-entry] .mobile-detail-pane .friend-info .user-info { flex-wrap: wrap; gap: 8px; }
  body[data-web-entry] .mobile-detail-pane .friend-nick .nick { max-width: 55vw; }
  body[data-web-entry] .mobile-detail-pane .user-btngroup { gap: 16px; }
  body[data-web-entry] .mobile-detail-pane .user-btngroup .primarybtn { flex: 1; margin-left: 0 !important; min-width: 0; }
  body[data-web-entry] .mobile-detail-pane .group-container { min-height: 0; overflow-y: auto; }
  body[data-web-entry] .mobile-detail-pane .group-row { min-width: 0; overflow-wrap: anywhere; }
  body[data-web-entry] .mobile-detail-pane .group-btngroup { display: flex; gap: 12px; padding: 16px; }
  body[data-web-entry] .mobile-detail-pane .group-btngroup .primarybtn { margin: 0; min-width: 0; flex: 1; }
  body[data-web-entry] .mobile-keyboard-open > .navbar { display: none; }
  body[data-web-entry] .mobile-keyboard-open .mobile-chat .chat-bottom { flex-basis: 132px; }
  body[data-web-entry] input, body[data-web-entry] textarea, body[data-web-entry] [contenteditable="true"] { font-size: 16px; }
  body[data-web-entry] .dialog { height: var(--mobile-viewport-height, 100dvh); }
  body[data-web-entry] .dialog > .modelbody {
    box-sizing: border-box; min-width: 0; max-width: calc(100vw - 24px);
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 32px); overflow: auto;
  }
  body[data-web-entry] .modelbody > div { max-width: 100%; box-sizing: border-box; }
  body[data-web-entry] .friendcard {
    box-sizing: border-box; width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
    left: 50% !important; top: calc(var(--mobile-viewport-height, 100dvh) / 2) !important; transform: translate(-50%, -50%);
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 32px); overflow-y: auto;
  }
  body[data-web-entry] .el-dialog { width: calc(100% - 24px) !important; max-height: calc(100dvh - 32px); overflow-y: auto; }
}