/* Ahfa.dev chat layout, spacing and controls, scoped to Dalaku's shared widget/inbox. */
.profile-dock { position: fixed; right: 30px; bottom: 26px; z-index: 40; }
#chat-launcher { display: block; position: relative; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
#chat-launcher>img { display: block; width: 100%; height: 100%; border-radius: 50%; }
#chat-launcher::after { content: ''; position: absolute; left: 0; top: 10px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; background: #a9a9ae; }
.profile-dock.connected #chat-launcher::after { background: #85c914; }
#chat-unread { position: absolute; right: -2px; top: -5px; padding: 3px 6px; min-width: 23px; border-radius: 12px; background: #fa3f45; color: white; font-size: 14px; border: 2px solid #fff; }
.chat-panel { --chat-bg: #fff; --chat-text: #31473c; --chat-muted: #71847b; --chat-line: #e2e8e3; --chat-list: #f8faf8; --chat-selected: #e7f1e9; --chat-mine: #efefef; --chat-theirs: #edf7e8; --chat-header: #245a42; position: fixed; right: 30px; bottom: 116px; z-index: 45; width: 400px; height: min(650px,calc(100dvh - 142px)); display: flex; flex-direction: column; overflow: hidden; color: var(--chat-text); background: var(--chat-bg); border: 1px solid var(--chat-line); border-radius: 16px; box-shadow: 0 14px 60px #0002; font-size: 16px; }
.chat-panel button,.chat-panel input,.chat-panel textarea,.chat-panel a { font: inherit; }
.chat-panel a { color: inherit; text-decoration: none; }
.chat-panel button { font-weight: 400; }
.chat-panel .profile-avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.chat-panel .profile-avatar>svg { width: 20px; height: 20px; }
.chat-icon-button { display: inline-grid; place-items: center; width: 32px; height: 36px; flex: 0 0 32px; padding: 6px; border: 0; background: transparent; color: var(--chat-muted); border-radius: 6px; }
.chat-icon-button:hover { background: #8881; }
.chat-icon-button svg,.chat-icon-button img { width: 22px; height: 22px; display: block; object-fit: contain; }
.chat-grid { display: grid; grid-template-columns: 1fr; flex: 1; min-height: 0; }
.chat-sidebar { border-right: 1px solid var(--chat-line); overflow: auto; min-width: 0; background: var(--chat-list); padding: 14px; }
.chat-list-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.chat-sidebar input { width: 100%; min-width: 0; padding: 10px 12px; font-size: 16px; border: 1px solid var(--chat-line); background: var(--chat-bg); color: var(--chat-text); border-radius: 9px; }
.chat-conversation { display: flex; align-items: center; width: 100%; gap: 10px; padding: 13px 10px; border-radius: 10px; text-align: left; background: transparent; margin-bottom: 5px; color: var(--chat-text); }
.chat-conversation:hover { background: #8881; }
.chat-conversation.selected { background: var(--chat-selected); }
.chat-conversation>span:last-child { min-width: 0; flex: 1; }
.chat-conversation-heading,.chat-conversation-preview { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.chat-conversation-heading strong { font-size: 17px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation time { font-size: 12px; color: var(--chat-muted); flex-shrink: 0; }
.chat-conversation-preview { margin-top: 4px; font-size: 14px; color: var(--chat-muted); }
.chat-conversation-preview>span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unread-count { background: #fa3f45; color: white; border-radius: 12px; min-width: 20px; padding: 1px 6px; text-align: center; font-size: 12px; }
.chat-main { min-width: 0; min-height: 0; display: none; }
.chat-panel.has-thread .chat-sidebar { display: none; }
.chat-panel.has-thread .chat-main { display: flex; }
.chat-placeholder,.chat-auth-notice { text-align: center; padding: 28px; margin: auto; color: var(--chat-muted); line-height: 1.6; }
.chat-placeholder img { border-radius: 50%; margin-bottom: 10px; }
.chat-placeholder p { margin: 0 0 10px; }
.chat-auth-notice { flex: 1; display: grid; align-content: center; justify-items: center; }
.chat-thread { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.chat-peer-header { display: flex; align-items: center; gap: 12px; padding: 14px 12px; background: var(--chat-header); color: white; flex-shrink: 0; }
#chat-peer { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#chat-peer>span:last-child { display: block; min-width: 0; }
#chat-peer strong { display: block; font-size: 18px; font-weight: 400; overflow-wrap: anywhere; }
#chat-peer small { display: block; font-size: 14px; color: #bed1c4; margin-top: 3px; }
.chat-peer-header .chat-icon-button { color: #c3d2c8; }
.chat-peer-header .chat-icon-button img { filter: brightness(0) invert(1); opacity: .85; }
.chat-timeline { padding: 12px 22px 16px; overflow: auto; overscroll-behavior: contain; flex: 1; min-height: 0; scroll-behavior: auto; }
.chat-date { text-align: center; font-size: 13px; color: var(--chat-muted); margin: 12px 0 16px; }
.chat-bubble { position: relative; max-width: min(83%,460px); width: fit-content; padding: 12px 14px; border-radius: 10px; margin-bottom: 10px; overflow-wrap: anywhere; background: var(--chat-theirs); }
.chat-bubble.mine { margin-left: auto; background: var(--chat-mine); }
.chat-bubble p { margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-wrap; }
.chat-bubble p a { text-decoration: underline; text-underline-offset: 2px; }
.chat-bubble.deleted p { color: var(--chat-muted); font-style: italic; font-size: 14px; }
.chat-bubble footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--chat-muted); }
.chat-delivery { display: inline-block; width: 15px; height: 15px; flex: 0 0 15px; background-color: #a4aba6; mask: url('/chat-icons/check-double.svg') center/contain no-repeat; }
.chat-delivery.read { background-color: #67bd52; }
.chat-single-check { font-size: 15px; line-height: 1; }
.chat-message-actions { position: relative; }
.chat-message-actions summary { list-style: none; font-size: 17px; cursor: pointer; padding-left: 3px; }
.chat-message-actions summary::-webkit-details-marker { display: none; }
.chat-message-actions>div { position: absolute; right: 0; bottom: 24px; z-index: 3; min-width: 120px; padding: 5px; background: var(--chat-bg); color: var(--chat-text); border: 1px solid var(--chat-line); border-radius: 8px; box-shadow: 0 4px 18px #0002; }
.chat-message-actions button { display: block; padding: 8px 12px; width: 100%; text-align: left; font-size: 14px; }
.chat-message-actions button:hover { background: var(--chat-selected); }
.chat-quote { border-left: 3px solid #82ad82; padding: 5px 8px; margin-bottom: 8px; background: #8881; border-radius: 4px; font-size: 14px; white-space: pre-wrap; color: var(--chat-muted); }
.chat-image-button { display: block; padding: 0; max-width: 290px; }
.chat-image-button img { display: block; width: 100%; max-height: 250px; object-fit: contain; border-radius: 5px; }
.chat-typing { font-size: 14px; color: var(--chat-muted); padding: 8px 0; }
.chat-error { padding: 8px 12px; font-size: 14px; margin: 0; background: #f7e9e8; color: #76473e; line-height: 1.5; }
.chat-composer { position: relative; padding: 12px 16px max(14px,env(safe-area-inset-bottom)); border-top: 1px solid var(--chat-line); background: var(--chat-bg); flex-shrink: 0; }
.chat-composer textarea { display: block; width: 100%; min-height: 44px; max-height: 130px; resize: none; border: 0; background: transparent; color: var(--chat-text); padding: 9px 0; font-size: 16px; line-height: 1.5; box-shadow: none; outline: none; }
.chat-composer-tools { display: flex; align-items: center; gap: 8px; }
.chat-send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: white; padding: 9px; margin-left: auto; flex-shrink: 0; }
.chat-send svg { width: 22px; height: 22px; }
#chat-upload-status { color: var(--chat-muted); font-size: 13px; line-height: 1.4; }
.chat-reply { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px; background: var(--chat-selected); border-left: 3px solid #82ad82; font-size: 14px; }
.chat-reply>span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply button,.chat-image-preview button { font-size: 23px; padding: 0 4px; }
.chat-image-preview { display: flex; align-items: start; gap: 8px; margin-bottom: 8px; }
.chat-image-preview img { width: 90px; height: 70px; object-fit: cover; border-radius: 5px; }
.chat-more { display: block; padding: 10px; margin: 0 auto 8px; color: var(--chat-muted); font-size: 14px; }
.chat-bubble,.chat-conversation-preview,#chat-message,.chat-reply { font-family: Onest,"Noto Color Emoji",sans-serif; }
.chat-emoji { font-family: "Noto Color Emoji",sans-serif; font-weight: 400; }
.chat-emoji-picker { position: absolute; z-index: 3; bottom: calc(100% + 8px); right: 13px; width: min(360px,calc(100% - 26px)); height: min(330px,calc(100dvh - 160px)); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--chat-bg); border: 1px solid var(--chat-line); border-radius: 10px; box-shadow: 0 5px 20px #0001; }
.emoji-search { position: relative; flex-shrink: 0; }
.emoji-search>svg { position: absolute; top: 11px; left: 10px; width: 17px; height: 17px; fill: none; stroke: var(--chat-muted); stroke-width: 1.8; pointer-events: none; }
.chat-emoji-picker .emoji-search input { width: 100%; border: 0; border-radius: 8px; background: var(--chat-list); color: var(--chat-text); padding: 9px 10px 9px 34px; font-size: 16px; }
.emoji-results { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.emoji-heading { margin: 3px 2px 9px; color: var(--chat-muted); text-transform: uppercase; letter-spacing: .3px; font-size: 14px; font-weight: 500; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(36px,1fr)); gap: 4px; }
.chat-emoji-picker .emoji { position: relative; min-height: 36px; padding: 4px; background: transparent; border: 0; color: inherit; font-family: "Noto Color Emoji",sans-serif; font-size: 24px; line-height: 1; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.emoji.has-variants::after { content: ''; position: absolute; bottom: 2px; right: 2px; border: 3px solid transparent; border-right-color: var(--chat-muted); border-bottom-color: var(--chat-muted); }
.chat-emoji-picker .emoji:hover { background: var(--chat-selected); }
.emoji-tabs { display: flex; border-top: 1px solid var(--chat-line); padding-top: 5px; flex-shrink: 0; }
.emoji-tabs [role=tab] { flex: 1; min-width: 0; border: 0; border-radius: 6px; padding: 7px 0; color: var(--chat-muted); background: transparent; }
.emoji-tabs [aria-selected=true] { color: var(--chat-text); background: var(--chat-selected); }
.emoji-tabs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.emoji-variants { position: absolute; z-index: 4; display: grid; padding: 6px; border: 1px solid var(--chat-line); border-radius: 8px; background: var(--chat-bg); box-shadow: 0 5px 20px #0003; overflow-y: auto; overscroll-behavior: contain; }
.emoji-empty { padding: 12px; color: var(--chat-muted); font-size: 14px; }
.chat-list-empty { color: var(--chat-muted); font-size: 14px; text-align: center; padding: 20px 6px; line-height: 1.6; }
.chat-row-skeleton { width: 100%; height: 64px; aspect-ratio: auto; border-radius: 8px; margin-bottom: 8px; }
.chat-panel.expanded,.inbox-page .chat-panel { inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
.chat-expanded { overflow: hidden; }
.inbox-page body { overflow: hidden; }
.inbox-page body>.sidebar,.inbox-page body>main,.inbox-page #profile-dock,.inbox-page #chat-list-back { display: none; }
.chat-panel.expanded .chat-grid,.inbox-page .chat-grid { grid-template-columns: 340px minmax(0,1fr); }
.chat-panel.expanded .chat-sidebar,.inbox-page .chat-sidebar { display: block; }
.chat-panel.expanded .chat-main,.inbox-page .chat-main { display: flex; }
.chat-panel.expanded #chat-back,.inbox-page #chat-back { display: none; }
.chat-panel.expanded .chat-timeline,.inbox-page .chat-timeline { padding-inline: clamp(22px,6vw,90px); }
.detail-contact { display: grid; gap: 10px; }
#chat-image-viewer { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 40px; border-radius: 0; background: #111; box-shadow: none; }
#chat-image-viewer img { width: 100%; height: 100%; object-fit: contain; }
#chat-image-close { position: absolute; right: 14px; top: 14px; font-size: 28px; color: #111; z-index: 1; }
[data-theme="dark"] .chat-panel { --chat-bg: #2d2d30; --chat-text: #f5f5f7; --chat-muted: #bbbcc5; --chat-line: #47474e; --chat-list: #303034; --chat-selected: #44444a; --chat-mine: #44444b; --chat-theirs: #353a38; --chat-header: #333338; border-color: #49494f; }
[data-theme="dark"] #chat-launcher::after,[data-theme="dark"] #chat-unread { border-color: #2d2d30; }
[data-theme="dark"] .chat-icon-button img { filter: invert(.8); }
[data-theme="dark"] .chat-error { color: #f5f5f7; background: #474047; }
[data-theme="dark"] #chat-peer small { color: #c5c5cc; }
@media(max-width:700px) {
  .profile-dock { right: 18px; bottom: 18px; }
  #chat-launcher { width: 62px; height: 62px; }
  #chat-launcher::after { top: 7px; width: 12px; height: 12px; }
  .chat-panel { inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
  .chat-panel.expanded .chat-grid,.inbox-page .chat-grid { grid-template-columns: 1fr; }
  .chat-panel.expanded.has-thread .chat-sidebar,.inbox-page .chat-panel.has-thread .chat-sidebar { display: none; }
  .chat-panel.expanded:not(.has-thread) .chat-main,.inbox-page .chat-panel:not(.has-thread) .chat-main { display: none; }
  .chat-panel.expanded #chat-back,.inbox-page #chat-back { display: inline-grid; }
  .chat-timeline,.chat-panel.expanded .chat-timeline,.inbox-page .chat-timeline { padding-inline: 18px; }
}