openclaw/dist/control-ui/assets/chat-sidebar-region-CA8WlxVq.css

Multi-channel AI gateway with extensible messaging integrations

.side-panel,.side-panel__body{display:contents}.side-panel__header{--rail-header-action-glyph-size:15px;border-bottom:0;margin-bottom:0;padding-left:0}.side-panel__header-tabs{flex:auto;align-items:center;min-width:0;display:flex}.side-panel__header-tabs .side-panel-type-menu{flex:none}.side-panel__header .tabstrip{--track-width:0;flex:0 auto;min-width:0;display:block;overflow:hidden}.side-panel__header .tabstrip.has-scroll-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),#0000 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),#0000 100%)}.side-panel__header .tabstrip.has-scroll-left{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 30px);mask-image:linear-gradient(90deg,#0000 0,#000 30px)}.side-panel__header .tabstrip.has-scroll-left.has-scroll-right{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 30px calc(100% - 30px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 30px calc(100% - 30px),#0000 100%)}.side-panel__header .tabstrip::part(nav){align-items:center;width:100%;min-width:0;height:100%;display:flex}.side-panel__header .tabstrip::part(tabs){scrollbar-width:none;scroll-snap-type:inline proximity;align-items:center;width:100%;min-width:0;padding-inline-start:6px;scroll-padding-inline:6px;overflow:auto hidden}.side-panel__header .tabstrip::part(body){display:none}.side-panel__header .tabstrip-tab{scroll-snap-align:start;flex:0 auto;width:max-content;min-width:63px;max-width:160px;scroll-margin-inline-end:16px;position:relative}.side-panel__header .tabstrip-tab:not(:first-of-type){margin-left:0}.side-panel__header .tabstrip-tab__close:has(~.tabstrip-tab){margin-right:0}.side-panel__header .tabstrip-separator{background:color-mix(in srgb, var(--muted) 20%, transparent);width:1px;height:12px;margin:0 3px;transition:opacity .12s}.side-panel__header .tabstrip-tab[active]+.tabstrip-tab__close+.tabstrip-separator{opacity:0}.side-panel__header .tabstrip-separator:has(+.tabstrip-tab[active]){opacity:0}.side-panel__header .tabstrip-tab:is(.is-drop-before,.is-drop-after):after{border-radius:var(--radius-full);background:var(--text);content:"";width:2px;position:absolute;top:5px;bottom:5px}.side-panel__header .tabstrip-tab.is-drop-before:after{inset-inline-start:0}.side-panel__header .tabstrip-tab.is-drop-after:after{inset-inline-end:0}.side-panel__header .tabstrip-tab::part(base){border-radius:var(--radius-md);width:100%;min-width:0;height:28px;color:var(--muted);font-size:var(--control-ui-text-sm);white-space:nowrap;background:0 0;border:0;justify-content:flex-start;align-items:center;gap:7px;padding-block:0;padding-inline:8px 0;transition:background-color .12s,color .12s;display:flex}.side-panel__header .tabstrip-tab[active]::part(base){border-start-start-radius:var(--radius-md);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-md)}@media (hover:hover){.side-panel__header .tabstrip-tab:not([active]):is(:hover,:has(+.tabstrip-tab__close:hover))::part(base){background:color-mix(in srgb, var(--text) 5%, transparent);color:var(--text);border-start-start-radius:var(--radius-md);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-md)}}.side-panel__header .tabstrip-tab[active]::part(base){background:var(--bg-hover);color:var(--text)}.side-panel__header .tabstrip-tab__icon{width:16px;height:16px;color:var(--muted);flex:none;justify-content:center;align-items:center;display:inline-flex}.side-panel__header .tabstrip-tab[active] .tabstrip-tab__icon{color:var(--text)}.side-panel__header .tabstrip-tab__icon svg,.side-panel-type-option__icon svg{stroke-width:1.6px;width:15px;height:15px;display:block}.side-panel__header .tabstrip-tab__label{text-overflow:clip;flex:auto;min-width:24px;overflow:hidden}.side-panel__header .tabstrip-tab__tooltip-trigger{align-items:center;gap:7px;width:max-content;min-width:24px;max-width:100%;height:100%;display:inline-flex;overflow:hidden}.side-panel__header .tabstrip-tab__tooltip-trigger.has-label-overflow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 11px),#0000 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 11px),#0000 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.side-panel__header .tabstrip-tab__label-tooltip{flex:auto;align-self:center;align-items:center;width:max-content;min-width:24px;max-width:100%;display:inline-flex!important}.side-panel__header .tabstrip-tab__close{opacity:0;border-start-start-radius:0;border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);border-end-start-radius:0;flex:0 0 28px;align-self:center;width:28px;min-width:28px;height:28px;margin:0;transition:background-color .12s,color .12s,opacity .12s}.side-panel__header .tabstrip-tab[active]+.tabstrip-tab__close,.side-panel__header .tabstrip-tab__close:focus-visible{opacity:1}@media (hover:hover){.side-panel__header .tabstrip-tab:hover+.tabstrip-tab__close,.side-panel__header .tabstrip-tab__close:hover{opacity:1}}.side-panel__header .tabstrip-tab:not([active])+.tabstrip-tab__close:focus-visible{background:color-mix(in srgb, var(--text) 5%, transparent);color:var(--text)}@media (hover:hover){.side-panel__header .tabstrip-tab:not([active]):hover+.tabstrip-tab__close,.side-panel__header .tabstrip-tab:not([active])+.tabstrip-tab__close:hover{background:color-mix(in srgb, var(--text) 5%, transparent);color:var(--text)}}.side-panel__header .tabstrip-tab[active]+.tabstrip-tab__close{background:var(--bg-hover)}.side-panel__header .tabstrip-tab__close-box{opacity:.72;width:12px;height:12px}.side-panel__header .tabstrip-tab__close svg{width:11px;height:11px}.side-panel__header .tabstrip-tab__close:focus-visible .tabstrip-tab__close-box{opacity:1}@media (hover:hover){.side-panel__header .tabstrip-tab__close:hover .tabstrip-tab__close-box{opacity:1}}.side-panel__header .tabstrip-tab__close-box,.side-panel__header .tabstrip-new-control{justify-content:center;align-items:center;display:inline-flex}.side-panel__header .tabstrip-new-control{flex:none}@media (prefers-reduced-motion:reduce){.side-panel__header .tabstrip-tab::part(base),.side-panel__header .tabstrip-tab__close,.side-panel__header .tabstrip-separator{transition:none}}.side-panel__actions{gap:6px;padding-right:4px}.side-panel__action-group{align-items:center;gap:var(--rail-header-action-gap);flex:none;display:inline-flex}.side-panel__action-group+.side-panel__action-group--close{border-left:1px solid color-mix(in srgb, var(--muted) 20%, transparent);padding-left:5px}.side-panel__panel{background:var(--bg);flex:1 1 0;min-width:0;min-height:0;display:flex;overflow:hidden}.side-panel__empty-body{grid-area:side;min-height:0;display:flex}.sidebar-region:not(.sidebar-region--open) .side-panel__empty-body,.sidebar-region--expanded .side-panel__empty-body,.side-panel__panel[hidden]{display:none}.side-panel__panel>:is(.chat,.chat-workspace-rail,.chat-tasks-rail,.chat-task-detail,openclaw-chat-detail-panel,openclaw-chat-session-rail,openclaw-session-discussion,openclaw-terminal-panel,openclaw-browser-panel,openclaw-desktop-panel){flex:1 1 0;width:100%;min-width:0;min-height:0;display:flex}.side-panel-type-menu::part(menu){width:max-content;min-width:0;max-width:min(208px,100vw - 24px);padding:var(--menu-padding);border:1px solid var(--border-strong);border-radius:var(--menu-radius);background:var(--bg-elevated);box-shadow:var(--shadow-md)}.side-panel-type-menu__item{background:color-mix(in srgb, var(--text) 3%, transparent);font-size:calc(13px * var(--control-ui-text-scale));white-space:nowrap;padding:9px 8px}.side-panel-type-menu__item+.side-panel-type-menu__item{margin-top:1px}.side-panel-type-option__icon{width:16px;height:16px;color:var(--muted);flex:0 0 16px;justify-content:center;align-items:center;display:inline-flex}.side-panel-type-option__label{min-width:0;color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}.side-panel-type-option__shortcut{border-radius:var(--radius-full);background:color-mix(in srgb, var(--text) 6%, transparent);min-width:42px;height:18px;color:var(--muted);font:500 calc(10px * var(--control-ui-text-scale)) / 1 var(--font-shortcut);font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:center;align-items:center;padding:0 6px;display:inline-flex}.side-panel-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:0;padding:28px;display:flex}.side-panel-empty--selector{transform:translateY(-18px)}.side-panel-empty__types{gap:6px;width:min(100%,320px);margin-top:0;display:grid}.side-panel-empty__type{min-height:var(--menu-item-height);border-radius:var(--menu-item-radius);background:color-mix(in srgb, var(--text) 3%, transparent);width:100%;color:var(--text);font-size:var(--control-ui-text-sm);text-align:left;border:0;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;display:grid}.side-panel-empty__type:focus-visible{background:var(--bg-hover)}@media (hover:hover){.side-panel-empty__type:hover{background:var(--bg-hover)}}