Ship War Room UX, CEO inbox, mobile chat, and Agents NAS workspace.
Make A2A togglable, keep reply context while reading, route agent data to //10.4.7.11/share/Agents, and polish themes plus export-intel sync cancel.
This commit is contained in:
Aissa
@@ -191,3 +191,256 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
|
||||
@media (display-mode: standalone), (display-mode: fullscreen) {
|
||||
.pwa-install-bar { display: none !important; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== War Room FULL CHAT on phone (Android + iOS) ===== */
|
||||
@media (max-width: 900px) {
|
||||
/* Tabs: compact chip row */
|
||||
.vtabs-layout {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.3rem !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.vtabs-nav {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 50 !important;
|
||||
padding: 0.3rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.vtabs-nav .vtab-btn {
|
||||
flex: 0 0 auto !important;
|
||||
width: auto !important;
|
||||
white-space: nowrap !important;
|
||||
min-height: 40px !important;
|
||||
padding: 0.35rem 0.6rem !important;
|
||||
}
|
||||
.vtabs-nav-header { display: none !important; }
|
||||
.vtabs-content { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; }
|
||||
|
||||
/* Hide bulky page chrome in War Room */
|
||||
.hm-neo.tab-warroom-active > .wr-page-header,
|
||||
.hm-neo.tab-warroom-active > .page-header {
|
||||
display: none !important;
|
||||
}
|
||||
.hm-neo.tab-warroom-active {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
height: calc(100dvh - 3.25rem - env(safe-area-inset-top, 0px)) !important;
|
||||
max-height: calc(100dvh - 3.25rem - env(safe-area-inset-top, 0px)) !important;
|
||||
min-height: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.hm-neo.tab-warroom-active .vtabs-layout {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.hm-neo.tab-warroom-active .vtabs-content {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
/* Let Alpine x-show hide inactive tabs; only stretch the visible warroom section */
|
||||
.hm-neo.tab-warroom-active .vtabs-content > section:not([style*="display: none"]) {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.wr-hub-root {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.wr-hub-root > .panel {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
height: 100% !important;
|
||||
max-height: none !important;
|
||||
padding: 0.35rem !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wr-layout {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 1 1 auto !important;
|
||||
height: 100% !important;
|
||||
max-height: none !important;
|
||||
min-height: 0 !important;
|
||||
gap: 0.3rem !important;
|
||||
}
|
||||
|
||||
.wr-mobile-bar {
|
||||
display: flex !important;
|
||||
flex: 0 0 auto;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wr-layout.roster-collapsed .wr-roster { display: none !important; }
|
||||
.wr-roster {
|
||||
flex: 0 0 auto !important;
|
||||
max-height: 18vh !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid rgba(148,163,184,0.15) !important;
|
||||
padding: 0 0 0.25rem !important;
|
||||
}
|
||||
.wr-roster h3 { display: none !important; }
|
||||
.wr-room-btn, .wr-agent-btn {
|
||||
flex: 0 0 auto !important;
|
||||
width: auto !important;
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.wr-main {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* Compact toolbar */
|
||||
.wr-head {
|
||||
flex: 0 0 auto !important;
|
||||
margin: 0 !important;
|
||||
gap: 0.25rem !important;
|
||||
}
|
||||
.wr-head-title h2 { font-size: 0.9rem !important; }
|
||||
.wr-head-title .muted,
|
||||
.wr-head-title .wr-msg-count { display: none !important; }
|
||||
.wr-head-actions {
|
||||
width: 100%;
|
||||
gap: 0.25rem !important;
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.wr-head-actions .btn {
|
||||
flex: 0 0 auto;
|
||||
min-height: 36px !important;
|
||||
padding: 0.3rem 0.45rem !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.wr-head-actions .wr-a2a-btn,
|
||||
.wr-head-actions button[title="Open op tweede scherm"],
|
||||
.wr-head-actions button[title="Spraakmeeting met agents"],
|
||||
.wr-head-actions button[title="Snel praten"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* THE chat window — take all remaining space */
|
||||
.wr-log {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 50dvh !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* Readable bubbles */
|
||||
.wr-bubble { gap: 0.4rem !important; margin-bottom: 0.55rem !important; }
|
||||
.wr-avatar { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
|
||||
.wr-avatar img, .wr-avatar .agent-char-wrap,
|
||||
.wr-avatar .agent-char-wrap svg,
|
||||
.wr-avatar-fallback { width: 34px !important; height: 34px !important; }
|
||||
.wr-bubble-body {
|
||||
max-width: calc(100% - 42px) !important;
|
||||
width: auto !important;
|
||||
padding: 0.45rem 0.55rem !important;
|
||||
}
|
||||
.wr-bubble-text {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.45 !important;
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: anywhere !important;
|
||||
}
|
||||
.wr-bubble-meta { font-size: 0.72rem !important; }
|
||||
.wr-msg-reply, .wr-msg-del { opacity: 0.8 !important; }
|
||||
|
||||
.wr-composer {
|
||||
flex: 0 0 auto !important;
|
||||
position: relative !important;
|
||||
bottom: auto !important;
|
||||
z-index: 20;
|
||||
margin-top: 0.25rem !important;
|
||||
padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
|
||||
background: rgba(8, 12, 18, 0.98);
|
||||
}
|
||||
.wr-composer textarea,
|
||||
.wr-composer .form-input {
|
||||
font-size: 16px !important;
|
||||
min-height: 48px !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
.wr-composer .btn-pulse-green {
|
||||
min-height: 48px !important;
|
||||
min-width: 4.5rem !important;
|
||||
}
|
||||
.wr-ceo-panel {
|
||||
width: 100% !important;
|
||||
max-height: 85dvh !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Less top padding around agents content on phone */
|
||||
@media (max-width: 900px) {
|
||||
.app-main .main-topnav {
|
||||
padding-top: 0.45rem !important;
|
||||
padding-bottom: 0.45rem !important;
|
||||
}
|
||||
body:has(.tab-warroom-active) .app-main .main-topnav .page-tip { display: none !important; }
|
||||
}
|
||||
|
||||
@supports not (height: 100dvh) {
|
||||
@media (max-width: 900px) {
|
||||
.hm-neo.tab-warroom-active {
|
||||
height: calc(100vh - 3.25rem) !important;
|
||||
max-height: calc(100vh - 3.25rem) !important;
|
||||
}
|
||||
.wr-log { min-height: 50vh !important; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* reply-target mobile */
|
||||
@media (max-width: 900px) {
|
||||
.wr-bubble.is-reply-target .wr-bubble-body {
|
||||
outline: 2px solid #38bdf8;
|
||||
}
|
||||
.wr-msg-del { opacity: 0.35 !important; }
|
||||
.wr-msg-reply { opacity: 1 !important; font-weight: 600; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user