/* Kambana OS - Chat */
.app-chat { --chat-mine: var(--accent); --chat-mine-fg: var(--accent-fg); --chat-other: var(--surface-2); }
.app-chat .chat-split { position: relative; }
.app-chat .chat-side { width: 244px; padding: 0; gap: 0; }
.app-chat .chat-side-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 8px 10px; border-bottom: 1px solid var(--line); }
.app-chat .chat-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; }
.app-chat .chat-me:hover { background: var(--hover); }
.app-chat .chat-me > .ic { color: var(--text-3); opacity: 0; transition: opacity .12s; }
.app-chat .chat-me:hover > .ic { opacity: 1; }
.app-chat .chat-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.app-chat .chat-me-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chat .chat-me-text small { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.app-chat .chat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); display: inline-block; flex: 0 0 auto; }
.app-chat .chat-dot.on { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .2); }
.app-chat .chat-side-list { flex: 1; padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.app-chat .chat-room { position: relative; }
.app-chat .chat-room .ic { color: var(--text-3); }
.app-chat .chat-room.on .ic { color: var(--accent); }
.app-chat .chat-room.dim { color: var(--text-2); }
.app-chat .chat-room.unread span:not(.count) { font-weight: 700; color: var(--text); }
.app-chat .chat-room .count { min-width: 18px; text-align: right; }
.app-chat .chat-badge { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 6px; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.app-chat .chat-room .count + .chat-badge { margin-left: 6px; }
.app-chat .chat-addroom { color: var(--text-2); margin-top: 4px; }
.app-chat .chat-addroom .ic { color: var(--text-3); }
.app-chat .chat-person { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; font-size: 13px; color: var(--text); min-width: 0; }
.app-chat .chat-person > span:not(.chat-avatar) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-chat .chat-person small { color: var(--text-3); }

/* avatars */
.chat-avatar {
  width: var(--s, 34px); height: var(--s, 34px); border-radius: 50%; flex: 0 0 auto;
  display: inline-grid; place-items: center; font-size: calc(var(--s, 34px) * .38); font-weight: 700; letter-spacing: .02em;
  color: #fff; background: linear-gradient(140deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 30) 62% 44%));
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18); user-select: none;
}

/* header */
.app-chat .chat-main { position: relative; }
.app-chat .chat-head { height: 56px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.app-chat .chat-back { display: none; margin-left: -6px; }
.app-chat .chat-head-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--accent); flex: 0 0 auto; }
.app-chat .chat-head-text { min-width: 0; display: flex; flex-direction: column; }
.app-chat .chat-head-title { margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chat .chat-head-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chat .chat-warn { color: #e5a00d; display: inline-flex; align-items: center; gap: 4px; }
.app-chat .chat-warn .ic { display: inline; }
.app-chat .chat-stack { display: flex; align-items: center; border: 0; background: none; padding: 3px 6px 3px 10px; border-radius: 20px; }
.app-chat .chat-stack:hover { background: var(--hover); }
.app-chat .chat-stack .chat-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.app-chat .chat-more { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.app-chat [hidden] { display: none !important; }

/* message list */
.app-chat .chat-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-chat .chat-msgs { flex: 1; padding: 8px 18px 14px; display: flex; flex-direction: column; user-select: text; -webkit-user-select: text; }
.app-chat .chat-intro { display: flex; align-items: center; gap: 12px; padding: 16px 4px 6px; color: var(--text-2); font-size: 12.5px; }
.app-chat .chat-intro b { color: var(--text); font-size: 14px; }
.app-chat .chat-intro p { margin: 2px 0 0; }
.app-chat .chat-empty-art { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--accent); background: linear-gradient(150deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06)); flex: 0 0 auto; }
.app-chat .chat-empty-art.sm { width: 44px; height: 44px; border-radius: 14px; }
.app-chat .chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-2); padding: 30px; }
.app-chat .chat-empty h3 { margin: 8px 0 0; color: var(--text); font-size: 17px; }
.app-chat .chat-empty p { margin: 0; max-width: 320px; font-size: 13px; }
.app-chat .chat-day { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.app-chat .chat-day::before, .app-chat .chat-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.app-chat .chat-sys { align-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 8px 0; padding: 5px 12px; border-radius: 14px; background: var(--tile); font-size: 12px; color: var(--text-2); max-width: 90%; }
.app-chat .chat-sys b { color: var(--text); }
.app-chat .chat-sys time { color: var(--text-3); font-size: 11px; }

.app-chat .chat-group { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; max-width: 100%; }
.app-chat .chat-gav { width: 34px; flex: 0 0 auto; padding-top: 18px; }
.app-chat .chat-gbody { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: min(560px, 78%); }
.app-chat .chat-gname { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 0 4px 1px; }
.app-chat .chat-gname b { font-weight: 700; color: var(--text); }
.app-chat .chat-gname time { color: var(--text-3); font-size: 11px; }
.app-chat .chat-group.mine { flex-direction: row-reverse; }
.app-chat .chat-group.mine .chat-gav { display: none; }
.app-chat .chat-group.mine .chat-gbody { align-items: flex-end; }

.app-chat .chat-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.app-chat .mine .chat-msg { align-items: flex-end; }
.app-chat .chat-bubble {
  position: relative; padding: 8px 12px; border-radius: 6px 18px 18px 6px; background: var(--chat-other); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; max-width: 100%;
}
.app-chat .chat-msg:first-child .chat-bubble { border-top-left-radius: 18px; }
.app-chat .chat-msg:last-child .chat-bubble { border-bottom-left-radius: 18px; }
.app-chat .mine .chat-bubble { background: var(--chat-mine); color: var(--chat-mine-fg); box-shadow: none; border-radius: 18px 6px 6px 18px; }
.app-chat .mine .chat-msg:first-child .chat-bubble { border-top-right-radius: 18px; }
.app-chat .mine .chat-msg:last-child .chat-bubble { border-bottom-right-radius: 18px; }
.app-chat .chat-gname + .chat-msg .chat-bubble { border-top-left-radius: 18px; }
.app-chat .mine .chat-gname + .chat-msg .chat-bubble { border-top-right-radius: 18px; border-top-left-radius: 18px; }
.app-chat .chat-bubble.big { background: none !important; box-shadow: none !important; font-size: 34px; line-height: 1.15; padding: 2px 4px; }
.app-chat .chat-bubble code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: rgba(127, 127, 127, .18); }
.app-chat .chat-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.app-chat .chat-other .chat-link, .app-chat .chat-group:not(.mine) .chat-link { color: var(--accent); }
.app-chat .chat-roomlink { color: inherit; font-weight: 700; text-decoration: none; }
.app-chat .chat-group:not(.mine) .chat-roomlink { color: var(--accent); }
.app-chat .chat-mention { background: rgba(var(--accent-rgb), .22); color: inherit; border-radius: 4px; padding: 0 2px; font-weight: 600; }
.app-chat .chat-quote { margin: 0 0 6px; padding: 4px 9px; border-left: 3px solid currentColor; border-radius: 4px; background: rgba(127, 127, 127, .14); font-size: 12.5px; opacity: .85; max-height: 4.5em; overflow: hidden; }
.app-chat .chat-bubble.media { padding: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.app-chat .mine .chat-bubble.media { background: var(--surface-2); }
.app-chat .chat-img { display: block; max-width: min(320px, 100%); max-height: 300px; border-radius: 15px; cursor: zoom-in; background: var(--surface-3); }
.app-chat .chat-bubble.filecard { padding: 4px; }
.app-chat .chat-file { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; padding: 6px 10px 6px 6px; text-align: left; border-radius: 14px; min-width: 200px; max-width: 320px; }
.app-chat .chat-file:hover { background: rgba(127, 127, 127, .12); }
.app-chat .chat-file-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(127, 127, 127, .18); flex: 0 0 auto; }
.app-chat .chat-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-chat .chat-file-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chat .chat-file-text small { font-size: 11.5px; opacity: .75; }
.app-chat .chat-msg.pending .chat-bubble { opacity: .7; }
.app-chat .chat-msg.failed .chat-bubble { opacity: 1; box-shadow: inset 0 0 0 1.5px #e5484d; }
.app-chat .chat-sending { position: absolute; left: -22px; bottom: 4px; color: #e5484d; }
.app-chat .chat-sending .spinner { width: 12px; height: 12px; display: block; }
.app-chat .chat-failed { font-size: 11.5px; color: #e5484d; padding: 2px 4px; }
.app-chat .chat-failed .link { font-size: 11.5px; }
.app-chat .chat-reacts { display: flex; gap: 4px; margin: 3px 2px 2px; flex-wrap: wrap; }
.app-chat .chat-react { height: 24px; padding: 0 8px; border-radius: 12px; border: 0; background: var(--tile); font-size: 12.5px; color: var(--text-2); }
.app-chat .chat-react.on { background: rgba(var(--accent-rgb), .18); color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }

.app-chat .chat-actions { position: absolute; top: -14px; right: 6px; display: none; gap: 1px; padding: 2px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop); z-index: 2; }
.app-chat .mine .chat-actions { right: auto; left: 6px; }
.app-chat .chat-actions .icon-btn { width: 28px; height: 28px; border-radius: 8px; color: var(--text-2); }
.app-chat .chat-msg:hover .chat-actions, .app-chat .chat-actions:focus-within { display: flex; }

.app-chat .chat-jump { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; border: 0; background: var(--accent); color: var(--accent-fg); font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-pop); transition: opacity .18s, transform .18s var(--ease); }
.app-chat .chat-jump.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.app-chat .chat-drop { position: absolute; inset: 10px; border-radius: 18px; border: 2px dashed rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .1); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text); pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.app-chat .chat-drop .ic { color: var(--accent); }
.app-chat .chat-drop span { font-size: 12.5px; color: var(--text-2); }
.app-chat .chat-main.dropping .chat-drop { display: flex; }

/* composer */
.app-chat .chat-composer { flex: 0 0 auto; padding: 8px 12px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.app-chat .chat-composer.off { opacity: .6; }
.app-chat .chat-replybar { display: none; align-items: center; gap: 8px; padding: 4px 4px 8px 6px; font-size: 12.5px; color: var(--text-2); }
.app-chat .chat-replybar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chat .chat-replybar b { color: var(--text); }
.app-chat .chat-replybar > .ic { color: var(--accent); }
.app-chat .chat-replybar .icon-btn { width: 26px; height: 26px; }
.app-chat .chat-composer.replying .chat-replybar { display: flex; }
.app-chat .chat-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.app-chat .chat-compose-row > .icon-btn { width: 38px; height: 38px; border-radius: 12px; color: var(--text-2); }
.app-chat .chat-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 19px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .12s; }
.app-chat .chat-field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.app-chat .chat-field .icon-btn { width: 34px; height: 34px; margin: 2px; border-radius: 50%; color: var(--text-2); }
.app-chat .chat-input { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: none; color: var(--text); padding: 9px 4px 9px 14px; max-height: 150px; line-height: 1.4; font-size: 14px; }
.app-chat .chat-input::placeholder { color: var(--text-3); }
.app-chat .chat-send { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--tile); color: var(--text-3); flex: 0 0 auto; transition: background .15s, color .15s, transform .1s; }
.app-chat .chat-send.ready { background: var(--accent); color: var(--accent-fg); }
.app-chat .chat-send:active { transform: scale(.94); }

/* designed states (no server / loading) */
.app-chat .chat-state { position: absolute; inset: 56px 0 0 0; display: none; align-items: center; justify-content: center; background: var(--surface); padding: 24px; overflow: auto; z-index: 3; }
.app-chat .chat-state.show { display: flex; }
.app-chat .chat-main.chat-blocked .chat-composer { visibility: hidden; }
.app-chat .chat-ns { max-width: 460px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-2); }
.app-chat .chat-ns.loading { color: var(--text-3); }
.app-chat .chat-ns h3 { margin: 18px 0 6px; font-size: 19px; color: var(--text); }
.app-chat .chat-ns p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.app-chat .chat-ns-art { position: relative; width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #34d399, #047857); box-shadow: 0 18px 40px -16px rgba(4, 120, 87, .7); }
.app-chat .chat-ns-art span { position: absolute; right: -10px; bottom: -10px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-pop); }
.app-chat .chat-ns-steps { text-align: left; margin: 16px 0 0; padding: 14px 16px 14px 36px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.5; width: 100%; }
.app-chat .chat-ns-steps li + li { margin-top: 5px; }
.app-chat .chat-ns-steps code { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--tile); color: var(--text); }
.app-chat .chat-ns-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.app-chat .chat-ns-actions .ic { display: inline; }

/* popovers (appended to #os) */
.chat-pop { position: fixed; z-index: 9000; border-radius: 16px; padding: 8px; }
.chat-emoji { width: 300px; max-height: 300px; overflow-y: auto; }
.chat-emoji-cat { font-size: 11px; font-weight: 700; color: var(--text-3); padding: 6px 4px 2px; }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.chat-emoji-grid button, .chat-reactpick button { border: 0; background: none; font-size: 21px; height: 34px; border-radius: 8px; line-height: 1; padding: 0; }
.chat-emoji-grid button:hover, .chat-reactpick button:hover { background: var(--hover); transform: scale(1.12); }
.chat-reactpick { display: flex; gap: 2px; padding: 4px; border-radius: 22px; }
.chat-reactpick button { width: 36px; }
.chat-reactpick button.on { background: rgba(var(--accent-rgb), .2); }

/* photo viewer */
.app-chat .chat-viewer { position: absolute; inset: 0; z-index: 20; background: rgba(5, 8, 14, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 20px 20px; animation: chat-fade .16s ease; }
.app-chat .chat-viewer img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.app-chat .chat-viewer-bar { position: absolute; top: 10px; left: 14px; right: 10px; display: flex; align-items: center; gap: 10px; color: #fff; }
.app-chat .chat-viewer-bar .icon-btn { color: #fff; }
.app-chat .chat-viewer-bar .icon-btn:hover { background: rgba(255, 255, 255, .14); }
.app-chat .chat-viewer-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chat .chat-viewer .btn { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.app-chat .chat-viewer .btn .ic { display: inline; }
@keyframes chat-fade { from { opacity: 0; } }

/* phone + narrow windows */
[data-layout="mobile"] .app-chat .chat-side { width: 100%; border-right: 0; background: var(--surface); }
[data-layout="mobile"] .app-chat .chat-main { display: none; }
[data-layout="mobile"] .app-chat .chat-show-main .chat-side { display: none; }
[data-layout="mobile"] .app-chat .chat-show-main .chat-main { display: flex; }
[data-layout="mobile"] .app-chat .chat-back { display: grid; }
[data-layout="mobile"] .app-chat .chat-msgs { padding: 6px 10px 12px; }
[data-layout="mobile"] .app-chat .chat-gbody { max-width: 84%; }
[data-layout="mobile"] .app-chat .chat-side-list .side-item { height: 42px; }
[data-layout="mobile"] .app-chat .chat-actions { display: none !important; }
[data-layout="mobile"] .app-chat .chat-composer { padding-bottom: 14px; }
.win[data-app="chat"].narrow .app-chat .chat-side { width: 200px; }