openclaw
Version:
Multi-channel AI gateway with extensible messaging integrations
2 lines (1 loc) • 11 kB
CSS
.agent-chat__composer-shell{--chat-queue-divider:color-mix(in srgb, var(--text-strong) 6%, transparent);--chat-stack-icon-size:14px;--chat-stack-leading-inset:13px;--chat-stack-trailing-control-size:24px;--chat-stack-trailing-inset:8px}.chat-queue{--chat-queue-underlap:18px;--chat-queue-row-height:42px;z-index:0;box-sizing:border-box;width:100%;min-width:0;margin-inline:0;margin-bottom:calc(0px - var(--chat-composer-shell-gap) - var(--chat-queue-underlap));border:1px solid var(--chat-composer-hairline);border-radius:calc(20px * var(--openclaw-corner-radius-scale)) calc(20px * var(--openclaw-corner-radius-scale)) 0 0;corner-shape:superellipse(1.5);background:var(--composer-attached-surface,var(--chat-composer-surface));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:0;padding-bottom:0;position:relative;overflow:hidden}.chat-queue+.agent-chat__goal-float .agent-chat__goal{border-top:1px solid var(--chat-queue-divider);border-radius:0}.chat-queue+.agent-chat__goal-float,.chat-queue+:is(.agent-chat__composer-errors,.agent-chat__input),.agent-chat__progress-float+.chat-queue{z-index:1;position:relative}.chat-queue__scroll{box-sizing:border-box;min-width:0;padding-bottom:var(--chat-queue-underlap);scrollbar-color:color-mix(in srgb, var(--muted) 34%, transparent) transparent;scrollbar-width:thin;overflow:hidden}.chat-queue__global-state{border-bottom:1px solid var(--chat-queue-divider);min-height:24px;color:var(--muted);align-items:center;padding:4px 12px;font-size:10px;font-weight:500;line-height:1.4;display:flex}.chat-queue__global-state[data-chat-queue-global-state=warn]{color:var(--warn)}.chat-queue__scroll[data-scrollable=true]{height:calc(3.55 * var(--chat-queue-row-height));overscroll-behavior:contain;overflow-y:auto}.chat-queue__scroll[data-scrollable=true][data-at-start=true][data-at-end=false]{-webkit-mask-image:linear-gradient(#000 0 calc(100% - 22px),#0000 100%);mask-image:linear-gradient(#000 0 calc(100% - 22px),#0000 100%)}.chat-queue__scroll[data-scrollable=true][data-at-start=false][data-at-end=true]{-webkit-mask-image:linear-gradient(#0000 0,#000 16px 100%);mask-image:linear-gradient(#0000 0,#000 16px 100%)}.chat-queue__scroll[data-scrollable=true][data-at-start=false][data-at-end=false]{-webkit-mask-image:linear-gradient(#0000 0,#000 16px calc(100% - 22px),#0000 100%);mask-image:linear-gradient(#0000 0,#000 16px calc(100% - 22px),#0000 100%)}.chat-queue__scroll::-webkit-scrollbar{width:5px}.chat-queue__scroll::-webkit-scrollbar-track{background:0 0}.chat-queue__scroll::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:color-mix(in srgb, var(--muted) 34%, transparent)}:root[data-theme-mode=light] .chat-queue{box-shadow:0 0 0 1px var(--chat-composer-light-outline), 0 1px 2px -1px var(--chat-composer-light-outline), 0 2px 4px #0000000a;border-color:#0000}:root[data-theme-mode=light] :is(.chat-queue,.agent-chat__progress-float)+.agent-chat__goal-float .agent-chat__goal--active{box-shadow:0 0 0 1px var(--chat-composer-light-outline);border-color:#0000}.chat-queue__item{--chat-queue-row-surface:var(--composer-attached-surface,var(--chat-composer-surface));grid-template-columns:var(--chat-stack-icon-size) 20px minmax(0, 1fr) auto;box-sizing:border-box;width:100%;min-width:0;min-height:var(--chat-queue-row-height);padding:6px var(--chat-stack-trailing-inset) 6px var(--chat-stack-leading-inset);border-bottom:1px solid var(--chat-queue-divider);background:var(--chat-queue-row-surface);color:var(--muted);align-items:center;column-gap:8px;display:grid;position:relative}.chat-queue__item:last-child{border-bottom:0}.chat-queue__item:last-child:after{height:var(--chat-queue-underlap);background:var(--chat-queue-row-surface);content:"";position:absolute;top:100%;left:0;right:0}.chat-queue__item--no-avatar{grid-template-columns:var(--chat-stack-icon-size) minmax(0, 1fr) auto}.chat-queue__item--no-avatar .chat-queue__copy,.chat-queue__item--no-avatar .chat-queue__edit-input{grid-column:2}.chat-queue__item--no-avatar .chat-queue__error,.chat-queue__item--no-avatar .chat-queue__mentions{grid-column:2/-1}.chat-queue__item--no-avatar .chat-queue__actions{grid-column:3}@media (hover:hover) and (pointer:fine){.chat-queue__item:hover:not(.chat-queue__item--editing){--chat-queue-row-surface:color-mix(in srgb, var(--text-strong) 3%, var(--composer-attached-surface,var(--chat-composer-surface)))}}.chat-queue__item--steered{--chat-queue-row-surface:var(--composer-attached-surface,var(--chat-composer-surface))}.chat-queue__item--editing{--chat-queue-row-surface:color-mix(in srgb, var(--text-strong) 4%, var(--composer-attached-surface,var(--chat-composer-surface)))}.chat-queue__item--drop-target{box-shadow:inset 0 2px 0 0 var(--accent)}.chat-queue__grip{border-radius:var(--radius-sm);width:24px;height:28px;color:var(--muted);cursor:grab;background:0 0;border:none;flex-shrink:0;grid-column:1;justify-content:center;align-items:center;padding:0;display:inline-flex}.chat-queue__grip:focus-visible{outline:2px solid var(--ring);outline-offset:1px}.chat-queue__grip:disabled{cursor:default}.chat-queue__grip-state{justify-content:center;align-items:center;display:inline-flex}.chat-queue__grip-state--active,.chat-queue__grip:is(:focus-visible,:active) .chat-queue__grip-state--idle{display:none}@media (hover:hover){.chat-queue__item:hover .chat-queue__grip:not(:disabled) .chat-queue__grip-state--idle{display:none}}.chat-queue__grip:is(:focus-visible,:active) .chat-queue__grip-state--active{display:inline-flex}@media (hover:hover){.chat-queue__item:hover .chat-queue__grip:not(:disabled) .chat-queue__grip-state--active{display:inline-flex}}.chat-queue__grip svg{width:14px;height:14px}.chat-queue__grip .chat-queue__grip-state--active svg{width:18px;height:18px}.chat-queue__item--failed{--chat-queue-row-surface:color-mix(in srgb, var(--danger) 8%, var(--composer-attached-surface,var(--chat-composer-surface)))}.chat-queue__leading{width:24px;height:28px;margin-inline:calc((var(--chat-stack-icon-size) - 24px) / 2);color:var(--muted);flex-shrink:0;grid-column:1;justify-content:center;align-items:center;display:inline-flex}.chat-queue__leading svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.chat-queue__item--failed .chat-queue__leading{color:var(--danger)}.chat-queue__item--steered .chat-queue__leading{color:var(--accent)}.chat-queue__item>.chat-author-avatar{grid-column:2}.chat-queue__badge{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--muted);white-space:nowrap;border-radius:999px;padding:1px 5px;font-size:10px;font-weight:500;line-height:1.4}.chat-queue__badge--steered{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--muted)}.chat-queue__badge--reconnect{background:color-mix(in srgb, var(--warn) 12%, transparent);color:color-mix(in srgb, var(--warn) 78%, var(--text-strong));padding:1px 4px;line-height:1.25}.chat-queue__state{color:var(--muted);white-space:nowrap;font-size:10px;font-weight:500;line-height:1.4}.chat-queue__item--failed .chat-queue__badge{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger)}.chat-queue__copy{grid-column:3;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 6px;min-width:0;padding-block:3px;display:grid}.chat-queue__text{min-width:0;color:var(--chat-text);overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.chat-queue__edit-input{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--text-strong) 18%, transparent);border-radius:var(--radius-sm);background:var(--bg);min-width:0;min-height:26px;max-height:calc(7em + 10px);color:var(--chat-text);font:inherit;resize:none;grid-column:3;margin:-1px 0;padding:4px 6px;font-size:12px;line-height:1.4;overflow-y:hidden}.chat-queue__edit-input:focus{outline:2px solid var(--ring);outline-offset:1px}.chat-queue__error,.chat-queue__mentions{min-width:0;color:var(--danger);grid-column:3/-1;align-items:center;gap:6px;padding:0 0 2px;font-size:11.5px;line-height:1.35;display:flex}.chat-queue__mentions{color:var(--muted)}.chat-queue__error-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.chat-queue__actions{white-space:nowrap;grid-column:4;align-items:center;gap:2px;display:inline-flex}.chat-queue__action,.chat-queue__retry{border-radius:var(--radius-sm);min-height:28px;color:var(--accent);cursor:var(--cursor-action);background:0 0;border:none;align-items:center;gap:4px;padding:4px 7px;font-size:11px;font-weight:600;line-height:1;display:inline-flex}.chat-queue__action svg,.chat-queue__retry svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}@media (hover:hover){.chat-queue__action:hover:not(:disabled),.chat-queue__retry:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 12%, transparent)}}.chat-queue__steer{border-radius:var(--radius-full)}@media (hover:hover){.chat-queue__steer:hover:not(:disabled){color:color-mix(in srgb, var(--accent) 84%, var(--text));background:0 0}}.chat-queue__action:disabled{color:color-mix(in srgb, var(--muted) 48%, transparent);cursor:default}.chat-queue__remove,.chat-queue__more,.chat-queue__edit-submit,.chat-queue__edit-cancel{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--muted);cursor:var(--cursor-action);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.chat-queue__remove:disabled,.chat-queue__more:disabled,.chat-queue__edit-submit:disabled,.chat-queue__edit-cancel:disabled{color:color-mix(in srgb, var(--muted) 34%, transparent);cursor:default}@media (hover:hover){.chat-queue__remove:hover:not(:disabled),.chat-queue__more:hover:not(:disabled),.chat-queue__edit-submit:hover:not(:disabled),.chat-queue__edit-cancel:hover:not(:disabled){color:var(--text);background:color-mix(in srgb, var(--text) 10%, transparent)}}.chat-queue__remove svg,.chat-queue__edit-submit svg,.chat-queue__edit-cancel svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.chat-queue__more svg{width:15px;height:15px}.chat-queue__overflow::part(panel){width:132px;min-width:132px}.chat-queue__overflow wa-dropdown-item{width:100%;min-height:32px;padding:5px 8px;font-size:12px}.chat-queue__overflow wa-dropdown-item span[slot=icon]{display:inline-flex}.chat-queue__overflow wa-dropdown-item svg{width:14px;height:14px}@media (width<=560px){.chat-queue__item{grid-template-columns:var(--chat-stack-icon-size) 18px minmax(0, 1fr) auto;padding-inline:var(--chat-stack-leading-inset) var(--chat-stack-trailing-inset);column-gap:6px}.chat-queue__item--no-avatar{grid-template-columns:var(--chat-stack-icon-size) minmax(0, 1fr) auto}.chat-queue__retry span{display:none}.chat-queue__text{-webkit-line-clamp:1}}