/* Chat's layout (owner, 2026-10-30, request 643; public/chat-layout.js arranges the elements). The colours and sizes
   are the LiveLoop project "Sary-OS Chat"'s. Every rule is under :root.chat-layout, with the id weight the older chat
   styles carry, because those paint the same elements with !important under many theme classes. */
:root.chat-layout {
  --chl-bg: #09090b; --chl-side: #18181b; --chl-top: #121214; --chl-card: #222225; --chl-border: #27272b;
  --chl-text: #ededee; --chl-muted: #92929c; --chl-faint: #666670; --chl-button: #fff; --chl-button-text: #161618;
  --chl-side-w: clamp(250px, calc(var(--dash-w, 100vw) * .236), 340px);
}
@media (min-width: 1600px) { :root.chat-layout { --chl-side-w: max(250px, calc(var(--dash-w, 100vw) * .236)); } }
/* Light means the plain white page only (html.light-mode: Light with the wallpaper None). Light over a wallpaper or
   the menu's Default keeps the site's glass look, white letters on the wallpaper as Code Lab and the top bar have it
   (liquid-glass.js keeps theme-contrast-dark there), so these keep Dark's colours (owner, 2026-10-30: "chat background
   and side bar should match code lab background, right now its too pale"; "the tool bar should match top tool bar in
   aurura"). Translucent: the page is clear over the wallpaper and the side and top bars take the top bar's wash. */
:root.chat-layout.light-mode {
  --chl-bg: #fafafa; --chl-side: #f0f0f2; --chl-top: #f5f5f6; --chl-card: #e5e5e9; --chl-border: #d7d7dc;
  --chl-text: #202024; --chl-muted: #6b6b75; --chl-faint: #7c7c87; --chl-button: #202024; --chl-button-text: #fff;
}
/* The three big surfaces take their own variables so the menu's Translucent can thin them and the wallpaper (Aurora,
   Lines or a scene, Animated or Still) shows through; the input box, popovers and dialogs stay solid. Default
   (body.portal-solid) keeps them opaque. Owner, 2026-10-30: "also add the light theme to chat and also the other
   theme auroa, translucent, still, animated". */
:root.chat-layout { --chl-surface-bg: var(--chl-bg); --chl-surface-side: var(--chl-side); --chl-surface-top: var(--chl-top); --chl-surface-blur: none; }
:root.chat-layout:not(.light-mode) body:not(.portal-solid):not(.portal-layer-none) { --chl-muted: rgba(255, 255, 255, .82); --chl-faint: rgba(255, 255, 255, .62); --chl-border: rgba(255, 255, 255, .26); --chl-card: rgba(255, 255, 255, .14); }
:root.chat-layout body:not(.portal-solid):not(.portal-layer-none) { --chl-surface-bg: rgba(0, 0, 0, .1); --chl-surface-side: rgba(0, 0, 0, .32); --chl-surface-top: rgba(0, 0, 0, .32); --chl-surface-blur: blur(24px) saturate(1.8); }
:root.chat-layout.light-mode body:not(.portal-solid):not(.portal-layer-none) { --chl-surface-bg: rgba(250, 250, 250, .6); --chl-surface-side: rgba(240, 240, 242, .94); --chl-surface-top: rgba(245, 245, 246, .92); }
:root.chat-layout .chl-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }

/* ---------------------------------------------------------------- docking
   A desktop chat keeps the history beside it, both at the layout's own 1:1 size (owner, 2026-11-01: "i want the chat
   to look identical to the design... the side bar width. the font. everthing"). The workspace zooms .main-container
   to 0.8; the chat inside it takes zoom 1.25 back to 1 and the frame geometry undivided, and the sidebar, outside it,
   takes zoom 1 and the frame geometry as it is. The sidebar is the layout's 23.6% of the width, 250 to 340 px. */
@media (min-width: 961px) {
  :root.chat-layout body.portal-ready[data-portal-panel="chat"].portal-docked:not(.coding-lab-open):not(.chat-sidebar-collapsed) #sidebar.sidebar {
    transform: none !important; zoom: 1; z-index: 3 !important;
    left: var(--dash-left) !important; top: var(--dash-body-top) !important; height: var(--dash-body-h) !important;
    width: var(--chl-side-w) !important; min-width: var(--chl-side-w) !important; max-width: var(--chl-side-w) !important;
    border-radius: 0 0 0 27px !important;
  }
  :root.chat-layout:root body.portal-ready[data-portal-panel="chat"].portal-docked:not(.coding-lab-open):has(#sidebar) .main-container > .chat-container {
    zoom: 1.25; top: var(--dash-body-top) !important; left: var(--dash-left) !important;
    width: var(--dash-w) !important; height: var(--dash-body-h) !important; border-radius: 0 0 27px 27px !important;
  }
  :root.chat-layout:root body.portal-ready[data-portal-panel="chat"].portal-docked:not(.coding-lab-open):not(.chat-sidebar-collapsed):has(#sidebar) .main-container > .chat-container {
    padding-left: var(--chl-side-w) !important; box-sizing: border-box !important;
  }
  :root.chat-layout:root body.portal-ready[data-portal-panel="chat"].portal-docked:not(.coding-lab-open).chat-sidebar-collapsed:has(#sidebar) .main-container > .chat-container { padding-left: 0 !important; }
  :root.chat-layout body.portal-ready[data-portal-panel="chat"].chat-sidebar-collapsed #sidebar.sidebar { display: none !important; }
  :root.chat-layout body[data-portal-panel="chat"]:not(.chat-sidebar-collapsed) #controls-header-content #hamburger { display: none !important; }
  :root.chat-layout body[data-portal-panel="chat"] #sidebar #sidebar-resizer { display: none !important; }
  :root.chat-layout #sidebar #mobile-sidebar-search-btn { display: none !important; }
}

/* ----------------------------------------------------------------- sidebar */
/* It opens and closes as the layout's does, at once, with the chat taking or giving back the room (owner, 2026-10-30:
   "keep the side bar animation effect as it was not match site side bar action"), not the site drawer's slide. */
:root.chat-layout #sidebar.sidebar, :root.chat-layout:root .main-container > .chat-container { transition: none !important; }
:root.chat-layout #sidebar.sidebar {
  background: var(--chl-side) !important; color: var(--chl-text) !important; border-right: 1px solid var(--chl-border) !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px;
}
:root.chat-layout #sidebar .sidebar-header {
  height: 62px; min-height: 62px; padding: 0 20px 0 12px !important; display: flex !important; align-items: center !important;
  gap: 9px; border-bottom: 1px solid var(--chl-border) !important; background: transparent !important; flex-shrink: 0;
}
:root.chat-layout #sidebar #sidebar-header-content, :root.chat-layout #sidebar #pin-sidebar { display: none !important; }
:root.chat-layout #sidebar .chl-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
:root.chat-layout #sidebar .chl-logo { width: 31px; height: 31px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: #dedee1; color: #161618; font-size: 23px; line-height: 1; }
:root.chat-layout #sidebar .chl-brand strong { font-size: 14px; font-weight: 600; color: var(--chl-text); }
:root.chat-layout #sidebar #close-sidebar {
  margin-left: auto !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 50% !important; border: 0 !important; background: transparent !important; color: var(--chl-text) !important; box-shadow: none !important; padding: 0 !important;
}
:root.chat-layout #sidebar #close-sidebar:hover { background: var(--chl-card) !important; }
:root.chat-layout #sidebar .sidebar-controls { padding: 11px 12px 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
:root.chat-layout #sidebar .sidebar-search-container {
  height: 36px; display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 12px !important;
  border: 1px solid var(--chl-border) !important; border-radius: 22px !important; background: var(--chl-top) !important; color: var(--chl-muted); box-shadow: none !important; position: relative;
}
:root.chat-layout #sidebar .chl-search-icon { display: inline-flex; color: var(--chl-muted); }
:root.chat-layout #sidebar .chl-search-icon .chl-icon { width: 16px; height: 16px; }
:root.chat-layout #sidebar #sidebar-search-input {
  min-width: 0; width: 100%; height: 100%; border: 0 !important; outline: none; background: none !important; color: var(--chl-text) !important;
  font-size: 13px !important; padding: 0 !important; box-shadow: none !important;
}
:root.chat-layout #sidebar #sidebar-search-input::placeholder { color: var(--chl-muted); opacity: 1; }
:root.chat-layout:root #sidebar.sidebar #new-chat-btn {
  width: 100% !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; height: 35px !important; margin: 11px 0 0 !important; padding: 0 !important;
  border-radius: 22px !important; border: 0 !important; background: var(--chl-button) !important; color: var(--chl-button-text) !important;
  font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; animation: none !important;
}
:root.chat-layout #sidebar #new-chat-btn .chl-icon { width: 16px; color: var(--chl-button-text); }
:root.chat-layout #sidebar #temp-chat-btn.chl-incognito {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 35px; margin-top: 8px; padding: 0;
  border: 1px solid var(--chl-border); border-radius: 22px; background: transparent; color: var(--chl-muted); font-size: 13px; cursor: pointer;
}
:root.chat-layout #sidebar #temp-chat-btn.chl-incognito .chl-icon { width: 16px; }
:root.chat-layout #sidebar #temp-chat-btn.chl-incognito:hover { color: var(--chl-text); background: var(--chl-card); }
:root.chat-layout #sidebar #temp-chat-btn.chl-incognito[aria-pressed="true"] { border-color: var(--chl-text); background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout #sidebar .sidebar-utilities-grid { display: none !important; }

:root.chat-layout #sidebar #chat-history-list { flex: 1; overflow-y: auto; padding: 8px 11px !important; margin: 0 !important; }
:root.chat-layout #sidebar .chl-section summary {
  list-style: none; display: flex; align-items: center; gap: 9px; height: 51px; cursor: pointer;
  color: var(--chl-faint); font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
:root.chat-layout #sidebar .chl-section summary::-webkit-details-marker { display: none; }
:root.chat-layout #sidebar .chl-section summary .chl-icon { width: 15px; height: 15px; }
:root.chat-layout #sidebar .chl-chevron { display: inline-flex; transition: transform .15s; }
:root.chat-layout #sidebar .chl-chevron .chl-icon { width: 12px; height: 12px; }
:root.chat-layout #sidebar .chl-section[open] .chl-chevron { transform: rotate(90deg); }
:root.chat-layout #sidebar .chl-section-body { margin: 0 2px 9px 24px; font-size: 12px; }
:root.chat-layout #sidebar .chl-empty { color: var(--chl-muted); padding: 2px 0 6px; }
:root.chat-layout #sidebar .chl-drop { background: var(--chl-card) !important; outline: 1px dashed var(--chl-muted); outline-offset: -1px; border-radius: 7px; }

:root.chat-layout #sidebar #chat-history-list .history-item {
  display: flex !important; align-items: center; gap: 4px; min-height: 0 !important; width: 100%; margin: 0 !important; padding: 0 2px 0 0 !important;
  border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; color: var(--chl-muted) !important; position: relative;
}
:root.chat-layout #sidebar #chat-history-list .history-item:hover,
:root.chat-layout #sidebar #chat-history-list .history-item.active { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout #sidebar #chat-history-list .history-item .mobile-chat-icon,
:root.chat-layout #sidebar #chat-history-list .history-item .history-item-date { display: none !important; }
:root.chat-layout #sidebar #chat-history-list .history-item-details { flex: 1; min-width: 0; padding: 9px !important; }
:root.chat-layout #sidebar #chat-history-list .history-item-title {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit !important; font-size: 12px !important; font-weight: 400 !important;
}
:root.chat-layout #sidebar #chat-history-list .history-menu-toggle {
  width: 24px; height: 24px; border: 0 !important; border-radius: 6px; background: transparent !important; color: var(--chl-muted) !important; opacity: 0; box-shadow: none !important;
}
:root.chat-layout #sidebar #chat-history-list .history-item:hover .history-menu-toggle,
:root.chat-layout #sidebar #chat-history-list .history-item.chat-actions-open .history-menu-toggle { opacity: 1; }
@media (hover: none) { :root.chat-layout #sidebar #chat-history-list .history-menu-toggle { opacity: 1; } }
:root.chat-layout #sidebar #chat-history-list .history-item-menu {
  background: var(--chl-side) !important; border: 1px solid var(--chl-border) !important; border-radius: 10px !important; box-shadow: 0 8px 25px #0003 !important; padding: 6px !important; z-index: 20;
}
:root.chat-layout #sidebar #chat-history-list .history-menu-action {
  color: var(--chl-text) !important; background: transparent !important; border: 0 !important; border-radius: 7px !important; font-size: 12px !important; padding: 8px 10px !important;
}
:root.chat-layout #sidebar #chat-history-list .history-menu-action:hover { background: var(--chl-card) !important; }
:root.chat-layout #sidebar #chat-history-list .history-menu-action i { color: var(--chl-muted) !important; }
:root.chat-layout #sidebar #chat-history-list .history-show-more { margin: 6px 0 !important; width: 100% !important; border-color: var(--chl-border) !important; color: var(--chl-muted) !important; }

:root.chat-layout #sidebar .chl-folder-row { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 7px; color: var(--chl-muted); cursor: pointer; user-select: none; }
:root.chat-layout #sidebar .chl-folder-row:hover { background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout #sidebar .chl-folder-row .chl-icon { width: 15px; height: 15px; }
:root.chat-layout #sidebar .chl-folder-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.chat-layout #sidebar .chl-folder-name[contenteditable="true"] { padding: 0 3px; border-radius: 4px; outline: 1px solid var(--chl-muted); color: var(--chl-text); user-select: text; text-overflow: clip; }
:root.chat-layout #sidebar .chl-folder-row small { color: var(--chl-faint); font-size: 11px; }
:root.chat-layout #sidebar .chl-new-folder { display: flex; align-items: center; gap: 6px; margin: 0 2px 9px 22px; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--chl-muted); font-size: 12px; cursor: pointer; }
:root.chat-layout #sidebar .chl-new-folder:hover { background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout #sidebar .chl-new-folder .chl-icon { width: 14px; height: 14px; }
:root.chat-layout #sidebar .chl-template-group { margin: 8px 0 2px; color: var(--chl-faint); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
:root.chat-layout #sidebar .chl-template-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; border-radius: 7px; background: none; color: var(--chl-muted); text-align: left; font-size: 12px; cursor: pointer; }
:root.chat-layout #sidebar .chl-template-item span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.chat-layout #sidebar .chl-template-item:hover { background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout #sidebar .chl-template-item .chl-icon { width: 15px; height: 15px; }

:root.chat-layout #sidebar .sidebar-footer { border-top: 1px solid var(--chl-border) !important; padding: 12px !important; background: transparent !important; display: block !important; }
:root.chat-layout #sidebar #user-controls-sidebar, :root.chat-layout #sidebar .sidebar-history-danger { display: none !important; }
:root.chat-layout #sidebar .chl-settings-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
:root.chat-layout #sidebar .chl-settings { display: flex; gap: 8px; align-items: center; padding: 5px 7px; border: 0; background: none; color: var(--chl-text); font-size: 13px; cursor: pointer; border-radius: 8px; }
:root.chat-layout #sidebar .chl-settings:hover { background: var(--chl-card); }
:root.chat-layout #sidebar .chl-settings .chl-icon, :root.chat-layout #sidebar .chl-theme .chl-icon { width: 16px; height: 16px; }
:root.chat-layout #sidebar .chl-theme { display: flex; align-items: center; gap: 7px; border: 1px solid var(--chl-border); background: var(--chl-bg); color: var(--chl-text); padding: 7px 10px; border-radius: 20px; font-size: 13px; cursor: pointer; }
:root.chat-layout #sidebar .chl-profile { display: flex; align-items: center; gap: 9px; background: var(--chl-card); padding: 9px 8px; border-radius: 13px; font-size: 13px; }
:root.chat-layout #sidebar .chl-avatar { display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; width: 31px; height: 31px; background: #fff center / cover no-repeat; color: #27272b; font-size: 13px; font-weight: 600; }
:root.chat-layout #sidebar .chl-profile-main { flex: 1; min-width: 0; display: block; text-align: left; border: 0; background: none; color: var(--chl-text); padding: 0; cursor: pointer; font-size: 13px; }
:root.chat-layout #sidebar .chl-profile-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.chat-layout #sidebar .chl-profile-sub { display: block; margin-top: 3px; font-size: 11px; color: var(--chl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------------------- shared bits */
/* The site's control depth and 44-48 px touch heights (icon-system.css and others) are not the layout's: Chat's own
   controls are flat and take the sizes given here. */
:root.chat-layout:root [data-flat] :is(.chl-settings, .chl-theme, .chl-top-up, .chl-profile-main, .chl-icon-btn, .chl-send, .chl-menu-item,
  .chl-new-folder, .chl-template-item, .chl-incognito, .chl-folder-row, .chl-browser-folder, .chl-browser-open, .chl-primary, .chl-secondary,
  #new-chat-btn, #close-sidebar, #hamburger, #composer-attach-toggle, #composer-reasoning-toggle, #model-toggle-button, #chat-context-ring,
  .composer-reasoning-option, .composer-style-option, .history-menu-toggle, .history-menu-action),
:root.chat-layout:root [data-flat] .chl-modes label {
  box-shadow: none !important; min-height: 0 !important; min-width: 0 !important; translate: none !important; filter: none !important;
}
:root.chat-layout:root [data-flat] :is(.chl-settings, .chl-profile-main, .chl-template-item, .chl-new-folder, .chl-browser-folder, .chl-browser-open, .chl-menu-item) { background-color: transparent; }
:root.chat-layout:root [data-flat] .chl-icon-btn { background: transparent !important; border: 0 !important; border-radius: 50% !important; height: 34px !important; width: 34px !important; padding: 0 !important; color: var(--chl-muted) !important; }
:root.chat-layout:root [data-flat] .chl-icon-btn[hidden] { display: none !important; }
:root.chat-layout:root [data-flat] .chl-icon-btn:hover { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout:root [data-flat] .chl-options { border: 1px solid var(--chl-border) !important; }
/* The Portal's Close sits beside the options, drawn the same way. */
:root.chat-layout:root [data-flat] #portal-chat-close {
  width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid var(--chl-border) !important; background: transparent !important; color: var(--chl-muted) !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
:root.chat-layout:root [data-flat] #portal-chat-close:hover { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout:root [data-flat] .chl-top-up { height: auto !important; padding: 2px 9px !important; border-radius: 10px !important; }
:root.chat-layout:root [data-flat] .chl-theme { height: auto !important; border-radius: 20px !important; }
:root.chat-layout:root [data-flat] .chl-settings { height: auto !important; }
:root.chat-layout:root [data-flat] .chl-profile-main { height: auto !important; border-radius: 0 !important; }
:root.chat-layout:root [data-flat] .chl-send { border-radius: 50% !important; width: 38px !important; height: 38px !important; }
:root.chat-layout .chl-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: none; color: var(--chl-muted); flex-shrink: 0; cursor: pointer; padding: 0; }
:root.chat-layout .chl-icon-btn:hover { background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout .chl-pop {
  padding: 6px; border: 1px solid var(--chl-border); background: var(--chl-side); color: var(--chl-text); box-shadow: 0 8px 25px #0003;
  border-radius: 10px; z-index: 100500; font-size: 12px; font-family: Arial, Helvetica, sans-serif;
}
:root.chat-layout .chl-pop[hidden] { display: none !important; }
:root.chat-layout body > .chl-pop { position: fixed; width: 210px; }
:root.chat-layout .chl-pop hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--chl-border); }
:root.chat-layout .chl-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 7px; background: none; color: var(--chl-text); text-align: left; font-size: 13px; cursor: pointer; }
:root.chat-layout .chl-menu-item:hover { background: var(--chl-card); }
:root.chat-layout .chl-menu-item .chl-icon { width: 16px; height: 16px; color: var(--chl-muted); }
:root.chat-layout .chl-menu-item.selected { font-weight: 600; }
:root.chat-layout .chl-menu-item:disabled { opacity: .45; cursor: default; background: none; }
:root.chat-layout .chl-menu-item.danger:not(:disabled), :root.chat-layout .chl-menu-item.danger:not(:disabled) .chl-icon { color: #f87171; }

/* ------------------------------------------------------------------ header */
:root.chat-layout .chat-container { background: var(--chl-bg) !important; color: var(--chl-text); }
/* One type throughout, the layout's Arial at 14 px; the site's Inter and system stacks stop at Chat's edge. Code keeps
   its monospace. */
:root.chat-layout:root .chat-container[data-flat], :root.chat-layout:root #sidebar.sidebar[data-flat] { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; }
:root.chat-layout:root :is(.chat-container[data-flat], #sidebar.sidebar[data-flat], body > .chl-pop, body > .chl-modal) :is(button, input, textarea, select, span:not([class*="hljs"]), strong, small, label, p, h1, h2, h3, div:not(pre div)):not(code, pre, pre *, code *, .fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"]) { font-family: Arial, Helvetica, sans-serif !important; }
:root.chat-layout:root .chat-container #controls-header-content.controls-header {
  height: 63px !important; min-height: 63px !important; flex-shrink: 0; display: flex !important; align-items: center !important; gap: 8px; padding: 0 15px !important;
  background: var(--chl-top) !important; border: 0 !important; border-bottom: 1px solid var(--chl-border) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; position: relative; z-index: 6;
}
:root.chat-layout:root #controls-header-content .header-left { display: flex !important; align-items: center; gap: 8px; min-width: 0 !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
:root.chat-layout #controls-header-content #hamburger {
  width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 0 !important; background: transparent !important; color: var(--chl-muted) !important;
  box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important;
}
:root.chat-layout #controls-header-content #hamburger:hover { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout #controls-header-content .chl-chat-header { min-width: 0; padding-left: 6px; }
:root.chat-layout #controls-header-content #chl-chat-title {
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.3; font-weight: 500; letter-spacing: -.3px; margin: 0 0 2px; color: var(--chl-text); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; touch-action: manipulation;
}
:root.chat-layout #controls-header-content #chl-chat-title[contenteditable="true"] { margin-left: -6px; padding: 0 6px; border-radius: 6px; outline: 1px solid var(--chl-muted); }
:root.chat-layout #controls-header-content #chl-chat-meta { text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; color: var(--chl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.chat-layout #controls-header-content .header-right { display: flex !important; align-items: center; gap: 6px; position: relative; margin-left: auto; }
:root.chat-layout #controls-header-content :is(#header-credit-balance, #tips-header-btn, #search-btn, #settings-btn) { display: none !important; }
:root.chat-layout #controls-header-content .chl-options { border: 1px solid var(--chl-border); }
:root.chat-layout #controls-header-content .chl-options-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 200px; }

/* -------------------------------------------------------------- messages */
:root.chat-layout:root .chat-container #chat { padding-left: 30px; padding-right: 30px; }
@media (max-width: 760px) { :root.chat-layout:root .chat-container #chat { padding-left: 16px; padding-right: 16px; } }

/* ---------------------------------------------------------------- composer */
:root.chat-layout:root .chat-container #input-area {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--chl-border) !important; border-radius: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 15px 30px 16px !important; margin: 0 !important;
  width: 100% !important; max-width: none !important; box-sizing: border-box !important; animation: none !important; font-family: Arial, Helvetica, sans-serif;
}
:root.chat-layout:root .chat-container #input-area::before, :root.chat-layout:root .chat-container #input-area::after { display: none !important; }
:root.chat-layout #input-area > :is(#file-preview-container, #file-error-message, #chat-context-status, #chat-limit-counter, #yt-url-badge),
:root.chat-layout #input-area > .chl-credit-line { width: 64%; max-width: 720px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
:root.chat-layout:root .chat-container #input-area .input-wrapper {
  position: relative !important; width: 64% !important; max-width: 720px !important; margin: 0 auto !important; box-sizing: border-box !important;
  border: 1px solid var(--chl-border) !important; border-radius: 23px !important; padding: 16px 12px 11px !important;
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important;
  display: block !important;
}
:root.chat-layout:root .chat-container #input-area .input-wrapper::before, :root.chat-layout:root .chat-container #input-area .input-wrapper::after { display: none !important; }
/* Incognito: the dashed box says the chat is not kept. */
:root.chat-layout:root body.temporary-chat-mode .chat-container #input-area .input-wrapper { border-style: dashed !important; border-color: var(--chl-muted) !important; }
:root.chat-layout:root .chat-container #input-area #message-input {
  display: block !important; width: 100% !important; resize: none !important; height: 74px !important; min-height: 74px !important; max-height: 150px !important;
  background: none !important; border: 0 !important; color: var(--chl-text) !important; outline: none !important; padding: 3px !important; margin: 0 !important;
  line-height: 1.5 !important; font-size: 13px !important; font-family: inherit !important; box-shadow: none !important; filter: none !important; animation: none !important;
}
:root.chat-layout:root .chat-container #input-area #message-input::placeholder { color: var(--chl-muted) !important; opacity: 1; }

:root.chat-layout #input-area .chl-composer-top { position: absolute; top: 9px; right: 12px; display: flex; align-items: center; gap: 2px; z-index: 4; }
:root.chat-layout #input-area .chl-composer-top > :not(#chat-context-popover) { position: relative; margin: 0 !important; }
/* The context meter as the layout's: the ring with its figure, and its window above the box, lined up with it. */
:root.chat-layout #input-area .chl-context-wrap { position: relative; display: flex; }
:root.chat-layout:root #input-area .chl-context-wrap > #chat-context-popover {
  position: absolute !important; right: 0 !important; left: auto !important; top: auto !important; bottom: calc(100% + 12px) !important;
  width: 260px !important; max-width: calc(100vw - 32px) !important; margin: 0 !important; z-index: 30 !important; transform: none !important;
  padding: 14px !important; border: 1px solid var(--chl-border) !important; background: var(--chl-side) !important; color: var(--chl-text) !important;
  border-radius: 10px !important; box-shadow: 0 8px 25px #0003 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important;
}
:root.chat-layout:root #chat-context-popover .ccp-head { display: flex !important; justify-content: space-between; align-items: baseline; margin: 0 !important; font-size: 13px !important; color: var(--chl-text) !important; }
:root.chat-layout:root #chat-context-popover .ccp-head strong { font-weight: 700 !important; color: var(--chl-text) !important; font-size: 13px !important; }
:root.chat-layout:root #chat-context-popover .ccp-head span { color: var(--chl-muted) !important; font-size: 13px !important; }
:root.chat-layout:root #chat-context-popover .ccp-bar { height: 4px !important; margin: 12px 0 !important; border-radius: 2px !important; background: var(--chl-card) !important; overflow: hidden; }
:root.chat-layout:root #chat-context-popover .ccp-bar span { display: block; height: 100%; background: var(--chl-text) !important; }
:root.chat-layout:root #chat-context-popover .ccp-rows { display: grid !important; grid-template-columns: 1fr auto; row-gap: 6px; margin: 0 0 12px !important; font-size: 12px !important; }
:root.chat-layout:root #chat-context-popover .ccp-rows > div { display: contents !important; }
:root.chat-layout:root #chat-context-popover .ccp-rows dt { color: var(--chl-muted) !important; margin: 0 !important; font-size: 12px !important; }
:root.chat-layout:root #chat-context-popover .ccp-rows dd { margin: 0 !important; text-align: right; color: var(--chl-text) !important; font-size: 12px !important; }
:root.chat-layout:root #chat-context-popover .ccp-fresh {
  width: 100% !important; padding: 10px !important; border: 1px solid var(--chl-border) !important; border-radius: 10px !important; background: var(--chl-bg) !important;
  color: var(--chl-text) !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; cursor: pointer;
}
:root.chat-layout:root #chat-context-popover .ccp-fresh:hover { background: var(--chl-card) !important; }
:root.chat-layout:root #input-area :is(#composer-reasoning-toggle, #model-toggle-button) {
  height: 34px !important; display: inline-flex !important; align-items: center; gap: 7px; padding: 0 10px !important; border-radius: 17px !important;
  border: 0 !important; background: transparent !important; color: var(--chl-muted) !important; font-size: 12px !important; font-weight: 400 !important; white-space: nowrap;
  box-shadow: none !important; animation: none !important; min-width: 0 !important; width: auto !important; font-family: inherit !important;
}
:root.chat-layout:root #input-area :is(#composer-reasoning-toggle, #model-toggle-button)::after { display: none !important; }
:root.chat-layout:root #input-area :is(#composer-reasoning-toggle, #model-toggle-button):hover,
:root.chat-layout:root #input-area :is(#composer-reasoning-toggle.is-open, #model-toggle-button.model-menu-open) { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout #input-area :is(#composer-reasoning-toggle, #model-toggle-button) :is(span, i) { color: inherit !important; }
:root.chat-layout #input-area #composer-reasoning-toggle .fa-chevron-down { display: none; }
:root.chat-layout #input-area :is(#composer-reasoning-toggle, #model-toggle-button) .chl-icon { width: 17px; height: 17px; }
:root.chat-layout #input-area .chl-model-icon { display: inline-flex; }
:root.chat-layout:root #input-area #chat-context-ring {
  width: auto !important; height: 34px !important; display: inline-flex !important; align-items: center; gap: 7px; padding: 0 10px !important; margin: 0 !important;
  border-radius: 17px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 12px !important; font-family: inherit !important;
}
:root.chat-layout:root #input-area #chat-context-ring:not(.visible) { display: none !important; }
:root.chat-layout:root #input-area #chat-context-ring svg { width: 17px !important; height: 17px !important; flex-shrink: 0; }
:root.chat-layout #input-area #chat-context-ring[aria-expanded="true"] { background: var(--chl-card) !important; color: var(--chl-text) !important; }
@media (max-width: 760px) { :root.chat-layout #input-area .chl-context-label { display: none; } }
:root.chat-layout:root #input-area #chat-context-ring:hover { background: var(--chl-card) !important; }

:root.chat-layout:root #input-area #composer-reasoning-menu {
  position: absolute !important; right: 0 !important; left: auto !important; top: auto !important; bottom: calc(100% + 12px) !important; width: 260px !important; max-width: calc(100vw - 32px) !important;
  padding: 12px 14px !important; border: 1px solid var(--chl-border) !important; background: var(--chl-side) !important; color: var(--chl-text) !important;
  border-radius: 10px !important; box-shadow: 0 8px 25px #0003 !important; backdrop-filter: none !important; z-index: 30 !important; transform: none !important;
}
:root.chat-layout #input-area #composer-reasoning-menu .chl-effort-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; color: var(--chl-muted); font-size: 12px; }
:root.chat-layout #input-area #composer-reasoning-menu .chl-effort-head strong { color: var(--chl-text); font-size: 13px; }
:root.chat-layout:root #input-area #composer-reasoning-menu #chl-effort-range {
  display: block; width: 100% !important; margin: 0 !important; padding: 0 !important; accent-color: var(--chl-text); cursor: pointer;
  height: auto !important; min-height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-options { display: flex !important; justify-content: space-between; gap: 0; margin-top: 6px; flex-direction: row !important; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-option {
  flex: 0 0 auto; min-width: 0 !important; display: flex !important; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 !important; border: 0 !important; white-space: nowrap;
  border-radius: 0 !important; background: transparent !important; color: var(--chl-muted) !important; font-size: 11px !important; font-weight: 400 !important; box-shadow: none !important; width: auto !important; height: auto !important; min-height: 0 !important;
}
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-option:not([hidden]):first-child { align-items: flex-start; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-option:not([hidden]):last-of-type { align-items: flex-end; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-option[hidden] { display: none !important; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-option:hover { color: var(--chl-text) !important; background: transparent !important; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-reasoning-option.active { color: var(--chl-text) !important; font-weight: 600 !important; }
:root.chat-layout #input-area #composer-reasoning-menu .composer-reasoning-option small { color: var(--chl-faint) !important; font-size: 10px; font-weight: 400; }
:root.chat-layout #input-area #composer-reasoning-menu .chl-effort-budget { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--chl-border); color: var(--chl-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
:root.chat-layout #input-area #composer-reasoning-menu .chl-style-title { display: block; margin: 12px 0 7px !important; padding-top: 10px; border-top: 1px solid var(--chl-border); color: var(--chl-muted) !important; font-size: 12px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-style-options { display: grid !important; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 !important; border-radius: 0 !important; background: transparent !important; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-style-option {
  padding: 7px 9px !important; border: 1px solid var(--chl-border) !important; border-radius: 8px !important; background: transparent !important;
  color: var(--chl-muted) !important; font-size: 12px !important; text-align: left; box-shadow: none !important; width: auto !important;
}
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-style-option:hover { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout:root #input-area #composer-reasoning-menu .composer-style-option.active { border-color: var(--chl-text) !important; color: var(--chl-text) !important; font-weight: 600 !important; }

:root.chat-layout:root #input-area .composer-bottom-row {
  position: relative; display: flex !important; align-items: center; gap: 5px; margin: 6px 0 0 !important; padding: 0 !important;
  container-type: inline-size; background: none !important; border: 0 !important; flex-wrap: nowrap !important;
}
:root.chat-layout #input-area .composer-row-spacer { flex: 1; }
:root.chat-layout:root #input-area #composer-attach-toggle {
  width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 0 !important; background: transparent !important;
  color: var(--chl-muted) !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; position: relative;
}
:root.chat-layout:root #input-area #composer-attach-toggle:hover, :root.chat-layout:root #input-area #composer-attach-toggle.menu-open { background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout #input-area .chl-attach-icon { display: inline-flex; }
:root.chat-layout:root #input-area #composer-attach-menu {
  position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: calc(100% + 8px) !important; width: 200px !important;
  padding: 6px !important; border: 1px solid var(--chl-border) !important; background: var(--chl-side) !important; border-radius: 10px !important;
  box-shadow: 0 8px 25px #0003 !important; backdrop-filter: none !important; z-index: 30 !important;
}
:root.chat-layout:root #input-area #composer-attach-menu button {
  width: 100% !important; display: flex !important; align-items: center; gap: 10px; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important;
  background: none !important; color: var(--chl-text) !important; text-align: left; font-size: 13px !important; box-shadow: none !important; justify-content: flex-start !important;
}
:root.chat-layout:root #input-area #composer-attach-menu button:hover { background: var(--chl-card) !important; }
:root.chat-layout #input-area .chl-menu-icon { display: inline-flex; color: var(--chl-muted); }
:root.chat-layout #input-area .chl-menu-icon .chl-icon { width: 16px; height: 16px; }

:root.chat-layout:root #input-area .chl-modes { display: flex !important; gap: 4px; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap; }
:root.chat-layout:root #input-area .chl-modes label:not([hidden]) {
  height: 34px; display: inline-flex !important; align-items: center; gap: 6px; padding: 0 11px !important; margin: 0 !important;
  border: 1px solid var(--chl-border) !important; border-radius: 17px !important; background: transparent !important; color: var(--chl-muted) !important;
  font-size: 12px !important; white-space: nowrap; cursor: pointer; box-shadow: none !important;
}
:root.chat-layout:root #input-area .chl-modes label:not([hidden]):hover { color: var(--chl-text) !important; background: var(--chl-card) !important; }
:root.chat-layout:root #input-area .chl-modes label:not([hidden]):has(input:checked) { border-color: var(--chl-text) !important; background: var(--chl-card) !important; color: var(--chl-text) !important; }
:root.chat-layout #input-area .chl-modes label i { color: inherit !important; font-size: 13px; }
:root.chat-layout #input-area .chl-modes .feature-switch { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
@container (max-width: 500px) {
  :root.chat-layout #input-area .chl-mode-label { display: none; }
  :root.chat-layout:root #input-area .chl-modes label:not([hidden]) { width: 34px; padding: 0 !important; justify-content: center; }
}
:root.chat-layout:root #input-area #char-counter {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); color: var(--chl-faint) !important; font-size: 11px !important;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; margin: 0 !important; background: none !important;
}
@container (max-width: 760px) {
  :root.chat-layout:root #input-area #char-counter { position: static; transform: none; margin-right: 4px !important; }
}
@container (max-width: 560px) { :root.chat-layout:root #input-area #char-counter { display: none !important; } }
:root.chat-layout #input-area .chl-send {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; padding: 0;
  background: var(--chl-button); color: var(--chl-button-text); cursor: pointer; flex-shrink: 0;
}
:root.chat-layout #input-area .chl-send:disabled { background: #28282c; color: #56565f; cursor: default; }
:root.chat-layout.light-mode #input-area .chl-send:disabled { background: #dedee3; color: #9a9aa3; }
:root.chat-layout #input-area .chl-send:not(:disabled):hover { background: #d4d4da; color: #161618; }
:root.chat-layout #input-area .input-controls { display: flex !important; justify-content: center; padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; }
:root.chat-layout #input-area .input-controls #file-name-display:empty { display: none; }

:root.chat-layout #input-area .chl-credit-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px !important; color: var(--chl-muted); font-size: 11px; }
:root.chat-layout:root #input-area .chl-credit-line #chat-send-estimate { position: static !important; transform: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--chl-muted) !important; font-size: 11px !important; box-shadow: none !important; }
:root.chat-layout #input-area .chl-wallet { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
:root.chat-layout #input-area #chl-credit-balance { color: var(--chl-faint); font-variant-numeric: tabular-nums; }
:root.chat-layout #input-area .chl-top-up { padding: 2px 9px; border: 1px solid var(--chl-border); border-radius: 10px; background: none; color: var(--chl-text); font-size: 11px; cursor: pointer; }
:root.chat-layout #input-area .chl-top-up:hover { background: var(--chl-card); }
:root.chat-layout #input-area .chl-disclaimer { text-align: center; color: var(--chl-faint); font-size: 10px; margin: 10px 0 0; }

@media (min-width: 1600px) {
  :root.chat-layout:root .chat-container #input-area .input-wrapper,
  :root.chat-layout #input-area > :is(#file-preview-container, #file-error-message, #chat-context-status, #chat-limit-counter, #yt-url-badge, .chl-credit-line) { max-width: 920px !important; }
}
@media (max-width: 960px) {
  :root.chat-layout:root .chat-container #input-area { padding: 12px 16px !important; }
  :root.chat-layout:root .chat-container #input-area .input-wrapper,
  :root.chat-layout #input-area > :is(#file-preview-container, #file-error-message, #chat-context-status, #chat-limit-counter, #yt-url-badge, .chl-credit-line) { width: 100% !important; }
}

/* -------------------------------------------------------------- model menu */
:root.chat-layout body > .chl-pop.chl-model-menu { width: 160px; padding: 6px; }
:root.chat-layout .chl-flyout-group { position: relative; }
:root.chat-layout .chl-flyout-group:not(.open) > .chl-flyout { display: none; }
:root.chat-layout .chl-flyout-group.open > .chl-model-provider { background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout .chl-pop.chl-flyout { position: absolute; left: calc(100% + 12px); top: -7px; width: 180px; padding: 6px; }
:root.chat-layout :is(.chl-model-option, .chl-model-provider) {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--chl-text); text-align: left; font: inherit; font-size: 13px; cursor: pointer;
}
:root.chat-layout .chl-model-option > span { flex: 1; min-width: 0; }
:root.chat-layout .chl-model-option > svg { width: 15px; height: 15px; visibility: hidden; }
:root.chat-layout .chl-model-option.selected > svg { visibility: visible; }
:root.chat-layout .chl-model-option.selected { font-weight: 600; }
:root.chat-layout :is(.chl-model-option, .chl-model-provider):hover { background: var(--chl-card); }
:root.chat-layout .chl-model-provider { justify-content: space-between; color: var(--chl-muted); font-weight: 600; }
:root.chat-layout .chl-model-provider.has-selection { color: var(--chl-text); }
:root.chat-layout .chl-model-provider svg { width: 13px; height: 13px; }
:root.chat-layout:root [data-flat] :is(.chl-model-option, .chl-model-provider, .chl-note-open, .chl-note-action, .chl-notes-new) { box-shadow: none !important; min-height: 0 !important; min-width: 0 !important; translate: none !important; filter: none !important; }

/* ------------------------------------------------------------------- notes */
:root.chat-layout .chl-notes { width: min(760px, calc(100vw - 32px)); height: min(520px, calc(100dvh - 32px)); padding: 0; display: grid; grid-template-columns: 220px 1fr; overflow: hidden; font-size: 12px; border-radius: 10px; }
:root.chat-layout .chl-notes-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-right: 1px solid var(--chl-border); }
:root.chat-layout .chl-notes-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
:root.chat-layout .chl-notes-new { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid var(--chl-border); border-radius: 14px; background: none; color: var(--chl-muted); font: inherit; font-size: 12px; cursor: pointer; }
:root.chat-layout .chl-notes-new:hover { color: var(--chl-text); background: var(--chl-card); }
:root.chat-layout .chl-notes-new svg { width: 13px; height: 13px; }
:root.chat-layout .chl-notes-filter { height: 30px; padding: 0 9px; border: 1px solid var(--chl-border); border-radius: 8px; background: var(--chl-bg); color: var(--chl-text); font: inherit; font-size: 12px; outline: none; box-sizing: border-box; }
:root.chat-layout .chl-notes-list { flex: 1; overflow-y: auto; color: var(--chl-muted); font-size: 12px; }
:root.chat-layout .chl-note-row { display: flex; align-items: center; gap: 1px; padding-right: 3px; border-radius: 7px; }
:root.chat-layout .chl-note-row:hover, :root.chat-layout .chl-note-row.active { background: var(--chl-card); }
:root.chat-layout .chl-note-open { flex: 1; min-width: 0; padding: 8px; border: 0; background: none; color: var(--chl-text); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; font-size: 12px; cursor: pointer; }
:root.chat-layout .chl-note-action { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--chl-muted); cursor: pointer; }
:root.chat-layout .chl-note-action svg { width: 14px; height: 14px; }
:root.chat-layout .chl-note-action:hover:not(:disabled) { color: var(--chl-text); background: var(--chl-bg); }
:root.chat-layout .chl-note-action:disabled { opacity: .3; cursor: default; }
:root.chat-layout .chl-notes-editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 14px 14px; }
:root.chat-layout .chl-notes-editor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
:root.chat-layout:root:root body:is(*, #chl):is(*, #chl) .chl-notes .chl-note-title {
  flex: 1; min-width: 0; height: auto !important; padding: 4px !important; border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--chl-text) !important; font-size: 16px !important; font-weight: 600; outline: none; border-radius: 0 !important; min-height: 0 !important;
}
:root.chat-layout:root:root body:is(*, #chl):is(*, #chl) .chl-notes :is(.chl-note-body, .chl-notes-filter) { background: var(--chl-bg) !important; border: 1px solid var(--chl-border) !important; box-shadow: none !important; color: var(--chl-text) !important; min-height: 0 !important; }
:root.chat-layout:root .chl-notes :is(.chl-note-title, .chl-note-body, .chl-notes-filter)::placeholder { color: var(--chl-muted); opacity: 1; }
:root.chat-layout:root .chl-notes .chl-note-body { box-shadow: none !important; }
:root.chat-layout .chl-note-body { flex: 1; min-height: 0; padding: 10px 12px; border: 1px solid var(--chl-border); border-radius: 8px; background: var(--chl-bg); color: var(--chl-text); font: inherit; font-size: 13px; line-height: 1.6; resize: none; outline: none; }
:root.chat-layout .chl-notes-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
:root.chat-layout .chl-notes-status { flex: 1; color: var(--chl-faint); font-size: 11px; }
@media (max-width: 580px) {
  :root.chat-layout .chl-notes { grid-template-columns: 1fr; grid-template-rows: 170px 1fr; }
  :root.chat-layout .chl-notes-side { border-right: 0; border-bottom: 1px solid var(--chl-border); }
}

/* ----------------------------------------------------------------- dialogs */
:root.chat-layout .chl-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100500;
  border: 1px solid var(--chl-border); background: var(--chl-side); color: var(--chl-text); box-shadow: 0 8px 40px #0006; border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}
:root.chat-layout .chl-modal .chl-icon { width: 16px; height: 16px; }
:root.chat-layout .chl-folder-browser { width: min(720px, calc(100vw - 32px)); height: min(460px, calc(100dvh - 32px)); display: grid; grid-template-columns: 190px 1fr; overflow: hidden; }
:root.chat-layout .chl-browser-side { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--chl-border); overflow-y: auto; }
:root.chat-layout .chl-browser-side strong { margin-bottom: 8px; }
:root.chat-layout .chl-browser-folder { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: var(--chl-muted); text-align: left; font-size: 12px; cursor: pointer; }
:root.chat-layout .chl-browser-folder span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.chat-layout .chl-browser-folder:hover, :root.chat-layout .chl-browser-folder.active { background: var(--chl-card); color: var(--chl-text); }
:root.chat-layout .chl-browser-folder.chl-drop { outline: 1px dashed var(--chl-muted); }
:root.chat-layout .chl-browser-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
:root.chat-layout .chl-browser-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--chl-border); }
:root.chat-layout .chl-browser-path { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; color: var(--chl-muted); font-size: 12px; }
:root.chat-layout .chl-browser-title { min-width: 0; margin: 0; overflow: hidden; color: var(--chl-text); font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; cursor: text; }
:root.chat-layout .chl-browser-title[contenteditable="true"] { padding: 0 4px; border-radius: 5px; outline: 1px solid var(--chl-muted); text-overflow: clip; }
:root.chat-layout .chl-browser-list { flex: 1; overflow-y: auto; padding: 8px; color: var(--chl-muted); font-size: 12px; }
:root.chat-layout .chl-browser-chat { display: flex; align-items: center; gap: 4px; padding-right: 6px; border-radius: 8px; }
:root.chat-layout .chl-browser-chat:hover { background: var(--chl-card); }
:root.chat-layout .chl-browser-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 18px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 9px 10px; border: 0; background: none; text-align: left; cursor: pointer; }
:root.chat-layout .chl-browser-open .chl-icon { grid-row: span 2; width: 17px; height: 17px; color: var(--chl-muted); }
:root.chat-layout .chl-browser-open strong, :root.chat-layout .chl-browser-open small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.chat-layout .chl-browser-open strong { color: var(--chl-text); font-size: 13px; font-weight: 600; }
:root.chat-layout .chl-browser-open span { color: var(--chl-faint); font-size: 11px; }
:root.chat-layout .chl-browser-open small { grid-column: 2 / 4; color: var(--chl-muted); font-size: 12px; }
:root.chat-layout .chl-report { width: min(380px, calc(100vw - 32px)); padding: 16px; margin: 0; }
:root.chat-layout .chl-report-head { display: flex; align-items: center; justify-content: space-between; }
:root.chat-layout .chl-report-head strong { font-size: 15px; }
:root.chat-layout .chl-report p { margin: 6px 0 12px; color: var(--chl-muted); }
:root.chat-layout .chl-report-reasons { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
:root.chat-layout .chl-report-reasons label { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--chl-border); border-radius: 8px; cursor: pointer; }
:root.chat-layout .chl-report-reasons label:has(:checked) { border-color: var(--chl-text); }
:root.chat-layout .chl-report-reasons input { margin: 0; accent-color: var(--chl-text); }
:root.chat-layout .chl-report textarea { width: 100%; height: 80px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--chl-border); border-radius: 8px; background: transparent; color: var(--chl-text); font: inherit; resize: vertical; box-sizing: border-box; }
:root.chat-layout .chl-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
:root.chat-layout :is(.chl-primary, .chl-secondary) { padding: 8px 14px; border-radius: 18px; font-size: 12px; font-weight: 600; cursor: pointer; }
:root.chat-layout .chl-primary { background: var(--chl-button); color: var(--chl-button-text); border: 0; }
:root.chat-layout .chl-secondary { border: 1px solid var(--chl-border); background: none; color: var(--chl-text); }
:root.chat-layout .chl-secondary:hover { background: var(--chl-card); }
:root.chat-layout :is(.chl-primary, .chl-secondary):disabled { opacity: .4; cursor: default; }
@media (max-width: 580px) {
  :root.chat-layout .chl-folder-browser { grid-template-columns: 1fr; grid-template-rows: 120px 1fr; }
  :root.chat-layout .chl-browser-side { border-right: 0; border-bottom: 1px solid var(--chl-border); }
}

/* The glass skin paints the shared composer (.asksary-composer) with two id weights; Chat's box is the layout's flat one. */
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] :is(#input-area, #input-area #message-input) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* The layout's own colours win over the site's appearance settings (the transparent sidebar, the glass skin's lines):
   owner, 2026-10-30: "keep the colours the same as the imported chat layout, the dark input area". */
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) #sidebar.sidebar[data-flat] {
  background: var(--chl-surface-side) !important; background-image: none !important; backdrop-filter: var(--chl-surface-blur) !important; -webkit-backdrop-filter: var(--chl-surface-blur) !important;
  border-right: 1px solid var(--chl-border) !important; box-shadow: none !important;
}
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] {
  background: var(--chl-surface-bg) !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] #input-area {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--chl-border) !important;
}
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] #input-area .input-wrapper {
  border: 1px solid var(--chl-border) !important; background: var(--chl-bg) !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root.chat-layout:root:root:root:root body.temporary-chat-mode:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] #input-area .input-wrapper { border-style: dashed !important; border-color: var(--chl-muted) !important; }
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] #controls-header-content {
  background: var(--chl-surface-top) !important; background-image: none !important; border-bottom: 1px solid var(--chl-border) !important; backdrop-filter: var(--chl-surface-blur) !important; -webkit-backdrop-filter: var(--chl-surface-blur) !important;
}
/* Messages as the layout's: the person's on the sidebar colour, the reply open with a line round it, both in the
   layout's text colour so Light reads (the older bubble rules key their light colours on html.light-mode, which the
   glass skin keeps off). Code blocks keep their own colours. */
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] .message-container.user .message {
  background: var(--chl-side) !important; background-image: none !important; color: var(--chl-text) !important;
  border: 0 !important; border-radius: 14px !important; box-shadow: none !important; padding: 12px 16px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] :is(.message-container.ai, .message-container.assistant) .message {
  background: transparent !important; background-image: none !important; color: var(--chl-text) !important;
  border: 1px solid var(--chl-border) !important; border-radius: 14px !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] .message :is(p, span:not([class*="hljs"]), li, strong, em, h1, h2, h3, h4, h5, h6, td, th, blockquote) { color: inherit !important; }
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] .date-divider { color: var(--chl-muted) !important; }
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] .date-divider::before,
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] .date-divider::after { border-color: var(--chl-border) !important; }
/* The context ring and the history's scroll bar in the layout's colours (white on white in Light otherwise). */
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] #chat-context-ring { color: var(--chl-muted) !important; }
:root.chat-layout:root:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl) .chat-container[data-flat] #chat-context-ring .ccr-track { stroke: var(--chl-border) !important; }
:root.chat-layout #sidebar #chat-history-list { scrollbar-color: var(--chl-border) transparent; scrollbar-width: thin; }

/* The composer's ink, held at four ids so no account theme, saved text colour or skin key can whiten it on Light
   (owner, 2026-10-30: "in lifht mode too cant read text"; the icons, Send and Top up showed white on white). */
:root.chat-layout:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl):is(*, #chl) #input-area :is(#composer-attach-toggle, .chl-dictate, #chat-context-ring, #composer-reasoning-toggle, #model-toggle-button) {
  color: var(--chl-muted) !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; filter: none !important; text-shadow: none !important;
}
:root.chat-layout:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl):is(*, #chl) #input-area :is(#composer-attach-toggle, .chl-dictate, #composer-reasoning-toggle, #model-toggle-button, .chl-send) svg.chl-icon { stroke: currentColor !important; fill: none !important; }
:root.chat-layout:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl):is(*, #chl) #input-area .chl-top-up {
  color: var(--chl-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; border-color: var(--chl-border) !important; opacity: 1 !important; text-shadow: none !important;
}
:root.chat-layout:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl):is(*, #chl) #input-area .chl-send { background: var(--chl-button) !important; color: var(--chl-button-text) !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; filter: none !important; }
:root.chat-layout:root:root:root body:is(*, #chl):is(*, #chl):is(*, #chl):is(*, #chl) #input-area .chl-send:disabled { background: #28282c !important; color: #6e6e78 !important; }
:root.chat-layout.light-mode:root:root body:is(*, #chl):is(*, #chl):is(*, #chl):is(*, #chl) #input-area .chl-send:disabled { background: #dedee3 !important; color: #8a8a94 !important; }
/* New Chat's and Send's ink above every theme rule (the glass panels' are six ids): on Dark an account's theme
   painted their label and icon white on their white buttons (owner, 2026-10-31: "fix this in dark mode chat";
   "send button in chat in dark mode cant see symbol"). */
:root.chat-layout:root:root:root body:is(*, #chl1):is(*, #chl2):is(*, #chl3):is(*, #chl4):is(*, #chl5):is(*, #chl6) :is(#sidebar #new-chat-btn, #input-area .chl-send:not(:disabled)) {
  background: var(--chl-button) !important; background-image: none !important; color: var(--chl-button-text) !important; -webkit-text-fill-color: var(--chl-button-text) !important; opacity: 1 !important; text-shadow: none !important; filter: none !important;
}
:root.chat-layout:root:root:root body:is(*, #chl1):is(*, #chl2):is(*, #chl3):is(*, #chl4):is(*, #chl5):is(*, #chl6) :is(#sidebar #new-chat-btn, #input-area .chl-send:not(:disabled)) :is(span, svg, path) {
  color: var(--chl-button-text) !important; -webkit-text-fill-color: var(--chl-button-text) !important; opacity: 1 !important; visibility: visible !important;
}
:root.chat-layout:root:root:root body:is(*, #chl1):is(*, #chl2):is(*, #chl3):is(*, #chl4):is(*, #chl5):is(*, #chl6) :is(#sidebar #new-chat-btn, #input-area .chl-send) :is(svg, path) { stroke: currentColor !important; fill: none !important; }