#chatPage .input-box{box-sizing:border-box;position:relative;display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px;grid-template-areas:"preview preview preview" "attach message actions" "modes modes modes" "modelUsage modelUsage modelUsage";align-items:center;gap:8px 10px;width:100%;padding:10px 12px;border:1px solid var(--brL);border-radius:28px;background:var(--bg3);box-shadow:var(--shadowS)}
#chatPage .input-box:focus-within{border-color:var(--brL);box-shadow:0 0 0 2px var(--accL)}
#chatPage #imgPreviewStrip{grid-area:preview;min-width:0}
#chatPage #imgPreviewStrip:empty{display:none}
#chatPage #msgInput{grid-area:message;display:block;box-sizing:border-box;align-self:center;flex:none;width:100%;min-width:0;min-height:42px;max-height:180px;padding:6px 0;font-size:16px;line-height:1.5}
#chatPage .composer-actions,#chatPage .composer-tools{display:contents}
#chatPage #attachBtn{grid-area:attach;justify-self:start;align-self:center;width:42px;height:42px;margin:0;border-radius:50%}
#chatPage .attach-menu{left:0;right:auto;bottom:calc(100% + 10px)}
#chatPage #voiceBtn,#chatPage #sendBtn,#chatPage #stopBtn{grid-area:actions;justify-self:end;align-self:center;width:42px;height:42px;flex:0 0 42px;margin:0;border-radius:50%}
#chatPage .cl-mode-bar{grid-area:modes;display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;width:100%;max-width:none;min-width:0;margin:0;padding:0}
#chatPage .cl-mode-btn{min-height:44px;padding:8px 12px}
#chatPage .msg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cl-source-trigger{display:inline-flex;align-items:center;gap:8px;min-height:34px;margin:0;padding:4px 9px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--txt2);font:500 13px var(--font);cursor:pointer;touch-action:manipulation;transition:background .16s ease,border-color .16s ease,color .16s ease}
.cl-source-trigger:hover{border-color:var(--brL);background:var(--bg3);color:var(--txt)}
.cl-source-trigger:focus-visible,.cl-source-dialog-close:focus-visible,.cl-source-link:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.cl-source-favicons{display:inline-flex;align-items:center;padding-left:5px}
.cl-source-favicon{display:block;box-sizing:border-box;width:20px;height:20px;margin-left:-5px;border:1px solid var(--bg2);border-radius:50%;background:var(--bg3);object-fit:cover}
.cl-source-label{white-space:nowrap}
.cl-source-dialog{box-sizing:border-box;width:min(92vw,620px);max-width:calc(100vw - 24px);max-height:min(84vh,720px);margin:auto;padding:0;overflow:hidden;border:1px solid var(--brL);border-radius:18px;background:var(--bg2);color:var(--txt);box-shadow:var(--shadow)}
.cl-source-dialog::backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(2px)}
.cl-source-dialog-panel{display:flex;max-height:min(84vh,720px);flex-direction:column}
.cl-source-dialog-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--br)}
.cl-source-dialog-title{margin:0;font-size:18px;font-weight:650}
.cl-source-dialog-close{min-height:40px;padding:8px 12px;border:1px solid var(--brL);border-radius:10px;background:var(--bg3);color:var(--txt);font:500 13px var(--font);cursor:pointer}
.cl-source-list{display:grid;gap:8px;overflow:auto;margin:0;padding:12px 14px 16px;list-style:none}
.cl-source-item{min-width:0;border:1px solid var(--br);border-radius:12px;background:var(--bg);transition:border-color .16s ease,background .16s ease}
.cl-source-item:hover{border-color:var(--brL);background:var(--bg3)}
.cl-source-link{display:grid;gap:3px;min-width:0;padding:12px 14px;color:inherit;text-decoration:none}
.cl-source-title{overflow-wrap:anywhere;font-size:14px;font-weight:600;color:var(--txt)}
.cl-source-domain{font-size:12px;color:var(--txt2)}
.cl-source-url{overflow-wrap:anywhere;font-size:11px;color:var(--txt3)}
@media(max-width:768px){
  #sidebar{box-sizing:border-box;position:fixed;inset:0 auto 0 0;z-index:21;width:min(86vw,360px);min-width:240px;max-width:360px;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;background:var(--bg2);border-right:1px solid var(--br);box-shadow:var(--shadow)}
  #sidebar .sb-header{flex:0 0 auto;padding:calc(18px + env(safe-area-inset-top,0px)) 18px 16px;border-bottom:0}
  #sidebar .sb-logo{margin-bottom:18px}
  #sidebar .btn-new{min-height:48px;padding:12px 14px;border-radius:13px}
  #sidebar .sb-primary-links .sb-nav{min-height:46px;padding:11px 12px}
  #sidebar .sb-search{flex:0 0 auto;padding:12px 16px 14px;border-bottom:1px solid var(--br)}
  #sidebar .sb-search-input{min-height:44px;border-radius:12px}
  #sidebar .sb-convs{box-sizing:border-box;flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 16px;scrollbar-gutter:stable}
  #sidebar .sb-date-lbl{padding:14px 12px 8px}
  #sidebar .conv-item{min-height:50px;padding:10px 12px;border-radius:12px;gap:10px}
  #sidebar .conv-title{font-size:14px}
  #sidebar .sb-footer{position:relative;z-index:1;flex:0 0 auto;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--br);background:var(--bg2);box-shadow:0 -8px 18px rgba(0,0,0,.12)}
  #sidebar .user-row{min-height:48px;padding:8px 10px}
  #sidebar .sb-footer .sb-nav{min-height:46px;padding:11px 12px}
  .sb-overlay{z-index:20;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:manipulation}
  body.sidebar-open{overflow:hidden;overscroll-behavior:none}
}
@media(max-width:600px){
  #chatPage .input-area{width:100%;max-width:100%;padding-top:4px;padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px));padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  #chatPage .input-box{grid-template-columns:40px minmax(0,1fr) auto;gap:4px;padding:8px 10px;border-radius:15px}
  #chatPage #attachBtn{width:44px;height:44px}
  #chatPage #voiceBtn,#chatPage #sendBtn,#chatPage #stopBtn{width:44px;height:44px;flex-basis:44px}
  #chatPage #msgInput{min-height:44px;font-size:16px}
  #chatPage .cl-mode-bar{gap:6px}
  #chatPage .cl-mode-btn{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center}
  .cl-source-dialog{max-height:calc(100dvh - 32px)}
  .cl-source-dialog-panel{max-height:calc(100dvh - 32px)}
}

@media(max-width:768px){#chatPage .chat-msgs{gap:8px}}

/* Composer structure: active Skills above; model shares the response-options row, with attachment and mic/send below. */
#chatPage .input-box{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"preview preview preview" "message message message" "skills skills skills" "modes modes modes" "bottom bottom bottom"}
#chatPage .input-box>.img-preview-strip{grid-area:preview}
#chatPage .cl-mobile-compact-controls{display:contents}
#chatPage #msgInput{grid-area:message;min-height:58px;padding:5px 2px 0}
#chatPage .cl-active-skills{grid-area:skills}
#chatPage .cl-mode-model-row{grid-area:modes;display:grid;grid-template-columns:minmax(0,1fr) 136px;grid-template-areas:"options model";align-items:center;gap:8px;min-width:0;width:100%}
#chatPage .cl-mode-bar{grid-area:options;width:100%;max-width:none;min-width:0;margin:0}
#chatPage .cl-composer-bottom-row{grid-area:bottom;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:44px;grid-template-areas:"attach . actions";align-items:center;gap:4px 10px;min-width:0;width:100%}
#chatPage .cl-attach-control{position:relative;grid-area:attach;display:flex;align-self:center;align-items:center;justify-content:flex-start;min-width:0}
#chatPage .cl-composer-right-controls{display:contents}
#chatPage .cl-model-picker{position:relative;grid-area:model;justify-self:end;align-self:center;flex:0 0 136px;width:136px;min-width:0;max-width:136px}
#chatPage .cl-model-trigger{box-sizing:border-box;width:100%;max-width:none;min-height:44px;padding:8px 10px;font-size:12px}
#chatPage .cl-model-trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chatPage .cl-model-options{left:auto;right:0}
#chatPage .composer-tools{grid-area:actions;display:flex;justify-self:end;align-self:center;align-items:center;justify-content:flex-end;gap:6px;margin:0;flex:0 0 auto}
#chatPage #attachBtn{width:44px;height:44px}
#chatPage #voiceBtn,#chatPage #sendBtn,#chatPage #stopBtn{width:44px;height:44px;flex-basis:44px}
#chatPage dialog.attach-menu{left:50%;right:auto;top:auto;bottom:0}

@media(max-width:600px){
  #chatPage .input-box{grid-template-columns:40px minmax(0,1fr) auto;gap:4px;padding:8px 10px;border-radius:15px}
  #chatPage .cl-mode-model-row{grid-template-columns:minmax(0,1fr) 136px;grid-template-rows:44px;grid-template-areas:"options model";gap:4px 8px;align-items:center}
  #chatPage .cl-mode-bar{grid-area:options;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:6px;height:44px}
  #chatPage .cl-mode-btn{flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center}
  #chatPage .cl-model-picker{grid-area:model;align-self:center}
  #chatPage .cl-composer-bottom-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:44px;grid-template-areas:"attach . actions";gap:4px 8px;padding-top:0;border-top:0}
  #chatPage #attachBtn{width:40px;height:40px}
  #chatPage #voiceBtn,#chatPage #sendBtn,#chatPage #stopBtn{width:42px;height:42px;flex-basis:42px}
  #chatPage .cl-model-trigger{min-height:44px;padding:8px 10px;font-size:12px}
  #chatPage .composer-tools{gap:4px}
}
@media(max-width:600px){
  #chatPage .input-area{padding-top:4px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  #chatPage .input-box{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "message" "controls" "bottom";gap:4px;padding:8px 10px;border-radius:15px}
  #chatPage #msgInput{min-height:44px;padding:0 2px}
  #chatPage .cl-mobile-compact-controls{grid-area:controls;display:grid;grid-template-columns:44px minmax(92px,1fr) 120px;grid-template-areas:"skills options model";align-items:center;gap:4px;min-width:0;width:100%}
  #chatPage .cl-active-skills{grid-area:skills;width:44px;min-width:44px}
  #chatPage .cl-mode-model-row{display:contents}
  #chatPage .cl-mode-bar{grid-area:options;height:44px;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:4px}
  #chatPage .cl-mode-btn{box-sizing:border-box;display:inline-flex;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center}
  #chatPage .cl-model-picker{grid-area:model;flex:0 0 120px;width:120px;min-width:120px;max-width:120px}
  #chatPage .cl-composer-bottom-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:44px;grid-template-areas:"attach . actions";gap:4px 8px;padding-top:0;border-top:0}
  #chatPage .cl-attach-control{grid-area:attach}
  #chatPage .composer-tools{grid-area:actions;display:flex;gap:4px}
  #chatPage #attachBtn{width:40px;height:40px}
  #chatPage #voiceBtn,#chatPage #sendBtn,#chatPage #stopBtn{width:40px;height:40px;flex-basis:40px}
  #chatPage dialog.attach-menu{left:0;right:0;bottom:0;width:100vw;max-width:100vw;margin:0;transform:none}
}