.vh-100 {
	min-height: 100vh;
}
.w-400 {
	width: 400px;
}
.fs-xs {
	font-size: 1rem;
}
.w-10 {
	width: 10%;
}
a {
	text-decoration: none;
}
.fs-big {
	font-size: 5rem !important;
}
.online {
	width: 10px;
	height: 10px;
	background: green;
	border-radius: 50%;
}
.w-15 {
	width: 15%;
}
.fs-sm {
	font-size: 1.4rem;
}
small {
	color: #bbb;
	font-size: 0.7rem;
	text-align: right;
}
.chat-box {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 50vh;
}
.rtext {
	width: 65%;
	background: #f8f9fa;
	color: #444;
}

.ltext {
	width: 65%;
	background: #3289c8;
	color: #fff;
}
/* width */
*::-webkit-scrollbar {
  width: 3px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
*::-webkit-scrollbar-thumb {
  background: #aaa;
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
  background: #3289c8;
}

textarea {
	resize: none;
}

/*message_status*/


    body {
      background: linear-gradient(135deg, #e3f0ff 0%, #dde9fb 100%);
      min-height: 100vh;
      font-family: 'Segoe UI', Arial, sans-serif;
    }
    .w-400.shadow.p-4.rounded {
      max-width: 410px;
      width: 96vw;
      margin: 32px auto;
      background: #fff;
      border-radius: 1.3rem;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
      padding: 0 !important;
    }
    .fs-4.link-dark {
      display: inline-block;
      margin: 1.3rem .2rem 0 .2rem;
      font-size: 1.4rem !important;
      color: #2196f3 !important;
      text-decoration: none !important;
      transition: color .15s;
    }
    .fs-4.link-dark:hover {
      color: #1769aa !important;
    }
    .d-flex.align-items-center {
      padding: .3rem 1.1rem .6rem 1.1rem;
    }
    .d-flex.align-items-center > img {
      width: 40px !important;
      height: 40px !important;
      object-fit: cover;
      border-radius: 50% !important;
      border: 2px solid #e3f0ff;
      background: #e3f0ff;
      margin-right: .7rem;
    }
    .display-4.fs-sm.m-2 {
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0 0 .2rem 0 !important;
      color: #1976d2;
      line-height: 1.22;
      flex: 1;
      word-break: break-word;
    }
    .online {
      width: 13px;
      height: 13px;
      background: #44ff6a;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 2px #44ff6a;
      margin-right: 7px;
    }
    .shadow.p-4.rounded.d-flex.flex-column.mt-2.chat-box {
      background: #f5faff;
      margin: .5rem 0 0 0;
      height: 44vh;
      min-height: 180px;
      max-height: 54vh;
      overflow-y: auto;
      border-radius: .7rem;
      box-shadow: none !important;
      padding: 1.1rem !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .rtext, .ltext {
      max-width: 88%;
      word-break: break-word;
      position: relative;
      padding-bottom: 1.2rem !important;
      border-radius: 1.2rem !important;
    }
    .rtext {
      background: linear-gradient(120deg, #2196f3 80%, #1976d2 100%);
      color: #fff;
      align-self: flex-end;
      margin-left: 17%;
      margin-right: 0;
      border-top-right-radius: .4rem !important;
      border-bottom-right-radius: 1.2rem !important;
      border-top-left-radius: 1.2rem !important;
      border-bottom-left-radius: 1.2rem !important;
    }
    .ltext {
      background: #fff;
      color: #222;
      border: 1px solid #e3f0ff;
      align-self: flex-start;
      margin-right: 17%;
      margin-left: 0;
      border-top-left-radius: .4rem !important;
      border-bottom-left-radius: 1.2rem !important;
      border-top-right-radius: 1.2rem !important;
      border-bottom-right-radius: 1.2rem !important;
    }
    .rtext small, .ltext small {
      position: absolute;
      right: 1rem;
      bottom: .38rem;
      color: #b4c2d6;
      font-size: .77rem;
      font-weight: 400;
    }
    .ltext small {
      left: 1rem;
      right: auto;
      color: #9ca8b7;
    }
    .alert-info {
      background: #e3f0ff !important;
      color: #1976d2 !important;
      border: none !important;
      margin-top: 1.2rem;
      margin-bottom: 0;
      border-radius: 0.7rem;
      padding: 1.5rem 1rem;
      font-size: 1rem;
    }
    .input-group.mb-3 {
      background: #f5faff;
      padding: .7rem .7rem;
      border-radius: 0 0 1.3rem 1.3rem;
      border-top: 1px solid #e0e8f3;
      margin-bottom: 0 !important;
      gap: .7rem;
    }
    .input-group textarea.form-control {
      border-radius: 1.2rem !important;
      font-size: .98rem;
      resize: none;
      min-height: 44px;
      max-height: 110px;
      background: #fff;
      padding: .55rem 1rem;
      border: 1px solid #d0e0ef;
      box-shadow: none !important;
    }
    .input-group .btn-primary {
      border-radius: 1.2rem !important;
      padding: 0 .95rem;
      background: #2196f3 !important;
      color: #fff !important;
      border: none !important;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 480px) {
      .w-400.shadow.p-4.rounded {
        border-radius: 0 !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .d-flex.align-items-center {
        padding: .7rem .5rem .4rem .4rem;
      }
      .display-4.fs-sm.m-2 { font-size: 1.02rem;}
      .shadow.p-4.rounded.d-flex.flex-column.mt-2.chat-box {
        min-height: 210px; height: 47vh; max-height: 57vh;
        padding: .7rem !important;
      }
      .rtext, .ltext { max-width: 98%; font-size: .97rem;}
      .input-group.mb-3 { padding: .4rem .3rem !important;}
      .input-group textarea.form-control { font-size: .97rem;}
      .d-flex.align-items-center > img { width: 32px !important; height: 32px !important;}
    }



    body {
      background: linear-gradient(135deg, #e3f0ff 0%, #dde9fb 100%);
      min-height: 100vh;
      font-family: 'Segoe UI', Arial, sans-serif;
    }
    .p-2.w-400.rounded.shadow {
      max-width: 410px;
      width: 96vw;
      margin: 32px auto;
      background: #fff;
      border-radius: 1.3rem;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
      padding: 0 !important;
    }
    .d-flex.mb-3.p-3.bg-light.justify-content-between.align-items-center {
      background: linear-gradient(110deg, #2196f3 70%, #1976d2 100%);
      color: #fff;
      border-radius: 1.3rem 1.3rem 0 0;
      padding: 1.2rem 1rem 1rem 1.1rem !important;
      gap: 1rem;
    }
    .d-flex.align-items-center > img {
      width: 48px !important;
      height: 48px !important;
      object-fit: cover;
      border-radius: 50% !important;
      border: 2px solid #fff;
      margin-right: .5rem;
      background: #e3f0ff;
    }
    .d-flex.align-items-center > h3 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 0;
      margin-left: .2rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff;
    }
    .btn.btn-dark {
      background: #fff !important;
      color: #1976d2 !important;
      border: none !important;
      border-radius: 1rem !important;
      font-size: .97rem;
      font-weight: 500;
      padding: .35rem .9rem;
    }
    .input-group.mb-3 {
      background: #f5faff;
      border-bottom: 1px solid #e0e8f3;
      padding: .6rem 1rem .6rem 1rem;
      margin-bottom: 0 !important;
    }
    .input-group input {
      font-size: .98rem;
      border-radius: 1.5rem 0 0 1.5rem !important;
      border: 1px solid #d0e0ef !important;
      background: #fff;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .input-group .btn-primary {
      border-radius: 0 1.5rem 1.5rem 0 !important;
      padding: 0 .9rem;
      background: #2196f3 !important;
      color: #fff !important;
      border: none !important;
    }
    #chatList {
      max-height: 52vh;
      min-height: 220px;
      overflow-y: auto;
      background: #fff;
      margin-bottom: 0;
      border-radius: 0 0 1.3rem 1.3rem;
      border: none;
      padding: 0;
    }
    #chatList .list-group-item {
      padding: .55rem 1rem !important;
      background: none !important;
      border: none !important;
      border-bottom: 1px solid #f0f3f9 !important;
      transition: background .13s;
      display: flex;
      align-items: center;
    }
    #chatList .list-group-item:last-child {
      border-bottom: none !important;
    }
    #chatList a {
      display: flex;
      align-items: center;
      width: 100%;
      text-decoration: none !important;
      color: #222 !important;
      padding: 0 !important;
      background: none !important;
    }
    #chatList .rounded-circle, 
    #chatList .w-10, 
    #chatList .w-25 {
      width: 40px !important;
      height: 40px !important;
      object-fit: cover;
      border-radius: 50% !important;
      margin-right: 13px;
      border: 2px solid #f5faff;
      background: #f3f8fd;
      position: relative;
    }
    #chatList h3.fs-xs.m-2 {
      font-size: 1rem;
      font-weight: 600;
      color: #1976d2;
      margin: 0 !important;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #chatList h3.fs-xs.m-2 small {
      display: block;
      color: #8899a6;
      font-size: .93rem;
      font-weight: 400;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .online {
      width: 13px;
      height: 13px;
      background: #44ff6a;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 2px #44ff6a;
      margin-left: 9px;
    }
    .alert-info {
      background: #e3f0ff !important;
      color: #1976d2 !important;
      border: none !important;
      margin-top: 1.2rem;
      margin-bottom: 0;
      border-radius: 0.7rem;
      padding: 1.5rem 1rem;
      font-size: 1rem;
    }
    @media (max-width: 480px) {
      .p-2.w-400.rounded.shadow {
        border-radius: 0 !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .d-flex.mb-3.p-3.bg-light.justify-content-between.align-items-center {
        padding: .9rem .5rem .8rem .6rem !important;
        border-radius: 0 !important;
      }
      #chatList .list-group-item { padding: .6rem .4rem !important; }
      .input-group.mb-3 { padding: .5rem .3rem !important; }
      .d-flex.align-items-center > img { width: 36px !important; height: 36px !important;}
      #chatList .rounded-circle, #chatList .w-10 { width: 34px !important; height: 34px !important; }
      #chatList h3.fs-xs.m-2 { font-size: .98rem;}
    }