* {
   /* margin: 0;
   padding: 0; */
   box-sizing: border-box;
 }
body{
   width:96%; 
   margin: auto 2% auto 2%; 
}
.content-wrapper{
   width: 98%;
   margin: auto;
}
/* 顶部导航栏样式 */
.navbar-brand img {
   /* 网站左上角brand标志*/
   margin-left: 50px;
   width: 110px;
   height: auto;
}
.navbar {
   background-color: rgba(163, 255, 240, 0.7);
   /* background-color: rgba(135, 206, 250, 0.5); */
   margin: 10px 0;
   padding:2px;
   border-radius: 5px;
}
.navbar-nav {
   width: 100%;
}
.nav-item {
   color: black;
   width: 20%;
   margin: 0 0;
}

.nav-link {
   color: black;
   text-align: center;
   font-size: larger;
   font-weight: 600;
   padding: 0 0;
}

.nav-li a {
   font-size: 22px;
   font-weight: 600;
   color: black;
}

.nav-li a:hover {
   text-decoration: none;
   color: brown;
}

.message-form {
   background-color: rgb(245, 240, 230);
   padding: 15px 20% 15px 20%;
   z-index: 110;
}

.qrcode {
   display: none;
   position: absolute;
   width: 250px;
   right: 100%;
   bottom: 0;
   z-index: 100;
   border: 2px solid blue;
}

.qrcode img {
   display: block;
   width: 100%;
   margin: 10px auto;
   z-index: 200;
}

/* 模态框样式 */
.modal-dialog {
   max-width: 800px;
   width:700px;
   margin-top: 20px;
   margin-right: 10px;
}

.flash-message {
   width: 30%;
   background-color: lightgray;
   font-size: large;
   color: red;
   text-align: center;
}

.error {
   color: red;
}

/* 请求错误 */
.page-error h3, .page-error p {
   text-align: center;
}
.page-error p {
   color: blue;
   font-size: 18px;
}

label {
   font-size: 18px;
   font-weight: 600;
}

/* 侧边联系导航条响应式设计 */
.contact-nav {
   list-style-type: none;
   width: min-content;
   height: min-content;
   right: 0;
   position: fixed;
   bottom: 1%;
   padding: 0;
   background-color: rgba(240, 240, 240, 0.5);
  
   border-radius: 5px;
   z-index: 300;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.contact-nav li {
   text-align: center;
}

.contact-nav a {
   display: block;
   text-decoration: none;
   border: none;
   padding: 6px 5px;
   font-weight: 600;
   line-height: 100%;
   color: rgb(0, 0, 0);
}

.contact-nav a:hover {
   text-decoration: none;
   color: brown;
}


/* 响应式设计 */
@media (max-width: 768px) {
   body {
      /* 预留底部导航栏的高度 */
      margin-bottom: 150px;
   }
   /* 顶部导航 */
   .navbar-brand img{
      margin-left: 20px;
   }
   .nav-item {
      width: 100%;
      background-color: #ccc;
      margin: 2px auto;

   }
   .nav-link {
      text-align: center;
      margin: 5px auto;
   }
   .navbar-toggler{
      border:none;
   }
   /* contact-nav */
   .contact-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 0px;
      margin: 0;
      background-color: #f8f9fa;
   }

   .contact-nav li {
      margin: 0 auto;
      padding: 0 auto;
   }

   .qrcode {
      position:absolute;
      left: 0;
      bottom: 100%;
   }
   .page-nav {
      position: fixed;
      right: 0;
      bottom: 60px;
      z-index: 399;
   }
   .modal-dialog {
      position: fixed;
      max-width: 100vw;
      height: 80vh;
      bottom: 10vh !important;
  }
  /* PHP 仅产品询盘弹窗：可滚动提交区（不改变 Flask 其他页面/客服弹窗的模态表现） */
  #product-inquiry .modal-dialog {
      left: 10px;
      right: 10px;
      width: auto !important;
      max-width: none;
      height: auto;
      max-height: 85vh;
      margin: 0 !important;
      display: flex;
      flex-direction: column;
  }
  #product-inquiry .modal-dialog .modal-content {
      max-height: 85vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
  }
  #product-inquiry .modal-dialog .modal-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1 1 auto;
      min-height: 0;
  }
  #product-inquiry textarea[name="content"] {
      max-height: 40vh;
      resize: vertical;
  }
  #chat-box, .input-box {
      width: 90vw;
  }
}