@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/styles/mobile-chat.css

@@ -1,5 +0,0 @@
-/* mobile-chat.css — minimal mobile-specific overrides (most rules in chat.css @media) */
-@media (max-width: 480px) {
-  .chat-composer-wrap { padding: 0.375rem 0.375rem 0.5rem; }
-  .chat-welcome-h1 { font-size: 1.875rem; }
-}

package/bizar-dash/src/web/styles/mobile-layout.css

@@ -1,233 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────
-   Mobile Layout Shell — v5.4
-   Mobile-first navigation: header, drawer, content, bottom nav.
-   ───────────────────────────────────────────────────────────────────── */
-
-/* ─── Layout shell ─────────────────────────────────────────────────── */
-.mobile-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-  background: var(--bg);
-}
-
-/* ─── Header ──────────────────────────────────────────────────────── */
-.mobile-header {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 56px;
-  padding: 0 16px;
-  background: var(--surface-1, var(--surface, var(--bg-elev)));
-  border-bottom: 1px solid transparent;
-  transition: border-color 200ms ease;
-}
-
-.mobile-header.is-scrolled {
-  border-bottom-color: var(--border);
-}
-
-.mobile-header-title {
-  flex: 1;
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-  color: var(--text-strong, var(--text));
-}
-
-.mobile-menu-btn,
-.mobile-search-btn,
-.mobile-settings-exit {
-  background: transparent;
-  border: none;
-  color: var(--text);
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 120ms ease;
-}
-
-.mobile-menu-btn:hover,
-.mobile-search-btn:hover,
-.mobile-settings-exit:hover {
-  background: var(--bg-elev-2, var(--bg-elev));
-}
-
-.mobile-menu-btn:active,
-.mobile-search-btn:active,
-.mobile-settings-exit:active {
-  background: var(--bg-elev-3);
-}
-
-/* ─── Content area ───────────────────────────────────────────────── */
-.mobile-content {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 12px 16px 80px;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-}
-
-/* ─── Bottom nav ──────────────────────────────────────────────────── */
-.mobile-bottom-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  height: 64px;
-  background: var(--surface-1, var(--surface, var(--bg-elev)));
-  border-top: 1px solid var(--border);
-  z-index: 50;
-  padding-bottom: env(safe-area-inset-bottom, 0);
-}
-
-.mobile-nav-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  background: transparent;
-  border: none;
-  color: var(--text-dim, var(--text-muted));
-  font-size: 10px;
-  font-family: inherit;
-  cursor: pointer;
-  padding: 4px 0;
-  transition: color 120ms ease;
-}
-
-.mobile-nav-item.is-active {
-  color: var(--accent);
-}
-
-.mobile-nav-label {
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 1;
-}
-
-/* ─── Drawer overlay ─────────────────────────────────────────────── */
-.mobile-drawer-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 60;
-  animation: fadeIn 200ms ease;
-}
-
-/* ─── Drawer panel ───────────────────────────────────────────────── */
-.mobile-drawer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 80%;
-  max-width: 320px;
-  background: var(--surface-1, var(--surface, var(--bg-elev)));
-  z-index: 70;
-  transform: translateX(-100%);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  display: flex;
-  flex-direction: column;
-}
-
-.mobile-drawer.is-open {
-  transform: translateX(0);
-}
-
-.mobile-drawer-head {
-  position: sticky;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  background: var(--surface-1, var(--surface, var(--bg-elev)));
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.mobile-drawer-head h2 {
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-  color: var(--text-strong, var(--text));
-}
-
-.mobile-drawer-close {
-  background: transparent;
-  border: none;
-  color: var(--text);
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mobile-drawer-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  padding: 16px;
-  flex: 1;
-}
-
-.mobile-drawer-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 16px 8px;
-  background: var(--surface-2, var(--bg-elev-2));
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-size: 12px;
-  font-family: inherit;
-  cursor: pointer;
-  min-height: 80px;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.mobile-drawer-item.is-active {
-  border-color: var(--accent);
-  background: rgba(139, 92, 246, 0.1);
-}
-
-.mobile-drawer-item:active {
-  opacity: 0.8;
-}
-
-/* ─── Animations ─────────────────────────────────────────────────── */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* ─── Desktop hide ───────────────────────────────────────────────── */
-@media (min-width: 1024px) {
-  .mobile-layout,
-  .mobile-bottom-nav,
-  .mobile-drawer,
-  .mobile-header {
-    display: none;
-  }
-}