/* Presentation only. No duplicated screens, model routing or business controls. */ /* Native administration: six categories, one editor per scope, no overlay. */ :root[data-lli-layout] #adminDialog.lli-admin-workspace { --ink:var(--lli-ink); --muted:var(--lli-muted); --line:var(--lli-line); --surface:var(--lli-panel); background:var(--lli-bg); color:var(--lli-ink); min-height:100dvh; width:100%; } :root[data-lli-layout] #adminDialog.lli-admin-workspace [hidden] { display:none !important; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-page-header { min-height:86px; padding:18px clamp(16px,3vw,40px); background:var(--lli-panel); border-bottom:1px solid var(--lli-line); box-shadow:none; backdrop-filter:none; gap:18px; z-index:10; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-page-heading h1 { font-size:25px; line-height:1.2; color:var(--lli-ink); } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-page-heading p, :root[data-lli-layout] #adminDialog.lli-admin-workspace .dialog-eyebrow { color:var(--lli-muted); } :root[data-lli-layout] #adminDialog.lli-admin-workspace .dialog-content { padding:24px clamp(16px,3vw,40px) 36px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-workspace { grid-template-columns:220px minmax(0,1fr); max-width:1600px; gap:24px; min-height:0; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-navigation { top:112px; max-height:calc(100dvh - 130px); padding:14px 10px; background:var(--lli-panel); border:1px solid var(--lli-line); border-radius:var(--lli-radius); box-shadow:none; backdrop-filter:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-navigation-title { color:var(--lli-muted); font-size:10px; letter-spacing:.06em; margin:6px 10px 12px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-nav-item { display:block; min-height:42px; padding:10px 12px; font-size:13px; font-weight:600; color:var(--lli-ink); border:0; white-space:normal; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-nav-item::before { content:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-nav-item:hover, :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-nav-item.is-active { color:var(--lli-accent); background:var(--lli-tint); box-shadow:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:12px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-section-head h2 { margin:0; color:var(--lli-ink); font-size:22px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--lli-line); } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-tabs button { border-color:transparent; min-height:34px; padding:7px 10px; font-size:12px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-tabs button[aria-selected=true] { background:var(--lli-tint); color:var(--lli-accent); border-color:var(--lli-line); } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-setting-card { margin:0 0 16px; padding:22px; border:1px solid var(--lli-line); border-radius:var(--lli-radius); background:var(--lli-panel); color:var(--lli-ink); box-shadow:none; min-width:0; max-width:100%; } :root[data-lli-layout] #adminDialog.lli-admin-workspace h3 { color:var(--lli-ink); font-size:18px; line-height:1.35; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-setting-card > p, :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-help { color:var(--lli-muted); line-height:1.6; font-size:13px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace input:not([type=checkbox]):not([type=radio]), :root[data-lli-layout] #adminDialog.lli-admin-workspace textarea, :root[data-lli-layout] #adminDialog.lli-admin-workspace select { min-width:0; max-width:100%; color:var(--lli-ink); background:var(--lli-panel); border:1px solid var(--lli-line); box-shadow:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace input[type=checkbox], :root[data-lli-layout] #adminDialog.lli-admin-workspace input[type=radio] { accent-color:var(--lli-accent); flex-shrink:0; } :root[data-lli-layout] #adminDialog.lli-admin-workspace button.secondary, :root[data-lli-layout] #adminDialog.lli-admin-workspace a.secondary { color:var(--lli-ink); background:var(--lli-panel); border:1px solid var(--lli-line); box-shadow:none; max-width:100%; white-space:normal; } :root[data-lli-layout] #adminDialog.lli-admin-workspace button:focus-visible, :root[data-lli-layout] #adminDialog.lli-admin-workspace input:focus-visible, :root[data-lli-layout] #adminDialog.lli-admin-workspace select:focus-visible, :root[data-lli-layout] #adminDialog.lli-admin-workspace summary:focus-visible { outline:2px solid var(--lli-accent); outline-offset:2px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-dirty { color:var(--lli-accent); font-size:12px; margin:0 0 12px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-dirty:empty { display:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-advanced { border:1px solid var(--lli-line); border-radius:var(--lli-radius); background:var(--lli-panel); padding:16px; margin-bottom:16px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-advanced > summary { cursor:pointer; font-weight:600; padding:4px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-advanced > .admin-setting-card { border:0; margin:14px 0 0; padding:8px 0 0; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .ub-parameters { border:0; padding:0; } :root[data-lli-layout] #adminDialog.lli-admin-workspace #lliAdminUnifiedHost .ub-admin { border:0; padding:0; margin:0; background:transparent; } :root[data-lli-layout] #adminDialog.lli-admin-workspace #lliAdminUnifiedHost .ub-admin > h3:first-child { display:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace #aiAdminStatus:empty { display:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .ub-parameters > summary { display:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .ub-field, :root[data-lli-layout] #adminDialog.lli-admin-workspace .lyl-field { display:flex; flex-direction:column; gap:6px; margin:12px 0; font-size:13px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .ub-check { flex-direction:row; align-items:center; gap:8px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .ub-field select { width:100%; padding:10px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-shared-save { border:1px solid var(--lli-line); padding:16px 20px; border-radius:var(--lli-radius); background:var(--lli-panel); margin-top:14px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-shared-save p { margin:8px 0 0; color:var(--lli-muted); font-size:12px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-feature-body { min-width:0; overflow-wrap:anywhere; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-tab-content { min-width:0; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-tab-content[aria-busy=true] { opacity:.65; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-table-wrap { max-width:100%; overflow-x:auto; } @media (max-width:900px) { :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-workspace { grid-template-columns:minmax(0,1fr); gap:16px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-navigation { position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; max-height:none; gap:4px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-navigation-title { display:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-nav-item { width:100%; margin:0; padding:9px; font-size:12px; } } @media (max-width:540px) { :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-page-header { position:static; padding:14px 16px; gap:10px; align-items:start; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-page-heading p { display:none; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-page-heading h1 { font-size:21px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .dialog-content { padding:16px 12px 24px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-navigation { grid-template-columns:repeat(2,minmax(0,1fr)); padding:8px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .admin-setting-card { padding:16px; } :root[data-lli-layout] #adminDialog.lli-admin-workspace .lli-admin-section-head h2 { font-size:20px; } } .message-proof[hidden], .message-sources[hidden], .message-verification-note[hidden] { display:none !important; } :root[data-lli-layout] { --lli-bg:#f6f8fa; --lli-panel:#fff; --lli-nav:#eff3f6; --lli-ink:#202d3c; --lli-muted:#5f6e7d; --lli-line:#dbe2e8; --lli-accent:#00798b; --lli-tint:#e7f4f5; --lli-radius:16px; --lli-sidebar:238px; --lli-home-columns:3; --lli-home-card-height:218px; } :root[data-lli-layout="studio"] { --lli-bg:#f4f2ec; --lli-nav:#f2f0e8; --lli-accent:#41644b; --lli-tint:#e6eee5; --lli-radius:22px; --lli-sidebar:210px; } :root[data-lli-layout="atelier"] { --lli-bg:#edf1f6; --lli-nav:#e4eaf2; --lli-accent:#345fa0; --lli-tint:#e3ebf8; --lli-radius:8px; --lli-sidebar:208px; } :root[data-lli-layout="conversation"] { --lli-bg:#fff; --lli-nav:#f7f7f8; --lli-ink:#242424; --lli-muted:#646464; --lli-line:#e5e5e5; --lli-accent:#242424; --lli-tint:#f1f1f1; --lli-radius:18px; --lli-sidebar:250px; } :root[data-lli-layout][data-theme="dark"] { --lli-bg:#151b23; --lli-panel:#1c2530; --lli-nav:#111820; --lli-ink:#e8edf3; --lli-muted:#adb9c8; --lli-line:#354355; --lli-accent:#6bd4de; --lli-tint:#203e48; } :root[data-lli-layout="studio"][data-theme="dark"] { --lli-bg:#1c211c; --lli-panel:#252c25; --lli-nav:#171d17; --lli-accent:#aed1a9; --lli-tint:#334334; } :root[data-lli-layout="atelier"][data-theme="dark"] { --lli-bg:#101b2a; --lli-panel:#172637; --lli-nav:#0d1621; --lli-accent:#9fc6ff; --lli-tint:#263c56; } :root[data-lli-layout="conversation"][data-theme="dark"] { --lli-bg:#212121; --lli-panel:#292929; --lli-nav:#171717; --lli-ink:#ececec; --lli-muted:#b4b4b4; --lli-line:#454545; --lli-accent:#ececec; --lli-tint:#333; } :root[data-lli-layout] body { background:var(--lli-bg); color:var(--lli-ink); } :root[data-lli-layout] #appView { --ink:var(--lli-ink); --muted:var(--lli-muted); --line:var(--lli-line); --surface:var(--lli-panel); --accent:var(--lli-accent); background:var(--lli-bg); color:var(--lli-ink); gap:0; padding:0; grid-template-columns:var(--sidebar-width,var(--lli-sidebar)) minmax(0,1fr); height:100dvh; min-height:0; } :root[data-lli-layout] #appView > main { min-width:0; max-width:100%; color:var(--lli-ink); background:var(--lli-bg); } :root[data-lli-layout] #sidebar { width:auto; min-width:0; border:0; border-right:1px solid var(--lli-line); border-radius:0; box-shadow:none; background:var(--lli-nav); padding:16px 12px; gap:12px; overflow:hidden; } :root[data-lli-layout] #sidebar::before, :root[data-lli-layout] #sidebar::after { display:none; } :root[data-lli-layout] #homeButton { padding:4px 3px 14px; border:0; gap:10px; } :root[data-lli-layout] .brand-mark { width:36px; height:36px; flex:0 0 36px; border-radius:12px; } :root[data-lli-layout] .brand-copy strong { color:var(--lli-ink); font-size:16px; } :root[data-lli-layout] .brand-copy > span { font-size:10px; color:var(--lli-muted); } .lli-navigation { display:grid; gap:3px; flex-shrink:0; } :root[data-lli-layout] .lli-nav-item { display:flex; align-items:center; gap:10px; border:0; border-radius:9px; background:transparent; color:var(--lli-ink); box-shadow:none; text-align:left; padding:9px 12px; min-height:38px; font-size:13px; } :root[data-lli-layout] .lli-nav-item[aria-current="page"], :root[data-lli-layout] .lli-nav-item:not(:disabled):hover { background:var(--lli-tint); color:var(--lli-accent); } .lli-nav-icon { width:20px; text-align:center; font-size:19px; } :root[data-lli-layout] #sidebar .tree-toolbar { gap:7px; } :root[data-lli-layout] #sidebar .tree-toolbar button { min-height:32px; padding:7px 9px; font-size:11px; box-shadow:none; } :root[data-lli-layout] #sidebar .tree-toolbar button { border:1px solid var(--lli-line); border-radius:10px; } :root[data-lli-layout] #sidebar .tree-toolbar button:hover { border-color:var(--lli-accent); background:var(--lli-tint); } :root[data-lli-layout] #conversationList { flex:1; min-height:72px; border:0; overflow:auto; } :root[data-lli-layout] #sidebar .account-box { flex-shrink:0; margin:0; padding:12px 0 0; border-top:1px solid var(--lli-line); background:transparent; } :root[data-lli-layout] #accountName { font-size:12px; color:var(--lli-ink); } :root[data-lli-layout] #accountRole { font-size:10px; margin:3px 0 8px; color:var(--lli-muted); } :root[data-lli-layout] #lliChooseInterface { width:100%; font-size:11px; min-height:32px; margin-bottom:6px; padding:7px; } .lli-account-settings summary { cursor:pointer; font-size:11px; padding:9px 4px; } .lli-account-settings[open] { max-height:40dvh; overflow:auto; } :root[data-lli-layout] #appVersion { font-size:9px; margin-top:8px; color:var(--lli-muted); } :root[data-lli-layout] #sidebarResizeHandle { display:none; } :root[data-lli-layout] #sidebar #cl14-workspace-tools { padding:0; margin:0; flex-shrink:0; } :root[data-lli-layout] #sidebar #cl14-workspace-tools button { width:100%; min-height:34px; padding:7px 12px; border:0; border-radius:9px; box-shadow:none; background:transparent; color:var(--lli-muted); font-size:12px; text-align:left; } :root[data-lli-layout] #sidebar #cl14-workspace-tools button:hover { background:var(--lli-tint); color:var(--lli-ink); } @media (min-width:901px) { :root[data-lli-layout] #sidebarResizeHandle { display:block; position:fixed; top:0; left:calc(var(--sidebar-width) - 10px); width:10px; height:100dvh; background:transparent; z-index:4; } :root[data-lli-layout] #sidebarResizeHandle::after { right:2px; width:2px; height:56px; background:var(--lli-muted); opacity:.3; } :root[data-lli-layout] #sidebarResizeHandle:hover::after, :root[data-lli-layout] #sidebarResizeHandle:focus-visible::after, :root[data-lli-layout].sidebar-is-resizing #sidebarResizeHandle::after { opacity:1; background:var(--lli-accent); height:90px; } :root[data-lli-layout] #appView #sidebarResizeHandle:focus-visible { outline:none; } :root[data-lli-layout] #sidebarResizeHandle:focus-visible::after { box-shadow:0 0 0 3px var(--lli-tint); } :root[data-lli-layout="studio"] #sidebarResizeHandle { top:62px; height:calc(100dvh - 62px); } } :root[data-lli-layout] #lliFilesButton { display:none; } :root[data-lli-layout] #sidebar > .lyrel-activity-button { position:static; flex-shrink:0; width:100%; padding:8px; min-height:32px; border-radius:9px; box-shadow:none; font-size:11px; background:var(--lli-tint); color:var(--lli-ink); } .lli-skip { position:fixed; left:20px; top:-100px; z-index:10000; background:white; color:#222; padding:14px; } .lli-skip:focus { top:12px; } :root[data-lli-layout] #appView :focus-visible { outline:2px solid var(--lli-accent); outline-offset:3px; } :root[data-lli-layout] #appView .secondary { background:var(--lli-panel); border-color:var(--lli-line); color:var(--lli-ink); box-shadow:none; } :root[data-lli-layout] #appView input:not([type="checkbox"]):not([type="radio"]), :root[data-lli-layout] #appView select, :root[data-lli-layout] #appView textarea { color:var(--lli-ink); background:var(--lli-panel); border-color:var(--lli-line); } :root[data-lli-layout] #appView button[hidden], :root[data-lli-layout] #appView main[hidden] { display:none !important; } :root[data-lli-layout] .home-area { padding:38px clamp(20px,4vw,64px); gap:28px; overflow:auto; } :root[data-lli-layout] .home-area::before { display:none; } :root[data-lli-layout] .home-header { padding:0; border:0; box-shadow:none; background:none; } :root[data-lli-layout] .home-header h1 { font-size:clamp(26px,3vw,38px); color:var(--lli-ink); letter-spacing:-.8px; } :root[data-lli-layout] .home-header p { color:var(--lli-muted); } :root[data-lli-layout] #homeView #assistantGrid { display:grid; grid-template-columns:repeat(var(--lli-home-columns),minmax(0,1fr)) !important; grid-auto-rows:var(--lli-home-card-height); gap:14px; width:100%; max-width:1640px; flex-shrink:0; align-items:stretch; } :root[data-lli-layout] #homeView #assistantGrid > .home-tile { height:var(--lli-home-card-height); min-height:0; min-width:0; } :root[data-lli-layout] #homeView #assistantGrid .assistant-card { height:100%; min-height:0; max-height:100%; min-width:0; box-sizing:border-box; padding:18px; overflow:hidden; } :root[data-lli-layout] #homeView #assistantGrid .assistant-card-content { min-height:0; overflow:auto; overflow-wrap:anywhere; scrollbar-width:thin; } :root[data-lli-layout] #assistantGrid .assistant-card { border-radius:var(--lli-radius); background:var(--lli-panel); color:var(--lli-ink); border:1px solid var(--lli-line); min-height:178px; padding:22px; box-shadow:none; transition:background .15s, border-color .15s; overflow:hidden; } :root[data-lli-layout] #assistantGrid .assistant-card::before, :root[data-lli-layout] #assistantGrid .assistant-card::after { display:none; } :root[data-lli-layout] #assistantGrid .assistant-card:hover { transform:none; border-color:var(--lli-accent); } :root[data-lli-layout] #assistantGrid .assistant-art { width:46px; height:40px; margin-bottom:12px; } :root[data-lli-layout] #assistantGrid .assistant-card-content strong { color:var(--lli-ink); font-size:14px; } :root[data-lli-layout] #assistantGrid .assistant-card-content > span { color:var(--lli-muted); font-size:12px; } :root[data-lli-layout] #assistantGrid .assistant-card-content small { color:var(--lli-muted); font-size:10px; } :root[data-lli-layout] #chatView { padding:18px 26px 14px; gap:12px; min-height:0; } :root[data-lli-layout] .chat-header { padding:0; gap:8px; } :root[data-lli-layout] .chat-header h1 { color:var(--lli-ink); font-size:20px; line-height:1.3; } :root[data-lli-layout] .chat-header p, :root[data-lli-layout] .planned-model { color:var(--lli-muted); font-size:11px; } :root[data-lli-layout] .ai-chat-controls { gap:8px; flex-wrap:wrap; } :root[data-lli-layout] .ai-chat-controls select { min-height:32px; padding:5px 8px; max-width:100%; font-size:11px; } :root[data-lli-layout] #messages { border:0; border-radius:var(--lli-radius); background:var(--lli-panel); box-shadow:none; padding:22px; min-height:0; } :root[data-lli-layout] .message { max-width:95%; color:var(--lli-ink); border-color:var(--lli-line); border-radius:var(--lli-radius); box-shadow:none; } :root[data-lli-layout] .message.assistant { background:var(--lli-nav); } :root[data-lli-layout] .message.user { background:var(--lli-tint); } :root[data-lli-layout] .message.user.has-message-timing { padding-bottom:38px; } :root[data-lli-layout] .composer { gap:8px; } :root[data-lli-layout] .composer textarea { border-radius:var(--lli-radius); min-height:64px; padding:16px; } :root[data-lli-layout] .composer button { border-radius:12px; padding:12px; min-width:42px; } :root[data-lli-layout] .image-area, :root[data-lli-layout] .office-area { padding:28px; } :root[data-lli-layout] .image-header h1 { color:var(--lli-ink); font-size:34px; } :root[data-lli-layout] .image-layout { gap:20px; } :root[data-lli-layout] .image-creator-card, :root[data-lli-layout] .image-preview-card { background:var(--lli-panel); color:var(--lli-ink); border:1px solid var(--lli-line); border-radius:var(--lli-radius); box-shadow:none; padding:24px; } /* Reserve a real row below the image: no absolute action overlay. */ :root[data-lli-layout] .image-preview-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-width:0; } :root[data-lli-layout] #generatedImagePreview { display:block; width:100%; height:auto; max-height:600px; flex:none; order:1; } :root[data-lli-layout] #generatedImagePreview[hidden], :root[data-lli-layout] #imagePreviewEmpty[hidden], :root[data-lli-layout] #imagePreviewActions[hidden] { display:none!important; } :root[data-lli-layout] #imageElapsedSummary { order:2; align-self:center; margin:0; } :root[data-lli-layout] #imagePreviewActions { position:static; inset:auto; transform:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; width:100%; margin:0; flex:none; order:3; } :root[data-lli-layout] #lli-image-actions-exact-v5 { order:4; } /* The legacy progress fallback also keeps its model internally, not on screen. */ #imagePreviewEmpty #srvaiImageProgress > div:first-child > div:first-child > strong { display:none!important; } :root[data-lli-layout] .image-gallery-card { border-radius:var(--lli-radius); } :root[data-lli-layout] .lyw-space { background:var(--lli-bg); color:var(--lli-ink); padding:24px; } :root[data-lli-layout] .lyw-space-nav { flex-wrap:wrap; } :root[data-lli-layout] dialog { color:var(--lli-ink); background:var(--lli-panel); border-color:var(--lli-line); border-radius:var(--lli-radius); max-width:calc(100vw - 24px); } :root[data-lli-layout] #adminDialog { background:var(--lli-bg); } /* Studio: a horizontal destination strip, a quiet contextual history rail. */ @media (min-width:901px) { :root[data-lli-layout="studio"] #appView { padding-top:62px; position:relative; } :root[data-lli-layout="studio"] #sidebar { position:static; transform:none; backdrop-filter:none; contain:none; isolation:auto; overflow:visible; padding-top:20px; } :root[data-lli-layout="studio"] #homeButton { position:absolute; top:9px; left:18px; width:190px; height:44px; padding:0; } :root[data-lli-layout="studio"] .lli-navigation { position:absolute; top:0; left:220px; right:0; height:62px; display:flex; align-items:center; gap:4px; padding:8px 18px; border-bottom:1px solid var(--lli-line); background:var(--lli-panel); } :root[data-lli-layout="studio"] .lli-nav-item { padding:9px; } :root[data-lli-layout="studio"] .image-layout { grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); align-items:start; } :root[data-lli-layout="studio"] .image-preview-card { order:-1; } } /* Home, chat and image studio occupy the available grid row, not another full viewport below Studio's navigation. Only the active content panel should scroll. Mobile already sizes its row from visualViewport (including the keyboard). */ @media (min-width:901px) { :root[data-lli-layout] #appView:has(> :is(#homeView,#chatView,#imageView):not([hidden])) { grid-template-rows:minmax(0,1fr); overflow:hidden; } :root[data-lli-layout] #appView:has(> :is(#homeView,#chatView,#imageView):not([hidden])) > #sidebar { height:100%; min-height:0; max-height:100%; } :root[data-lli-layout] #chatView { height:100%; max-height:100%; } :root[data-lli-layout] :is(#homeView,#imageView) { height:100%; min-height:0; max-height:100%; overflow-y:auto; overscroll-behavior-y:contain; } :root[data-lli-layout] #chatView > .chat-header { min-height:0; max-height:30%; overflow:auto; } :root[data-lli-layout] #chatView > #messages { flex:1 1 0; overflow-y:auto; overscroll-behavior-y:contain; } :root[data-lli-layout] #chatView > #status { min-height:0; max-height:10%; overflow:auto; } :root[data-lli-layout] #chatView > #status:empty { display:none; } :root[data-lli-layout] #promptAttachments { max-height:min(96px,15dvh); overflow-y:auto; } :root[data-lli-layout] #prompt { flex:1 1 0; min-width:0; max-height:min(180px,25dvh); overflow-y:auto; } :root[data-lli-layout] #composerDropZone > button { flex:0 0 auto; } } @media (min-width:901px) and (max-height:650px) { :root[data-lli-layout] #appView > #chatView { padding-block:8px; gap:6px; } :root[data-lli-layout] #appView #chatView > .chat-header { max-height:25%; margin-bottom:0; } :root[data-lli-layout] #chatView > #messages { padding-block:10px; } :root[data-lli-layout] #chatView > #status { padding-block:4px; } :root[data-lli-layout] #promptAttachments { max-height:10dvh; } :root[data-lli-layout] #prompt { height:64px; min-height:56px; padding-block:12px; } } @media (max-width:900px) and (max-height:500px) { :root[data-lli-layout] #appView #chatView > .chat-header { max-height:25%; overflow:auto; } :root[data-lli-layout] #chatView #promptAttachments { max-height:10dvh; } } :root[data-lli-layout="studio"] .home-header h1, :root[data-lli-layout="studio"] .image-header h1 { font-family:Georgia,serif; font-weight:500; } :root[data-lli-layout="studio"] #assistantGrid { gap:20px; } :root[data-lli-layout="studio"] #assistantGrid .assistant-card { background:var(--lli-panel); min-height:196px; padding:28px; } :root[data-lli-layout="studio"] #assistantGrid .assistant-card[data-profile="image"] { background:var(--lli-tint); border-color:var(--lli-accent); } /* Atelier: dense, legible lists and reduced chrome, without smaller hit areas. */ :root[data-lli-layout="atelier"] .home-area { padding:24px; gap:20px; } :root[data-lli-layout="atelier"] #assistantGrid { gap:10px; } :root[data-lli-layout="atelier"] #assistantGrid .assistant-card { min-height:114px; padding:16px 16px 16px 72px; } :root[data-lli-layout="atelier"] #homeView #assistantGrid .assistant-card { padding-left:72px; } :root[data-lli-layout="atelier"] #assistantGrid .assistant-art { position:absolute; top:20px; left:16px; width:36px; height:32px; } :root[data-lli-layout="atelier"] #assistantGrid .assistant-card-content small { display:none; } :root[data-lli-layout="atelier"] #chatView { padding:14px 18px; gap:8px; } :root[data-lli-layout="atelier"] #messages { padding:14px; } :root[data-lli-layout="atelier"] .message { padding:14px; font-size:13px; } :root[data-lli-layout="atelier"] .image-creator-card, :root[data-lli-layout="atelier"] .image-preview-card { padding:18px; } /* Conversation: familiar neutral chat geometry, explicitly still LyonLion. */ :root[data-lli-layout="conversation"] .home-area { justify-content:center; } :root[data-lli-layout="conversation"] .home-header { text-align:center; } :root[data-lli-layout="conversation"] .home-header > div:first-child { flex:1; } :root[data-lli-layout="conversation"] #assistantGrid { width:100%; align-self:center; } :root[data-lli-layout="conversation"] #assistantGrid .assistant-card { min-height:128px; padding:18px; } :root[data-lli-layout="conversation"] #assistantGrid .assistant-art { width:27px; height:25px; margin-bottom:8px; } :root[data-lli-layout="conversation"] #assistantGrid .assistant-card-content small { display:none; } :root[data-lli-layout="conversation"] #chatView { padding:16px 28px; } :root[data-lli-layout="conversation"] #messages { background:transparent; padding:24px max(12px,calc((100% - 800px)/2)); border-radius:0; } :root[data-lli-layout="conversation"] .message.assistant { background:transparent; border:0; border-radius:0; width:100%; max-width:100%; padding:16px 0; } :root[data-lli-layout="conversation"] .message.user { background:var(--lli-tint); border:0; max-width:85%; padding:14px 20px; } :root[data-lli-layout="conversation"] .message.user.has-message-timing { padding-bottom:38px; } :root[data-lli-layout="conversation"] .composer { max-width:850px; width:100%; align-self:center; border:1px solid var(--lli-line); border-radius:24px; padding:10px; background:var(--lli-panel); } :root[data-lli-layout="conversation"] .composer textarea { border:0; background:transparent; box-shadow:none; } :root[data-lli-layout="conversation"] #send { background:var(--lli-accent); color:var(--lli-bg); border:0; } :root[data-lli-layout="conversation"] .chat-header h1 { font-size:18px; } :root[data-lli-layout="conversation"] .lli-nav-item[aria-current="page"] { font-weight:600; } @media (max-width:1100px) and (min-width:901px) { :root[data-lli-layout] { --lli-sidebar:200px; } :root[data-lli-layout] #assistantGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } :root[data-lli-layout="studio"] .lli-nav-icon { display:none; } :root[data-lli-layout="studio"] .image-layout { grid-template-columns:minmax(0,1fr); } } /* The existing mobile drawer owns focus trapping, inert and Escape. */ @media (max-width:900px) { :root[data-lli-layout] { --lli-home-columns:2; } :root[data-lli-layout] #appView { grid-template-columns:minmax(0,1fr); padding-top:0; } :root[data-lli-layout] #sidebar { width:min(300px,88vw); padding:14px; } :root[data-lli-layout] #homeButton { position:static; width:auto; } :root[data-lli-layout] .home-area, :root[data-lli-layout] .image-area, :root[data-lli-layout] .office-area { padding:18px; } :root[data-lli-layout] #chatView { padding:12px; } :root[data-lli-layout] #assistantGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } :root[data-lli-layout] #assistantGrid .assistant-card { min-height:158px; padding:18px; } :root[data-lli-layout="atelier"] #assistantGrid .assistant-card { padding-left:18px; } :root[data-lli-layout="atelier"] #homeView #assistantGrid .assistant-card { padding-left:18px; } :root[data-lli-layout="atelier"] #assistantGrid .assistant-art { position:static; } :root[data-lli-layout] .image-layout { grid-template-columns:minmax(0,1fr); } :root[data-lli-layout] .image-creator-card, :root[data-lli-layout] .image-preview-card { padding:18px; min-width:0; } :root[data-lli-layout] .chat-header h1 { font-size:17px; } :root[data-lli-layout] #messages { padding:12px; } :root[data-lli-layout] .message { max-width:100%; } :root[data-lli-layout] .composer { flex-wrap:wrap; padding:8px; } :root[data-lli-layout] .composer textarea { min-width:0; width:100%; } :root[data-lli-layout="conversation"] .composer { max-width:100%; } :root[data-lli-layout] #lymTopbar, :root[data-lli-layout] #lymNav { background:var(--lli-nav); border-color:var(--lli-line); color:var(--lli-ink); } } @media (max-width:480px) { :root[data-lli-layout] { --lli-home-columns:1; } :root[data-lli-layout] #assistantGrid { grid-template-columns:minmax(0,1fr); } :root[data-lli-layout] #assistantGrid .assistant-card { min-height:122px; } :root[data-lli-layout] .home-area { padding:16px; } :root[data-lli-layout] .image-header h1 { font-size:27px; } :root[data-lli-layout] .ai-chat-controls { gap:6px; } :root[data-lli-layout] .ai-chat-controls select { max-width:100%; } :root[data-lli-layout] #messages { padding:8px; } } @media (prefers-reduced-motion:reduce) { :root[data-lli-layout] * { scroll-behavior:auto !important; transition:none !important; } } @media (max-height:760px) { :root[data-lli-layout] #sidebar { overflow-y:auto; } :root[data-lli-layout] #conversationList { flex-shrink:0; max-height:25dvh; } } /* Quiet history: legible names and a single accessible disclosure per row. */ .lli-tree-icon { display:block; width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } :root[data-lli-layout] #sidebar .project-node { border:1px solid var(--lli-line); border-radius:12px; box-shadow:none; background:var(--lli-panel); padding:5px; } :root[data-lli-layout] #sidebar .project-heading { padding:4px 3px; } :root[data-lli-layout] #sidebar .project-toggle { font-size:12px; color:var(--lli-muted); font-weight:600; padding:7px 6px; } :root[data-lli-layout] #sidebar .project-children { padding:0; gap:3px; } :root[data-lli-layout] #sidebar .lli-conversation-row { position:relative; display:block; padding:2px; border-radius:9px; } :root[data-lli-layout] #sidebar .lli-conversation-row:has(.active), :root[data-lli-layout] #sidebar .lli-conversation-row:has(details[open]) { background:var(--lli-tint); } :root[data-lli-layout] #sidebar .lli-conversation-row > .tree-row-main { display:flex; align-items:center; gap:8px; width:calc(100% - 32px); padding:8px 5px; min-height:36px; font-size:12px; color:var(--lli-ink); background:transparent; border:0; } :root[data-lli-layout] #sidebar .tree-conversation-title { text-overflow:ellipsis; min-width:0; display:block; } :root[data-lli-layout] #sidebar .tree-row-main.has-generation-state { display:grid; grid-template-columns:16px minmax(0,1fr); gap:5px 8px; } :root[data-lli-layout] #sidebar .tree-row-main .conversation-state-badge { grid-column:1 / -1; justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; } :root[data-lli-layout] #sidebar .tree-row-main > .lli-tree-icon { width:16px; height:16px; flex-basis:16px; color:var(--lli-muted); } .lli-tree-actions { margin:0; padding:0; } .lli-tree-actions > summary { position:absolute; right:2px; top:4px; display:flex; align-items:center; justify-content:center; width:30px; height:32px; border:0; border-radius:7px; list-style:none; cursor:pointer; color:var(--lli-muted); } .lli-tree-actions > summary::-webkit-details-marker { display:none; } .lli-tree-actions > summary:hover, .lli-tree-actions > summary:focus-visible { background:var(--lli-tint); color:var(--lli-accent); } .lli-tree-action-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding:5px 0; margin-top:3px; border-top:1px solid var(--lli-line); } :root[data-lli-layout] #sidebar .lli-tree-action-list > button { display:flex; align-items:center; gap:5px; width:100%; height:auto; min-width:0; min-height:34px; padding:6px 4px; border:0; border-radius:7px; color:var(--lli-ink); background:transparent; font-size:10px; text-align:left; white-space:normal; } .lli-tree-action-list .lli-tree-icon { width:15px; height:15px; flex-basis:15px; } :root[data-lli-layout] #sidebar .lli-tree-action-list > button:hover:not(:disabled) { color:var(--lli-accent); background:var(--lli-panel); } :root[data-lli-layout] #sidebar .tree-small-button { display:inline-flex; align-items:center; justify-content:center; } :root[data-lli-layout] #sidebar .tree-small-button:disabled { opacity:.45; cursor:not-allowed; } @media (pointer:coarse) { .lli-tree-actions > summary { width:36px; height:40px; top:2px; } :root[data-lli-layout] #sidebar .lli-conversation-row > .tree-row-main { width:calc(100% - 38px); min-height:44px; } :root[data-lli-layout] #sidebar .lli-tree-action-list > button { min-height:44px; } } /* An animated sketch, not an image preview or a real-time progress measure. */ #imagePreviewEmpty.lli-has-image-progress { --lli-dot-color:#558ffe; display:flex; padding:0; align-items:stretch; align-self:start; width:100%; max-width:none; } .lli-image-activity { width:100%; min-width:0; text-align:left; color:var(--lli-muted,#687789); padding:8px 0; } .lli-image-activity-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; padding-right:10px; } .lli-image-activity-elapsed { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; padding:4px 0 10px 10px; color:var(--lli-muted,#687789); } .lli-image-elapsed-summary { justify-self:center; align-self:start; font-size:12px; font-variant-numeric:tabular-nums; color:var(--lli-muted,#687789); margin:8px 0; text-align:center; } .lli-image-elapsed-summary[hidden] { display:none!important; } .lli-image-activity-title { font-size:clamp(17px,1.6vw,23px); font-weight:400; padding:4px 10px 10px; letter-spacing:-.2px; } .lli-dot-field { position:relative; width:100%; aspect-ratio:1.12; max-height:540px; } .lli-dot-field > canvas { display:block; width:100%; height:100%; } .lli-image-activity-percent { position:absolute; right:12px; bottom:10px; background:var(--lli-panel,#fff); border:1px solid var(--lli-line,#e5e5e5); box-shadow:0 4px 12px #162b4210; border-radius:99px; padding:9px 17px; font-size:clamp(16px,1.5vw,22px); font-variant-numeric:tabular-nums; white-space:nowrap; } .lli-image-activity-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 14px; font-size:11px; padding:8px 10px 0; } .lli-image-activity-footer small { font-size:10px; opacity:.85; } :root[data-theme="dark"] #imagePreviewEmpty.lli-has-image-progress { --lli-dot-color:#84b5ff; } @media (prefers-reduced-motion:reduce) { .lli-image-activity::after { content:'Animation réduite selon les préférences de votre appareil'; display:block; font-size:10px; padding:6px 10px; } } /* The file workspace and its child dialogs share the selected LLI palette. */ :root[data-lli-layout] :is(.llif-explorer,.llif-popup) { --ff-bg:var(--lli-nav); --ff-panel:var(--lli-panel); --ff-ink:var(--lli-ink); --ff-muted:var(--lli-muted); --ff-line:var(--lli-line); --ff-accent:var(--lli-accent); background:var(--ff-panel); color:var(--ff-ink); border-color:var(--ff-line); border-radius:var(--lli-radius); } :root[data-lli-layout] :is(.llif-explorer,.llif-popup)::backdrop { background:#0006; } :root[data-lli-layout] :is(.llif-explorer,.llif-popup) :is(h1,h2,h3) { color:var(--ff-ink); } :root[data-lli-layout] .llif-brand>svg, :root[data-lli-layout] .llif-tree button.active, :root[data-lli-layout] .llif-modes [aria-pressed=true] { background:var(--lli-tint); color:var(--lli-accent); } :root[data-lli-layout] .llif-button:hover { background:var(--lli-tint); color:var(--lli-ink); } :root[data-lli-layout] .llif-toolbar>.llif-button:first-child, :root[data-lli-layout] .llif-primary { background:var(--lli-accent)!important; color:var(--lli-bg)!important; } :root[data-lli-layout] .llif-card:hover { border-color:var(--lli-accent); box-shadow:none; } :root[data-lli-layout] .llif-card.selected { border-color:var(--lli-accent); background:var(--lli-tint); box-shadow:inset 0 0 0 1px var(--lli-accent); } :root[data-lli-layout] .llif-visual { background:var(--lli-nav); color:var(--lli-muted); } :root[data-lli-layout] .llif-kind-folder .llif-visual { background:var(--lli-tint); color:var(--lli-accent); } :root[data-lli-layout] .llif-list .llif-kind-folder .llif-title::before { color:var(--lli-accent); } :root[data-lli-layout] .llif-card>.llif-check { accent-color:var(--lli-accent); } :root[data-lli-layout] .llif-small .llif-menu { background:var(--lli-panel); } :root[data-lli-layout] .llif-list-head { background:var(--lli-nav); } :root[data-lli-layout] .llif-drop { background:var(--lli-tint)!important; } :root[data-lli-layout] .llif-empty svg { color:var(--lli-muted); } :root[data-lli-layout] .llif-button:focus-visible, :root[data-lli-layout] .llif-card:focus-visible { outline:2px solid var(--lli-accent); outline-offset:2px; } /* Appearance is independent of the tools page and follows the active palette. */ :root[data-lli-layout] .lli-appearance-dialog { --lyl-ink:var(--lli-ink); --lyl-muted:var(--lli-muted); --lyl-border:var(--lli-line); --lyl-paper:var(--lli-panel); --lyl-soft:var(--lli-tint); width:min(620px,calc(100vw - 32px)); max-height:88dvh; padding:24px; color:var(--lli-ink); background:var(--lli-panel); border:1px solid var(--lli-line); border-radius:var(--lli-radius); } :root[data-lli-layout] .lli-appearance-dialog::backdrop { background:#0006; } :root[data-lli-layout] .lli-appearance-dialog .lyl-head h2 { color:var(--lli-ink); font-size:20px; } :root[data-lli-layout] .lli-appearance-dialog .lyl-help { color:var(--lli-muted); font-size:12px; } :root[data-lli-layout] .lli-appearance-dialog .secondary { color:var(--lli-ink); background:var(--lli-panel); border-color:var(--lli-line); box-shadow:none; } :root[data-lli-layout] .lli-appearance-dialog .primary { color:var(--lli-bg); background:var(--lli-accent); border:0; box-shadow:none; } :root[data-lli-layout] .lli-appearance-dialog :focus-visible { outline:2px solid var(--lli-accent); outline-offset:2px; } :root[data-lli-layout] .lli-appearance-dialog [hidden] { display:none!important; } @media (max-width:480px) { :root[data-lli-layout] .lli-appearance-dialog { padding:18px; } :root[data-lli-layout] .lli-appearance-dialog .lye-grid { grid-template-columns:1fr; } } /* Login uses the same four palettes. Authentication nodes and handlers are untouched. */ :root[data-lli-layout] #loginView { --lli-login-action-ink:#fff; --lli-login-error:#b42318; min-height:100vh; min-height:100dvh; padding:clamp(16px,4vw,48px); background:var(--lli-bg); color:var(--lli-ink); } :root[data-lli-layout][data-theme="dark"] #loginView { --lli-login-action-ink:var(--lli-bg); --lli-login-error:#ffb4ab; } :root[data-lli-layout] #loginView::before, :root[data-lli-layout] #loginView::after, :root[data-lli-layout] #loginView .login-identity::before { display:none; } :root[data-lli-layout] #loginView .login-card { width:min(880px,100%); grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); border:1px solid var(--lli-line); border-radius:var(--lli-radius); background:var(--lli-panel); box-shadow:0 12px 40px #0000000d; } :root[data-lli-layout] #loginView .login-identity { min-height:520px; padding:36px 24px; background:var(--lli-nav); color:var(--lli-ink); border-right:1px solid var(--lli-line); } :root[data-lli-layout] #loginView .login-mascot-shell { width:156px; height:156px; margin-bottom:24px; border:1px solid var(--lli-line); box-shadow:none; background:transparent; } :root[data-lli-layout] #loginView .login-wordmark { color:var(--lli-ink); font-size:28px; } :root[data-lli-layout] #loginView .login-signature { color:var(--lli-accent); letter-spacing:.06em; } :root[data-lli-layout] #loginView .login-identity p { color:var(--lli-muted); } :root[data-lli-layout] #loginView .login-identity p::before { background:var(--lli-accent); } :root[data-lli-layout] #loginView .login-form-panel { padding:32px clamp(24px,4vw,42px); background:var(--lli-panel); color:var(--lli-ink); } :root[data-lli-layout] #loginView .login-form-eyebrow { color:var(--lli-accent); } :root[data-lli-layout] #loginView h1 { color:var(--lli-ink); font-size:30px; padding-right:0; } :root[data-lli-layout] #loginView .login-subtitle { color:var(--lli-muted); } :root[data-lli-layout] #loginView .field label { color:var(--lli-ink); } :root[data-lli-layout] #loginView .field input, :root[data-lli-layout] #loginView .field select { min-width:0; width:100%; min-height:46px; border:1px solid var(--lli-line); border-radius:min(var(--lli-radius),12px); background:var(--lli-bg); color:var(--lli-ink); } :root[data-lli-layout] #loginView input:-webkit-autofill, :root[data-lli-layout] #loginView input:-webkit-autofill:hover, :root[data-lli-layout] #loginView input:-webkit-autofill:focus { -webkit-text-fill-color:var(--lli-ink); caret-color:var(--lli-ink); box-shadow:0 0 0 1000px var(--lli-bg) inset; } :root[data-lli-layout] #loginView .field input:focus, :root[data-lli-layout] #loginView .field select:focus, :root[data-lli-layout] #loginView :focus-visible { outline:2px solid var(--lli-accent); outline-offset:3px; border-color:var(--lli-accent); box-shadow:none; } :root[data-lli-layout] #loginView .primary { min-height:48px; border:1px solid transparent; border-radius:min(var(--lli-radius),12px); background:var(--lli-accent); color:var(--lli-login-action-ink); box-shadow:none; } :root[data-lli-layout] #loginView .primary:not(:disabled):hover { filter:brightness(.93); transform:none; } :root[data-lli-layout] #loginView .primary:disabled { opacity:.65; cursor:wait; } :root[data-lli-layout] #loginView .login-theme-toggle { position:static; inset:auto; align-self:flex-end; max-width:100%; min-height:40px; padding:8px 12px; margin:0 0 24px; border:1px solid var(--lli-line); border-radius:min(var(--lli-radius),12px); background:var(--lli-panel); color:var(--lli-muted); box-shadow:none; font-size:12px; } :root[data-lli-layout] #loginView .login-theme-toggle:hover { background:var(--lli-tint); color:var(--lli-ink); } :root[data-lli-layout] #loginView .theme-toggle-icon { background:transparent; color:var(--lli-accent); } :root[data-lli-layout] #loginView .form-error { color:var(--lli-login-error); } :root[data-lli-layout="atelier"] #loginView .login-card { box-shadow:none; } :root[data-lli-layout="conversation"] #loginView .login-card { display:flex; flex-direction:column; width:min(460px,100%); padding:28px; box-shadow:none; } :root[data-lli-layout="conversation"] #loginView .login-identity { min-height:0; padding:0 0 24px; flex-direction:row; justify-content:flex-start; gap:12px; background:transparent; border:0; text-align:left; } :root[data-lli-layout="conversation"] #loginView .login-mascot-shell { width:48px; height:48px; margin:0; } :root[data-lli-layout="conversation"] #loginView .login-wordmark { font-size:20px; } :root[data-lli-layout="conversation"] #loginView .login-signature, :root[data-lli-layout="conversation"] #loginView .login-identity p { display:none; } :root[data-lli-layout="conversation"] #loginView .login-form-panel { padding:0; } @media (max-width:700px) { :root[data-lli-layout] #loginView .login-card { grid-template-columns:minmax(0,1fr); } :root[data-lli-layout] #loginView .login-identity { min-height:0; padding:20px 24px; flex-direction:row; justify-content:flex-start; gap:12px; border-right:0; border-bottom:1px solid var(--lli-line); text-align:left; } :root[data-lli-layout] #loginView .login-mascot-shell { width:48px; height:48px; margin:0; } :root[data-lli-layout] #loginView .login-wordmark { font-size:20px; } :root[data-lli-layout] #loginView .login-signature, :root[data-lli-layout] #loginView .login-identity p { display:none; } :root[data-lli-layout] #loginView .login-form-panel { padding:24px; } :root[data-lli-layout="conversation"] #loginView .login-card { padding:24px; } :root[data-lli-layout="conversation"] #loginView .login-identity { padding:0 0 24px; border:0; } :root[data-lli-layout="conversation"] #loginView .login-form-panel { padding:0; } }