.user-avatar:not(.has-portrait)
{
    background: var(--surface) !important;
}

.sidebar-foot
{
    padding: 9px 11px;
}

.user-row
{
    min-height: 38px;
    padding: 5px 8px;
    border-radius: 9px;
    transition: background 150ms ease;
}

.user-menu
{
    left: 11px;
    bottom: calc(100% + 7px);
    width: min(282px, calc(100vw - 24px));
    padding: 6px;
    border-color: var(--ui_border);
    border-radius: 12px;
    transform-origin: bottom left;
    animation: account_menu_enter 155ms cubic-bezier(.2, .8, .2, 1) both;
}

.user-menu[hidden], .model_picker_menu[hidden], .skill_palette[hidden],
.content_add_menu[hidden], .directory_picker_menu[hidden],
.documents_browser_empty[hidden]
{
    display: none !important;
}

@keyframes account_menu_enter
{
    from
    {
        opacity: 0;
        transform: translateY(6px) scale(.985);
    }
    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.user_menu_identity
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px 10px;
    border-bottom: 1px solid var(--ui_border);
    margin-bottom: 3px;
}

.user_menu_identity strong
{
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 610;
}

.user_menu_identity span
{
    color: var(--muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user_menu_heading, .content_add_heading, .directory_picker_heading,
.model_picker_heading, .skill_palette_heading
{
    padding: 9px 10px 4px;
    font-size: 10px;
    font-weight: 680;
    letter-spacing: .075em;
    color: var(--faint);
    text-transform: uppercase;
}

.user-menu .menu-item
{
    min-height: 31px;
    padding: 6px 9px;
    gap: 9px;
    border-radius: 7px;
    transition: background 120ms ease, color 120ms ease;
}

.user-menu .menu-item:hover, .user-menu .menu-item:focus-visible,
.content_add_item:hover, .directory_picker_row:hover,
.model_picker_option:hover, .skill_palette_row:hover,
.skill_palette_row.is-active
{
    background: var(--ui_selected);
    outline: none;
}

.user_menu_icon, .content_add_icon
{
    width: 18px;
    flex: none;
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

.menu_chevron
{
    margin-left: auto;
    color: var(--faint);
    font-size: 17px;
}

.user_menu_divider
{
    border-top: 1px solid var(--ui_border);
    margin: 5px 6px;
}

.user-menu .menu-field
{
    min-height: 31px;
    padding: 3px 9px;
}

.new_context_bar
{
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 40px;
    padding: 5px 8px;
    margin: -9px 0 12px;
    border: 1px solid var(--ui_border);
    border-radius: 10px;
    background: var(--surface-raised);
}

.new_environment_field, .directory_picker_button
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 55%;
    min-height: 29px;
    padding: 4px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: default;
}

.new_environment_field:hover, .directory_picker_button:hover
{
    background: var(--ui_hover);
}

.new_environment_field select
{
    max-width: 115px;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: default;
}

.context_bar_icon
{
    color: var(--muted);
    font-size: 15px;
}

.context_bar_divider
{
    width: 1px;
    height: 19px;
    background: var(--ui_border);
}

#directory_picker_label
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory_picker_menu, .model_picker_menu, .skill_palette,
.content_add_menu
{
    z-index: 80;
    padding: 5px;
    border: 1px solid var(--ui_border);
    border-radius: 11px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-pop);
    animation: account_menu_enter 140ms ease-out both;
}

.directory_picker_menu
{
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(290px, calc(100vw - 40px));
    max-height: 270px;
    overflow: auto;
}

#newView .directory_picker_menu[data-placement="above"]
{
    top: auto;
    bottom: calc(100% + 8px);
}

#newView .directory_picker_menu[data-placement="below"]
{
    top: calc(100% + 8px);
    bottom: auto;
}

.directory_picker_row, .content_add_item
{
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 32px;
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: default;
}

.directory_picker_name
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content_add_menu
{
    position: fixed;
    width: 220px;
    overflow: auto;
}

.content_add_empty, .skill_palette_empty
{
    padding: 12px;
    color: var(--muted);
    font-size: 12px;
}

.model_picker
{
    position: relative;
    min-width: 0;
}

.native_model_select
{
    display: none !important;
}

.model_picker_button
{
    max-width: 240px;
    min-height: 29px;
    padding: 4px 11px;
    border: 1px solid var(--ui_border);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.model_picker_button:hover, .model_picker_button[aria-expanded="true"]
{
    background: var(--ui_hover);
}

.model_picker_menu
{
    position: absolute;
    left: 0;
    bottom: calc(100% + 7px);
    width: min(305px, calc(100vw - 40px));
    max-height: 350px;
    overflow: auto;
}

.model_picker_menu[data-placement="below"]
{
    top: calc(100% + 7px);
    bottom: auto;
}

.model_picker_group + .model_picker_group
{
    border-top: 1px solid var(--ui_border);
    margin-top: 5px;
}

.model_picker_option
{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: default;
}

.model_picker_option[aria-selected="true"]
{
    color: var(--text-strong);
    background: var(--ui_selected);
}

.model_picker_mark
{
    width: 14px;
    color: var(--accent);
}

.model_picker_name
{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model_picker_meta
{
    color: var(--muted);
}

.composer-box
{
    position: relative;
}

.skill_palette
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    max-height: 300px;
    overflow: auto;
}

.skill_palette[data-placement="below"]
{
    top: calc(100% + 8px);
    bottom: auto;
}

.skill_palette_row
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 43px;
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: default;
}

.skill_palette_icon
{
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: none;
    border-radius: 6px;
    background: var(--ui_hover);
    color: var(--accent);
    font-size: 16px;
}

.skill_palette_copy
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.skill_palette_copy strong
{
    font-size: 12px;
    font-weight: 620;
}

.skill_palette_copy small
{
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents_browser_empty
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 13vh auto;
    color: var(--muted);
    text-align: center;
}

.documents_browser_empty > span
{
    font-size: 34px;
    color: var(--faint);
}

.documents_browser_empty strong
{
    color: var(--text-strong);
}

.documents_browser_empty p
{
    margin: 0 0 9px;
    font-size: 12px;
}

.documents_browser_card
{
    position: relative;
}

#documents_browser_view .fb-grid.is-grid
{
    grid-template-columns: repeat(auto-fill, minmax(176px, 200px));
    gap: 12px;
    padding: 24px;
}

#documents_browser_view .fb-grid.is-grid .documents_browser_card
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 146px;
    padding: 16px;
    border: 1px solid var(--ui_border);
    border-radius: 12px;
    text-align: left;
}

#documents_browser_view .fb-grid.is-grid .fb-icon
{
    width: 42px;
    height: 42px;
    margin: 0 0 auto;
}

#documents_browser_view .fb-grid.is-grid .fb-name
{
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 620;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#documents_browser_view .fb-grid.is-grid .fb-meta
{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#documents_browser_view .fb-grid.is-list
{
    padding: 12px 20px;
}

#documents_browser_view .fb-grid.is-list .documents_browser_card
{
    padding-right: 40px;
}

.document_card_more
{
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    opacity: 0;
    font-size: 17px;
    cursor: default;
}

.documents_browser_card:hover .document_card_more,
.documents_browser_card:focus-within .document_card_more,
.documents_browser_card.is-selected .document_card_more
{
    opacity: 1;
}

.document_card_more:hover
{
    background: var(--ui_selected);
}

.document_card_menu
{
    position: absolute;
    top: 36px;
    right: 8px;
    z-index: 5;
    width: 115px;
    padding: 4px;
    border: 1px solid var(--ui_border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-pop);
}

.document_card_menu[hidden]
{
    display: none;
}

.document_card_action
{
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: default;
}

.document_card_action:hover
{
    background: var(--ui_hover);
}

.document_card_action.danger
{
    color: var(--danger);
}

.documents_browser_card:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.documents_browser_card .fb-icon
{
    color: var(--accent);
}

body[data-view="new"] .shell
{
    min-width: 0;
}

#newView
{
    width: 100%;
    min-width: 0;
}

#newView .new-inner
{
    min-width: 0;
}

#newView .new-body
{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#newView .new_input_dock
{
    width: 100%;
    margin-top: auto;
    padding-top: 28px;
}

#newView .new_reviewer_field
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 43px;
    margin: 0 0 8px;
    padding: 5px 12px;
    border: 1px solid var(--ui_border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--muted);
    font-size: 12px;
}

#newView .new_reviewer_field[hidden]
{
    display: none;
}

#newView .new_reviewer_field select
{
    flex: 1;
    min-width: 0;
    min-height: 32px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

#newView .agent_picker
{
    position: relative;
    z-index: 55;
    margin: 0;
    border: 0;
}

#newView .agent_picker > summary
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: color 150ms ease;
}

#newView .agent_picker > summary:hover,
#newView .agent_picker[open] > summary
{
    color: var(--text);
}

#newView .agent_picker_mark
{
    display: none;
}

#newView .agent_picker_copy
{
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
}

#newView .agent_picker_copy > span
{
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
}

#newView .agent_picker > summary:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.agent_picker_mark
{
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: color-mix(in srgb, var(--selected_agent_accent, var(--accent)) 13%, var(--surface));
    color: var(--selected_agent_accent, var(--accent));
    font-size: 15px;
    font-weight: 650;
}

.agent_picker_copy
{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.agent_picker_copy > span
{
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
}

#newView .agent_picker_copy > strong
{
    color: var(--text);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.25;
}

.agent_picker_copy > small
{
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#newView .agent_picker_copy > small
{
    display: none;
}

#newView .picker_change
{
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
}

#newView .picker_change::after
{
    content: none;
}

.agent_picker_chevron
{
    color: var(--muted);
    font-size: 18px;
    transition: transform 150ms ease;
}

#newView .agent_picker[open] .agent_picker_chevron
{
    transform: rotate(180deg);
}

.agent_picker_panel
{
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: min(58vh, 420px);
    overflow: auto;
    padding: 7px;
    border: 1px solid var(--ui_border);
    border-radius: 14px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-pop);
    animation: account_menu_enter 150ms ease-out both;
}

#newView .agent_picker_panel[data-placement="above"]
{
    top: auto;
    bottom: calc(100% + 8px);
}

#newView .agent_picker_panel[data-placement="below"]
{
    top: calc(100% + 8px);
    bottom: auto;
}

.agent_picker_heading
{
    padding: 8px 10px 11px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

#newView .agent-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
}

#newView .agent-card,
#newView .agent-card:hover,
#newView .agent-card:active
{
    position: relative;
    min-height: 72px;
    padding: 8px 10px;
    gap: 2px;
    border: 1px solid var(--ui_border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

#newView .agent-card:hover,
#newView .agent-card:focus-visible
{
    border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 42%, var(--ui_border));
    background: color-mix(in srgb, var(--agent-accent, var(--accent)) 5%, var(--surface));
}

#newView .agent-card.is-active
{
    border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 65%, var(--ui_border));
    background: color-mix(in srgb, var(--agent-accent, var(--accent)) 8%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent-accent, var(--accent)) 16%, transparent);
}

#newView .agent-card.is-active::after
{
    position: absolute;
    top: 10px;
    right: 11px;
    color: var(--agent-accent, var(--accent));
    content: '✓';
    font-size: 15px;
    font-weight: 700;
}

#newView .agent-card .agent-name
{
    font-size: 13px;
}

#newView .agent-card .agent-desc
{
    -webkit-line-clamp: 1;
    font-size: 10.5px;
    line-height: 1.3;
}

#newView .new_context_bar
{
    min-height: 37px;
    margin: 0 0 9px;
    padding: 3px;
    border-radius: 10px;
    background: var(--surface-raised);
}

#newView .new_environment_field,
#newView .directory_picker_button
{
    min-height: 31px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

#newView .directory_picker_button
{
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
}

#newView #directory_picker_label
{
    flex: 1;
    text-align: left;
}

#newView .new_composer_box
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 118px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: 16px;
    background: var(--surface-raised);
    box-shadow: 0 7px 25px color-mix(in srgb, var(--text) 7%, transparent);
}

#newView .new_composer_box:focus-within
{
    border-color: color-mix(in srgb, var(--accent) 56%, var(--ui_border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent),
        0 10px 28px color-mix(in srgb, var(--text) 8%, transparent);
}

#newView .new_composer_box .composer-input
{
    flex: 1 1 auto;
    width: 100%;
    min-height: 58px;
    padding: 14px 18px 9px;
    font-size: 14px;
    line-height: 1.6;
}

#newView .new_composer_controls
{
    height: auto;
    min-height: 58px;
    padding: 6px 9px;
    gap: 8px;
    border-top: 1px solid var(--ui_border);
    border-radius: 0 0 15px 15px;
    background: color-mix(in srgb, var(--accent) 2%, var(--surface-raised));
}

#newView .new_composer_controls .attach_button,
#newView .new_composer_controls .model_picker_button,
#newView .new_composer_controls .new_approval_control,
#newView .new_composer_controls .composer_options > summary
{
    min-height: 42px;
    border: 1px solid var(--ui_border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

#newView .new_composer_controls .attach_button:hover,
#newView .new_composer_controls .model_picker_button:hover,
#newView .new_composer_controls .new_approval_control:hover,
#newView .new_composer_controls .composer_options > summary:hover
{
    border-color: color-mix(in srgb, var(--accent) 35%, var(--ui_border));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
}

#newView .new_composer_controls .attach_button
{
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
}

#newView .new_composer_controls .attach_button svg
{
    width: 18px;
    height: 18px;
}

#newView .new_composer_controls .model_picker_button
{
    max-width: 236px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 570;
}

#newView .options_panel
{
    position: absolute;
    top: auto !important;
    bottom: calc(100% + 8px);
    left: auto !important;
    right: 0 !important;
    width: min(260px, calc(100vw - 32px));
    overflow: auto;
}

#newView .options_panel[data-placement="above"]
{
    top: auto !important;
    bottom: calc(100% + 8px);
}

#newView .options_panel[data-placement="below"]
{
    top: calc(100% + 8px) !important;
    bottom: auto;
}

#newView .new_composer_controls .model_picker_button::before
{
    margin-right: 8px;
    color: var(--accent);
    content: '◈';
}

.new_approval_control
{
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
}

.new_approval_icon
{
    color: var(--accent);
    font-size: 17px;
}

#newView .new_approval_control select
{
    appearance: none;
    width: auto;
    max-width: 140px;
    min-height: 39px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 570;
    cursor: pointer;
}

.new_approval_chevron
{
    color: var(--muted);
    font-size: 15px;
}

#newView #new_approval_mode
{
    field-sizing: content;
    max-width: 180px;
}

#chat_approval_reviewer_field[hidden]
{
    display: none;
}

#newView .new_composer_controls .composer_options > summary
{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 570;
}

.new_options_icon
{
    color: var(--accent);
    font-size: 15px;
}

#newView .new_composer_controls .send-key
{
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    margin: 0;
    border-radius: 10px;
    background: var(--text-strong);
    color: var(--surface);
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

#newView .new_composer_controls .send-key:hover
{
    background: var(--accent);
    color: var(--surface);
    transform: translateY(-1px);
}

#newView .new_composer_box:has(textarea:placeholder-shown) .send-key,
#newView .new_composer_controls .send-key:disabled
{
    background: var(--ui_selected);
    color: var(--faint);
    opacity: 1;
}

#newView .new_composer_hint
{
    display: none;
}

body[data-view="new"] .cam-root
{
    display: none;
}

@media (max-width: 700px)
{
    #newView .agent-grid
    {
        grid-template-columns: 1fr;
    }

    #newView .new_composer_controls .model_picker
    {
        flex: 1 1 150px;
    }

    #newView .new_composer_controls .model_picker_button
    {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 520px)
{
    #newView .new-body
    {
        padding: 76px 16px 18px;
    }

    #newView .new_input_dock
    {
        padding-top: 28px;
    }

    #newView .picker_change
    {
        display: none;
    }

    #newView .new_composer_controls .attach_button
    {
        order: 0;
    }

    #newView .new_composer_controls .model_picker
    {
        order: 1;
    }

    #newView .new_composer_controls .send-key
    {
        order: 2;
    }

    #newView .new_composer_controls .new_approval_control
    {
        order: 3;
        flex: 1;
    }

    #newView .new_composer_controls .composer_options
    {
        order: 4;
    }

    #newView .new_composer_controls .spacer
    {
        display: none;
    }
}

/* Composer toolbar: one quiet row under the message box. Every control is
   the same chip - 30px tall, borderless, icon + label + caret - so the row
   reads as a set rather than four widgets that each brought their own box.
   The context ring sits at the far right, under the send key. */
.composer-controls
{
    gap: 2px;
    /* An older rule pins the row at 38px; on a phone the chips wrap to a
       second line, which must grow the row rather than spill out of it. */
    height: auto;
    padding: 8px 0 0;
    min-height: 38px;
    align-items: center;
    flex-wrap: wrap;
}

.composer-controls .composer_chip,
.composer-controls .model_picker_button,
.composer-controls .composer_options > summary,
.composer-controls .attach_button,
.composer-controls .ctx_ring_button
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    min-height: 30px;
    max-width: 240px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, transform 120ms var(--ease-out);
}

.composer-controls .attach_button,
.composer-controls .ctx_ring_button
{
    justify-content: center;
    width: 30px;
    padding: 0;
}

.composer-controls .attach_button svg
{
    width: 16px;
    height: 16px;
}

@media (hover: hover) and (pointer: fine)
{
    .composer-controls .composer_chip:hover,
    .composer-controls .model_picker_button:hover,
    .composer-controls .composer_options > summary:hover,
    .composer-controls .attach_button:hover,
    .composer-controls .ctx_ring_button:hover
    {
        background: color-mix(in srgb, var(--text) 7%, transparent);
        color: var(--text);
    }
}

.composer-controls .model_picker_button[aria-expanded="true"],
.composer-controls .composer_options[open] > summary
{
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--text);
}

.composer-controls .composer_chip:active,
.composer-controls .model_picker_button:active,
.composer-controls .composer_options > summary:active,
.composer-controls .attach_button:active
{
    transform: scale(0.97);
}

.composer-controls .composer_chip:focus-within,
.composer-controls .model_picker_button:focus-visible,
.composer-controls .composer_options > summary:focus-visible,
.composer-controls .ctx_ring_button:focus-visible
{
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* The select inside a chip is bare text: the chip is the control's shape. */
.composer-controls .composer_chip select.ghost-select
{
    appearance: none;
    -webkit-appearance: none;
    field-sizing: content;
    min-width: 0;
    max-width: 150px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    cursor: pointer;
}

.composer-controls .composer_chip select.ghost-select:focus
{
    outline: none;
    box-shadow: none;
    background: none;
}

.composer-controls .chip_icon,
.composer-controls .chip_caret
{
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.composer-controls .chip_icon
{
    width: 15px;
    height: 15px;
    stroke-width: 1.5;
    opacity: .9;
}

.composer-controls .chip_caret
{
    width: 12px;
    height: 12px;
    margin-left: -2px;
    stroke-width: 1.8;
    opacity: .55;
    pointer-events: none;
}

.composer-controls .composer_options > summary::after
{
    content: none;
}

.composer-controls .model_picker_button
{
    overflow: hidden;
}

.model_picker_vendor
{
    color: var(--faint);
}

.model_picker_current
{
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
}

.composer-controls .spacer
{
    flex: 1 1 auto;
}

/* The ring, a chip of its own so it has a hover and a focus to hang the
   tooltip on. */
.composer-controls .ctx_ring_button
{
    position: relative;
}

.composer-controls .ctx_ring_button svg
{
    width: 18px;
    height: 18px;
}

.ctx_ring_fill
{
    stroke: color-mix(in srgb, var(--text) 62%, transparent);
}

.ctx_ring.is-warm .ctx_ring_fill
{
    stroke: var(--warning);
}

.ctx_tip
{
    position: absolute;
    z-index: 50;
    right: -4px;
    bottom: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--ui_border);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-pop);
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(3px) scale(.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 140ms ease, transform 160ms var(--ease-out);
}

.ctx_tip strong
{
    color: var(--text);
    font-weight: 560;
}

.ctx_tip:empty
{
    display: none;
}

.ctx_ring_button:hover .ctx_tip,
.ctx_ring_button:focus-visible .ctx_tip
{
    opacity: 1;
    transform: none;
}

/* The chat view's composer is narrower than the page: let the model name
   give way before anything wraps. */
#chatView .composer-controls .model_picker
{
    min-width: 0;
    flex: 0 1 auto;
}

@media (max-width: 640px)
{
    .composer-controls .composer_chip span[data_ui],
    .composer-controls .composer_options > summary span[data_ui],
    .composer-controls .model_picker_vendor
    {
        display: none;
    }

    .composer-controls .composer_chip select.ghost-select
    {
        max-width: 96px;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .user-menu, .directory_picker_menu, .model_picker_menu,
    .skill_palette, .content_add_menu, .agent_picker_panel
    {
        animation: none;
    }

    .ctx_tip
    {
        transform: none;
        transition: opacity 140ms ease;
    }

    #newView .agent_picker > summary,
    #newView .new_composer_controls .send-key
    {
        transition: none;
    }
}

/* QQ access dialog: who may direct this conversation from QQ. */
.contacts_body
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contacts_hint
{
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}

.contacts_bot
{
    margin: -4px 0 0;
    color: var(--faint);
    font-size: 12px;
}

.contacts_list
{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui_border);
    border-radius: 10px;
    overflow: hidden;
}

.contacts_empty
{
    margin: 0;
    padding: 14px 12px;
    color: var(--faint);
    font-size: 12.5px;
    text-align: center;
}

.contacts_row
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 12px;
}

.contacts_row + .contacts_row
{
    border-top: 1px solid var(--ui_border);
}

.contacts_main
{
    flex: 1 1 auto;
    min-width: 0;
}

.contacts_name
{
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.contacts_type
{
    flex: none;
    padding: 1px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--muted);
    font-size: 11px;
}

.contacts_row[data-kind="group"] .contacts_type
{
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.contacts_id
{
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.contacts_note
{
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts_meta
{
    margin-top: 2px;
    color: var(--faint);
    font-size: 11.5px;
}

.contacts_remove
{
    flex: none;
}

.contacts_form
{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.contacts_form[hidden]
{
    display: none;
}

@media (max-width: 520px)
{
    .contacts_form
    {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contacts_label
    {
        grid-column: 1 / -1;
    }
}