/* fallback - https://fonts.google.com/icons?selected=Material+Icons+Outlined */
 body {
   margin: 0;
   background: #ece5dd;
   font-family: 'Segoe UI', sans-serif;
   overflow-x: hidden;
 }

 @font-face {
   font-family: 'TamilFont';
   src: url('../assets/tamil.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: 'GoogleIconOutline';
   font-style: normal;
   font-weight: 400;
   src: url('../assets/google_icon_outline.woff2') format('woff2');
 }

 .chat-container,
 .controls-container {
   font-family: 'TamilFont';
 }

 .timestamp {
   font-family: 'Segoe UI', sans-serif !important;
 }

 .title_icon {
   font-size: 30px !important;
 }

 .material-icons-outline {
   font-family: 'GoogleIconOutline' !important;
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   color: #fff;
   padding-right: 5px;
 }

 .group-icon {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   overflow: hidden;
   border: 2px solid #fff;
   display: inline-block;
   vertical-align: middle;
   margin-right: 10px;
   margin-top: 4px;
 }

 .group-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* Scrollbar Track */
 ::-webkit-scrollbar {
   width: 2px;
 }

 /* Scrollbar Handle */
 ::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 6px;
 }

 /* Scrollbar Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }

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

 .chat-container {
   margin: 0 auto;
   height: calc(100vh - 30px);
   display: flex;
   flex-direction: column;
   background-image: url('../assets/bg-whatsapp.jpg');
   background-size: contain;
   background-repeat: repeat;
   background-color: #e5ddd5;
   border: 1px solid #ccc;
   margin-top: 10px;
   margin-left: 10px;
   margin-right: 5px;
 }

 .header {
   background-color: #075e54;
   padding: 5px 6px;
   color: #fff;
 }

 .group-title {
   font-weight: bold;
   font-size: 1.25em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .title_icon_group {
   font-size: 28px;
   padding-left: 7px;
   padding-top: 6px;
 }

 .sub-title {
   font-size: 1em;
   opacity: 0.9;
 }

 .chat-box {
   flex: 1;
   padding: 15px;
   overflow-y: auto;
 }

 .system-date,
 .system-message {
   background-color: #fff;
   padding: 4px 10px;
   border-radius: 10px;
   text-align: center;
   margin: 10px auto;
   font-size: 1em;
   width: fit-content;
 }

 .message {
   background-color: #dcf8c6;
   padding: 10px;
   border-radius: 10px;
   margin: 10px 0;
   position: relative;
   width: fit-content;
   max-width: 85%;
   float: right;
   clear: both;
 }

 .message.left {
   background-color: #fff;
   float: left;
 }

 .sender {
   font-size: 0.8em;
   font-weight: bold;
   color: #444;
   margin-bottom: 4px;
   display: block;
 }

 .media {
   display: flex;
   flex-direction: column;
 }

 .media-thumbnail {
   width: 100%;
   border-radius: 8px;
   margin-bottom: 8px;
 }

 .media-text {
   font-size: 0.85em;
   margin-bottom: 5px;
 }

 .message-link {
   color: #0645AD;
   word-break: break-word;
   font-size: 0.85em;
 }

 .input-box {
   display: flex;
   padding: 10px;
   border-top: 1px solid #ddd;
   background: #f0f0f0;
 }

 .input-box input {
   flex: 1;
   padding: 10px;
   border-radius: 25px;
   border: none;
   outline: none;
 }

 .send-btn {
   background-color: #075e54;
   color: #fff;
   border: none;
   padding: 10px;
   margin-left: 10px;
   border-radius: 50%;
   cursor: pointer;
   width: 45px;
 }

 .chat-message {
   display: flex;
   align-items: flex-end;
   margin-bottom: 15px;
   max-width: 90%;
   width: 100%;
 }

 .profile-pic {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   overflow: hidden;
   margin-right: 10px;
   border: 1px solid #ccc;
   flex-shrink: 0;
 }

 .profile-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .bubble {
   background: #fff;
   padding: 3px 8px;
   border-radius: 10px;
   position: relative;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   max-width: 80%;
   line-height: 25px;
 }

 .bubble::before {
   content: "";
   position: absolute;
   left: -8px;
   top: 15px;
   border-width: 8px;
   border-style: solid;
   border-color: transparent #fff transparent transparent;
 }

 .sender-name {
   color: #075e54;
   font-weight: 600;
   margin-bottom: 3px;
 }

 .message-text {
   font-size: 16px;
   color: #000;
 }

 .timestamp {
   text-align: right;
   font-size: 12px;
   color: #999;
   margin-left: 25px;
   float: right;
 }

 .chat-message-wrapper {
   display: inline-flex;
   width: 100%;
 }

 .full-button button {
   width: 100%;
 }