/* Workspace styles — generated from workspace.html by scripts/split_workspace.mjs.
 * Edit the source blocks in workspace.html and re-run the script; edits made
 * here are overwritten. */
/* --------------------------------------------------------------------------       Sidebar       -------------------------------------------------------------------------- */
      .sidebar {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        min-width: 0;
        min-height: 0;
        background: var(--panel);
        border-right: 1px solid var(--border);
        overflow: hidden;
      }
      .sidebar.collapsed {
        overflow: hidden;
      } /* Collapsing the sidebar leaves the workspace rail in place. */
      .sidebar.collapsed .sidebar-content,
      .sidebar.collapsed .sidebar-toggle {
        display: none;
      }
      .sidebar-inner {
        display: flex;
        flex-direction: row;
        flex: 1;
        min-height: 0;
        width: 100%;
      }
      .sidebar-content {
        flex: 1;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        padding: 18px 14px 16px;
      }
      .sidebar-toggle {
        position: absolute;
        top: 12px;
        right: 8px;
        z-index: 60;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
      }
      .sidebar-toggle:hover {
        background: var(--panel-2);
        color: var(--text);
      }
      .sidebar-mobile-close {
        display: none;
      }
      .mobile-sidebar-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--panel);
        color: var(--text);
        cursor: pointer;
      }
      .workspace-sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 70;
        border: 0;
        background: rgba(0, 0, 0, 0.5);
      }
      html.workspace-sidebar-open,
      body.workspace-sidebar-open {
        overflow: hidden !important;
      }
      .sidebar-toggle-fixed {
        position: fixed;
        left: var(--workspace-rail-w, 56px);
        top: 14px;
        z-index: 60;
        width: 30px;
        height: 30px;
        border: 1px solid var(--border);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        background: var(--panel);
        color: var(--text-soft);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
      } /* Sidebar resize handle (drag the right edge). */
      .sidebar-resize-handle {
        position: absolute;
        top: 0;
        right: 0;
        width: 8px;
        height: 100%;
        cursor: col-resize;
        z-index: 45;
        touch-action: none;
      }
      .sidebar-resize-handle::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 100%;
        background: transparent;
        transition: background 120ms ease;
      }
      .sidebar-resize-handle:hover::after,
      .sidebar-resize-handle:focus-visible::after,
      body.sidebar-resizing .sidebar-resize-handle::after {
        background: var(--accent);
      }
      .sidebar-resize-handle:focus-visible {
        outline: none;
      }
      body.sidebar-collapsed .sidebar-resize-handle {
        display: none;
      } /* Workspace rail: a narrow column of workspace identities and actions. */
      .workspace-rail {
        width: var(--workspace-rail-w, 56px);
        flex: 0 0 var(--workspace-rail-w, 56px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 0;
        overflow-y: auto;
        background: var(--panel-3);
        border-right: 1px solid var(--border);
      }
      .ws-rail-icon {
        position: relative;
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--panel);
        color: var(--text-soft);
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          color 160ms ease,
          border-radius 160ms ease;
      } /* Selection cue is a shape as well as a colour, so it still reads       when colour perception or contrast is limited. It sits inside the       button so a narrow scrollbar cannot clip it. */
      .ws-rail-workspace::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        width: 3px;
        height: 0;
        border-radius: 999px;
        background: var(--on-accent);
        transform: translateY(-50%);
        transition: height 160ms ease;
      }
      .ws-rail-workspace.active::before {
        height: 18px;
      }
      .ws-rail-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
      }
      .ws-rail-mark {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
      }
      .ws-rail-action-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
      }
      .ws-rail-icon:not(.active):hover {
        background: var(--accent-soft);
        border-color: var(--accent-line);
        color: var(--accent-text);
        border-radius: 14px;
      }
      .ws-rail-icon.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
        border-radius: 14px;
      }
      .ws-rail-icon:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        box-shadow: var(--focus-ring);
      }
      .ws-rail-add {
        border-style: dashed;
        color: var(--accent-text);
      }
      .ws-rail-apps {
        flex-direction: column;
        gap: 1px;
        padding: 4px 2px 3px;
      }
      .ws-rail-apps .ws-rail-action-icon {
        width: 18px;
        height: 18px;
      }
      .ws-rail-apps-label {
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
      }
      .ws-rail-tooltip {
        position: fixed;
        z-index: 1200;
        width: max-content;
        max-width: 240px;
        padding: 6px 9px;
        border-radius: var(--radius-sm);
        background: var(--text);
        color: var(--bg);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: anywhere;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-50%);
        box-shadow: var(--shadow-sm);
        transition: opacity 120ms ease;
      }
      .ws-rail-tooltip.is-visible {
        visibility: visible;
        opacity: 1;
      }
      .ws-icon-sprite {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
      } /* Profile control pinned to the bottom of the workspace rail. */
      .workspace-rail-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: auto;
        padding-top: 8px;
        border-top: 1px solid var(--border);
      }
      .ws-icon-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .ws-emoji-option {
        width: 40px;
        height: 40px;
        padding: 0;
        overflow: hidden;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--panel);
        font-size: 1.1rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .ws-emoji-option img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .ws-emoji-option.is-selected {
        border-color: var(--accent);
        box-shadow: var(--focus-ring);
      }
      .ws-emoji-add {
        border-style: dashed;
        color: var(--accent-text);
        font-size: 1.15rem;
        font-weight: 600;
      }
      .ws-emoji-option:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .logo-mark {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 22px;
        color: var(--text);
      }
      .logo-mark img {
        width: 26px;
        height: 26px;
        object-fit: contain;
        display: block;
      }
      .logo-mark svg {
        width: 26px;
        height: 26px;
      }
      .logo-mark span {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .sidebar-title,
      .section-label {
        display: block;
        margin: 22px 4px 8px;
        font-size: var(--type-label-size);
        font-weight: var(--type-label-weight);
        letter-spacing: var(--type-label-letter-spacing);
        color: var(--muted);
        text-transform: uppercase;
      }
      .sidebar-title {
        margin-top: 0;
      }
      .section-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .section-label-row .btn {
        min-height: 22px;
        padding: 0 6px;
        font-size: var(--type-label-size);
        color: var(--muted);
        background: transparent;
        border-color: transparent;
      }
      .section-label-row .btn:hover {
        background: var(--panel-2);
        color: var(--text);
      } /* Channel rows */
      .channel-row {
        position: relative;
        margin-bottom: 2px;
      }
      .channel {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 40px;
        padding: 7px 10px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-soft);
        font-size: var(--type-primary-size);
        font-weight: var(--type-primary-weight);
        text-align: left;
        cursor: pointer;
        transition:
          background 0.14s ease,
          color 0.14s ease;
      }
      .channel:hover {
        background: var(--panel-2);
        color: var(--text);
      }
      .channel.active {
        background: transparent;
        color: var(--accent-on-tint);
        font-weight: var(--type-control-weight);
      }
      .channel.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 2px;
        border-radius: 0 3px 3px 0;
        background: var(--accent);
      }
      .channel:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .channel-icon {
        flex: 0 0 18px;
        width: 18px;
        text-align: center;
        font-size: 0.85rem;
        color: var(--muted);
      }
      .channel.active .channel-icon {
        color: var(--accent-text);
      }
      .channel-text {
        min-width: 0;
        flex: 1;
      }
      .channel-name-row {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-weight: var(--type-primary-weight);
        font-size: var(--type-primary-size);
        line-height: 1.3;
      }
      .channel.active .channel-name-row {
        font-weight: var(--type-control-weight);
      }
      .channel-name-row > span:not(.unread-dot):not(.task-done-dot) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .channel .meta {
        margin-top: 1px;
        font-size: var(--type-secondary-size);
        font-weight: 400;
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .channel-group {
        margin-bottom: 14px;
      }
      .channel-group-title {
        margin: 0 4px 6px;
        font-size: var(--type-label-size);
        font-weight: var(--type-label-weight);
        letter-spacing: var(--type-label-letter-spacing);
        text-transform: uppercase;
        color: var(--muted);
      }
      .peer-name {
        margin-top: -1px;
        font-size: var(--type-secondary-size);
        color: var(--muted);
      }
      .channel-delete-button {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
        z-index: 5;
        opacity: 0;
        pointer-events: none;
        border: 1px solid var(--danger-line);
        border-radius: 6px;
        background: var(--panel);
        color: var(--danger);
        font-size: 0.68rem;
        font-weight: 600;
        padding: 3px 7px;
        cursor: pointer;
        transition: opacity 120ms ease;
      }
      .channel-delete-button:hover {
        background: var(--danger-soft);
      }
      .channel-row:hover .channel-delete-button,
      .channel-delete-button:focus-visible {
        opacity: 1;
        pointer-events: auto;
      } /* Add buttons under Channels and Agents */
      .sidebar-content > .btn-sm {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
        color: var(--text-soft);
        border-style: dashed;
        border-color: var(--border-strong);
        background: var(--panel);
      }
      .sidebar-content > .btn-sm:hover {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-text);
      }
      .status-dot {
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--agent);
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
      }
      .status-dot.agent-dot {
        background: var(--accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
      } /* Agent list */
      #agent-list {
        max-height: 520px;
        overflow: hidden;
        opacity: 1;
        transition:
          max-height 300ms ease,
          opacity 180ms ease;
      }
      #agent-list.agent-collapsed {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .agent-sidebar-card {
        position: relative;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 1px;
        align-items: center;
        margin-bottom: 2px;
        padding: 6px 8px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background 0.14s ease;
      }
      .agent-sidebar-card:hover {
        background: var(--panel-2);
      }
      .agent-sidebar-card:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .agent-sidebar-card .avatar,
      .agent-sidebar-card .agent-avatar-link {
        grid-row: 1 / span 2;
      }
      .agent-avatar-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        text-decoration: none;
        transition: box-shadow 140ms ease;
      }
      .agent-avatar-link:hover {
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2);
      }
      .agent-avatar-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .agent-avatar-link .avatar {
        pointer-events: none;
      }
      .agent-sidebar-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--type-primary-size);
        font-weight: var(--type-primary-weight);
        color: var(--text);
      }
      .agent-sidebar-handle {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--type-secondary-size);
        font-weight: var(--type-secondary-weight);
        color: var(--accent-text);
      }
      .agent-sidebar-focus {
        font-size: var(--type-secondary-size);
        color: var(--muted);
      }
      .agent-sidebar-card .task-done-dot {
        position: absolute;
        top: 4px;
        left: 30px;
        box-shadow: 0 0 0 2px var(--bg);
      } /* Delete reveals on hover/focus so the list stays calm. */
      .agent-sidebar-actions {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 120ms ease;
      }
      .agent-sidebar-card:hover .agent-sidebar-actions,
      .agent-sidebar-card:focus-within .agent-sidebar-actions {
        opacity: 1;
        pointer-events: auto;
      }
      .agent-delete-btn {
        border: 1px solid var(--danger-line);
        border-radius: 6px;
        background: var(--panel);
        color: var(--danger);
        font-size: 0.68rem;
        font-weight: 600;
        padding: 3px 7px;
        cursor: pointer;
      }
      .agent-delete-btn:hover {
        background: var(--danger-soft);
      }
      .agent-delete-btn:focus-visible {
        outline: 2px solid var(--danger);
        outline-offset: 2px;
      } /* Unread and task-finished dots */
      .unread-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--danger);
      }
      .task-done-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.16);
      } /* --------------------------------------------------------------------------       Shared primitives: buttons, inputs, pills, badges, avatars       -------------------------------------------------------------------------- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 36px;
        padding: 8px 14px;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        font-size: var(--type-control-size);
        font-weight: var(--type-control-weight);
        letter-spacing: -0.005em;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition:
          background 0.15s ease,
          border-color 0.15s ease,
          color 0.15s ease,
          box-shadow 0.15s ease;
      }
      .btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .btn:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
      .btn-sm {
        min-height: 32px;
        padding: 6px 10px;
        font-size: var(--type-control-size);
      }
      .btn-xs {
        min-height: 22px;
        padding: 0 6px;
        font-size: var(--type-secondary-size);
      }
      .btn-primary {
        background: var(--accent-strong);
        border-color: var(--accent-strong);
        color: var(--on-accent);
      }
      .btn-primary:hover:not(:disabled) {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
      }
      .btn-secondary {
        background: var(--panel);
        border-color: var(--border-strong);
        color: var(--text);
      }
      .btn-secondary:hover:not(:disabled) {
        background: var(--panel-2);
        border-color: var(--border-strong);
      }
      .btn-danger {
        background: var(--panel);
        border-color: var(--danger-line);
        color: var(--danger);
      }
      .btn-danger:hover:not(:disabled) {
        background: var(--danger-soft);
      }
      input[type="text"],
      input[type="url"],
      select,
      textarea {
        min-width: 0;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: var(--panel);
        color: var(--text);
        font-size: 0.9rem;
        font-family: inherit;
        outline: none;
        transition:
          border-color 0.15s ease,
          box-shadow 0.15s ease;
      }
      input[type="text"]:focus,
      input[type="url"]:focus,
      select:focus,
      textarea:focus {
        border-color: var(--accent);
        box-shadow: var(--focus-ring);
      }
      input[type="text"]::placeholder,
      textarea::placeholder {
        color: var(--muted);
      }
      textarea {
        resize: vertical;
        line-height: 1.5;
      }
      .form-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .pill,
      .agent-badge,
      .timeline-badge,
      .approval-risk {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.005em;
        white-space: nowrap;
        background: var(--panel-2);
        color: var(--text-soft);
      }
      .agent-badge {
        height: 18px;
        padding: 0 6px;
        border-radius: 6px;
        background: var(--accent-soft-2);
        color: var(--accent-on-tint);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .timeline-badge {
        background: var(--accent-soft);
        color: var(--accent-text);
      }
      .pill.status-needs_approval,
      .pill.status-needs_input,
      .approval-risk {
        background: var(--warning-soft);
        color: var(--warning);
        box-shadow: inset 0 0 0 1px var(--warning-line);
      }
      .pill.status-failed {
        background: var(--danger-soft);
        color: var(--danger);
        box-shadow: inset 0 0 0 1px var(--danger-line);
      }
      .pill.status-completed {
        background: var(--success-soft);
        color: var(--success);
        box-shadow: inset 0 0 0 1px var(--success-line);
      }
      .pill.status-running,
      .pill.status-queued {
        background: var(--accent-soft);
        color: var(--accent-text);
        box-shadow: inset 0 0 0 1px var(--accent-line);
      }
      .avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex: 0 0 auto;
        border-radius: 999px;
        overflow: hidden;
        object-fit: cover;
        background: var(--panel-2);
        color: var(--text-soft);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        user-select: none;
      }
      .avatar.avatar-sm {
        width: 24px;
        height: 24px;
        font-size: 0.62rem;
      }
      .avatar.avatar-lg {
        width: 56px;
        height: 56px;
        font-size: 1rem;
      }
      img.avatar {
        background: var(--panel-2);
      }
      .avatar-preview-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 4px;
      }
      .avatar-preview-meta {
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      .avatar-preview-meta strong {
        font-size: 0.86rem;
        font-weight: 600;
      }
      .avatar-preview-meta span {
        font-size: 0.76rem;
        color: var(--muted);
      }
      .meta-text,
      time {
        font-size: 0.74rem;
        color: var(--muted);
      }
      .empty-state {
        padding: 18px 16px;
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--panel);
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.5;
        text-align: center;
      }
      .error-msg {
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid var(--danger-line);
        border-radius: var(--radius-md);
        background: var(--danger-soft);
        color: var(--danger);
        font-size: 0.82rem;
        line-height: 1.45;
      }
      .error-text {
        color: var(--danger);
      } /* --------------------------------------------------------------------------       Main column and conversation panel       -------------------------------------------------------------------------- */
      .main {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 20px 24px;
        gap: 16px;
        background: var(--bg);
      }
      .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        min-height: 40px;
      }
      .toolbar-left h1 {
        font-size: var(--type-page-title-size);
        line-height: var(--type-page-title-line-height);
        font-weight: var(--type-page-title-weight);
        letter-spacing: var(--type-page-title-letter-spacing);
        color: var(--text);
      }
      .toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .workspace-shell {
        min-height: 0;
        flex: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        overflow: hidden;
        position: relative;
      }
      .conversation-panel {
        flex: 1;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
      }
      .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
      }
      .panel-header h2 {
        font-size: var(--type-section-title-size);
        font-weight: var(--type-section-title-weight);
        letter-spacing: -0.01em;
      } /* Feed and artifacts side by side; the artifacts column never overlaps chat. */
      .conversation-body {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        overflow: hidden;
      }
      .message-feed {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--bg);
        position: relative;
        padding-bottom: 0;
      }
      .session-panel {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        overflow-y: auto;
        border-left: 1px solid var(--border);
        background: var(--panel-3);
      }
      .session-card {
        padding: 14px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
      }
      .session-card h3 {
        margin-bottom: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
      }
      .artifact-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .artifact-card-header h3 {
        margin-bottom: 0;
        font-size: var(--type-section-title-size);
        font-weight: var(--type-section-title-weight);
      }
      .session-card p,
      .session-card li {
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--muted);
      }
      .session-card ul {
        list-style: none;
        display: grid;
        gap: 8px;
        margin-top: 8px;
      }
      .cloud-session-section {
        margin-top: 10px;
      }
      .cloud-session-section .btn {
        font-size: 0.85rem;
        padding: 7px 10px;
      }
      #cloud-preview-wrap img {
        background: var(--panel);
      } /* Composer */
      .composer-wrap {
        position: relative;
        z-index: 20;
        display: grid;
        gap: 10px;
        padding: 12px 18px 16px;
        border-top: 1px solid var(--border);
        background: var(--panel);
        overflow: visible;
        margin-top: auto;
        height: auto;
      }
      .chat-composer {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 12px 10px 14px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
        background: var(--panel);
        box-shadow: var(--shadow-xs);
        transition:
          border-color 0.15s ease,
          box-shadow 0.15s ease;
      }
      .chat-composer:focus-within {
        border-color: var(--accent);
        box-shadow: var(--focus-ring);
      }
      .chat-composer .mention-input-wrap {
        position: relative;
        width: 100%;
        min-width: 0;
        overflow: visible;
      }
      .chat-composer #agent-prompt {
        display: block;
        width: 100%;
        height: auto;
        min-height: 28px;
        max-height: 180px;
        padding: 2px 2px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: var(--type-body-size);
        line-height: var(--type-body-line-height);
        resize: none;
        overflow-y: hidden;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
      }
      .chat-composer #agent-prompt:focus {
        border-color: transparent;
        box-shadow: none;
      }
      .chat-composer-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .chat-composer-tools,
      .chat-composer-send {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .chat-composer .attach-btn {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-sm);
      }
      .chat-model-picker {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
      }
      .chat-composer #model-select {
        width: auto;
        max-width: 180px;
        height: 30px;
        padding: 0 24px 0 8px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-soft);
        font-size: var(--type-secondary-size);
        font-weight: var(--type-secondary-weight);
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        box-shadow: none;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .chat-composer #model-select:hover {
        background: var(--panel-2);
        color: var(--text);
      }
      .chat-composer #model-select:focus {
        border-color: transparent;
        box-shadow: var(--focus-ring);
      }

      /* Model search input styling */
      .chat-composer #model-search-input {
        width: auto;
        max-width: 180px;
        height: 30px;
        padding: 0 24px 0 8px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-soft);
        font-size: var(--type-secondary-size);
        font-weight: var(--type-secondary-weight);
        outline: none;
        box-shadow: none;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }

      .chat-composer #model-search-input:hover {
        background: var(--panel-2);
        color: var(--text);
      }

      .chat-composer #model-search-input:focus {
        border-color: transparent;
        box-shadow: var(--focus-ring);
      }

      /* Model dropdown list */
      #model-dropdown {
        position: absolute;
        bottom: calc(100% + 4px);
        left: 0;
        right: 0;
        max-height: 240px;
        overflow-y: auto;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 50;
      }

      #model-dropdown.hidden {
        display: none;
      }

      .model-dropdown-option {
        padding: 8px 12px;
        cursor: pointer;
        color: var(--text-soft);
        font-size: var(--type-secondary-size);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .model-dropdown-option:hover,
      .model-dropdown-option.is-active {
        background: var(--panel-2);
        color: var(--text);
      }

      .model-dropdown-option.is-selected {
        font-weight: var(--type-secondary-weight);
      }

      .model-dropdown-empty {
        padding: 8px 12px;
        color: var(--muted);
        font-size: var(--type-secondary-size);
      }
      .chat-model-chevron {
        position: absolute;
        right: 7px;
        width: 12px;
        height: 12px;
        color: var(--muted);
        pointer-events: none;
      }
      .chat-send-btn {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--accent-strong);
        color: var(--on-accent);
        cursor: pointer;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .chat-send-btn:hover:not(:disabled) {
        background: var(--accent-hover);
      }
      .chat-send-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .chat-send-btn:disabled {
        background: var(--panel-2);
        color: var(--muted);
        cursor: default;
      } /* Attachments: shared by the chat composer and the agent-task composer. */
      .attach-btn {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: var(--panel);
        color: var(--text-soft);
        cursor: pointer;
        transition:
          background 0.15s ease,
          border-color 0.15s ease,
          color 0.15s ease,
          box-shadow 0.15s ease;
      }
      .attach-btn:hover:not(:disabled) {
        background: var(--accent-soft);
        border-color: var(--accent-line);
        color: var(--accent-text);
      }
      .attach-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .attach-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .hermes-actions .attach-btn {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
      }
      .attach-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      #hermes-attachments {
        margin-top: 8px;
      }
      .attach-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 260px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--panel);
        box-shadow: var(--shadow-xs);
      }
      .attach-thumb {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--panel-2);
      }
      .attach-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .attach-thumb-doc {
        border-color: var(--accent-line);
        background: var(--accent-soft);
        color: var(--accent-text);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.04em;
      }
      .attach-chip-text {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }
      .attach-chip-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text);
      }
      .attach-chip-meta {
        font-size: 0.7rem;
        color: var(--muted);
      }
      .attach-remove {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
      }
      .attach-remove:hover {
        background: var(--panel-2);
        color: var(--text);
      }
      .attach-remove:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .mention-menu {
        position: absolute;
        z-index: 9999;
        top: auto;
        right: auto;
        bottom: calc(100% + 8px);
        left: 0;
        width: min(440px, 100%);
        max-height: 280px;
        overflow-y: auto;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel);
        box-shadow: var(--shadow-lg);
      }
      .mention-menu.hidden {
        display: none;
      }
      .mention-group-label {
        padding: 8px 10px 4px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .mention-option {
        width: 100%;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 2px;
        align-items: center;
        padding: 8px 10px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text);
        text-align: left;
        cursor: pointer;
      }
      .mention-option:hover,
      .mention-option.is-active {
        background: var(--panel-2);
      }
      .mention-option .avatar {
        grid-row: 1 / span 3;
      }
      .mention-option-handle {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--accent-text);
      }
      .mention-option-name {
        font-size: 0.82rem;
        font-weight: 600;
      }
      .mention-option-meta {
        font-size: 0.75rem;
        line-height: 1.35;
        color: var(--muted);
      }
      .mention-empty {
        padding: 10px 11px;
        font-size: 0.8rem;
        color: var(--muted);
      }
      .app-option-logo {
        grid-row: 1 / span 3;
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--panel);
        font-size: 14px;
      }
      .app-option-logo img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        display: block;
      } /* Ad slot (first-party, sponsored) */
      .wace-ad-slot {
        width: 100%;
      }
      .wace-ad-shell {
        position: relative;
      }
      .wace-ad-card {
        display: block;
        padding: 10px 40px 10px 12px;
        border: 1px solid var(--accent-line);
        border-radius: var(--radius-md);
        background: var(--accent-soft);
        color: var(--text);
        text-decoration: none;
        font-size: 0.82rem;
        line-height: 1.45;
        transition:
          border-color 0.15s ease,
          background 0.15s ease;
      }
      .wace-ad-card:hover {
        border-color: var(--accent);
      }
      .wace-ad-card:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .wace-ad-dismiss-btn {
        position: absolute;
        top: 7px;
        right: 7px;
        z-index: 1;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
      }
      .wace-ad-dismiss-btn:hover {
        background: var(--panel-2);
        color: var(--text);
      }
      .wace-ad-dismiss-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .wace-ad-title {
        font-weight: 600;
      }
      .wace-ad-badge {
        display: inline-flex;
        margin-left: 8px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--panel);
        color: var(--accent-text);
        font-size: 0.66rem;
        font-weight: 700;
        vertical-align: middle;
        box-shadow: inset 0 0 0 1px var(--accent-line);
      }
      .wace-ad-tagline {
        margin-left: 8px;
        color: var(--muted);
      }
      .wace-ad-cta {
        margin-left: 8px;
        color: var(--accent-text);
        font-weight: 600;
      }
      @media (max-width: 760px) {
        .wace-ad-title,
        .wace-ad-badge,
        .wace-ad-tagline,
        .wace-ad-cta {
          margin-left: 0;
          margin-right: 6px;
        }
      } /* --------------------------------------------------------------------------       Messages. One card style for everything in the feed.       User messages are neutral grey bubbles; agent replies are white cards.       -------------------------------------------------------------------------- */
      .message {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: min(720px, 82%);
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--panel);
        box-shadow: var(--shadow-xs);
        line-height: 1.5;
        font-size: var(--type-body-size);
        overflow-wrap: anywhere;
        word-break: break-word;
        animation: fadeIn 0.25s ease;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .message.agent {
        align-self: flex-start;
        border-bottom-left-radius: 4px;
      }
      .message:not(.agent) {
        align-self: flex-end;
        background: var(--panel-2);
        border-color: transparent;
        box-shadow: none;
        border-bottom-right-radius: 4px;
      }
      .message-header {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .message-avatar {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        overflow: hidden;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--accent);
        color: var(--on-accent);
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1;
      }
      .message-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .message-author-meta {
        min-width: 0;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 8px;
      }
      .author {
        font-size: var(--type-primary-size);
        font-weight: var(--type-primary-weight);
        color: var(--text);
      }
      a.author {
        text-decoration: none;
      }
      a.author:hover {
        color: var(--accent-text);
        text-decoration: underline;
      }
      .message p {
        margin: 0;
        font-size: var(--type-body-size);
        line-height: 1.55;
        color: var(--text);
        white-space: pre-wrap;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .message code,
      .message pre {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }
      .reactions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.76rem;
        color: var(--muted);
      }
      .reactions:empty {
        display: none;
      }
      .message.thinking {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 14px;
      }
      .thinking-status {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .thinking-response {
        display: none;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      /* Activity replaces the old three-dot animation: a thin spinner beside
         the step list, one row per tool call the run performed. */
      .thinking-spinner {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
        border-top-color: var(--accent);
        animation: thinking-spin 0.8s linear infinite;
      }
      @keyframes thinking-spin {
        to {
          transform: rotate(360deg);
        }
      }
      .thinking-label {
        font-size: 0.82rem;
        color: var(--muted);
      }
      .thinking-steps {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .thinking-steps:empty {
        display: none;
      }
      .tool-step {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 0.8rem;
        color: var(--muted);
        animation: tool-step-in 0.16s ease-out;
      }
      @keyframes tool-step-in {
        from {
          opacity: 0;
          transform: translateY(-2px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .tool-step-icon {
        width: 16px;
        flex: 0 0 auto;
        text-align: center;
        font-size: 0.78rem;
      }
      .tool-step-body {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 6px;
        min-width: 0;
      }
      .tool-step-verb {
        color: var(--text-soft);
      }
      .tool-step-preview {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.74rem;
        max-width: 48ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tool-step-state {
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--accent-text, var(--accent));
      }
      .tool-step[data-state="running"] .tool-step-state {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
        border-top-color: var(--accent);
        animation: thinking-spin 0.8s linear infinite;
        align-self: center;
      }
      .tool-step.is-error .tool-step-state {
        color: var(--danger);
      }

      /* A pasted link becomes a card beside the text: favicon, title, summary. */
      .message .link-preview {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        max-width: 520px;
        margin-top: 8px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--accent);
        border-radius: 10px;
        background: var(--panel-2);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s ease, background 0.15s ease;
      }
      .message .link-preview:hover {
        border-color: var(--accent);
      }
      .link-preview-icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 8px;
        background: var(--panel);
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 600;
      }
      .link-preview-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .link-preview-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .link-preview-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .link-preview-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.78rem;
        color: var(--muted);
      }
      .link-preview-domain {
        font-size: 0.72rem;
        color: var(--muted);
        opacity: 0.85;
      }
      .link-preview.is-loading {
        opacity: 0.7;
      }
      .link-preview.is-failed {
        border-left-color: var(--border);
      }
      .browser-screenshot-message {
        align-items: stretch;
      }
      .browser-screenshot-message p {
        margin: 0;
      }
      .chat-browser-screenshot {
        display: block;
        width: 100%;
        max-width: 650px;
        height: auto;
        max-height: 500px;
        object-fit: contain;
        align-self: center;
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .chat-screenshot-download {
        align-self: flex-end;
        width: auto;
        min-height: 32px;
        margin-top: 4px;
      } /* Inline attachment cards inside an agent message */
      .msg-attachments {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }
      .msg-attachment {
        width: 100%;
        max-width: 340px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel);
      }
      .msg-att-preview {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--panel-2);
      }
      .msg-att-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
      }
      .msg-att-preview.no-img::before {
        content: "First-slide preview unavailable";
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
      }
      .msg-att-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 8px 10px;
      }
      .msg-att-icon {
        flex: 0 0 auto;
        font-size: 18px;
        line-height: 1;
      }
      .msg-att-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
      }
      .msg-att-meta {
        flex: 0 0 auto;
        font-size: 11px;
        color: var(--muted);
      }
      .msg-att-dl {
        margin-left: auto;
        flex: 0 0 auto;
        padding: 3px 10px;
        border: 1px solid var(--accent-line);
        border-radius: 8px;
        background: var(--accent-soft);
        color: var(--accent-text);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
      }
      .msg-att-dl:hover {
        background: var(--accent-soft-2);
      } /* Created-file card (chat-file-card) */
      .chat-file-card {
        max-width: 78%;
        overflow: hidden;
        align-self: flex-start;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel);
        box-shadow: var(--shadow-xs);
      }
      .chat-file-card .chat-file-preview {
        height: 150px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
        background: var(--panel);
        border-bottom: 1px solid var(--border);
      }
      .chat-file-card .chat-file-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
      }
      .chat-file-card .chat-file-preview pre {
        width: 100%;
        margin: 0;
        padding: 12px 14px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11px;
        line-height: 1.5;
        color: var(--text-soft);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      .chat-file-card .chat-doc-cover {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--accent-soft);
        color: var(--accent-text);
        font-size: 12px;
        font-weight: 600;
      }
      .chat-file-card .chat-doc-cover .doc-kind {
        font-size: 28px;
        line-height: 1;
      }
      .chat-file-footer {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 10px 12px;
      }
      .chat-file-footer .fmeta {
        min-width: 0;
        flex: 1;
      }
      .chat-file-footer .name {
        font-size: 0.85rem;
        font-weight: 600;
        word-break: break-word;
      }
      .chat-file-footer .meta {
        font-size: 0.72rem;
        color: var(--muted);
      }
      .chat-file-footer a {
        margin-left: auto;
        white-space: nowrap;
        font-size: var(--type-primary-size);
        font-weight: var(--type-primary-weight);
        color: var(--accent-text);
        text-decoration: none;
      }
      .chat-file-footer a:hover {
        text-decoration: underline;
      } /* --------------------------------------------------------------------------       Artifacts column       -------------------------------------------------------------------------- */
      .artifact-link {
        color: var(--accent-text);
        text-decoration: none;
        font-size: var(--type-primary-size);
        font-weight: var(--type-primary-weight);
      }
      .artifact-link:hover {
        text-decoration: underline;
      } /* --------------------------------------------------------------------------       Agent task panel (right column)       -------------------------------------------------------------------------- */
      .agent-panel {
        min-width: 360px;
        min-height: 100dvh;
        padding: 20px 16px;
        overflow-y: auto;
        background: var(--panel);
        border-left: 1px solid var(--border);
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
      }
      body.tasks-collapsed .agent-panel {
        min-width: 0;
        width: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        border: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(16px);
      }
      body.tasks-collapsed .agent-panel > * {
        display: none;
      }
      .agent-panel-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        padding: 0 4px;
        overflow: visible;
      }
      .agent-panel-top h2,
      .agent-panel-top .panel-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      .agent-panel-top p {
        margin-top: 3px;
        font-size: 0.78rem;
        color: var(--muted);
      }
      .panel-title {
        font-size: var(--type-section-title-size);
        font-weight: var(--type-section-title-weight);
        letter-spacing: -0.01em;
      }
      .hermes-composer {
        padding: 0 0 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--border);
      }
      .hermes-banner {
        margin-bottom: 8px;
        padding: 9px 11px;
        border: 1px solid var(--warning-line);
        border-radius: 10px;
        background: var(--warning-soft);
        color: var(--warning);
        font-size: 0.8rem;
        line-height: 1.45;
      }
      .hermes-composer textarea {
        min-height: 84px;
      }
      .hermes-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
      }
      .hermes-files {
        max-width: 170px;
        font-size: 0.75rem;
        color: var(--muted);
      }
      .hermes-hint {
        font-size: 0.75rem;
        color: var(--muted);
      }
      .task-list {
        display: grid;
        gap: 12px;
        align-content: start;
        max-width: 100%;
        overflow: hidden;
        transform: translateX(0);
        opacity: 1;
        transition:
          transform 260ms ease,
          opacity 220ms ease,
          max-width 260ms ease,
          margin 260ms ease,
          padding 260ms ease;
        will-change: transform, opacity, max-width;
      }
      .task-list.is-collapsed {
        transform: translateX(-24px);
        opacity: 0;
        max-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        pointer-events: none;
      }
      .task-list[hidden] {
        display: none;
      } /* Live task card (streamed run) */
      .live-card {
        display: none;
        margin: 0 0 12px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel);
        box-shadow: var(--shadow-xs);
      }
      .live-approval {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid var(--warning-line);
        border-radius: 10px;
        background: var(--warning-soft);
      }
      .live-approval h4 {
        font-size: 0.9rem;
        font-weight: 600;
      }
      .task-card {
        display: grid;
        gap: 10px;
        padding: 14px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
      }
      .task-card-top,
      .approval-header,
      .artifact-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .task-card-top h3 {
        min-width: 0;
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text);
        overflow-wrap: anywhere;
      }
      .task-card p,
      .task-card li {
        font-size: 0.8rem;
        line-height: 1.5;
        color: var(--muted);
      }
      .task-card .btn {
        min-height: 30px;
        padding: 5px 11px;
        font-size: 0.78rem;
      }
      .task-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      } /* Timeline: steps joined by a thin rail */
      .timeline-card {
        padding: 10px 12px;
        background: var(--panel-3);
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .timeline-list {
        list-style: none;
        display: grid;
        gap: 8px;
      }
      .timeline-item {
        position: relative;
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr);
        column-gap: 10px;
        align-items: start;
      }
      .timeline-item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 14px;
        bottom: -10px;
        width: 1px;
        background: var(--border-strong);
      }
      .timeline-marker {
        position: relative;
        z-index: 1;
        width: 8px;
        height: 8px;
        margin: 5px 0 0 1px;
        border-radius: 999px;
        background: var(--accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14);
      }
      .timeline-item.approval .timeline-marker {
        background: var(--warning);
        box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.14);
      }
      .timeline-item.error .timeline-marker {
        background: var(--danger);
        box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
      }
      .timeline-content {
        min-width: 0;
      }
      .timeline-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 4px;
      }
      .timeline-row strong {
        font-size: 0.8rem;
      }
      .timeline-content p,
      .timeline-content pre {
        font-size: 0.79rem;
        line-height: 1.5;
        color: var(--muted);
        white-space: pre-wrap;
        word-break: break-word;
      }
      .timeline-content pre {
        margin-top: 6px;
        padding: 8px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow-x: auto;
      }
      .task-artifacts {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .artifact-download-btn {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid var(--accent-line);
        border-radius: var(--radius-sm);
        background: var(--accent-soft);
        color: var(--accent-text);
        font-size: 0.78rem;
        font-weight: 600;
        text-decoration: none;
      }
      .artifact-download-btn:hover {
        background: var(--accent-soft-2);
      }
      .artifact-unavailable {
        font-size: 0.78rem;
        color: var(--muted);
      } /* Clarification and approval callouts */
      .approval-card {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--accent-line);
        border-radius: var(--radius-md);
        background: var(--accent-soft);
      }
      .approval-card h4 {
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--text);
      }
      .approval-card p,
      .approval-card li {
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--text-soft);
      }
      .approval-card .form-row {
        margin-top: 2px;
      }
      .approval-card input[type="text"] {
        flex: 1;
        min-width: 200px;
        background: var(--panel);
      }
      .approval-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .artifact-list,
      .meta-list {
        list-style: none;
        display: grid;
        gap: 8px;
        margin-top: 10px;
      } /* --------------------------------------------------------------------------       Agent-channel access (agent modal)       -------------------------------------------------------------------------- */
      .agent-channel-section {
        display: grid;
        gap: 10px;
        margin-top: 18px;
      }
      .agent-channel-heading {
        display: grid;
        gap: 4px;
      }
      .agent-channel-heading label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text);
      }
      .agent-channel-heading p {
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--muted);
      }
      .current-channel-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--accent-line);
        border-radius: var(--radius-md);
        background: var(--accent-soft);
      }
      .current-channel-card .status-dot {
        margin-top: 5px;
      }
      .current-channel-card > div {
        min-width: 0;
        flex: 1;
      }
      .current-channel-card strong {
        display: block;
        font-size: 0.84rem;
      }
      .current-channel-card p {
        margin-top: 3px;
        font-size: 0.76rem;
        line-height: 1.4;
        color: var(--muted);
      }
      .agent-channel-options {
        display: grid;
        gap: 7px;
        max-height: 150px;
        overflow-y: auto;
      }
      .agent-channel-option {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--panel);
        cursor: pointer;
      }
      .agent-channel-option:hover {
        background: var(--panel-3);
      }
      .agent-channel-option input {
        width: auto;
        flex: 0 0 auto;
        accent-color: var(--accent);
      }
      .agent-channel-option span {
        font-size: 0.8rem;
      }
      /* Avatar picker */
            .avatar-picker {
              margin-top: 10px;
              padding: 10px;
              border: 1px solid var(--border);
              border-radius: var(--radius-md);
              background: var(--panel-3);
            }
            .avatar-picker.hidden {
              display: none;
            }
            .avatar-picker-grid {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
              gap: 8px;
            }
            .avatar-option {
              position: relative;
              display: grid;
              gap: 6px;
              align-items: center;
              justify-items: center;
              width: 96px;
              height: 96px;
              aspect-ratio: 1 / 1;
              padding: 0;
              border: 1px solid var(--border);
              border-radius: 50%;
              overflow: hidden;
              background: var(--panel);
              color: var(--text);
              text-align: center;
              cursor: pointer;
              transition:
                border-color 0.14s ease,
                box-shadow 0.14s ease;
            }
            .avatar-option:hover {
              border-color: var(--border-strong);
            }
            .avatar-option:focus-visible {
              outline: none;
              box-shadow: var(--focus-ring);
            }
            .avatar-option.is-selected {
              border-color: var(--accent);
              box-shadow: var(--focus-ring);
            }
            .avatar-wrapper {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 80px;
              height: 80px;
              border-radius: 50%;
              overflow: hidden;
              background: var(--panel-2);
            }
            .avatar-wrapper > .avatar {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 50%;
            }
            .avatar-option-label {
              font-size: 0.74rem;
              font-weight: 500;
              line-height: 1.25;
              overflow-wrap: anywhere;
            }
            .avatar-option-check {
              display: none;
              position: absolute;
              top: 6px;
              right: 6px;
              align-items: center;
              justify-content: center;
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background: var(--accent);
              color: var(--accent-text);
              font-size: 0.68rem;
              font-weight: 600;
              z-index: 1;
            }
            .avatar-option.is-selected .avatar-option-check::before {
              content: "✓";
            }
            .avatar-option.is-selected .avatar-option-check {
              display: inline-flex;
            }
            .avatar-picker-actions {
              display: flex;
              justify-content: flex-end;
              margin-top: 10px;
            }
      .agent-model-hint {
        margin-top: 2px;
        font-size: 0.76rem;
        line-height: 1.4;
        color: var(--muted);
      }
      .agent-advanced {
        margin-top: 18px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel-2);
      }
      .agent-advanced > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-soft);
        cursor: pointer;
        list-style: none;
        user-select: none;
        border-radius: var(--radius-md);
      }
      .agent-advanced > summary::-webkit-details-marker {
        display: none;
      }
      .agent-advanced > summary::after {
        content: "▾";
        font-size: 0.9rem;
        line-height: 1;
        transition: transform 0.15s ease;
      }
      .agent-advanced > summary:hover {
        color: var(--text);
      }
      .agent-advanced > summary:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .agent-advanced[open] > summary {
        border-bottom: 1px solid var(--border);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
      }
      .agent-advanced[open] > summary::after {
        transform: rotate(180deg);
      }
      .agent-advanced-body {
        padding: 2px 12px 16px;
      }
      .agent-form-error {
        margin-top: 6px;
        font-size: 0.78rem;
        line-height: 1.4;
        color: var(--danger);
      }
      .agent-form-error.hidden {
        display: none;
      }
      #agent-handle-input.input-error {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
      } /* --------------------------------------------------------------------------       Modals       -------------------------------------------------------------------------- */
      .modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        overflow-y: auto;
        background: rgba(24, 24, 27, 0.4);
        backdrop-filter: blur(2px);
      }
      .modal-card {
        width: min(460px, 100%);
        margin: auto;
        padding: 22px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
      }
      .modal-card h3 {
        margin-bottom: 6px;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -0.015em;
      }
      .modal-card > p {
        font-size: 0.88rem;
        line-height: 1.5;
        color: var(--muted);
      }
      .modal-field {
        display: grid;
        gap: 6px;
        margin-top: 16px;
      }
      .modal-field label,
      .modal-field > label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text);
      }
      .modal-field input {
        width: 100%;
      }
      .modal-warning {
        margin-top: 16px;
        padding: 12px;
        border: 1px solid var(--danger-line);
        border-radius: var(--radius-md);
        background: var(--danger-soft);
        color: var(--danger) !important;
        font-size: 0.82rem !important;
      }
      .modal-actions-row {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 20px;
      }
      .modal-actions {
        margin-top: 12px;
        padding: 10px;
        background: var(--panel-3);
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 0.84rem;
        white-space: pre-wrap;
      }
      /* ------------------------- learning approval ------------------------- */
      .learning-modal-card {
        width: min(620px, 100%);
        max-height: calc(100dvh - 40px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .learning-pending {
        min-height: 0;
        overflow-y: auto;
        margin-top: 14px;
        padding-right: 4px;
        display: grid;
        gap: 10px;
      }
      .learning-section-label {
        margin: 4px 0 0;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .learning-item {
        display: grid;
        gap: 8px;
        padding: 12px;
        background: var(--panel-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
      }
      .learning-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .learning-badge {
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-strong);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .learning-content,
      .learning-description {
        font-size: 0.86rem;
        line-height: 1.5;
        color: var(--text);
        white-space: pre-wrap;
      }
      .learning-body summary {
        cursor: pointer;
        font-size: 0.8rem;
        color: var(--muted);
      }
      .learning-body pre {
        margin-top: 8px;
        padding: 10px;
        max-height: 220px;
        overflow: auto;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 0.78rem;
        line-height: 1.5;
        white-space: pre-wrap;
      }
      .learning-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }
      .learning-actions .btn {
        min-height: 28px;
      }
      .learning-meta {
        margin-left: auto;
        font-size: 0.72rem;
        color: var(--muted);
      }
      .learning-empty {
        padding: 18px 0;
        font-size: 0.86rem;
        color: var(--muted);
        text-align: center;
      }
      .agent-modal-card {
        width: min(560px, 100%);
        max-height: calc(100dvh - 40px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .agent-modal-body {
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
      }
      .agent-modal-footer {
        position: sticky;
        bottom: 0;
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 14px;
        padding: 14px 0 0;
        border-top: 1px solid var(--border);
        background: var(--panel);
      }
      #agent-modal-submit-btn {
        min-width: 126px;
      }
      .agent-delete-body {
        margin-top: 12px;
        line-height: 1.5;
        color: var(--text);
      }
      .artifact-preview-modal-card {
        width: min(900px, 100%);
        max-height: min(78dvh, 760px);
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .artifact-preview-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
      }
      .artifact-preview-header h3 {
        margin-bottom: 4px;
      }
      .artifact-preview-content {
        min-height: 240px;
        max-height: 52dvh;
        overflow: auto;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel-3);
        color: var(--text-soft);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.8rem;
        line-height: 1.55;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        tab-size: 2;
      }
      .artifact-preview-content:focus {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .artifact-preview-status {
        min-height: 20px;
      }
      .artifact-preview-content.is-error {
        background: var(--danger-soft);
        border-color: var(--danger-line);
        color: var(--danger);
      }
      .toast {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 1100;
        min-width: 220px;
        max-width: 340px;
        padding: 12px 14px;
        border-radius: var(--radius-md);
        background: var(--text);
        color: var(--bg);
        font-size: 0.86rem;
        box-shadow: var(--shadow-lg);
      } /* --------------------------------------------------------------------------       Responsive       -------------------------------------------------------------------------- */
      @media (max-width: 1280px) {
        .conversation-body {
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr) auto;
        }
        .browser-open .browser-panel {
          grid-column: 1;
          grid-row: 1;
        }
        .browser-open .session-panel {
          grid-column: 1;
          grid-row: 2;
        }
        .session-panel {
          max-height: 220px;
          border-left: 0;
          border-top: 1px solid var(--border);
        }
      }
      @media (max-width: 1120px) {
        .sidebar-resize-handle {
          display: none;
        }
        body,
        body.tasks-collapsed {
          grid-template-columns: 220px minmax(0, 1fr);
        }
        body.sidebar-collapsed,
        body.sidebar-collapsed.tasks-collapsed {
          grid-template-columns: var(--workspace-rail-w, 56px) minmax(0, 1fr);
        }
        .agent-panel {
          position: fixed;
          inset: 0 0 0 auto;
          width: min(380px, 100vw);
          z-index: 40;
          box-shadow: var(--shadow-lg);
        }
        body.tasks-collapsed .agent-panel {
          width: 0;
        }
      }
      @media (max-width: 899px) and (pointer: coarse) and (hover: none) {
        body,
        body.tasks-collapsed,
        body.sidebar-collapsed,
        body.sidebar-collapsed.tasks-collapsed {
          grid-template-columns: minmax(0, 1fr);
        }
        .sidebar {
          position: fixed;
          inset: 0 auto 0 0;
          z-index: 80;
          width: min(360px, calc(100vw - 48px));
          height: 100dvh;
          transform: translateX(-100%);
          visibility: hidden;
          transition: transform 180ms ease, visibility 0s linear 180ms;
          box-shadow: var(--shadow-lg);
        }
        .sidebar.mobile-open {
          transform: translateX(0);
          visibility: visible;
          transition: transform 180ms ease;
        }
        .sidebar.collapsed .sidebar-content {
          display: block;
        }
        .sidebar-toggle,
        .sidebar-toggle-fixed {
          display: none !important;
        }
        .sidebar-mobile-close {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 2;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border: 1px solid var(--border);
          border-radius: 8px;
          background: var(--panel);
          color: var(--text);
          font-size: 22px;
          cursor: pointer;
        }
        .mobile-sidebar-toggle {
          display: inline-flex;
        }
        .toolbar-left {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 0;
        }
      }
      @media (max-width: 760px) and (pointer: coarse) and (hover: none) {
        html,
        body {
          overflow: auto;
          height: auto;
        }
        body,
        body.tasks-collapsed,
        body.sidebar-collapsed,
        body.sidebar-collapsed.tasks-collapsed {
          display: block;
        }
        .main,
        .agent-panel {
          min-height: auto;
        }
        .main {
          min-height: 100dvh;
          overflow: visible;
          padding: 12px;
          gap: 12px;
        }
        .toolbar {
          position: sticky;
          top: 0;
          z-index: 20;
          padding: 4px 0;
          background: var(--bg);
        }
        .toolbar-left {
          flex: 1 1 180px;
        }
        .toolbar-actions {
          flex-wrap: wrap;
          justify-content: flex-end;
        }
        .workspace-shell {
          display: block;
          flex: initial;
          overflow: visible;
        }
        .conversation-panel {
          height: calc(100dvh - 24px);
          min-height: 0;
          overflow: hidden;
        }
        .panel-header {
          padding: 12px 14px;
        }
        .conversation-body {
          min-height: 0;
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr) auto;
        }
        .message-feed {
          min-height: 0;
          max-height: none;
          padding: 14px;
        }
        .message {
          max-width: 92%;
        }
        .session-panel {
          display: none;
        }
        .composer-wrap {
          padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        }
        .agent-panel {
          position: static;
          width: auto;
          border-left: 0;
          border-top: 1px solid var(--border);
        }
        body.tasks-collapsed .agent-panel {
          display: none;
        }
      }
      @media (max-width: 640px) {
        .conversation-body {
          flex-direction: column;
        }
        .session-panel {
          max-height: min(24dvh, 160px);
        }
        .toolbar-actions button {
          min-height: 40px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
        }
      }
      /* ---------------------------------------------------------------- Embedded browser panel ---------------------------------------------------------------- */
      .browser-panel {
        flex: 1;
        min-height: 0;
        display: none;
        flex-direction: column;
        overflow: hidden;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        margin: 20px 24px 0 24px;
      }
      .browser-open .message-feed {
        display: none !important;
      }
      .browser-open .browser-panel {
        display: flex !important;
        grid-column: 1;
        grid-row: 1;
      }
      .browser-open .session-panel {
        grid-column: 2;
        grid-row: 1;
      }
      .browser-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--panel-1);
        flex: 0 0 auto;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .browser-toolbar .btn {
        min-height: 30px;
        padding: 0 9px;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .browser-toolbar input[type="text"] {
        flex: 1;
        min-width: 0;
        padding: 6px 10px;
        font-size: 0.82rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--panel);
        color: var(--text);
      }
      .browser-status-chip {
        flex: 0 0 auto;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--panel-2);
        color: var(--muted);
        border: 1px solid var(--border);
        white-space: nowrap;
      }
      .browser-status-chip.status-ready { color: var(--success); border-color: var(--success-line); background: var(--success-soft); }
      .browser-status-chip.status-loading { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
      .browser-status-chip.status-error { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
      .browser-viewport {
        flex: 1;
        min-height: 0;
        position: relative;
        overflow: hidden;
        background: #0b0c0f;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .browser-live-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: #fff;
        display: block;
      }
      .browser-live-canvas-wrap {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0b0c0f;
      }
      .browser-live-canvas {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: block;
        outline: none;
        background: #fff;
        cursor: default;
      }
      .browser-live-canvas:focus {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }
      .browser-screenshot {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: none;
      }
      .browser-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--muted);
        font-size: 0.85rem;
        text-align: center;
        padding: 0 20px;
        pointer-events: none;
      }
      .browser-loading {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: rgba(11, 12, 15, 0.82);
        color: #fff;
        font-size: 0.82rem;
        z-index: 5;
      }
      .browser-loading-spinner {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.25);
        border-top-color: #fff;
        animation: browser-spin 0.8s linear infinite;
      }
      @keyframes browser-spin {
        to { transform: rotate(360deg); }
      }
      .browser-live-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--success);
      }
      .browser-live-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
      }
      .browser-toolbar .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .browser-console {
        flex: 0 0 auto;
        height: 110px;
        overflow-y: auto;
        border-top: 1px solid var(--border);
        background: var(--panel-2);
        padding: 8px 10px;
        font-size: 10px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        color: var(--muted);
      }
      .browser-console.hidden { display: none; }
      .browser-console .log-line { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
      .browser-console .log-line.error { color: var(--danger); }
      .browser-console .log-line.warn { color: var(--warning); }