:root {
    --ColorSurface:      rgb(255.0, 255.0, 255.0);
    --ColorCanvas:       rgb(250.0, 250.0, 250.0);
    --ColorHover:        rgb(245.0, 245.0, 245.0);
    --ColorBorder:       rgb(229.0, 229.0, 229.0);
    --ColorBorderStrong: rgb(209.0, 209.0, 209.0);
    --ColorText:         rgb(10.0, 10.0, 10.0);
    --ColorTextSoft:     rgb(107.0, 107.0, 107.0);
    --ColorTextFaint:    rgb(155.0, 155.0, 155.0);
    --ColorInk:          rgb(10.0, 10.0, 10.0);
    --ColorInkInverse:   rgb(255.0, 255.0, 255.0);
    --ColorDanger:       rgb(217.0, 45.0, 33.0);
    --ColorSuccess:      rgb(10.0, 145.0, 69.0);

    --SelectColor:       rgb(90.0, 183.0, 255.0);

    --RadiusSm:   10.0px;
    --RadiusMd:   15.0px;
    --RadiusLg:   20.0px;
    --RadiusFull: 999.0px;

    --SpaceXs: 5.0px;
    --SpaceSm: 10.0px;
    --SpaceMd: 15.0px;
    --SpaceLg: 20.0px;
    --SpaceXl: 30.0px;

    --FontUi:   "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --FontMono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    --SizeTextXs: 13.0px;
    --SizeTextSm: 15.0px;
    --SizeTextMd: 17.0px;
    --SizeTextXl: 23.0px;

    --SizeIconXs: 13.0px;
    --SizeIconSm: 15.0px;
    --SizeIconLg: 21.0px;

    --WeightRegular:  400.0;
    --WeightMedium:   500.0;
    --WeightSemibold: 600.0;

    --DurationFast: 150.0ms;
    --DurationBase: 300.0ms;
    --EaseOut: cubic-bezier(0.25, 1.0, 0.5, 1.0);

    --ShadowFloat: 0.0px 5.0px 20.0px rgba(10.0, 10.0, 10.0, 0.05);

    --LayoutSidebar: 260.0px;
    --LayoutContent: 720.0px;
}



*, *::before, *::after { box-sizing: border-box; margin: 0.0px; padding: 0.0px; }

html, body { height: 100.0%; }

body {
    font-family: var(--FontUi);
    font-size: var(--SizeTextMd);
    line-height: 1.5;
    color: var(--ColorText);
    background: var(--ColorCanvas);
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

::selection { background: var(--SelectColor); color: var(--ColorInk); }

button:focus-visible,
a:focus-visible { outline: 1.0px solid var(--ColorInk); outline-offset: 3.0px; }

::-webkit-scrollbar { width: 10.0px; height: 10.0px; }

::-webkit-scrollbar-thumb {
    background: var(--ColorBorderStrong);
    border-radius: var(--RadiusFull);
    border: 3.0px solid var(--ColorCanvas);
}

::-webkit-scrollbar-track { background: transparent; }

.Hidden { display: none !important; }

.Icon { width: var(--SizeIconSm); height: var(--SizeIconSm); flex-shrink: 0.0; }



.App { display: flex; height: 100.0vh; height: 100.0dvh; }

.Sidebar {
    width: var(--LayoutSidebar);
    flex-shrink: 0.0;
    height: 100.0%;
    background: var(--ColorSurface);
    border-right: 1.0px solid var(--ColorBorder);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.SidebarHeader {
    height: 60.0px;
    flex-shrink: 0.0;
    display: flex;
    align-items: center;
    gap: var(--SpaceSm);
    padding: 0.0px var(--SpaceSm) 0.0px var(--SpaceMd);
    border-bottom: 1.0px solid var(--ColorBorder);
}

.SidebarBrand {
    flex: 1.0;
    min-width: 0.0px;
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightSemibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ChatNav {
    flex: 1.0;
    min-height: 0.0px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--SpaceXs);
    gap: 3.0px;
}

.ChatEmpty {
    padding: var(--SpaceLg) var(--SpaceMd);
    font-size: var(--SizeTextSm);
    color: var(--ColorTextFaint);
    text-align: center;
}

.ChatItem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9.0px;
    width: 100.0%;
    padding: 9.0px 9.0px 9.0px 13.0px;
    border: none;
    border-radius: var(--RadiusSm);
    background: transparent;
    color: var(--ColorTextSoft);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.ChatItem:hover { background: var(--ColorHover); color: var(--ColorText); }

body[data-view="Home"] .ChatItem.Active {
    background: var(--ColorHover);
    color: var(--ColorText);
}

.ChatItemBody {
    flex: 1.0;
    min-width: 0.0px;
    display: flex;
    flex-direction: column;
    gap: 3.0px;
}

.ChatItemName {
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightMedium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ChatItemMeta {
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextFaint);
}

.ChatItemActions {
    display: flex;
    gap: 3.0px;
    flex-shrink: 0.0;
    opacity: 0.0;
    transition: opacity var(--DurationFast) var(--EaseOut);
}

.ChatItem:hover .ChatItemActions,
body[data-view="Home"] .ChatItem.Active .ChatItemActions,
.ChatItem.Pinned .ChatItemActions { opacity: 1.0; }

.ChatItemAction {
    width: 23.0px;
    height: 23.0px;
    display: grid;
    place-items: center;
    padding: 0.0px;
    border: none;
    border-radius: 5.0px;
    background: none;
    color: var(--ColorTextFaint);
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.ChatItemAction:hover { background: var(--ColorBorder); color: var(--ColorText); }

.ChatItemAction[data-action="delete"]:hover { color: var(--ColorDanger); }

.ChatItemAction[data-action="pin"].Pinned { color: var(--ColorInk); opacity: 1.0; }

.ChatItemAction .Icon { width: var(--SizeIconXs); height: var(--SizeIconXs); }

.ChatRenameInput {
    width: 100.0%;
    padding: 0.0px;
    border: none;
    border-bottom: 1.0px solid var(--ColorInk);
    background: transparent;
    color: var(--ColorText);
    font: inherit;
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightMedium);
    outline: none;
}

.BottomNav {
    flex-shrink: 0.0;
    display: flex;
    flex-direction: column;
    gap: 3.0px;
    padding: var(--SpaceXs);
    border-top: 1.0px solid var(--ColorBorder);
}

.NavItem {
    display: flex;
    align-items: center;
    gap: 13.0px;
    width: 100.0%;
    padding: 9.0px 13.0px;
    border: none;
    border-radius: var(--RadiusSm);
    background: transparent;
    color: var(--ColorTextSoft);
    font: inherit;
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightMedium);
    text-align: left;
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.NavItem:hover { background: var(--ColorHover); color: var(--ColorText); }

.NavItem.Active { background: var(--ColorInk); color: var(--ColorInkInverse); }



.Main {
    flex: 1.0;
    min-width: 0.0px;
    display: flex;
    flex-direction: column;
    height: 100.0%;
}

.Header {
    height: 60.0px;
    flex-shrink: 0.0;
    display: flex;
    align-items: center;
    gap: var(--SpaceMd);
    padding: 0.0px var(--SpaceLg);
    background: var(--ColorSurface);
    border-bottom: 1.0px solid var(--ColorBorder);
}

.HeaderTitle { font-size: var(--SizeTextMd); font-weight: var(--WeightSemibold); }

.HeaderSide { margin-left: auto; display: flex; align-items: center; gap: 9.0px; min-width: 0.0px; }

.IconButton {
    width: 35.0px;
    height: 35.0px;
    display: grid;
    place-items: center;
    border: 1.0px solid transparent;
    border-radius: var(--RadiusSm);
    background: transparent;
    color: var(--ColorTextSoft);
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.IconButton:hover { background: var(--ColorHover); color: var(--ColorText); }

.MenuButton { display: none; }

.StatusChip {
    display: inline-flex;
    align-items: center;
    gap: var(--SpaceXs);
    padding: var(--SpaceXs) 11.0px;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusFull);
    background: var(--ColorSurface);
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ColorTextSoft);
}

.StatusDot {
    width: 9.0px;
    height: 9.0px;
    border-radius: var(--RadiusFull);
    background: var(--ColorTextFaint);
}

.StatusChip[data-state="thinking"] { color: var(--ColorText); }
.StatusChip[data-state="thinking"] .StatusDot {
    background: var(--ColorInk);
    animation: DotPulse 900.0ms var(--EaseOut) infinite;
}

.StatusChip[data-state="streaming"] { color: var(--ColorText); }
.StatusChip[data-state="streaming"] .StatusDot { background: var(--ColorInk); }

@keyframes DotPulse {
    0.0%   { box-shadow: 0.0px 0.0px 0.0px 0.0px rgba(10.0, 10.0, 10.0, 0.35); }
    100.0% { box-shadow: 0.0px 0.0px 0.0px 9.0px rgba(10.0, 10.0, 10.0, 0.0); }
}

.ModelPill {
    max-width: 210.0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: var(--SpaceXs) 13.0px;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusFull);
    background: var(--ColorSurface);
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextSoft);
    cursor: pointer;
    transition: border-color var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.ModelPill:hover { border-color: var(--ColorBorderStrong); color: var(--ColorText); }



.View { display: none; flex: 1.0; min-height: 0.0px; flex-direction: column; }

.View.Active { display: flex; }

.ViewScroll { flex: 1.0; min-height: 0.0px; overflow-y: auto; }

.ViewInner {
    max-width: var(--LayoutContent);
    margin: 0.0px auto;
    padding: var(--SpaceXl) var(--SpaceLg) 60.0px;
    display: flex;
    flex-direction: column;
    gap: var(--SpaceXl);
}

.ViewHeading { font-size: var(--SizeTextXl); font-weight: var(--WeightSemibold); letter-spacing: -0.01em; }

.ViewSub { font-size: var(--SizeTextSm); color: var(--ColorTextSoft); margin-top: var(--SpaceXs); }

.ViewHeaderRow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--SpaceMd); }

.Field { display: flex; flex-direction: column; gap: 9.0px; }

.FieldLabel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightMedium);
}

.FieldHint { font-size: var(--SizeTextXs); color: var(--ColorTextFaint); line-height: 1.5; }

.Input, .Textarea {
    width: 100.0%;
    padding: 10.0px 13.0px;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusSm);
    background: var(--ColorSurface);
    color: var(--ColorText);
    font: inherit;
    font-size: var(--SizeTextSm);
    outline: none;
    transition: border-color var(--DurationFast) var(--EaseOut);
}

.Input:focus, .Textarea:focus { border-color: var(--ColorInk); }

.InputMono { font-family: var(--FontMono); }

.InputRow { display: flex; gap: 9.0px; align-items: stretch; }

.InputAffix {
    width: 43.0px;
    flex-shrink: 0.0;
    display: grid;
    place-items: center;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusSm);
    background: var(--ColorSurface);
    color: var(--ColorTextSoft);
    cursor: pointer;
    transition: border-color var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.InputAffix:hover { color: var(--ColorText); border-color: var(--ColorBorderStrong); }

.Textarea { resize: vertical; min-height: 90.0px; line-height: 1.5; }

input[type="range"] { width: 100.0%; accent-color: var(--ColorInk); }

.RangeValue {
    font-family: var(--FontMono);
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightRegular);
    color: var(--ColorTextSoft);
}

.FormActions { display: flex; gap: 9.0px; }

.ButtonPrimary, .ButtonGhost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9.0px;
    padding: 9.0px 15.0px;
    border-radius: var(--RadiusSm);
    font: inherit;
    font-size: var(--SizeTextSm);
    font-weight: var(--WeightMedium);
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                border-color var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut),
                opacity var(--DurationFast) var(--EaseOut);
}

.ButtonPrimary {
    border: 1.0px solid var(--ColorInk);
    background: var(--ColorInk);
    color: var(--ColorInkInverse);
}

.ButtonPrimary:hover { opacity: 0.9; }

.ButtonGhost {
    border: 1.0px solid var(--ColorBorder);
    background: var(--ColorSurface);
    color: var(--ColorText);
}

.ButtonGhost:hover { border-color: var(--ColorBorderStrong); background: var(--ColorHover); }

.ButtonGhost:disabled { opacity: 0.35; cursor: not-allowed; }

.ButtonGhost.Armed {
    border-color: var(--ColorDanger);
    background: var(--ColorDanger);
    color: var(--ColorInkInverse);
}

.Messages {
    flex: 1.0;
    min-height: 0.0px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}

.MessageList {
    width: 100.0%;
    max-width: var(--LayoutContent);
    margin: 0.0px auto;
    padding: var(--SpaceXl) var(--SpaceLg);
    display: flex;
    flex-direction: column;
    gap: var(--SpaceLg);
}

.Message { animation: RiseIn var(--DurationBase) var(--EaseOut) both; }

.MessageUser { display: flex; flex-direction: column; align-items: flex-end; gap: var(--SpaceXs); }

.MessageUser .Bubble {
    max-width: 85.0%;
    padding: 10.0px 15.0px;
    background: var(--ColorInk);
    color: var(--ColorInkInverse);
    border-radius: var(--RadiusMd) var(--RadiusMd) 5.0px var(--RadiusMd);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.EditWrap {
    display: flex;
    flex-direction: column;
    gap: 9.0px;
    width: 100.0%;
    min-width: 250.0px;
}

.EditInput {
    color: white;
    border: 1.0px solid rgba(255.0, 255.0, 255.0, 0.2);
}

.EditInput:focus {
    border-color: rgba(255.0, 255.0, 255.0, 0.5);
}

.EditInput::placeholder {
    color: rgba(255.0, 255.0, 255.0, 0.5);
}

.EditActions {
    display: flex;
    justify-content: flex-end;
    gap: 9.0px;
}

.EditWrap .ButtonGhost {
    border-color: rgba(255.0, 255.0, 255.0, 0.2);
    background: transparent;
    color: var(--ColorInkInverse);
}

.EditWrap .ButtonGhost:hover {
    background: rgba(255.0, 255.0, 255.0, 0.1);
}

.EditWrap .ButtonPrimary {
    border-color: var(--ColorInkInverse);
    background: var(--ColorInkInverse);
    color: var(--ColorInk);
}

.EditWrap .ButtonPrimary:hover {
    opacity: 0.9;
}

.AttachedImage {
    max-width: 300.0px;
    max-height: 250.0px;
    border-radius: var(--RadiusSm);
    object-fit: contain;
    display: block;
    margin-bottom: 9.0px;
}

.MessageAssistant { display: flex; align-items: flex-start; gap: var(--SpaceMd); }

.AssistantAvatar {
    width: 30.0px;
    height: 30.0px;
    flex-shrink: 0.0;
    margin-top: 3.0px;
    display: grid;
    place-items: center;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusFull);
    background: var(--ColorSurface);
    color: var(--ColorText);
}

.AssistantAvatar .Icon { width: var(--SizeIconXs); height: var(--SizeIconXs); }

.AssistantBody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9.0px;
    min-width: 0.0px;
    max-width: calc(100.0% - 45.0px);
}

.MessageAssistant .Bubble {
    max-width: 100.0%;
    padding: 11.0px 15.0px;
    background: var(--ColorSurface);
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusMd) var(--RadiusMd) var(--RadiusMd) 5.0px;
    overflow-wrap: anywhere;
}

.TypingBubble {
    display: inline-flex;
    align-items: center;
    gap: var(--SpaceXs);
    padding: 13.0px 15.0px;
    background: var(--ColorSurface);
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusMd) var(--RadiusMd) var(--RadiusMd) 5.0px;
}

.TypingDot {
    width: var(--SpaceXs);
    height: var(--SpaceXs);
    border-radius: var(--RadiusFull);
    background: var(--ColorTextSoft);
    animation: DotBounce 900.0ms ease-in-out infinite;
}

.TypingDot:nth-child(3.0) { animation-delay: 150.0ms; }
.TypingDot:nth-child(3.0) { animation-delay: 300.0ms; }

.TypingTimer {
    margin-left: 9.0px;
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextFaint);
    font-variant-numeric: tabular-nums;
}

@keyframes DotBounce {
    0.0%, 60.0%, 100.0% { transform: translateY(0.0px); opacity: 0.35; }
    30.0%              { transform: translateY(-5.0px); opacity: 1.0; }
}

.StreamCaret {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 3.0px;
    vertical-align: text-bottom;
    background: var(--ColorInk);
    border-radius: 1.0px;
    animation: CaretBlink 900.0ms linear infinite;
}

@keyframes CaretBlink {
    0.0%, 45.0%  { opacity: 1.0; }
    50.0%, 95.0% { opacity: 0.0; }
}

.Reasoning {
    width: 100.0%;
    overflow: hidden;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusSm);
    background: var(--ColorCanvas);
}

.ReasoningHeader {
    display: flex;
    align-items: center;
    gap: 9.0px;
    width: 100.0%;
    padding: 9.0px 13.0px;
    border: none;
    background: none;
    font: inherit;
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextSoft);
    text-align: left;
    cursor: pointer;
}

.ReasoningHeader:hover { color: var(--ColorText); }

.ReasoningPulse {
    width: var(--SpaceXs);
    height: var(--SpaceXs);
    border-radius: var(--RadiusFull);
    background: var(--ColorTextFaint);
}

.Reasoning:not(.Settled) .ReasoningPulse {
    background: var(--ColorInk);
    animation: DotPulse 900.0ms var(--EaseOut) infinite;
}

.ReasoningChevron {
    margin-left: auto;
    display: grid;
    place-items: center;
    color: var(--ColorTextFaint);
    transition: transform var(--DurationBase) var(--EaseOut);
}

.ReasoningChevron .Icon { width: var(--SizeIconXs); height: var(--SizeIconXs); }

.Reasoning.Collapsed .ReasoningChevron { transform: rotate(-90.0deg); }

.ReasoningBody {
    max-height: 300.0px;
    overflow-y: auto;
    padding: 0.0px 13.0px 11.0px;
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    line-height: 1.5;
    color: var(--ColorTextSoft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.Reasoning.Collapsed .ReasoningBody { display: none; }

.Meta {
    display: flex;
    align-items: center;
    gap: 9.0px;
    padding: 0.0px var(--SpaceXs);
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextFaint);
}

.MetaFlag {
    padding: 1.0px 9.0px;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusFull);
}

.MetaFlag.Warn { color: var(--ColorDanger); border-color: var(--ColorDanger); }

.MetaActions { display: inline-flex; gap: var(--SpaceXs); }

.MetaAction {
    display: grid;
    place-items: center;
    padding: 3.0px;
    border: none;
    border-radius: var(--SpaceXs);
    background: none;
    color: var(--ColorTextFaint);
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.MetaAction:hover { background: var(--ColorHover); color: var(--ColorText); }

.MetaAction .Icon { width: var(--SizeIconXs); height: var(--SizeIconXs); }

.MessageError { display: flex; width: 100.0%; }

.ErrorCard {
    display: flex;
    align-items: flex-start;
    gap: 13.0px;
    width: 100.0%;
    padding: 13.0px 15.0px;
    background: var(--ColorSurface);
    border: 1.0px solid var(--ColorBorder);
    border-left: 3.0px solid var(--ColorDanger);
    border-radius: var(--RadiusSm);
}

.ErrorIcon { display: grid; place-items: center; margin-top: 3.0px; color: var(--ColorDanger); }

.ErrorTexts { display: flex; flex-direction: column; gap: 3.0px; flex: 1.0; min-width: 0.0px; }

.ErrorTitle { font-size: var(--SizeTextSm); font-weight: var(--WeightSemibold); }

.ErrorText { font-size: var(--SizeTextXs); color: var(--ColorTextSoft); line-height: 1.5; overflow-wrap: anywhere; }

.ErrorAction {
    padding: 0.0px;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--SizeTextXs);
    font-weight: var(--WeightMedium);
    color: var(--ColorText);
    text-decoration: underline;
    text-underline-offset: 3.0px;
    white-space: nowrap;
    cursor: pointer;
}

@keyframes RiseIn {
    from { opacity: 0.0; transform: translateY(9.0px); }
    to   { opacity: 1.0; transform: translateY(0.0px); }
}

.Bubble > :first-child { margin-top: 0.0px; }
.Bubble > :last-child  { margin-bottom: 0.0px; }

.Bubble p             { margin: 0.0px 0.0px 9.0px; }
.Bubble ul, .Bubble ol { margin: 0.0px 0.0px 9.0px; padding-left: 21.0px; }

.Bubble h4, .Bubble h5, .Bubble h6 { margin: 13.0px 0.0px 9.0px; font-weight: var(--WeightSemibold); line-height: 1.3; }
.Bubble h4 { font-size: var(--SizeTextMd); }
.Bubble h5 { font-size: var(--SizeTextSm); }
.Bubble h6 { font-size: var(--SizeTextXs); text-transform: uppercase; letter-spacing: 0.09em; }

.Bubble blockquote { margin: 0.0px 0.0px 9.0px; padding-left: 11.0px; border-left: 3.0px solid var(--ColorBorder); color: var(--ColorTextSoft); }

.Bubble hr { margin: 13.0px 0.0px; border: none; border-top: 1.0px solid var(--ColorBorder); }

.Bubble a { color: inherit; text-underline-offset: 3.0px; }

.InlineCode {
    padding: 1.0px var(--SpaceXs);
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--SpaceXs);
    background: var(--ColorCanvas);
    font-family: var(--FontMono);
    font-size: 0.9em;
}

.CodeBlock {
    position: relative;
    margin: 9.0px 0.0px;
    padding: 15.0px 13.0px 13.0px;
    background: var(--ColorInk);
    color: rgb(245.0, 245.0, 245.0);
    border-radius: var(--RadiusSm);
    overflow-x: auto;
}

.CodeBlock code {
    display: block;
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    line-height: 1.5;
    white-space: pre;
}

.CodeLabel {
    position: absolute;
    top: 9.0px;
    left: 13.0px;
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: rgba(255.0, 255.0, 255.0, 0.45);
}

.CodeCopy {
    position: absolute;
    top: 9.0px;
    right: 9.0px;
    width: 25.0px;
    height: 25.0px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--SpaceXs);
    background: rgba(255.0, 255.0, 255.0, 0.09);
    color: rgba(255.0, 255.0, 255.0, 0.55);
    cursor: pointer;
    opacity: 0.0;
    transition: opacity var(--DurationFast) var(--EaseOut),
                background var(--DurationFast) var(--EaseOut);
}

.CodeBlock:hover .CodeCopy { opacity: 1.0; }
.CodeCopy:hover { background: rgba(255.0, 255.0, 255.0, 0.15); }
.CodeCopy .Icon { width: var(--SizeIconXs); height: var(--SizeIconXs); }

.SilentNote { color: var(--ColorTextFaint); font-style: italic; }



.EmptyState {
    flex: 1.0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9.0px;
    padding: var(--SpaceXl) var(--SpaceLg);
    text-align: center;
}

.EmptyTile {
    width: 45.0px;
    height: 45.0px;
    margin-bottom: var(--SpaceXs);
    display: grid;
    place-items: center;
    border-radius: var(--RadiusMd);
    background: var(--ColorInk);
    color: var(--ColorInkInverse);
    animation: RiseIn var(--DurationBase) var(--EaseOut) both;
}

.EmptyTile .Icon { width: var(--SizeIconLg); height: var(--SizeIconLg); }

.EmptyTitle {
    font-size: var(--SizeTextXl);
    font-weight: var(--WeightSemibold);
    letter-spacing: -0.01em;
    animation: RiseIn var(--DurationBase) var(--EaseOut) 90.0ms both;
}

.EmptyText {
    font-size: var(--SizeTextSm);
    color: var(--ColorTextSoft);
    animation: RiseIn var(--DurationBase) var(--EaseOut) 150.0ms both;
}

.EmptyStarters {
    display: flex;
    flex-direction: column;
    gap: 9.0px;
    width: min(480.0px, 100.0%);
    margin-top: 25.0px;
    animation: RiseIn var(--DurationBase) var(--EaseOut) 210.0ms both;
}

.StarterRow {
    display: flex;
    align-items: center;
    gap: 13.0px;
    padding: 13.0px 15.0px;
    border: 1px solid var(--ColorBorder);
    border-radius: var(--RadiusMd);
    background: var(--ColorSurface);
    color: var(--ColorText);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--DurationFast) var(--EaseOut),
                box-shadow var(--DurationFast) var(--EaseOut),
                transform var(--DurationFast) var(--EaseOut);
}

.StarterRow:hover { border-color: var(--ColorInk); transform: translateY(-1.0px); box-shadow: var(--ShadowFloat); }

.StarterIcon {
    width: 30.0px;
    height: 30.0px;
    flex-shrink: 0.0;
    display: grid;
    place-items: center;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusSm);
    background: var(--ColorCanvas);
    color: var(--ColorTextSoft);
}

.StarterTexts { display: flex; flex-direction: column; gap: 1.0px; }

.StarterTitle { font-size: var(--SizeTextSm); font-weight: var(--WeightMedium); }

.StarterDesc { font-size: var(--SizeTextXs); color: var(--ColorTextFaint); }

.StarterChevron { margin-left: auto; display: grid; place-items: center; color: var(--ColorTextFaint); }

.ComposerWrap { padding: var(--SpaceXs) var(--SpaceLg) var(--SpaceLg); }

.Composer { position: relative; max-width: var(--LayoutContent); margin: 0.0px auto; }

.ComposerShell {
    display: flex;
    align-items: center;
    gap: 9.0px;
    padding: 9.0px 9.0px 9.0px 11.0px;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusLg);
    background: var(--ColorSurface);
    transition: border-color var(--DurationFast) var(--EaseOut),
                box-shadow var(--DurationFast) var(--EaseOut);
}

.ComposerShell:focus-within {
    border-color: var(--ColorInk);
    box-shadow: 0.0px 0.0px 0.0px 3.0px rgba(10.0, 10.0, 10.0, 0.05);
}

.ComposerShell.Listening {
    border-color: var(--ColorInk);
    animation: ListenPulse 1.3s var(--EaseOut) infinite;
}

@keyframes ListenPulse {
    0.0%   { box-shadow: 0.0px 0.0px 0.0px 0.0px rgba(10.0, 10.0, 10.0, 0.15); }
    100.0% { box-shadow: 0.0px 0.0px 0.0px 9.0px rgba(10.0, 10.0, 10.0, 0.0); }
}

.ComposerTool {
    width: 39.0px;
    height: 39.0px;
    flex-shrink: 0.0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--RadiusSm);
    background: transparent;
    color: var(--ColorTextSoft);
    cursor: pointer;
    transition: background var(--DurationFast) var(--EaseOut),
                color var(--DurationFast) var(--EaseOut);
}

.ComposerTool:hover { background: var(--ColorHover); color: var(--ColorText); }

.ComposerTool.Listening { background: var(--ColorInk); color: var(--ColorInkInverse); }

.ComposerInput {
    flex: 1.0;
    min-width: 0.0px;
    max-height: 165.0px;
    padding: 9.0px 0.0px;
    min-height: 45.0px;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--ColorText);
    font: inherit;
    font-size: var(--SizeTextMd);
    line-height: 1.5;
}

.ComposerInput::placeholder { color: var(--ColorTextFaint); }

.ComposerSend {
    width: 41.0px;
    height: 41.0px;
    flex-shrink: 0.0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--RadiusFull);
    background: var(--ColorInk);
    color: var(--ColorInkInverse);
    cursor: pointer;
    transition: transform var(--DurationFast) var(--EaseOut),
                opacity var(--DurationFast) var(--EaseOut);
}

.ComposerSend:hover  { opacity: 0.9; transform: translateY(-1.0px); }
.ComposerSend:active { transform: scale(0.95); }
.ComposerSend .Icon  { width: var(--SizeIconSm); height: var(--SizeIconSm); }

.ComposerHints {
    display: flex;
    justify-content: center;
    gap: 9.0px;
    margin-top: 9.0px;
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextFaint);
}

.HintDot { color: var(--ColorBorderStrong); }

.JumpPill {
    position: absolute;
    bottom: calc(100.0% + 10.0px);
    left: 50.0%;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: var(--SpaceXs);
    padding: 9.0px 13.0px;
    border: none;
    border-radius: var(--RadiusFull);
    background: var(--ColorInk);
    color: var(--ColorInkInverse);
    font: inherit;
    font-size: var(--SizeTextXs);
    font-weight: var(--WeightMedium);
    cursor: pointer;
    opacity: 0.0;
    pointer-events: none;
    transform: translateX(-50.0%);
    transition: opacity var(--DurationFast) var(--EaseOut);
}

.JumpPill.Show { opacity: 1.0; pointer-events: auto; }

@keyframes Pop {
    from { opacity: 0.0; transform: translateY(var(--SpaceXs)); }
    to   { opacity: 1.0; transform: translateY(0.0px); }
}

.AttachPreviews {
    display: flex;
    flex-wrap: wrap;
    gap: 9.0px;
    padding: 0.0px 0.0px 9.0px;
}

.AttachPreviews:empty { display: none; }

.AttachChip {
    display: flex;
    align-items: center;
    gap: 9.0px;
    padding: 9.0px 11.0px;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusSm);
    background: var(--ColorSurface);
    font-size: var(--SizeTextXs);
    color: var(--ColorTextSoft);
}

.AttachChip .Icon { color: var(--ColorTextFaint); flex-shrink: 0.0; }

.AttachChipName {
    max-width: 140.0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.AttachThumb {
    width: 30.0px;
    height: 30.0px;
    border-radius: 5.0px;
    object-fit: cover;
    flex-shrink: 0.0;
}

.AttachRemove {
    display: grid;
    place-items: center;
    padding: 0.0px;
    margin-left: 3.0px;
    border: none;
    background: none;
    color: var(--ColorTextFaint);
    cursor: pointer;
    transition: color var(--DurationFast) var(--EaseOut);
}

.AttachRemove:hover { color: var(--ColorDanger); }
.AttachRemove .Icon { width: var(--SizeIconXs); height: var(--SizeIconXs); }

.ToastStack {
    position: fixed;
    bottom: 25.0px;
    left: 50.0%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9.0px;
    transform: translateX(-50.0%);
    pointer-events: none;
}

.Toast {
    display: flex;
    align-items: center;
    gap: 9.0px;
    padding: 9.0px 15.0px;
    border-radius: var(--RadiusFull);
    background: var(--ColorInk);
    color: var(--ColorInkInverse);
    font-size: var(--SizeTextSm);
    box-shadow: 0.0px 15.0px 30.0px rgba(10.0, 10.0, 10.0, 0.15);
    animation: ToastIn var(--DurationBase) var(--EaseOut);
}

.Toast.Leaving { animation: ToastOut 200.0ms var(--EaseOut) both; }

@keyframes ToastIn {
    from { opacity: 0.0; transform: translateY(15.0px); }
    to   { opacity: 1.0; transform: translateY(0.0px); }
}

@keyframes ToastOut {
    from { opacity: 1.0; }
    to   { opacity: 0.0; transform: translateY(15.0px); }
}

.ActionList {
    display: flex;
    flex-direction: column;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusMd);
    background: var(--ColorSurface);
}

.ActionRow {
    display: flex;
    align-items: center;
    gap: var(--SpaceMd);
    padding: var(--SpaceMd);
    border-bottom: 1.0px solid var(--ColorBorder);
}

.Bubble ul, .Bubble ol {
    margin-bottom: var(--SpaceMd);
    padding-left: var(--SpaceLg);
}

.Bubble li {
    margin-bottom: var(--SpaceXs);
}

.Bubble table {
    width: 100.0%;
    border-collapse: collapse;
    margin: var(--SpaceMd) 0.0px;
    font-size: var(--SizeTextSm);
}

.Bubble th, .Bubble td {
    padding: var(--SpaceSm);
    border: 1.0px solid rgba(255.0, 255.0, 255.0, 0.1);
    text-align: left;
}

.Bubble th {
    background: rgba(255.0, 255.0, 255.0, 0.05);
    font-weight: 600.0;
}

.ActionRow:last-child { border-bottom: none; }

.ActionIcon {
    width: 35.0px;
    height: 35.0px;
    flex-shrink: 0.0;
    display: grid;
    place-items: center;
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusSm);
    background: var(--ColorCanvas);
    color: var(--ColorTextSoft);
}

.ActionTexts { display: flex; flex-direction: column; gap: 1.0px; min-width: 0.0px; }

.ActionTitle { font-size: var(--SizeTextSm); font-weight: var(--WeightMedium); }

.ActionDesc { font-size: var(--SizeTextXs); color: var(--ColorTextFaint); }

.ActionList .ButtonGhost { margin-left: auto; flex-shrink: 0.0; }

.InfoBlock { display: flex; flex-direction: column; gap: var(--SpaceMd); }

.InfoHeading { font-size: var(--SizeTextMd); font-weight: var(--WeightSemibold); }

.InfoText { font-size: var(--SizeTextSm); color: var(--ColorTextSoft); line-height: 1.5; }

.InfoRows {
    border: 1.0px solid var(--ColorBorder);
    border-radius: var(--RadiusMd);
    background: var(--ColorSurface);
}

.InfoRow {
    display: flex;
    justify-content: space-between;
    gap: var(--SpaceMd);
    padding: 13.0px 15.0px;
    border-bottom: 1.0px solid var(--ColorBorder);
}

.InfoRow:last-child { border-bottom: none; }

.InfoKey   { font-size: var(--SizeTextSm); color: var(--ColorTextSoft); }
.InfoValue { font-family: var(--FontMono); font-size: var(--SizeTextSm); color: var(--ColorText); text-align: right; overflow-wrap: anywhere; }

.InfoRow.Warn .InfoValue { color: var(--ColorDanger); }

.ShortcutRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9.0px 0.0px;
    border-bottom: 1.0px solid var(--ColorBorder);
    font-size: var(--SizeTextSm);
    color: var(--ColorTextSoft);
}

.ShortcutRow:last-child { border-bottom: none; }

.Keys { display: inline-flex; gap: var(--SpaceXs); }

.Key {
    padding: 1.0px var(--SpaceXs);
    border: 1.0px solid var(--ColorBorder);
    border-bottom-width: 3.0px;
    border-radius: var(--SpaceXs);
    background: var(--ColorSurface);
    color: var(--ColorText);
    font-family: var(--FontMono);
    font-size: var(--SizeTextXs);
}



@media (max-width: 900.0px) {
    .Sidebar {
        position: fixed;
        top: 0.0px;
        left: 0.0px;
        bottom: 0.0px;
        z-index: 100;
        transform: translateX(-100.0%);
        transition: transform var(--DurationBase) var(--EaseOut);
    }

    body.NavOpen .Sidebar {
        transform: translateX(0.0px);
        box-shadow: var(--ShadowFloat);
    }

    .NavBackdrop {
        position: fixed;
        inset: 0.0px;
        z-index: 25;
        display: block;
        background: rgba(10.0, 10.0, 10.0, 0.3);
        opacity: 0.0;
        pointer-events: none;
        transition: opacity var(--DurationBase) var(--EaseOut);
    }

    body.NavOpen .NavBackdrop { opacity: 1.0; pointer-events: auto; }

    .MenuButton { display: grid; }

    .ModelPill { display: none; }

    .MessageList { padding: var(--SpaceLg); }

    .ComposerWrap { padding: 0.0px var(--SpaceMd) var(--SpaceMd); }

    .ComposerHints { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1.0 !important;
        transition-duration: 0.01ms !important;
    }
}



.WeatherWidget {
    background: linear-gradient(135.0deg, rgb(30.0, 30.0, 30.0) 0.0%, rgb(45.0, 45.0, 45.0) 100.0%);
    color: rgb(255.0, 255.0, 255.0);
    border-radius: var(--RadiusMd);
    padding: var(--SpaceLg);
    box-shadow: 0.0px 10.0px 30.0px rgba(0.0, 0.0, 0.0, 0.15);
    border: 1.0px solid rgba(255.0, 255.0, 255.0, 0.05);
    font-size: var(--SizeTextMd);
    width: 350.0px;
    margin: var(--SpaceMd) 0.0px;
    display: flex;
    flex-direction: column;
    gap: var(--SpaceLg);
    transition: transform var(--DurationBase) var(--EaseOut), box-shadow var(--DurationBase) var(--EaseOut);
}

.WeatherCurrent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.WeatherForecast {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1.0px solid rgba(255.0, 255.0, 255.0, 0.1);
    padding-top: var(--SpaceLg);
}

.ForecastDay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--SpaceXs);
    font-size: var(--SizeTextSm);
}

.ForecastIcon svg {
    width: 20.0px;
    height: 20.0px;
    opacity: 0.8;
}

.ForecastMax { font-weight: 600.0; }
.ForecastMin { opacity: 0.6; margin-left: 5.0px; }

.WeatherInfo {
    line-height: 1.5;
}

.WeatherIcon {
    user-select: none;
}

.WeatherIcon svg {
    width: 75.0px;
    height: 75.0px;
}

.WeatherWidget:hover {
    transform: translateY(-3.0px);
    box-shadow: 0.0px 15.0px 35.0px rgba(0.0, 0.0, 0.0, 0.25);
}

.WeatherWidget strong {
    font-size: var(--SizeTextXl);
    font-weight: var(--WeightSemibold);
    background: linear-gradient(90.0deg, rgb(160.0, 195.0, 253.0) 0.0%, rgb(195.0, 233.0, 250.0) 100.0%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--SpaceXs);
}


/* Hide default datalist dropdown caret */
#ModelInput::-webkit-calendar-picker-indicator { display: none !important; }