/* Bitey IA — visual redesign 2026-10-02
   Presentation-only layer. Existing DOM IDs/classes and behavior remain intact.
*/
:root{
  --bitey-bg:#f8fafc;
  --bitey-panel:#f7f8fa;
  --bitey-panel-2:#f1f3f5;
  --bitey-border:#e5e7eb;
  --bitey-text:#1f2937;
  --bitey-muted:#6b7280;
  --bitey-soft:#f8fafc;
  --bitey-accent:#111827;
  --bitey-accent-soft:#eef2f7;
  --bitey-shadow:0 8px 30px rgba(15,23,42,.07);
}
html,body{background:#f8fafc;color:var(--bitey-text)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{height:100dvh;background:#f8fafc}

/* Sidebar */
.sidebar{
  width:258px;flex:0 0 258px;padding:14px 10px;
  background:#f7f8fa;color:#374151;border-right:1px solid var(--bitey-border);
}
.brand{padding:5px 9px 18px;gap:10px}
.brand .bitey-logo{width:34px!important;height:34px!important;border-radius:10px!important}
.brand strong{font-size:15px;color:#111827}
.brand small{color:#8a929d;font-size:10px}
.new-chat{
  height:40px;padding:0 12px;border:1px solid #dfe3e8;
  background:#fff;color:#252b33;border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);font-size:13px;
}
.new-chat:hover{background:#f9fafb;border-color:#cfd5dc}
.sidebar-primary{margin-top:7px}
.sidebar-tool{
  width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:8px;
  background:transparent;color:#5f6875;display:flex;align-items:center;gap:10px;
  text-align:left;font-size:12.5px;cursor:pointer;
}
.sidebar-tool:hover{background:#eceff2;color:#20252b}
.tool-icon{width:19px;text-align:center;color:#7b8490;font-size:15px}
.sidebar-section{
  margin:18px 9px 6px;color:#9aa1aa;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.sidebar-tools{display:grid;gap:1px}
.conversations-label{margin-top:17px}
.history{gap:1px;overflow:auto;padding-right:2px}
.history-item{
  color:#626b76;border-radius:8px;padding:8px 10px;font-size:12px;
}
.history-item:hover{background:#eceff2;color:#252b33}
.history-item.active{background:#e7eaee;color:#171b20;font-weight:650}
.history-empty{color:#9aa1aa;font-size:11px;padding:9px 10px}
.sidebar-spacer{min-height:16px}
.sidebar-bottom{border-top:1px solid #e8eaed;padding-top:9px}
.profile-wrap{margin-top:7px}
.sidebar-profile{
  width:100%;border:0;border-radius:9px;background:transparent;padding:8px;
  display:flex;align-items:center;gap:9px;color:#4b5563;text-align:left;cursor:pointer;
}
.sidebar-profile:hover{background:#eceff2}
.sidebar-profile .profile-avatar-logo{width:27px!important;height:27px!important;border-radius:8px!important}
.profile-copy strong{font-size:11px;color:#374151}
.profile-copy small{font-size:10px;color:#9aa1aa}
.profile-more{margin-left:auto;color:#9aa1aa;font-size:13px}

/* Main */
.chat-area{background:#fff;position:relative}
.topbar{
  height:54px;padding:0 20px;background:rgba(255,255,255,.94);
  border-bottom:1px solid #f0f1f3;backdrop-filter:blur(14px);
}
.topbar-model{
  color:#20242a;font-size:13px;font-weight:650;
}
.topbar-model span{color:#9aa1aa;font-size:12px;margin-left:3px}
.status{
  border:0;background:#f3f5f6;color:#7b838c;padding:5px 8px;font-size:10px;
}
.status i{width:6px;height:6px;margin-right:5px;background:#28a86b}
.icon-button{color:#737b85;padding:6px 8px}
.icon-button:hover{background:#f1f3f5;color:#20242a}

/* Conversation viewport */
.messages{
  padding:28px 22px 20px;
  background:#fff;
  background-image:none;
}
.welcome{
  width:min(760px,100%);max-width:760px;margin:13vh auto 0;text-align:center;
}
.welcome .bitey-logo{
  width:54px!important;height:54px!important;margin:0 auto 20px!important;
  border-radius:15px!important;
}
.eyebrow{font-size:10px;letter-spacing:.14em;color:#8b929b;margin-bottom:8px}
.welcome h1{
  color:#171a1f;font-size:36px;font-weight:650;letter-spacing:-.045em;margin:0 0 9px;
}
.hero-copy{font-size:15px;color:#7a828c;line-height:1.5;margin:0 auto 28px}
.starter-row{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
}
.starter-row button{
  border:1px solid #e1e4e8;background:#fff;color:#59616b;border-radius:999px;
  padding:8px 13px;font-size:11px;cursor:pointer;transition:.15s;
}
.starter-row button:hover{background:#f4f5f6;border-color:#d4d8dd;color:#20242a}
.workspace-entry{
  width:min(620px,100%);margin:24px auto 0!important;padding:13px 15px!important;
  border:1px solid #e5e7eb!important;border-radius:13px!important;
  background:#fafbfc!important;box-shadow:none!important;
}
.workspace-entry:hover{background:#f5f6f7!important;border-color:#d9dde2!important;transform:none!important}
.workspace-entry-icon{width:34px;height:34px;border-radius:9px;background:#eef1f4;color:#66707c;font-size:16px}
.workspace-entry-copy strong{font-size:12px;color:#3f4650}
.workspace-entry-copy small{font-size:10px;color:#8a929c}
.workspace-entry-arrow{color:#8a929c;font-size:17px}

/* Messages */
.message{max-width:760px!important;width:min(760px,calc(100% - 20px))!important;margin:0 auto 26px!important;gap:10px}
.message.user{justify-content:flex-end}
.message.assistant{display:block!important}
.message .avatar{width:28px;height:28px;flex-basis:28px;border-radius:8px}
.bubble{font-size:15px;line-height:1.65;border-radius:16px;padding:10px 14px}
.message.user .bubble{
  background:#f1f3f5;border:1px solid #e5e7eb;color:#252a31;
  max-width:78%;border-radius:16px;
}
.message.assistant .bubble{
  background:transparent;color:#252a31;padding:0;max-width:100%;
}
.message.assistant .message-content{font-size:15px!important;line-height:1.72!important;color:#252a31!important}
.message.assistant .message-content p{margin:0 0 11px!important}
.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4{color:#171a1f!important}
.message.assistant .message-content a{color:#315f9d}
.bitey-code{background:#f6f7f8!important;border-color:#e2e5e8!important;color:#20242a!important}

/* Research/source details */
.message.assistant .research-summary{
  border:1px solid #e5e7eb!important;background:#fafafa!important;
  color:#69717b!important;border-radius:10px!important;
}
.message.assistant .bitey-sources a{
  background:#fafafa!important;border-color:#e5e7eb!important;color:#536b8a!important;
}
.message.assistant .answer-actions .answer-action{
  color:#6b7280!important;border-color:#e1e4e8!important;background:#fff!important;
}
.message.assistant .answer-validation{
  background:#f4f6f7!important;border-color:#e1e4e8!important;color:#6b7280!important;
}

/* Composer */
.composer-wrap{padding:4px 0 9px;background:#fff}
.composer{
  width:min(760px,calc(100% - 32px))!important;max-width:760px!important;
  border:1px solid #d9dde2!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 4px 18px rgba(15,23,42,.06)!important;
  padding:7px 9px!important;
}
.composer:focus-within{border-color:#bfc5cc!important;box-shadow:0 5px 22px rgba(15,23,42,.08)!important}
.composer-main{min-height:52px!important;gap:5px!important}
.composer textarea{
  height:50px!important;min-height:50px!important;padding:12px 9px!important;
  font-size:14px!important;color:#20242a!important;
}
.composer textarea::placeholder{color:#9aa1aa!important}
.composer .composer-tool,#attach-button,#voice-button,.composer .send-button,#send{
  width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;
  flex-basis:31px!important;border-radius:50%!important;
}
#attach-button,#voice-button{background:transparent!important;color:#69727c!important}
#attach-button:hover,#voice-button:hover{background:#f1f3f5!important;color:#20242a!important}
.composer .send-button,#send{background:#20242a!important;color:#fff!important}
.composer .send-button:hover,#send:hover{background:#111418!important}
.disclaimer{font-size:9px!important;color:#a0a6ad!important;padding:5px 8px 1px!important}
.attach-menu{border-radius:13px!important;box-shadow:0 12px 32px rgba(15,23,42,.13)!important}

/* Status is intentionally quiet and non-blocking */
.chat-area>.activity{
  bottom:92px!important;width:auto!important;max-width:520px!important;
  background:rgba(31,36,42,.93)!important;border:0!important;
  box-shadow:0 5px 18px rgba(0,0,0,.12)!important;
}
.chat-area>.activity #activity-text{font-size:9px!important}
.chat-area>.activity .activity-elapsed,.chat-area>.activity .activity-toggle{display:none!important}

/* Footer kept subtle */
.site-footer{
  color:#b0b5bb!important;font-size:9px!important;padding:0 0 5px!important;
  border:0!important;background:#fff!important;
}
.site-footer a{color:#9ca3af!important;text-decoration:none!important}

/* Mobile */
@media(max-width:760px){
  .sidebar{
    width:280px;flex-basis:280px;background:#f7f8fa;
    left:-285px!important;
  }
  .sidebar.open{left:0!important}
  .topbar{height:52px;padding:0 11px}
  .topbar-model{display:none}
  .mobile-brand strong{font-size:13px}
  .mobile-brand .bitey-logo{width:28px!important;height:28px!important}
  .messages{padding:20px 10px 12px}
  .welcome{margin-top:9vh}
  .welcome .bitey-logo{width:48px!important;height:48px!important}
  .welcome h1{font-size:30px}
  .hero-copy{font-size:14px;margin-bottom:23px}
  .starter-row{gap:6px}
  .starter-row button{font-size:10px;padding:7px 11px}
  .workspace-entry{margin-top:20px!important}
  .message{width:calc(100% - 8px)!important;margin-bottom:23px!important}
  .message.user .bubble{max-width:88%}
  .message.assistant .message-content{font-size:15px!important}
  .composer{width:calc(100% - 16px)!important;border-radius:17px!important}
  .composer textarea{height:48px!important;min-height:48px!important}
  .chat-area>.activity{left:10px!important;right:10px!important;bottom:78px!important;width:auto!important;max-width:none!important}
  .site-footer{display:none!important}
}



/* 2026-10-02: consolidated Bitey blue identity.
   This final layer intentionally overrides the legacy neutral redesign above.
*/
:root{
  --bitey-blue:#1677c8;
  --bitey-cyan:#18a7c8;
  --bitey-navy:#10243f;
  --bitey-ink:#172033;
  --bitey-muted:#64748b;
  --bitey-border:#dfe6ee;
  --bitey-soft:#eef4f8;
  --bitey-accent-soft:#e5f3fb;
}
html,body,.app-shell{background:#fff;color:var(--bitey-ink)}
.sidebar{
  background:linear-gradient(180deg,#10243f 0%,#123554 58%,#0d2943 100%)!important;
  color:#fff!important;border-right:1px solid #0b2037!important;
}
.brand strong{color:#fff!important}.brand small{color:#b9d7e8!important}
.new-chat{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.18)!important;color:#fff!important;
}
.new-chat:hover{background:rgba(255,255,255,.15)!important}
.sidebar-tool{color:#dcecf5!important}
.sidebar-tool:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}
.tool-icon{color:#9dcde2!important}
.sidebar-section{color:#8fb0c4!important}
.history-item{color:#b8d1df!important}
.history-item:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
.history-item.active{background:rgba(255,255,255,.14)!important;color:#fff!important}
.history-empty{color:#8fb0c4!important}
.sidebar-bottom{border-top-color:rgba(255,255,255,.10)!important}
.sidebar-profile{color:#dcecf5!important}
.sidebar-profile:hover{background:rgba(255,255,255,.09)!important}
.profile-copy strong{color:#fff!important}
.profile-copy small,.profile-more{color:#9dcde2!important}

.chat-area,.topbar,.messages,.composer-wrap,.site-footer{background:#fff!important}
.topbar{border-bottom-color:#dfe6ee!important}
.topbar-model{color:var(--bitey-navy)!important}
.topbar-model span{color:var(--bitey-muted)!important}
.status{background:#eef8fb!important;color:#42677a!important}
.status i{background:#18a7c8!important}
.icon-button{color:#5d7180!important}
.icon-button:hover{background:#e5f3fb!important;color:var(--bitey-navy)!important}

.messages{
  background-image:radial-gradient(circle at 50% 0%,#f2f9fc 0,rgba(242,249,252,0) 330px)!important;
}
.welcome h1{color:var(--bitey-navy)!important}
.eyebrow{color:var(--bitey-blue)!important}
.hero-copy{color:var(--bitey-muted)!important}
.starter-row button{
  border-color:#dfe6ee!important;background:#fff!important;color:#536579!important;
}
.starter-row button:hover{
  background:var(--bitey-accent-soft)!important;
  border-color:#9dcde2!important;color:var(--bitey-navy)!important;
}
.workspace-entry{
  border-color:#dfe6ee!important;background:#f8fbfd!important;
}
.workspace-entry:hover{
  background:#eef7fb!important;border-color:#a9d2e4!important;
}
.workspace-entry-icon{background:var(--bitey-accent-soft)!important;color:var(--bitey-blue)!important}
.workspace-entry-copy strong{color:var(--bitey-navy)!important}
.workspace-entry-copy small{color:#718096!important}
.workspace-entry-arrow{color:var(--bitey-blue)!important}

.message.user .bubble{
  background:#eaf4fa!important;border-color:#d5e8f2!important;color:var(--bitey-ink)!important;
}
.message.assistant .message-content{color:var(--bitey-ink)!important}
.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4{color:var(--bitey-navy)!important}
.message.assistant .message-content a{color:var(--bitey-blue)!important}
.bitey-code{
  background:#f4f8fb!important;border-color:#dfe6ee!important;color:#172033!important;
}
.message.assistant .research-summary{
  border-color:#dfe6ee!important;background:#f7fafc!important;color:#5f7480!important;
}
.message.assistant .bitey-sources a{
  background:#f7fafc!important;border-color:#dfe6ee!important;color:#315f8c!important;
}
.message.assistant .answer-actions .answer-action{
  color:#5f7480!important;border-color:#dfe6ee!important;background:#fff!important;
}
.message.assistant .answer-validation{
  background:#eef8fb!important;border-color:#cfe8f1!important;color:#42677a!important;
}

.composer{
  border-color:#cfdde6!important;
  box-shadow:0 4px 18px rgba(22,119,200,.08)!important;
}
.composer:focus-within{
  border-color:#8fc8df!important;
  box-shadow:0 5px 22px rgba(22,119,200,.12)!important;
}
.composer textarea{color:var(--bitey-ink)!important}
.composer textarea::placeholder{color:#8a9aaa!important}
#attach-button,#voice-button{color:#5f7480!important}
#attach-button:hover,#voice-button:hover{
  background:#e5f3fb!important;color:var(--bitey-blue)!important;
}
.composer .send-button,#send{
  background:var(--bitey-blue)!important;color:#fff!important;
}
.composer .send-button:hover,#send:hover{background:var(--bitey-navy)!important}
.disclaimer{color:#8293a1!important}
.site-footer{color:#8a9aaa!important}
.site-footer a{color:#52718a!important}

.chat-area>.activity{
  color:#dcecf5!important;
  background:rgba(16,36,63,.94)!important;
  box-shadow:0 5px 18px rgba(16,36,63,.16)!important;
}
.thinking-dots i{background:var(--bitey-cyan)!important}

@media(max-width:760px){
  .sidebar{
    background:linear-gradient(180deg,#10243f 0%,#123554 58%,#0d2943 100%)!important;
  }
  .topbar{border-bottom-color:#dfe6ee!important}
}