.chat-layout { max-width: 1250px; margin: 24px auto; height: calc(100dvh - 115px); min-height: 520px; display: grid; grid-template-columns: minmax(230px, 320px) 1fr; border: 1px solid #684b2d; border-radius: 8px; overflow: hidden; background: #120f0c; color: #e8d5b2; }
.chat-sidebar { overflow-y: auto; border-right: 1px solid #543c26; background: #19130f; }
.chat-sidebar-heading { padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #543c26; }
.chat-sidebar-heading h1 { font-size: 1.4rem; }.chat-sidebar a,.chat-empty a,.chat-person { color: #e7c28b; }
#sidebar-status,#chat-status { color: #cfb394; padding: 4px 16px; min-height: 18px; }
.conversation-list { display: grid; }.conversation { display: flex; align-items: center; width: 100%; gap: 12px; text-align: left; padding: 15px; border: 0; border-bottom: 1px solid #3a2c20; background: transparent; color: #e8d5b2; cursor: pointer; font: inherit; }.conversation:hover,.conversation.active { background: #392919; }.conversation img,.conversation .initial { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #6b492a; display: grid; place-items: center; flex: none; }.conversation-info { flex: 1; min-width: 0; }.conversation-info small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #bfa98d; }.unread { background: #bc8849; border-radius: 20px; color: #17110c; padding: 2px 7px; font-weight: bold; }
.chat-main { min-width: 0; height: 100%; }.chat-empty { display: grid; align-content: center; justify-items: center; height: 100%; gap: 12px; text-align: center; padding: 20px; }.chat-empty h2 { color: #eed6af; }.chat-empty p { color: #bfa98d; }#chat-active { height: 100%; display: flex; flex-direction: column; }#chat-active[hidden],.call-overlay[hidden],#chat-tools[hidden],#emoji-panel[hidden],#sticker-panel[hidden] { display: none; }
#chat-empty[hidden] { display: none; }
.chat-top { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #543c26; }.chat-person { font-size: 1.15rem; font-weight: bold; }.chat-top-actions { display: flex; gap: 8px; }button,.composer-actions label,.tool-label { cursor: pointer; }.chat-top button,.composer button,.composer-actions label,.tool-label,.call-box button { padding: 9px 12px; background: #61411f; color: #f5e4cb; border: 1px solid #a67a3e; border-radius: 5px; font: inherit; }.chat-top button:hover,.composer button:hover,.composer-actions label:hover,.tool-label:hover,.call-box button:hover { background: #8b612e; }button:disabled { opacity: .55; cursor: wait; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }.bubble { max-width: min(75%,480px); padding: 10px 14px; background: #2a211a; border: 1px solid #6b5136; border-radius: 12px 12px 12px 3px; white-space: pre-wrap; overflow-wrap: anywhere; }.bubble.mine { align-self: flex-end; background: #49351f; border-radius: 12px 12px 3px 12px; }.bubble time { display: block; margin-top: 5px; color: #cbb398; font-size: .8rem; }.bubble img { display: block; max-width: 100%; max-height: 330px; border-radius: 5px; }.bubble.sticker { background: transparent; border: 0; }.bubble.sticker img { max-width: 150px; max-height: 150px; }.bubble audio { width: min(300px,100%); }
.chat-tools { padding: 8px 16px; border-top: 1px solid #543c26; max-height: 180px; overflow: auto; }#emoji-items,#sticker-items { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0; }#emoji-items button,#sticker-items button { font-size: 1.4rem; border: 0; background: transparent; cursor: pointer; }#sticker-items img { width: 70px; height: 70px; object-fit: contain; }.composer { border-top: 1px solid #543c26; padding: 10px 16px 14px; }.composer textarea { width: 100%; resize: vertical; min-height: 50px; max-height: 130px; border: 1px solid #755536; border-radius: 5px; background: #201914; color: #fff1dc; padding: 10px; font: inherit; }.composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; }.composer-actions #send-button { margin-left: auto; background: #9a6d34; }.tool-label { display: inline-block; margin-top: 6px; }
.call-overlay { position: fixed; z-index: 100; inset: 0; background: #000b; display: grid; place-items: center; padding: 15px; }.call-box { width: min(95vw,620px); padding: 25px; border: 1px solid #b58a4c; border-radius: 10px; background: #211810; text-align: center; color: #e8d5b2; }.call-box button { margin: 15px 5px 0; }.video-area { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }.video-area video { width: 100%; min-height: 120px; max-height: 300px; object-fit: cover; background: #090807; }#ongoing-call.audio .video-area { display: none; }
@media(max-width:700px){.chat-layout { margin: 0; height: calc(100dvh - 70px); min-height: 450px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 0; }.chat-sidebar { max-height: 125px; overflow-y: auto; border-right: 0; border-bottom: 1px solid #543c26; }.chat-sidebar-heading { padding: 8px 12px; }.conversation-list { display: flex; overflow-x: auto; }.conversation { min-width: 170px; max-width: 210px; padding: 7px; border-right: 1px solid #3a2c20; }.conversation img,.conversation .initial { width: 36px; height: 36px; }.bubble { max-width: 90%; }.messages { padding: 12px; }.chat-top { padding: 9px 12px; }.chat-top button { padding: 6px; }}

#older-messages { align-self: center; padding: 7px 12px; background: #30231a; color: #e7c28b; border: 1px solid #785938; border-radius: 6px; cursor: pointer; }
#older-messages[hidden] { display: none; }

/* Keep the composer in view while messages and the sticker tray scroll separately. */
.chat-layout { grid-template-rows: minmax(0, 1fr); min-height: 0; }
.chat-main { min-height: 0; overflow: hidden; }
#chat-active { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
#chat-active[hidden] { display: none; }
.messages { min-height: 0; overflow-y: auto; }
.chat-tools { min-height: 0; max-height: min(160px, 24dvh); overflow-y: auto; }
.composer { min-height: 0; }
@media (max-width: 700px) {
  .chat-layout { grid-template-rows: auto minmax(0, 1fr); }
}

.bubble.call-event { align-self: center; max-width: min(90%,400px); text-align: center; background: #241b14; border-color: #765334; border-radius: 18px; color: #ead2ac; }
.bubble.call-event time { margin-top: 3px; }
.gif-picker { position: absolute; z-index: 15; bottom: 100px; left: min(340px,25%); width: min(430px,calc(100vw - 32px)); max-height: min(520px,70dvh); display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #211810; border: 1px solid #ae824c; border-radius: 9px; box-shadow: 0 12px 38px #000c; }
.chat-layout { position: relative; overflow: visible; }
.gif-picker[hidden] { display: none; }
.gif-heading,#gif-search-form { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.gif-picker input { min-width: 0; flex: 1; padding: 9px; background: #100c09; border: 1px solid #74583b; color: #f5e4cb; border-radius: 4px; }
.gif-picker button { background: #61411f; color: #f5e4cb; border: 1px solid #a67a3e; border-radius: 4px; padding: 7px 10px; cursor: pointer; }
.gif-results { overflow-y: auto; min-height: 90px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.gif-results button { padding: 0; overflow: hidden; aspect-ratio: 1.2; }
.gif-results img { width: 100%; height: 100%; object-fit: cover; }
.gif-credit { font-size: .75rem; align-self: flex-end; color: #d8b77d; }
.gif-picker p { margin: 0; }
@media(max-width:700px){.gif-picker { position: fixed; bottom: 0; left: 0; right: 0; width: 100vw; max-height: 70dvh; border-radius: 12px 12px 0 0; padding-bottom: max(14px,env(safe-area-inset-bottom)); }.gif-results { grid-template-columns: repeat(3,minmax(0,1fr)); }}