ec-web 0.0.28 → 0.0.29

package/dist/static/style.css

@@ -326,6 +326,21 @@ tr:hover td { background: var(--bg2); }
 .col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--dim); font-size: 11px; text-transform: uppercase; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); }
 .col-count { color: var(--fg); font-variant-numeric: tabular-nums; }
 .msg-peers .list-item .name { display: flex; align-items: center; gap: 4px; min-width: 0; }
+.msg-aids-list { display: block; }
+.msg-tree-view { display: none; }
+.msg-tree-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--dim); font-size: 11px; text-transform: uppercase; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 1; }
+.msg-tree-agent { border-bottom: 1px solid var(--border); }
+.msg-tree-agent-toggle { display: flex; align-items: flex-start; gap: 7px; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
+.msg-tree-agent-toggle:hover { background: var(--bg2); }
+.msg-tree-agent.sel > .msg-tree-agent-toggle { background: var(--bg3); color: var(--fg); }
+.msg-tree-chevron { width: 14px; flex: 0 0 14px; color: var(--dim); line-height: 1.4; text-align: center; }
+.msg-tree-agent-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.msg-tree-agent-main .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-tree-agent-main .sub { color: var(--dim); font-size: 11px; line-height: 1.35; }
+.msg-tree-chats { border-top: 1px solid var(--border); }
+.msg-tree-chat { padding-left: 31px; background: color-mix(in srgb, var(--bg) 72%, var(--bg2)); }
+.msg-tree-chat:hover { background: var(--bg2); }
+.msg-tree-empty { padding: 10px 14px 10px 31px; color: var(--dim); font-size: 11px; }
 .msg-peer-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .msg-partition-mark {
   display: inline-flex; align-items: center; flex-shrink: 0; height: 18px; padding: 0 5px;
@@ -385,12 +400,18 @@ tr:hover td { background: var(--bg2); }
 [data-theme="dark"] .msg-channel-daemon,
 [data-theme="dark"] .msg-channel-other { --msg-channel-color: #a8b6c6; }
 
-.msg-session-header { height: 44px; min-height: 44px; padding: 12px 16px; box-sizing: border-box; z-index: 2; }
+.sess-header.msg-session-header { height: auto; min-height: 0; padding: 0; box-sizing: border-box; z-index: 2; }
 .msg-session-header .sh-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.msg-session-context-row { display: flex; align-items: baseline; gap: 28px; min-width: 0; }
-.msg-session-id-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-shrink: 0; }
-.msg-session-id { color: var(--fg); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; line-height: 1.35; white-space: nowrap; }
-.msg-session-grid { display: grid; grid-template-columns: repeat(6, max-content); justify-content: space-between; gap: 16px; min-width: 0; flex: 1; }
+.msg-session-context-row { display: block; min-width: 0; }
+.msg-session-id-row { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 32px; padding: 0 12px; cursor: pointer; user-select: none; }
+.msg-session-id-row:hover { background: var(--bg3); }
+.msg-session-id-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.msg-session-id { flex: 1 1 auto; min-width: 0; color: var(--fg); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
+.msg-session-toggle { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-left: auto; color: var(--dim); font-size: 16px; line-height: 1; pointer-events: none; }
+.msg-session-toggle-icon { display: block; }
+.msg-session-grid { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; min-width: 0; padding: 0 12px 8px; cursor: pointer; user-select: none; }
+.msg-session-grid:hover { background: var(--bg3); }
+.msg-session-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 .msg-session-stat { display: flex; align-items: baseline; min-width: 0; gap: 8px; }
 .msg-session-label { color: var(--dim); font-size: 10px; line-height: 1.2; flex-shrink: 0; }
 .msg-session-value { overflow: hidden; color: var(--fg); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
@@ -438,6 +459,14 @@ tr:hover td { background: var(--bg2); }
 
 /* 会话头 */
 .sess-header { position: sticky; top: 0; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 12px 20px; z-index: 1; }
+.sess-header-collapsible { padding: 0; }
+.sess-header-toggle-row { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 42px; padding: 8px 20px; cursor: pointer; user-select: none; }
+.sess-header-toggle-row:hover, .sess-header-details:hover { background: var(--bg3); }
+.sess-header-toggle-row:focus-visible, .sess-header-details:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.sess-header-toggle-row .sh-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sess-header-toggle { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-left: auto; color: var(--dim); font-size: 16px; line-height: 1; pointer-events: none; }
+.sess-header-toggle-icon { display: block; }
+.sess-header-details { padding: 0 20px 12px; cursor: pointer; user-select: none; }
 .sh-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
 .sh-title-row { display: flex; align-items: center; height: 24px; min-width: 0; }
 .sh-title-row .sh-title { flex: 1; min-width: 0; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -976,14 +1005,35 @@ a.ctrl-btn { display: inline-flex; align-items: center; text-decoration: none; l
   border-bottom: 1px solid var(--border);
   background: var(--bg2);
 }
-.agent-ops-cell { white-space: nowrap; vertical-align: middle; }
+.agent-ops-cell {
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  width: 1%;
+  min-width: 92px;
+  white-space: nowrap;
+  vertical-align: middle;
+  background: var(--bg);
+  box-shadow: -1px 0 0 var(--border);
+}
+#view-agents .agents-table th:last-child {
+  position: sticky;
+  right: 0;
+  z-index: 4;
+  width: 1%;
+  min-width: 92px;
+  background: var(--bg2);
+  box-shadow: -1px 0 0 var(--border);
+}
+#view-agents .agents-table td.agent-ops-cell:has(.ops-more.open) { z-index: 5; }
+#view-agents .agents-table tr:hover td.agent-ops-cell { background: var(--bg2); }
 
 /* disabled 行淡化 */
 tr.ag-disabled td { opacity: .5; }
 tr.ag-disabled .ag-name { color: var(--dim); }
 
 /* 操作区：主按钮 + ··· 下拉 */
-.agent-ops { display: flex; align-items: center; gap: 5px; }
+.agent-ops { display: inline-flex; align-items: center; gap: 5px; min-width: max-content; }
 .agent-ops .ctrl-btn { padding: 2px 9px; font-size: 11px; }
 .ops-enable { color: var(--green) !important; border-color: var(--green) !important; }
 .ops-clear-queue { color: var(--orange) !important; border-color: var(--orange) !important; }
@@ -1081,7 +1131,7 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 
 /* 两行一个 agent：主行 + 信息行 */
 #view-agents tr.ag-main > td { border-bottom: none; padding-bottom: 3px; }
-#view-agents tr.ag-sub > td { padding-top: 0; padding-bottom: 9px; color: var(--dim); }
+#view-agents tr.ag-sub > td { padding-top: 0; padding-bottom: 9px; color: var(--dim); border-bottom: none; }
 #view-agents tr.ag-main:hover td, #view-agents tr.ag-sub:hover td { background: var(--bg2); }
 
 /* AID 单元：状态点 + 显示名(主) + aid(次，dim) */
@@ -1658,8 +1708,6 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 /* 渠道标：非 AUN 渠道才渲染，用冷色和消息标记区分开 */
 .ag-msg .mtag-channel { color: var(--blue); font-weight: 600; }
 .ag-msg .mtags { color: var(--magenta); font-size: 10.5px; }
-.ag-path { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
-
 /* 消息 tooltip（JS 定位的单例浮层）*/
 .msg-tip-src { display: none; }
 .msg-tip { display: none; position: fixed; top: 0; left: 0; z-index: 200; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: 8px 12px; min-width: 300px; max-width: 600px; white-space: normal; }
@@ -1745,6 +1793,11 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 .trig-table-col .trig-prompt { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
 .trig-table-col tr.trig-disabled td:not(:last-child) { color: var(--dim); }
 .trig-table-col tr.trig-disabled td:last-child { color: var(--fg); }
+.trig-table-col .trig-id-col,
+.trig-table-col .trig-subscription-col,
+.trig-table-col .trig-target-channel-col,
+.trig-table-col .trig-channel-id-col,
+.trig-table-col .trig-channel-type-col { display: none !important; }
 .trig-badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; border: 1px solid transparent; white-space: nowrap; }
 .trig-badge-active { color: var(--green, #3fb950); border-color: var(--green, #3fb950); }
 .trig-badge-disabled { color: var(--dim); border-color: var(--border); }
@@ -1788,6 +1841,12 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 .trig-history-drawer {
   width: min(980px, 100vw);
 }
+.trig-history-actions { align-items: center; }
+.trig-history-count {
+  margin-right: auto;
+  color: var(--dim);
+  font-size: 12px;
+}
 .trig-history-content {
   display: grid;
   grid-template-columns: 300px minmax(0, 1fr);
@@ -1797,31 +1856,24 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 }
 .trig-history-list-pane {
   min-width: 0;
+  min-height: 0;
   overflow-y: auto;
   border-right: 1px solid var(--border);
   background: var(--bg);
 }
-.trig-history-pane-title {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg2);
-  color: var(--dim);
-  font-size: 11px;
-  font-weight: 700;
-}
 .trig-history-list {
   display: flex;
   flex-direction: column;
 }
+.trig-history-entry {
+  border-bottom: 1px solid var(--border);
+}
 .trig-history-item {
   width: 100%;
   min-width: 0;
   padding: 10px 12px;
   border: 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 0;
   border-left: 3px solid transparent;
   background: transparent;
   color: var(--fg);
@@ -1843,6 +1895,14 @@ tr.ag-disabled .ag-name { color: var(--dim); }
   font-size: 12px;
   font-variant-numeric: tabular-nums;
 }
+.trig-history-chevron {
+  margin-left: auto;
+  color: var(--dim);
+  font-size: 18px;
+  line-height: 1;
+  transition: transform .15s ease;
+}
+.trig-history-entry.expanded .trig-history-chevron { transform: rotate(90deg); color: var(--accent); }
 .trig-history-item-meta {
   display: flex;
   gap: 5px 10px;
@@ -1856,15 +1916,6 @@ tr.ag-disabled .ag-name { color: var(--dim); }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.trig-history-item-preview {
-  margin-top: 6px;
-  overflow: hidden;
-  color: var(--dim);
-  font-size: 11px;
-  line-height: 1.35;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .trig-run-status {
   flex-shrink: 0;
   padding: 1px 6px;
@@ -1881,12 +1932,24 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 .trig-run-status-skipped { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); }
 .trig-run-status-failed { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
 .trig-run-status-dry-run { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
-.trig-history-detail {
+.trig-history-detail-pane {
   min-width: 0;
+  min-height: 0;
   overflow-y: auto;
-  padding: 16px 18px 24px;
   background: var(--bg2);
 }
+.trig-history-detail,
+.trig-history-inline-detail {
+  min-width: 0;
+  padding: 14px 16px 22px;
+  border-top: 1px solid var(--border);
+  background: var(--bg2);
+}
+.trig-history-inline-detail { display: none; }
+.trig-history-detail-pane > .trig-history-detail {
+  min-height: 100%;
+  border-top: 0;
+}
 .trig-history-detail-title {
   display: flex;
   align-items: center;
@@ -2119,16 +2182,27 @@ tr.ag-disabled .ag-name { color: var(--dim); }
 .trig-edit-grid .ag-edit-field-wide {
   grid-column: 1 / -1;
 }
-@media (max-width: 760px) {
+@media (orientation: portrait) {
+  .trig-history-drawer { width: 100vw; }
   .trig-history-backdrop { justify-content: flex-start; }
   .trig-history-content {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(160px, 38dvh) minmax(0, 1fr);
+    display: flex;
+    flex-direction: column;
   }
   .trig-history-list-pane {
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
+    flex: 1;
+    min-height: 0;
+    border: 0;
+  }
+  .trig-history-detail-pane {
+    display: none;
   }
+  .trig-history-inline-detail {
+    display: block;
+  }
+}
+
+@media (max-width: 760px), (orientation: portrait) {
   .trig-history-summary { grid-template-columns: 1fr; }
   .trig-exec-grid,
   .trig-limit-grid,
@@ -4934,3 +5008,504 @@ textarea.basic-settings-control { min-height: 78px; resize: vertical; line-heigh
   .basic-settings-secondary-btn,
   .basic-settings-primary-btn { padding-inline: 9px; }
 }
+
+/* ── Responsive console layout ──
+   The application remains server-rendered vanilla HTML. These rules only
+   change the geometry and visibility of the existing view containers. */
+:root { --topbar-height: 44px; }
+html, body { min-width: 0; }
+body { min-height: 100vh; }
+.app { min-width: 0; min-height: 100vh; height: 100dvh; }
+.content, .view, .msg-layout, .msg-columns, .sess-layout, .trig-layout { min-width: 0; min-height: 0; }
+.content { padding-bottom: env(safe-area-inset-bottom); }
+.topbar { min-width: 0; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
+.topbar > * { min-width: 0; }
+.topbar-spacer { flex: 1 1 auto; }
+.mobile-menu-btn, .mobile-page-title, .mobile-nav-drawer, .mobile-nav-backdrop { display: none; }
+
+/* Messages: three columns on wide screens, stacked selection rail on narrow
+   landscape/portrait screens. */
+.msg-layout { display: flex; flex-direction: column; height: 100%; }
+.msg-columns { display: grid; grid-template-columns: 220px 260px minmax(0, 1fr); height: 100%; flex: 1; overflow: hidden; }
+.msg-columns > .msg-col { width: auto; min-width: 0; height: 100%; overflow: auto; }
+.msg-mobile-controls { display: none; }
+.msg-stream { min-width: 0; }
+.msg-stream .detail-toolbar { position: sticky; top: 0; z-index: 3; }
+
+/* Sessions use two columns: the list (with filters above it) and the detail. */
+.sess-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100%; overflow: hidden; }
+.sess-list, .sess-detail { width: auto; min-width: 0; height: 100%; overflow: hidden; }
+.sess-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; }
+.sess-detail { overflow-y: auto; }
+.sess-list .sess-items { min-height: 0; }
+.detail-toolbar { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); }
+.sess-detail-toolbar .sess-view-control { margin-left: auto; }
+.detail-toolbar-title, .detail-placeholder { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.view.detail-fullscreen .msg-columns, .view.detail-fullscreen .sess-layout { grid-template-columns: minmax(0, 1fr); }
+.view.detail-fullscreen .msg-mobile-controls, .view.detail-fullscreen #msg-aids, .view.detail-fullscreen #msg-peers,
+.view.detail-fullscreen #sess-list { display: none; }
+.view.detail-fullscreen #msg-stream, .view.detail-fullscreen #sess-detail { display: block; grid-column: 1; width: 100%; }
+
+/* Logs: low-frequency filters collapse behind one touch-sized control. */
+.log-more-filters { display: none; min-height: 30px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--fg); padding: 0 10px; cursor: pointer; font: inherit; white-space: nowrap; }
+.log-more-filters:hover { border-color: var(--accent); }
+
+/* Trigger rows become compact cards on phones while retaining the existing
+   operation buttons and drawers. */
+.trig-row { transition: background .12s ease; }
+
+/* Agent table: keep the dense desktop table, but expose the identity, state,
+   queue, model, recent activity and operations as the compact mobile card. */
+
+@media (min-width: 901px) and (max-width: 1199px) and (orientation: landscape) {
+  .msg-columns { grid-template-columns: minmax(150px, 21vw) minmax(180px, 25vw) minmax(0, 1fr); }
+  .msg-columns #msg-aids, .msg-columns #msg-peers, .msg-columns #msg-stream { grid-column: auto; grid-row: auto; height: 100%; }
+  .sess-layout { grid-template-columns: minmax(260px, 30vw) minmax(0, 1fr); }
+}
+
+/* A tall Pad keeps the detail preview visible but stacks the two selection
+   rails in the first column, matching the portrait two-column interaction. */
+@media (min-width: 901px) and (max-width: 1199px) and (orientation: portrait) {
+  .msg-columns { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); }
+  .msg-columns #msg-aids, .msg-columns #msg-peers { grid-column: 1; width: auto; border-right: 1px solid var(--border); }
+  .msg-columns #msg-aids { grid-row: 1; height: 44%; border-bottom: 1px solid var(--border); }
+  .msg-columns #msg-peers { grid-row: 2; height: 56%; }
+  .msg-columns #msg-stream { grid-column: 2; grid-row: 1 / span 2; }
+  .sess-layout { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); }
+  .sess-list { grid-column: 1; grid-row: 1; }
+  .sess-detail { grid-column: 2; grid-row: 1; }
+}
+
+@media (max-width: 1199px) {
+  .topbar { gap: 10px; }
+  .tabs { gap: 2px; overflow-x: auto; scrollbar-width: none; }
+  .tabs::-webkit-scrollbar { display: none; }
+  .tab { padding-inline: 9px; }
+  .build-ts { display: none !important; }
+}
+
+@media (max-width: 900px) {
+  .topbar { height: 48px; gap: 10px; }
+  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); font-size: 20px; cursor: pointer; }
+  .brand { display: none; }
+  .mobile-page-title { display: block; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+  .topbar-spacer { display: none; }
+  .tabs { display: none; }
+  .build-ts, #lang-btn, #theme-btn, #basic-settings-btn, #logout-btn { display: none !important; }
+  .conn-status { margin-left: auto; font-size: 11px; white-space: nowrap; }
+  .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.34); }
+  .mobile-nav-backdrop.open { display: block; }
+  .mobile-nav-drawer { display: flex; position: fixed; z-index: 21; inset: 0 auto 0 0; width: min(320px, 86vw); flex-direction: column; background: var(--bg2); border-right: 1px solid var(--border); box-shadow: 12px 0 30px rgba(0,0,0,.18); transform: translateX(-102%); transition: transform .18s ease; padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); }
+  .mobile-nav-drawer.open { transform: translateX(0); }
+  .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--border); }
+  .icon-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); font-size: 22px; cursor: pointer; }
+  .mobile-nav-list { display: flex; flex-direction: column; gap: 3px; padding: 10px; overflow-y: auto; }
+  .mobile-nav-item, .mobile-nav-tool { min-height: 42px; border: 0; border-radius: 6px; padding: 8px 12px; background: transparent; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
+  .mobile-nav-item:hover, .mobile-nav-tool:hover, .mobile-nav-item.active { background: var(--bg3); color: var(--accent); }
+  .mobile-nav-tools { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-top: 1px solid var(--border); margin-top: auto; }
+  .mobile-nav-tool { display: flex; align-items: center; gap: 10px; }
+  body.mobile-nav-open { overflow: hidden; }
+  .msg-mobile-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px 10px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+  .msg-mobile-controls label { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--dim); font-size: 10px; }
+  .msg-mobile-controls select { width: 100%; min-width: 0; min-height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); padding: 0 8px; font: inherit; }
+  .msg-columns { grid-template-columns: minmax(190px, 34%) minmax(0, 1fr); }
+  .msg-columns #msg-aids, .msg-columns #msg-peers { grid-column: 1; width: auto; border-right: 1px solid var(--border); }
+  .msg-columns #msg-aids { grid-row: 1; height: 44%; border-bottom: 1px solid var(--border); }
+  .msg-columns #msg-peers { grid-row: 2; height: 56%; }
+  .msg-columns #msg-stream { grid-column: 2; grid-row: 1 / span 2; }
+  .sess-layout { grid-template-columns: minmax(210px, 34%) minmax(0, 1fr); }
+  .sess-list { grid-column: 1; grid-row: 1; }
+  .sess-detail { grid-column: 2; grid-row: 1; }
+  .sess-select-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
+  .log-toolbar { overflow: visible; }
+  .log-more-filters { display: inline-flex; align-items: center; justify-content: center; }
+  .log-toolbar:not(.filters-expanded) .log-secondary-control { display: none; }
+  .log-toolbar.filters-expanded .log-secondary-control { display: flex; }
+}
+
+/* Portrait devices keep the desktop tool access in the top bar. The title
+   yields space first so language, theme, settings and logout remain visible. */
+@media (max-width: 900px) and (orientation: portrait) {
+  .topbar { gap: 6px; }
+  .mobile-page-title { flex: 1 1 auto; }
+  #lang-btn,
+  #theme-btn,
+  #basic-settings-btn,
+  #logout-btn {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    margin-left: 0;
+  }
+  #lang-btn,
+  #theme-btn,
+  #basic-settings-btn { width: 30px; height: 30px; padding: 0; }
+  #logout-btn { min-width: 32px; min-height: 30px; padding: 2px 5px; font-size: 11px; }
+}
+
+@media (max-width: 720px) {
+  /* The view itself must remain the vertical scroll owner on phones. The
+     inner panes still own their own scroll where they are intentionally
+     split into columns. */
+  .view { overflow-x: hidden; overflow-y: auto; }
+  .msg-columns { grid-template-columns: minmax(155px, 38%) minmax(0, 1fr); }
+  .msg-mobile-controls { grid-template-columns: 1fr 1fr; }
+  .sess-layout { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
+  .sess-filter { padding: 8px; }
+  .sess-items .list-item { padding: 10px 9px; }
+  .detail-toolbar { padding-inline: 10px; }
+  .log-toolbar { grid-template-columns: 1fr 1fr; display: grid; gap: 8px; padding: 8px 10px; }
+  .log-primary-control, .log-search { min-width: 0; }
+  .log-search { grid-column: 1 / -1; }
+  .log-more-filters { width: 100%; }
+  .log-toolbar.filters-expanded .log-secondary-control { display: flex; }
+  .log-line { grid-template-columns: 96px 52px minmax(0, 1fr); gap: 7px; padding: 5px 10px; }
+  .log-module { max-width: 100%; }
+  #view-agents { padding: 0 8px; overflow-x: hidden; overflow-y: auto; }
+  #view-agents table { display: block; width: 100%; }
+  #view-agents table thead { display: none; }
+  #view-agents table tbody, #view-agents table tr { display: block; }
+  #view-agents tr.ag-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; margin: 8px 0 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px 8px 0 0; background: var(--bg2); }
+  #view-agents tr.ag-main > td { display: none; padding: 0; border: 0; min-width: 0; }
+  #view-agents tr.ag-main > td:nth-child(1), #view-agents tr.ag-main > td:nth-child(2), #view-agents tr.ag-main > td:nth-child(3), #view-agents tr.ag-main > td:nth-child(4), #view-agents tr.ag-main > td:nth-child(11), #view-agents tr.ag-main > td:nth-child(12) { display: block; }
+  #view-agents tr.ag-main > td:nth-child(1) { grid-column: 1; grid-row: 1; }
+  #view-agents tr.ag-main > td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
+  #view-agents tr.ag-main > td:nth-child(3) { grid-column: 1; grid-row: 2; }
+  #view-agents tr.ag-main > td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; font-size: 11px; }
+  #view-agents tr.ag-main > td:nth-child(11) { grid-column: 1; grid-row: 3; color: var(--dim); font-size: 11px; }
+  #view-agents tr.ag-main > td:nth-child(12) { grid-column: 2; grid-row: 3; text-align: right; }
+  #view-agents tr.ag-sub { display: block; margin: 0 0 8px; padding: 0 10px 9px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--bg2); }
+  #view-agents tr.ag-sub > td { display: block; padding: 0; border: 0; }
+  .agent-ops { justify-content: flex-end; flex-wrap: wrap; }
+  .agent-ops .ctrl-btn { min-height: 30px; }
+  .trig-layout { flex-direction: column; overflow: auto; }
+  .trig-agents-col { width: 100%; max-height: 118px; border-right: 0; border-bottom: 1px solid var(--border); }
+  .trig-agents-col.collapsed { width: 100%; height: 38px; min-height: 38px; }
+  .trig-table-col { overflow: visible; }
+  .trig-table-col table, .trig-table-col tbody { display: block; width: 100%; }
+  .trig-table-col thead { display: none; }
+  .trig-table-col tr.trig-row { display: block; margin: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); overflow: hidden; }
+  .trig-table-col tr.trig-row td { display: none; white-space: normal; max-width: none; padding: 8px 10px; border-bottom: 1px solid var(--border); }
+  .trig-table-col tr.trig-row td:nth-child(1), .trig-table-col tr.trig-row td:nth-child(2), .trig-table-col tr.trig-row td:nth-child(4), .trig-table-col tr.trig-row td:nth-child(7), .trig-table-col tr.trig-row td:nth-child(9), .trig-table-col tr.trig-row td:nth-child(11), .trig-table-col tr.trig-row td:last-child { display: flex; align-items: baseline; gap: 8px; }
+  .trig-table-col tr.trig-row td:nth-child(1) { font-weight: 600; }
+  .trig-table-col tr.trig-row td::before { content: attr(data-mobile-label); }
+  .trig-table-col tr.trig-row td::before { flex: 0 0 68px; color: var(--dim); font-size: 10px; }
+  .trig-table-col tr.trig-row.trig-expanded td { display: flex; }
+  .trig-table-col tr.trig-row td.trig-ops-col { position: static; }
+  .trig-table-col tr.trig-row td:last-child { border-bottom: 0; }
+  .trig-table-col .trig-ops { margin-left: auto; }
+}
+
+@media (max-width: 479px) {
+  .msg-mobile-controls { grid-template-columns: 1fr; }
+  .msg-columns { display: block; overflow: auto; }
+  .msg-columns #msg-aids, .msg-columns #msg-peers { display: none; }
+  .msg-columns #msg-stream { display: block; height: 100%; }
+  .sess-layout { display: block; overflow: auto; }
+  .sess-list { height: auto; min-height: 42%; border-right: 0; }
+  .sess-detail { display: none; height: 100%; }
+  .view.detail-fullscreen .sess-list { display: none; }
+  .view.detail-fullscreen .sess-detail { display: block; }
+  .view.detail-fullscreen .sess-layout { display: block; }
+  .log-toolbar { grid-template-columns: 1fr; }
+  .log-follow { justify-content: flex-start; }
+  .log-line { display: block; padding: 6px 10px; }
+  .log-time, .log-level, .log-module { display: inline-block; margin-right: 7px; }
+  .log-content { margin-top: 3px; }
+  .mobile-nav-drawer { width: min(300px, 88vw); }
+}
+
+/* Portrait log pages keep only the four high-frequency controls in one row:
+   source, level, line count and follow-tail. */
+@media (max-width: 900px) and (orientation: portrait) {
+  .log-toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr) max-content;
+    gap: 6px;
+    overflow: hidden;
+    padding: 8px 10px;
+  }
+  .log-toolbar .log-secondary-control:not(.log-limit-control),
+  .log-toolbar .log-search,
+  .log-toolbar .log-more-filters { display: none !important; }
+  .log-toolbar .log-limit-control,
+  .log-toolbar:not(.filters-expanded) .log-limit-control { display: flex !important; }
+  .log-toolbar .log-control,
+  .log-toolbar .log-follow { min-width: 0; }
+  .log-toolbar select { height: 30px; min-width: 0; padding-inline: 5px; font-size: 11px; }
+  .log-toolbar .log-follow { gap: 4px; font-size: 11px; }
+}
+
+/* Keep agents and triggers as scannable lists in portrait mode. The compact
+   card treatment is reserved for narrow landscape windows only. */
+@media (max-width: 900px) and (orientation: portrait) {
+  #view-agents { padding: 0; overflow-x: hidden; overflow-y: auto; }
+  #view-agents table { display: table; width: 100%; min-width: 0; }
+  #view-agents table thead { display: table-header-group; }
+  #view-agents table tbody { display: table-row-group; }
+  #view-agents table tr { display: table-row; }
+  #view-agents table th, #view-agents table td { display: table-cell; }
+  #view-agents tr.ag-main {
+    display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
+  }
+  #view-agents tr.ag-main > td,
+  #view-agents tr.ag-main > td:nth-child(n) {
+    display: table-cell; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--border); min-width: 0;
+  }
+  #view-agents tr.ag-sub {
+    display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
+  }
+  #view-agents tr.ag-sub > td { display: table-cell; padding: 0 12px 9px; border: 0; }
+  .agent-ops { justify-content: flex-start; flex-wrap: nowrap; }
+  .agent-ops .ctrl-btn { min-height: 0; }
+
+  .trig-layout { flex-direction: row; overflow: hidden; }
+  .trig-agents-col { width: 200px; max-height: none; border-right: 1px solid var(--border); border-bottom: 0; }
+  .trig-agents-col.collapsed { width: 34px; height: auto; min-height: 0; }
+  .trig-table-col { overflow: auto; }
+  .trig-table-col table { display: table; width: max-content; min-width: 100%; }
+  .trig-table-col tbody { display: table-row-group; width: auto; }
+  .trig-table-col thead { display: table-header-group; }
+  .trig-table-col tr.trig-row {
+    display: table-row; margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible;
+  }
+  .trig-table-col tr.trig-row td,
+  .trig-table-col tr.trig-row td:nth-child(n),
+  .trig-table-col tr.trig-row.trig-expanded td {
+    display: table-cell; white-space: nowrap; max-width: none; padding: 6px 10px; border-bottom: 1px solid var(--border);
+  }
+  .trig-table-col tr.trig-row td::before { content: none; display: none; }
+  .trig-table-col tr.trig-row td.trig-ops-col { position: sticky; right: 0; }
+  .trig-table-col tr.trig-row td:last-child { border-bottom: 1px solid var(--border); }
+  .trig-table-col .trig-ops { margin-left: 0; }
+}
+
+/* The left rail already identifies the selected agent in every portrait
+   layout, so the duplicate Agent column is hidden from the trigger table. */
+@media (orientation: portrait) {
+  .trig-table-col .trig-agent-col { display: none !important; }
+}
+
+/* In the two-column message layout, Agent and Chats share one expandable
+   navigation rail. The independent selectors are reserved for the narrowest
+   single-column layout. */
+@media (min-width: 480px) and (max-width: 900px),
+       (min-width: 901px) and (max-width: 1199px) and (orientation: portrait) {
+  .msg-mobile-controls { display: none !important; }
+  .msg-columns #msg-aids {
+    grid-column: 1;
+    grid-row: 1;
+    height: 100%;
+    border-right: 1px solid var(--border);
+    border-bottom: 0;
+  }
+  .msg-columns #msg-peers { display: none !important; }
+  .msg-columns #msg-stream { grid-column: 2; grid-row: 1; height: 100%; }
+  .msg-aids-list { display: none; }
+  .msg-tree-view { display: block; }
+}
+
+/* Agent statistics are useful on wide screens, but they should never force
+   the Agent view itself to scroll horizontally on a narrow viewport. */
+@media (max-width: 1199px) {
+  #view-agents { overflow-x: hidden; overflow-y: auto; }
+  #view-agents .agents-table {
+    width: 100%;
+    min-width: 0;
+    /* Let the browser size text columns naturally. Fixed layout was making
+       the operation cell collapse when the statistics columns were hidden. */
+    table-layout: auto;
+  }
+  #view-agents .agents-table th,
+  #view-agents .agents-table td {
+    min-width: 0;
+    overflow: visible;
+    text-overflow: clip;
+  }
+  #view-agents .agents-table th:not(:last-child),
+  #view-agents .agents-table td:not(.agent-ops-cell) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #view-agents .agents-table-enabled th:nth-child(6),
+  #view-agents .agents-table-enabled td:nth-child(6),
+  #view-agents .agents-table-enabled th:nth-child(7),
+  #view-agents .agents-table-enabled td:nth-child(7),
+  #view-agents .agents-table-enabled th:nth-child(8),
+  #view-agents .agents-table-enabled td:nth-child(8),
+  #view-agents .agents-table-enabled th:nth-child(9),
+  #view-agents .agents-table-enabled td:nth-child(9),
+  #view-agents .agents-table-enabled th:nth-child(10),
+  #view-agents .agents-table-enabled td:nth-child(10) {
+    display: none;
+  }
+  #view-agents .agents-table-enabled .agent-ops-cell {
+    width: 1%;
+    min-width: 92px;
+    white-space: nowrap;
+  }
+  #view-agents .agents-table-disabled .agent-ops-cell {
+    width: 1%;
+    min-width: 92px;
+    white-space: nowrap;
+  }
+  #view-agents .agents-table .agent-ops-cell { overflow: visible; }
+  #view-agents .agents-table-enabled .agent-ops { flex-wrap: wrap; gap: 3px; }
+}
+
+@media (max-width: 900px) and (orientation: portrait) {
+  /* Portrait agents stay a real table. Keep the action cell readable and
+     allow the outer view to scroll vertically when rows exceed the viewport. */
+  #view-agents { overflow-x: hidden; overflow-y: auto; }
+  #view-agents .agents-table th,
+  #view-agents .agents-table th:last-child { background: var(--bg2); }
+  #view-agents .agents-table-enabled th:nth-child(1),
+  #view-agents .agents-table-enabled td:nth-child(1) { width: 30%; }
+  #view-agents .agents-table-enabled th:nth-child(2),
+  #view-agents .agents-table-enabled td:nth-child(2) { width: 13%; }
+  #view-agents .agents-table-enabled th:nth-child(3),
+  #view-agents .agents-table-enabled td:nth-child(3) { width: 12%; }
+  #view-agents .agents-table-enabled th:nth-child(4),
+  #view-agents .agents-table-enabled td:nth-child(4) { width: 13%; }
+  #view-agents .agents-table-enabled th:nth-child(5),
+  #view-agents .agents-table-enabled td:nth-child(5) { width: 10%; }
+  #view-agents .agents-table-enabled th:nth-child(11),
+  #view-agents .agents-table-enabled td:nth-child(11) { width: 12%; }
+  #view-agents .agents-table-enabled th:nth-child(12),
+  #view-agents .agents-table-enabled td:nth-child(12) { width: 1%; min-width: 92px; }
+  #view-agents .agents-table-enabled .agent-ops-cell { white-space: normal; }
+  #view-agents .agents-table-enabled .agent-ops { flex-wrap: wrap; }
+  #view-agents .agents-table-disabled th:nth-child(1),
+  #view-agents .agents-table-disabled td:nth-child(1) { width: 86%; }
+  #view-agents .agents-table-disabled th:nth-child(2),
+  #view-agents .agents-table-disabled td:nth-child(2) { width: 1%; min-width: 92px; }
+  #view-agents .agents-table-disabled .agent-ops-cell { white-space: normal; }
+}
+
+/* Narrow screens use the same list/table treatment as the horizontal view.
+   This final block intentionally overrides the older compact-card rules above
+   so rows keep their column alignment and the page can scroll vertically. */
+@media (max-width: 720px) {
+  #view-agents { padding: 0; overflow-x: hidden; overflow-y: auto; }
+  #view-agents .agents-table {
+    display: table;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    table-layout: auto;
+  }
+  #view-agents .agents-table thead { display: table-header-group; }
+  #view-agents .agents-table tbody { display: table-row-group; }
+  #view-agents .agents-table tr,
+  #view-agents .agents-table tr.ag-main,
+  #view-agents .agents-table tr.ag-sub { display: table-row; }
+  #view-agents .agents-table th,
+  #view-agents .agents-table td,
+  #view-agents .agents-table tr.ag-main > td,
+  #view-agents .agents-table tr.ag-sub > td {
+    display: table-cell;
+    min-width: 0;
+    padding: 7px 8px;
+    border: 0;
+    border-bottom: 1px solid var(--border);
+    background: transparent;
+    vertical-align: middle;
+  }
+  #view-agents .agents-table th,
+  #view-agents .agents-table th:last-child { background: var(--bg2); }
+  /* The row reset above restores table-cell display for alignment; reapply
+     the narrow-screen statistics policy afterwards so hidden cells do not
+     consume zero-width columns before the operations cell. */
+  #view-agents .agents-table-enabled th:nth-child(6),
+  #view-agents .agents-table-enabled td:nth-child(6),
+  #view-agents .agents-table-enabled th:nth-child(7),
+  #view-agents .agents-table-enabled td:nth-child(7),
+  #view-agents .agents-table-enabled th:nth-child(8),
+  #view-agents .agents-table-enabled td:nth-child(8),
+  #view-agents .agents-table-enabled th:nth-child(9),
+  #view-agents .agents-table-enabled td:nth-child(9),
+  #view-agents .agents-table-enabled th:nth-child(10),
+  #view-agents .agents-table-enabled td:nth-child(10),
+  #view-agents .agents-table-enabled tr.ag-main > td:nth-child(6),
+  #view-agents .agents-table-enabled tr.ag-main > td:nth-child(7),
+  #view-agents .agents-table-enabled tr.ag-main > td:nth-child(8),
+  #view-agents .agents-table-enabled tr.ag-main > td:nth-child(9),
+  #view-agents .agents-table-enabled tr.ag-main > td:nth-child(10) { display: none; }
+  #view-agents .agents-table tr.ag-sub > td { padding-top: 0; padding-bottom: 8px; border-bottom: none; }
+  #view-agents .agents-table-enabled tr.ag-main > td { border-bottom: none; }
+  #view-agents .agents-table-enabled th:nth-child(1),
+  #view-agents .agents-table-enabled td:nth-child(1) { width: 24%; }
+  #view-agents .agents-table-enabled th:nth-child(2),
+  #view-agents .agents-table-enabled td:nth-child(2) { width: 10%; }
+  #view-agents .agents-table-enabled th:nth-child(3),
+  #view-agents .agents-table-enabled td:nth-child(3) { width: 8%; }
+  #view-agents .agents-table-enabled th:nth-child(4),
+  #view-agents .agents-table-enabled td:nth-child(4) { width: 13%; }
+  #view-agents .agents-table-enabled th:nth-child(5),
+  #view-agents .agents-table-enabled td:nth-child(5) { width: 10%; }
+  #view-agents .agents-table-enabled th:nth-child(11),
+  #view-agents .agents-table-enabled td:nth-child(11) { width: 13%; }
+  #view-agents .agents-table-enabled th:nth-child(12),
+  #view-agents .agents-table-enabled td:nth-child(12) { width: 1%; min-width: 92px; }
+  #view-agents .agents-table-enabled td:not(.agent-ops-cell) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+  #view-agents .agents-table-enabled .agent-ops-cell {
+    min-width: 92px;
+    overflow: visible;
+    white-space: normal;
+  }
+  #view-agents .agents-table-disabled .agent-ops-cell {
+    min-width: 92px;
+    overflow: visible;
+    white-space: normal;
+  }
+  #view-agents .agents-table td.agent-ops-cell { background: var(--bg); box-shadow: -1px 0 0 var(--border); }
+  #view-agents .agents-table tr:hover td.agent-ops-cell { background: var(--bg2); }
+  #view-agents .agents-table-enabled .agent-ops,
+  #view-agents .agents-table-disabled .agent-ops {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 3px;
+  }
+  #view-agents .agents-table-enabled .agent-ops .ctrl-btn,
+  #view-agents .agents-table-disabled .agent-ops .ctrl-btn {
+    min-height: 26px;
+    padding: 2px 5px;
+    font-size: 10px;
+  }
+  #view-agents .agents-table-enabled .agent-ops-cell .agent-ops { min-width: 0; }
+  #view-agents .agents-table-disabled th:nth-child(1),
+  #view-agents .agents-table-disabled td:nth-child(1) { width: 86%; }
+  #view-agents .agents-table-disabled th:nth-child(2),
+  #view-agents .agents-table-disabled td:nth-child(2) { width: 1%; min-width: 92px; }
+  #view-agents .agents-table-disabled td:nth-child(1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+
+  .trig-layout { flex-direction: row; overflow: hidden; }
+  .trig-agents-col { width: min(200px, 34vw); max-height: none; border-right: 1px solid var(--border); border-bottom: 0; }
+  .trig-agents-col.collapsed { width: 34px; height: auto; min-height: 0; }
+  .trig-table-col { overflow: auto; }
+  .trig-table-col table { display: table; width: max-content; min-width: 100%; }
+  .trig-table-col tbody { display: table-row-group; }
+  .trig-table-col thead { display: table-header-group; }
+  .trig-table-col tr.trig-row { display: table-row; margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
+  .trig-table-col tr.trig-row td,
+  .trig-table-col tr.trig-row td:nth-child(n),
+  .trig-table-col tr.trig-row.trig-expanded td {
+    display: table-cell;
+    white-space: nowrap;
+    max-width: none;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border);
+  }
+  .trig-table-col tr.trig-row td::before { content: none; display: none; }
+  .trig-table-col tr.trig-row td.trig-ops-col { position: sticky; right: 0; }
+  .trig-table-col .trig-ops { margin-left: 0; }
+}