agentgui 1.0.930 → 1.0.932

package/static/css/gmail-skin.css

@@ -1,663 +0,0 @@
-/*
- * gmail-skin.css — Gmail-inspired layout and visual theme.
- * Loaded LAST — wins over brand-bible.css.
- */
-
-/* ── Design tokens ─────────────────────────────────────────── */
-:root {
-  --gm-blue:         #1a73e8;
-  --gm-blue-hover:   #1557b0;
-  --gm-red:          #ea4335;
-  --gm-surface:      #f6f8fc;
-  --gm-panel:        #ffffff;
-  --gm-hover:        #f1f3f4;
-  --gm-active-bg:    #d3e3fd;
-  --gm-active-text:  #0b57d0;
-  --gm-border:       #e0e0e0;
-  --gm-text-1:       #202124;
-  --gm-text-2:       #5f6368;
-  --gm-text-3:       #9aa0a6;
-  --gm-rail-w:       72px;
-  --gm-sidebar-w:    280px;
-  --gm-header-h:     64px;
-  --gm-radius-pill:  9999px;
-  --gm-radius-lg:    16px;
-  --gm-radius-md:    8px;
-  --gm-shadow-1:     0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
-  --gm-shadow-2:     0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
-  --gm-font:         'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
-}
-
-html.dark, [data-theme="dark"] {
-  --gm-surface:      #202124;
-  --gm-panel:        #292a2d;
-  --gm-hover:        #35363a;
-  --gm-active-bg:    #1e3a5f;
-  --gm-active-text:  #8ab4f8;
-  --gm-border:       #3c4043;
-  --gm-text-1:       #e8eaed;
-  --gm-text-2:       #bdc1c6;
-  --gm-text-3:       #9aa0a6;
-  --gm-shadow-1:     0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.2);
-  --gm-shadow-2:     0 1px 3px rgba(0,0,0,.4), 0 4px 8px 3px rgba(0,0,0,.2);
-}
-
-/* ── Base ───────────────────────────────────────────────────── */
-html, body {
-  font-family: var(--gm-font) !important;
-  background: var(--gm-surface) !important;
-  color: var(--gm-text-1) !important;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Kill brand-bible flat border mandate for gmail layout elements */
-.app-shell,
-.nav-rail,
-.sidebar,
-.main-header,
-.main-panel,
-.sidebar-header,
-.sidebar-search-bar,
-.input-section,
-.input-card,
-.status-badge,
-.sidebar-list,
-.streaming-status-bar {
-  border: none !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-}
-
-/* ── App shell: rail + sidebar + main ──────────────────────── */
-.app-shell {
-  display: grid !important;
-  grid-template-columns: var(--gm-rail-w) var(--gm-sidebar-w) 1fr;
-  grid-template-rows: 1fr;
-  background: var(--gm-surface) !important;
-}
-
-/* When sidebar collapsed: collapse the sidebar column */
-.app-shell:has(.sidebar.collapsed) {
-  grid-template-columns: var(--gm-rail-w) 0 1fr;
-}
-
-/* ── Nav Rail ───────────────────────────────────────────────── */
-.nav-rail {
-  width: var(--gm-rail-w);
-  display: flex !important;
-  flex-direction: column;
-  align-items: center;
-  padding: 8px 0;
-  background: var(--gm-surface) !important;
-  border-right: none !important;
-  gap: 4px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.nav-rail-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  width: 56px;
-  min-height: 56px;
-  padding: 8px 4px;
-  background: transparent;
-  border: none !important;
-  border-radius: var(--gm-radius-lg) !important;
-  cursor: pointer;
-  color: var(--gm-text-2);
-  transition: background-color 0.15s;
-}
-
-.nav-rail-item:hover {
-  background: var(--gm-hover) !important;
-  color: var(--gm-text-1);
-}
-
-.nav-rail-item.active {
-  background: var(--gm-active-bg) !important;
-  color: var(--gm-active-text);
-}
-
-.nav-rail-item svg {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.nav-rail-label {
-  font-size: 10px;
-  font-family: var(--gm-font);
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-}
-
-/* Compose button: pill FAB style */
-.nav-rail-compose {
-  width: 56px;
-  min-height: 56px;
-  background: var(--gm-panel) !important;
-  box-shadow: var(--gm-shadow-1) !important;
-  border-radius: var(--gm-radius-lg) !important;
-  margin-bottom: 8px;
-  color: var(--gm-text-1) !important;
-}
-
-.nav-rail-compose:hover {
-  box-shadow: var(--gm-shadow-2) !important;
-  background: var(--gm-hover) !important;
-}
-
-/* ── Sidebar ────────────────────────────────────────────────── */
-.sidebar {
-  width: var(--gm-sidebar-w) !important;
-  background: var(--gm-surface) !important;
-  border-right: none !important;
-  padding-top: 4px;
-  overflow: hidden;
-}
-
-.sidebar.collapsed {
-  width: 0 !important;
-  min-width: 0 !important;
-}
-
-.sidebar-header {
-  padding: 12px 8px 8px !important;
-  background: transparent !important;
-  min-height: unset !important;
-  border: none !important;
-}
-
-.sidebar-header h2, .sidebar-header .brand-line {
-  font-family: var(--gm-font) !important;
-  font-size: 18px !important;
-  font-weight: 400 !important;
-  color: var(--gm-text-2) !important;
-  letter-spacing: 0 !important;
-  text-transform: none !important;
-}
-
-/* Hide the new-conversation button in sidebar header — compose is in rail */
-.sidebar-new-btn {
-  display: none !important;
-}
-
-/* Sidebar overflow button */
-.sidebar-overflow-btn {
-  background: transparent !important;
-  border: none !important;
-  border-radius: var(--gm-radius-pill) !important;
-  width: 32px;
-  height: 32px;
-  color: var(--gm-text-2) !important;
-}
-.sidebar-overflow-btn:hover {
-  background: var(--gm-hover) !important;
-}
-
-.sidebar-overflow-menu {
-  background: var(--gm-panel) !important;
-  box-shadow: var(--gm-shadow-2) !important;
-  border: none !important;
-  border-radius: var(--gm-radius-md) !important;
-  padding: 8px 0 !important;
-}
-
-.sidebar-overflow-menu-item {
-  padding: 8px 16px !important;
-  font-size: 13px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-1) !important;
-  border-radius: 0 !important;
-  border: none !important;
-}
-.sidebar-overflow-menu-item:hover {
-  background: var(--gm-hover) !important;
-}
-.sidebar-overflow-menu-item.danger { color: var(--gm-red) !important; }
-
-/* Sidebar search */
-.sidebar-search-bar {
-  padding: 4px 12px 8px !important;
-  background: transparent !important;
-  border: none !important;
-}
-
-.sidebar-search-input {
-  background: var(--gm-panel) !important;
-  border: 1px solid var(--gm-border) !important;
-  border-radius: var(--gm-radius-pill) !important;
-  height: 36px !important;
-  padding: 0 16px !important;
-  font-size: 13px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-1) !important;
-  box-shadow: var(--gm-shadow-1) !important;
-  transition: box-shadow 0.15s;
-}
-.sidebar-search-input:focus {
-  outline: none !important;
-  box-shadow: var(--gm-shadow-2) !important;
-}
-
-/* ── Conversation list ─────────────────────────────────────── */
-.sidebar-list {
-  padding: 4px 0 !important;
-  border: none !important;
-}
-
-.conversation-item {
-  display: grid !important;
-  grid-template-columns: 1fr auto auto auto auto !important;
-  align-items: center;
-  padding: 0 16px !important;
-  margin: 0 8px !important;
-  height: 56px;
-  border-radius: var(--gm-radius-pill) !important;
-  border: none !important;
-  border-left: none !important;
-  cursor: pointer;
-  gap: 0;
-  transition: background-color 0.1s;
-}
-
-.conversation-item:hover {
-  background: var(--gm-hover) !important;
-  transform: none !important;
-}
-
-.conversation-item.active {
-  background: var(--gm-active-bg) !important;
-  color: var(--gm-active-text) !important;
-}
-
-.conversation-item-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  padding-right: 8px;
-}
-
-.conversation-item-title {
-  font-size: 13px !important;
-  font-family: var(--gm-font) !important;
-  font-weight: 600 !important;
-  color: var(--gm-text-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.4;
-}
-
-.conversation-item.active .conversation-item-title {
-  color: var(--gm-active-text);
-}
-
-.conversation-item-meta {
-  font-size: 11px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-3) !important;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: 2px;
-}
-
-.conversation-item.active .conversation-item-meta {
-  color: var(--gm-active-text) !important;
-  opacity: 0.75;
-}
-
-/* Action buttons on conversation items */
-.conversation-item-delete,
-.conversation-item-archive,
-.conversation-item-export {
-  width: 24px !important;
-  height: 24px !important;
-  border-radius: var(--gm-radius-pill) !important;
-  border: none !important;
-}
-.conversation-item-delete:hover { background: rgba(234,67,53,.15) !important; color: var(--gm-red) !important; }
-.conversation-item-archive:hover { background: rgba(251,188,4,.15) !important; color: #b36f00 !important; }
-.conversation-item-export:hover { background: rgba(26,115,232,.15) !important; color: var(--gm-blue) !important; }
-
-.conversation-item.active .conversation-item-delete,
-.conversation-item.active .conversation-item-archive,
-.conversation-item.active .conversation-item-export {
-  color: var(--gm-active-text) !important;
-}
-
-.sidebar-empty {
-  padding: 32px 16px !important;
-  font-size: 13px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-3) !important;
-  border: none !important;
-}
-
-/* ── Main header ────────────────────────────────────────────── */
-.main-header {
-  height: var(--gm-header-h) !important;
-  min-height: var(--gm-header-h) !important;
-  background: var(--gm-surface) !important;
-  border-bottom: 1px solid var(--gm-border) !important;
-  padding: 0 16px !important;
-  gap: 8px !important;
-  display: flex;
-  align-items: center;
-}
-
-/* Search bar in header — Gmail style, centered, expands */
-.header-search-wrap {
-  flex: 1;
-  max-width: 720px;
-  margin: 0 auto;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.header-search-icon {
-  position: absolute;
-  left: 12px;
-  width: 18px;
-  height: 18px;
-  color: var(--gm-text-2);
-  pointer-events: none;
-}
-
-.header-search-input {
-  width: 100%;
-  height: 40px;
-  background: var(--gm-panel) !important;
-  border: 1px solid var(--gm-border) !important;
-  border-radius: var(--gm-radius-pill) !important;
-  padding: 0 16px 0 42px !important;
-  font-size: 14px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-1) !important;
-  outline: none;
-  box-shadow: var(--gm-shadow-1) !important;
-  transition: box-shadow 0.15s, background 0.15s;
-}
-
-.header-search-input:focus {
-  box-shadow: var(--gm-shadow-2) !important;
-  background: var(--gm-panel) !important;
-}
-
-/* Hide the brand title in header when search is present */
-.header-title {
-  display: none !important;
-}
-
-.sidebar-toggle-btn,
-.theme-toggle-btn,
-.header-icon-btn {
-  width: 40px !important;
-  height: 40px !important;
-  border-radius: var(--gm-radius-pill) !important;
-  background: transparent !important;
-  border: none !important;
-  color: var(--gm-text-2) !important;
-  flex-shrink: 0;
-}
-
-.sidebar-toggle-btn:hover,
-.theme-toggle-btn:hover,
-.header-icon-btn:hover {
-  background: var(--gm-hover) !important;
-  color: var(--gm-text-1) !important;
-}
-
-.status-badge {
-  background: transparent !important;
-  border: none !important;
-  font-size: 11px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-3) !important;
-}
-
-/* ── View toggle bar ────────────────────────────────────────── */
-.view-toggle-bar {
-  background: var(--gm-panel) !important;
-  border-bottom: 1px solid var(--gm-border) !important;
-  padding: 0 16px !important;
-}
-
-.view-toggle-btn {
-  border-radius: 0 !important;
-  border: none !important;
-  border-bottom: 2px solid transparent !important;
-  color: var(--gm-text-2) !important;
-  font-family: var(--gm-font) !important;
-  font-size: 13px !important;
-}
-.view-toggle-btn:hover { color: var(--gm-text-1) !important; background: transparent !important; }
-.view-toggle-btn.active {
-  color: var(--gm-blue) !important;
-  border-bottom-color: var(--gm-blue) !important;
-  background: transparent !important;
-}
-
-/* ── Messages area ──────────────────────────────────────────── */
-.main-panel {
-  background: var(--gm-panel) !important;
-}
-
-#output-scroll,
-.messages-wrapper {
-  background: var(--gm-panel) !important;
-  border: none !important;
-}
-
-#output {
-  max-width: 860px;
-  margin: 0 auto;
-  padding: 16px 24px 24px;
-}
-
-/* Messages: Gmail thread-like, no chat bubbles */
-.message {
-  margin-bottom: 8px !important;
-  padding: 12px 16px !important;
-  border: 1px solid var(--gm-border) !important;
-  border-radius: var(--gm-radius-md) !important;
-  background: var(--gm-panel) !important;
-  max-width: 100% !important;
-  box-shadow: var(--gm-shadow-1) !important;
-}
-
-.message-user {
-  background: #e8f0fe !important;
-  border-color: #c5d6f9 !important;
-  margin-left: auto;
-  max-width: 80% !important;
-}
-html.dark .message-user {
-  background: #1e3a5f !important;
-  border-color: #2d5a9e !important;
-}
-
-.message-assistant {
-  margin-right: auto;
-  max-width: 100% !important;
-}
-
-.message-role {
-  font-size: 11px !important;
-  font-family: var(--gm-font) !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
-  color: var(--gm-text-2) !important;
-}
-
-.message-content, .message-text {
-  font-family: var(--gm-font) !important;
-  font-size: 14px !important;
-  line-height: 1.6 !important;
-  color: var(--gm-text-1) !important;
-}
-
-/* ── Input area ─────────────────────────────────────────────── */
-.input-section {
-  padding: 12px 24px 20px !important;
-  background: var(--gm-panel) !important;
-  border-top: 1px solid var(--gm-border) !important;
-}
-
-.input-card {
-  background: var(--gm-panel) !important;
-  border: 1px solid var(--gm-border) !important;
-  border-radius: var(--gm-radius-lg) !important;
-  box-shadow: var(--gm-shadow-1) !important;
-  overflow: hidden;
-  transition: box-shadow 0.15s;
-}
-
-.input-card:focus-within {
-  box-shadow: var(--gm-shadow-2) !important;
-  border-color: transparent !important;
-}
-
-.input-card-textarea {
-  background: transparent !important;
-  border: none !important;
-  padding: 14px 16px !important;
-  font-size: 14px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-1) !important;
-  min-height: 52px;
-}
-.input-card-textarea::placeholder { color: var(--gm-text-3) !important; }
-.input-card-textarea:focus { outline: none !important; box-shadow: none !important; }
-
-.input-card-toolbar {
-  padding: 6px 10px !important;
-  border-top: 1px solid var(--gm-hover) !important;
-  background: transparent !important;
-}
-
-.input-icon-btn {
-  width: 36px !important;
-  height: 36px !important;
-  border-radius: var(--gm-radius-pill) !important;
-  background: transparent !important;
-  border: none !important;
-  color: var(--gm-text-2) !important;
-}
-.input-icon-btn:hover { background: var(--gm-hover) !important; color: var(--gm-text-1) !important; }
-
-.input-send-btn {
-  background: var(--gm-blue) !important;
-  color: #fff !important;
-  border-radius: var(--gm-radius-pill) !important;
-  width: auto !important;
-  min-width: 40px !important;
-  padding: 0 16px !important;
-  border: none !important;
-}
-.input-send-btn:hover { filter: brightness(1.1); box-shadow: var(--gm-shadow-1) !important; }
-
-.input-chip-select {
-  background: var(--gm-hover) !important;
-  border: none !important;
-  border-radius: var(--gm-radius-pill) !important;
-  height: 28px !important;
-  padding: 0 10px !important;
-  font-size: 12px !important;
-  font-family: var(--gm-font) !important;
-  color: var(--gm-text-1) !important;
-}
-
-/* ── Streaming status bar ───────────────────────────────────── */
-.streaming-status-bar {
-  background: var(--gm-text-1) !important;
-  color: var(--gm-surface) !important;
-  border: none !important;
-  border-radius: var(--gm-radius-pill) !important;
-  box-shadow: var(--gm-shadow-2) !important;
-  padding: 10px 20px !important;
-  font-family: var(--gm-font) !important;
-  font-size: 13px !important;
-}
-.status-agent-name { color: #8ab4f8 !important; }
-.status-cancel-btn {
-  background: transparent !important;
-  border: none !important;
-  color: #8ab4f8 !important;
-  font-weight: 500;
-  font-family: var(--gm-font) !important;
-}
-
-/* ── Modals ─────────────────────────────────────────────────── */
-.folder-modal,
-.tools-popup-content {
-  border-radius: var(--gm-radius-lg) !important;
-  box-shadow: var(--gm-shadow-2) !important;
-  border: none !important;
-  font-family: var(--gm-font) !important;
-}
-
-/* ── Scrollbars ─────────────────────────────────────────────── */
-.sidebar-list::-webkit-scrollbar { width: 8px; }
-.sidebar-list::-webkit-scrollbar-thumb { background: var(--gm-border); border-radius: 4px; }
-#output-scroll::-webkit-scrollbar { width: 8px; }
-#output-scroll::-webkit-scrollbar-thumb { background: var(--gm-border); border-radius: 4px; }
-
-/* ── Welcome screen ─────────────────────────────────────────── */
-.welcome-logo {
-  background: linear-gradient(135deg, #4285f4 0%, #34a853 33%, #fbbc04 66%, #ea4335 100%) !important;
-  color: #fff !important;
-  width: 80px;
-  height: 80px;
-  border-radius: 50% !important;
-  font-family: var(--gm-font) !important;
-  font-size: 48px !important;
-  border: none !important;
-}
-.welcome-title {
-  font-family: var(--gm-font) !important;
-  font-weight: 400 !important;
-  font-size: 28px !important;
-  color: var(--gm-text-1) !important;
-}
-.welcome-subtitle {
-  font-family: var(--gm-font) !important;
-  font-size: 14px !important;
-  color: var(--gm-text-2) !important;
-}
-
-/* ── Typography fixes in output ─────────────────────────────── */
-#output h1, #output h2, #output h3, #output h4 {
-  font-family: var(--gm-font) !important;
-  font-weight: 500;
-  margin: 1em 0 .5em;
-}
-#output p { margin: .5em 0; font-family: var(--gm-font) !important; }
-#output ul { list-style: disc; padding-left: 1.5em; }
-#output ol { list-style: decimal; padding-left: 1.5em; }
-#output a { color: var(--gm-blue); text-decoration: none; }
-#output a:hover { text-decoration: underline; }
-
-/* ── Focus ring ─────────────────────────────────────────────── */
-:focus-visible {
-  outline: 2px solid var(--gm-blue) !important;
-  outline-offset: 2px;
-}
-
-/* ── Mobile: hide nav rail ──────────────────────────────────── */
-@media (max-width: 768px) {
-  .app-shell {
-    grid-template-columns: 0 1fr !important;
-  }
-  .nav-rail { display: none !important; }
-}