/* ============ Split View ============ */
.split-view{
  flex:1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:0;height:100%;overflow:hidden;
}
.split-panel{
  border-right:1px solid var(--border);display:flex;
  flex-direction:column;overflow:hidden;background:var(--bg);
}
.split-panel:last-child{border-right:none}
.split-header{
  padding:10px 16px;background:var(--win);border-bottom:1px solid var(--border);
  font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.split-body{
  flex:1;overflow-y:auto;padding:16px;display:flex;
  flex-direction:column;gap:12px;scrollbar-width:thin;
}

/* ============ Chat Container (single model view) ============ */
.chat-container{
  flex:1;overflow-y:auto;padding:20px;display:flex;
  flex-direction:column;gap:16px;scrollbar-width:thin;
}
.chat-container::-webkit-scrollbar{width:6px}
.chat-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}

/* ============ Messages ============ */
.message{width:100%;display:flex;flex-direction:column;gap:6px;animation:fadeIn .25s ease}
.message.user{align-items:flex-end}
.message.assistant{align-items:flex-start}
.message-header{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t4);font-family:var(--font-ui)}
.message-content{
  max-width:92%;padding:14px 16px;border-radius:var(--r);
  font-size:14px;line-height:1.8;color:var(--t2);
  white-space:pre-wrap;word-wrap:break-word;
}
.message.user .message-content{background:var(--blue);color:#fff}
.message.assistant .message-content{background:var(--win);border:1px solid var(--border);box-shadow:var(--sh)}
.message.error .message-content{border-color:var(--red);background:rgba(192,57,43,.05);color:var(--red)}
.message.loading .message-content{color:var(--t4);font-style:italic}

/* ============ Message Actions ============ */
.message-actions{display:flex;gap:6px;margin-top:4px;opacity:0;transition:opacity .15s}
.message:hover .message-actions{opacity:1}
.msg-btn{
  display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;
  border:1px solid var(--border);font-size:10.5px;font-family:var(--font-body);
  color:var(--t3);background:var(--win);cursor:pointer;transition:all .12s;white-space:nowrap;
}
.msg-btn:hover{border-color:var(--text);color:var(--text)}
.msg-btn.copy:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-s)}
.msg-btn.save:hover{border-color:var(--green);color:var(--green);background:var(--green-s)}
.msg-btn.retry:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-s)}

/* ============ Round Markers ============ */
.round-marker{
  text-align:center;font-size:10px;color:var(--t4);
  font-family:var(--font-ui);padding:8px;position:relative;
}
.round-marker::before,.round-marker::after{
  content:'';position:absolute;top:50%;height:1px;
  background:var(--border);width:calc(50% - 40px);
}
.round-marker::before{left:0}
.round-marker::after{right:0}
.round-marker span{background:var(--bg);padding:0 12px;position:relative;z-index:1}

/* ============ Welcome Screen ============ */
.welcome-screen{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px;text-align:center;color:var(--t4);
}
.welcome-title{font-family:var(--font-serif);font-size:28px;margin-bottom:12px;color:var(--t3);font-weight:600}
.welcome-sub{font-size:14px;line-height:1.7;max-width:400px}

/* ============ Input Area ============ */
.input-area{
  flex-shrink:0;padding:14px 20px 20px;background:var(--win);
  backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--border);
}
.input-box{
  background:rgba(0,0,0,.03);border:1.5px solid var(--border);
  border-radius:20px;padding:14px 18px;display:flex;flex-direction:column;
  gap:8px;transition:border-color .15s,box-shadow .15s;
}
.input-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-s)}
[data-theme="dark"] .input-box{background:rgba(255,255,255,.05)}
.attach-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.attach-chip{
  display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;
  background:var(--blue-s);border:1px solid var(--border);font-size:10.5px;color:var(--blue);
}
.attach-chip button{background:none;border:none;color:var(--t3);cursor:pointer;font-size:9px;padding:0}
.input-main-row{display:flex;align-items:flex-end;gap:8px}
.q-in{
  flex:1;background:transparent;border:none;outline:none;
  font-size:15px;font-family:var(--font-body);color:var(--text);
  resize:none;min-height:42px;max-height:200px;line-height:1.6;overflow-y:auto;
}
.q-in::placeholder{color:var(--t4)}
.input-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.iact-btn{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:none;border:none;color:var(--t4);
  cursor:pointer;transition:all .15s;
}
.iact-btn:hover{background:rgba(0,0,0,.05);color:var(--t3)}
.iact-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.iact-btn.recording{color:var(--red);animation:pulse 1s ease infinite}
.iact-btn.on{color:var(--blue);background:var(--blue-s)}
.send-btn{
  width:36px;height:36px;border-radius:50%;background:var(--text);color:var(--bg);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.send-btn:hover{opacity:.75;transform:scale(1.04)}
.send-btn:disabled{opacity:.2;cursor:not-allowed;transform:none}
.send-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}