/* ============ Token 变量 ============ */
:root{
  --red:        #C8102E;
  --red-hover:  #A50D26;
  --red-soft:   #FCEDEF;
  --red-ring:   rgba(200,16,46,.14);

  --paper:      #FBFAF7;   /* 暖白纸张底色 */
  --bg:         #FFFFFF;
  --line:       #ECEAE4;
  --line-2:     #DDDAD2;

  --ink:        #111111;
  --ink-2:      #3A3A3A;
  --ink-3:      #6E6E6E;
  --ink-4:      #A8A6A0;

  --serif: 'Instrument Serif', 'Source Serif Pro', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans);
  font-size:15px;line-height:1.6;
  color:var(--ink);
  background:#ECEAE4;  /* 外圈底色，与边框同色，形成无边感 */
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  min-height:100vh;
  padding:12px;
}

/* 整个界面加边框——双层细线，精致感 */
#app{
  flex:1;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  display:flex;flex-direction:column;
  overflow:hidden;
}
button{font-family:inherit;color:inherit}
::selection{background:var(--red);color:#fff}

/* 隐藏 JS 注入的 emoji avatar（保留纯文字风格） */
.persona-card .emoji,
.message .avatar{display:none !important}

/* ============ Header（固定顶部） ============ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  height:64px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;
}
header h1{
  font-family:var(--serif);
  font-size:22px;font-weight:400;letter-spacing:-.01em;
  color:var(--ink);
  display:flex;align-items:center;gap:10px;
  cursor:pointer;user-select:none;
}
header h1 i{
  font-style:italic;color:var(--red);
}
header .nav{display:flex;align-items:center;gap:8px}

/* 设置按钮（齿轮图标） */
#settingsBtn{
  width:36px;height:36px;
  border:none;background:transparent;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ink-3);
  cursor:pointer;transition:background .12s,color .12s;
}
#settingsBtn:hover{background:var(--line);color:var(--ink)}

/* ============ 按钮 ============ */
.btn{
  font-family:var(--sans);
  font-size:13px;font-weight:500;
  padding:9px 16px;border-radius:999px;
  border:1px solid transparent;background:transparent;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .08s;
  letter-spacing:.01em;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--red)}
.btn-primary:disabled{background:var(--ink-4);cursor:not-allowed}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-outline{
  border-color:var(--line-2);color:var(--ink-2);background:transparent;
}
.btn-outline:hover{border-color:var(--ink);color:var(--ink);background:#fff}

/* ============ 应用容器 ============ */
.app-container{
  flex:1;display:flex;flex-direction:column;
  min-height:0;
}

/* 旧的 .sidebar / .chat-area 规则已废弃，改用下方 .sidebar 导航布局 */

/* 欢迎页 / 设置页 — 单列居中 */
main, .messages, #welcomeScreen{
  width:100%;
}

/* ============ 欢迎/设置页面 ============ */
#welcomeScreen{
  padding:80px 40px 160px;
  display:flex;flex-direction:column;
  gap:64px;
}
.welcome-hero{
  display:flex;flex-direction:column;gap:18px;
}
.welcome-hero .eyebrow{
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--red);
}
.welcome-hero h2{
  font-family:var(--serif);
  font-size:48px;font-weight:400;
  line-height:1.15;letter-spacing:-.015em;
  color:var(--ink);
}
.welcome-hero h2 i{font-style:italic;color:var(--red)}
.welcome-hero p{
  font-size:17px;line-height:1.6;color:var(--ink-3);
  max-width:520px;
}

/* 设置步骤 — 编号式编辑区块 */
.setup-section{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:24px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.setup-section .num{
  font-family:var(--serif);
  font-size:32px;font-style:italic;color:var(--red);
  line-height:1;
}
.setup-section .body{display:flex;flex-direction:column;gap:14px}
.setup-section h3{
  font-family:var(--sans);
  font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);
}
.setup-section p.helper{
  font-size:14px;color:var(--ink-3);line-height:1.6;
}

/* ============ 面试官卡片列表 ============ */
.persona-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;
  margin-top:4px;
}
.section-divider{
  grid-column:1/-1;
  font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-4);
  padding:14px 0 4px;
}
.section-divider:first-child{padding-top:0}

.persona-card{
  position:relative;
  display:flex;align-items:flex-start;gap:0;
  padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .08s;
}
.persona-card:hover{border-color:var(--ink-4)}
.persona-card.active{
  border-color:var(--ink);
  background:var(--bg);
  box-shadow:0 0 0 1px var(--ink) inset;
}
.persona-card.active::after{
  content:"";
  position:absolute;top:14px;right:14px;
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
}
.persona-card .info{flex:1;min-width:0}
.persona-card .name{
  font-size:14px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.persona-card .desc{
  font-size:12.5px;color:var(--ink-3);
  margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.persona-card .tag{
  display:inline-block;
  font-size:10.5px;font-weight:500;
  margin-top:8px;padding:0;
  background:transparent;color:var(--ink-4);
  letter-spacing:.04em;
}
/* 卡片内小按钮（查看详情/删除） */
.persona-card > div:last-child{
  margin-left:8px;display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
.persona-card > div:last-child .btn{
  background:transparent;border:none;
  padding:3px 6px;font-size:11px;color:var(--ink-4);
  border-radius:6px;
}
.persona-card > div:last-child .btn:hover{background:var(--paper);color:var(--ink)}

/* ============ 表单输入 ============ */
.extract-form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.extract-form input,
.field-input select,
.field-input input[type="text"]{
  width:100%;
  font-family:var(--sans);font-size:14px;
  padding:11px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
.extract-form input::placeholder,
.field-input input::placeholder{color:var(--ink-4)}
.extract-form input:focus,
.field-input select:focus,
.field-input input[type="text"]:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(17,17,17,.06);
}
.field-input label{display:none}
.extract-form .btn{align-self:flex-start;margin-top:4px}

/* ============ 开始按钮行 ============ */
.cta-row{
  margin-top:16px;
  padding-top:36px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;
}
#startBtn{
  font-size:15px;font-weight:600;
  padding:14px 28px;border-radius:999px;
  background:var(--red);color:#fff;
  letter-spacing:.01em;
}
#startBtn:hover{background:var(--red-hover)}
#startBtn:disabled{background:var(--ink-4);cursor:not-allowed}

/* ============ 聊天状态栏 ============ */
.chat-status{
  max-width:720px;width:100%;
  margin:0 auto;padding:16px 40px 0;
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;
  font-weight:500;
}
.chat-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ink);display:inline-block;
}
.chat-status .dot.pending{
  background:var(--red);animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ============ 消息列表 ============ */
.messages{
  flex:1;
  display:flex;flex-direction:column;
  padding:24px 0 240px;
  min-height:0;
  overflow-y:auto;
}
.message{
  width:100%;max-width:720px;
  margin:0 auto;
  padding:18px 40px;
  display:flex;flex-direction:column;gap:6px;
  animation:msgIn .25s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.message .bubble{
  font-size:16px;line-height:1.75;
  color:var(--ink);
}
.message .bubble .label{
  font-family:var(--sans);
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-4);
  margin-bottom:8px;
}
.message.interviewer .bubble{
  font-family:var(--serif);
  font-size:22px;line-height:1.45;font-weight:400;
  letter-spacing:-.005em;
  color:var(--ink);
}
.message.interviewer .bubble .label{
  color:var(--red);
}
.message.candidate{
  background:transparent;
}
.message.candidate .bubble{
  padding-left:16px;
  border-left:2px solid var(--ink);
  font-size:15.5px;
  color:var(--ink-2);
  line-height:1.7;
}
.message.candidate .bubble .label{color:var(--ink-3)}

/* ============ 底部输入区（固定） ============ */
.input-area{
  position:fixed;
  left:0;right:0;bottom:0;
  background:linear-gradient(to top,var(--paper) 70%,rgba(251,250,247,0));
  padding:24px 40px 28px;
  z-index:40;
}
.input-wrapper{
  width:100%;max-width:720px;margin:0 auto;
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 10px 10px 18px;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:18px;
  box-shadow:0 12px 36px rgba(17,17,17,.06);
  transition:border-color .12s,box-shadow .12s;
}
.input-wrapper:focus-within{
  border-color:var(--ink);
  box-shadow:0 16px 44px rgba(17,17,17,.1);
}
.input-area textarea{
  flex:1;min-width:0;
  border:none;outline:none;background:transparent;
  font-family:var(--sans);
  font-size:15px;line-height:1.55;
  resize:none;
  padding:8px 0;color:var(--ink);
  max-height:160px;
}
.input-area textarea::placeholder{color:var(--ink-4)}

.mic-btn{
  width:36px;height:36px;flex-shrink:0;
  background:var(--paper);border:1.5px solid var(--line-2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--ink-3);
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
  position:relative;
}
.mic-btn:hover{background:#fff;border-color:var(--ink-4);color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.mic-btn:active{transform:translateY(1px)}
.mic-btn.recording{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 0 0 0 rgba(200,16,46,.4);
  animation:micPulse 1.6s ease-in-out infinite;
}
.mic-btn.recording:hover{background:var(--red-hover);border-color:var(--red-hover);color:#fff}
.mic-btn:disabled{
  opacity:0.5;cursor:not-allowed;
}
.mic-btn:disabled:hover{background:var(--paper);border-color:var(--line-2);color:var(--ink-4);box-shadow:none;transform:none}
.mic-btn.processing{background:#FEF3C7;border-color:#FDE68A;color:#92400E;pointer-events:none;animation:none;box-shadow:none}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.35)}
  50%{box-shadow:0 0 0 14px rgba(200,16,46,0)}
}

.send-btn{
  flex-shrink:0;
  background:var(--ink);color:#fff;
  border:none;border-radius:999px;
  padding:0 18px;height:36px;
  font-size:13px;font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .12s;
}
.send-btn:hover{background:var(--red)}
.send-btn:disabled{background:var(--ink-4);cursor:not-allowed}

/* STT mode toggle removed - always uses backend Baidu API */

/* ============ 弹窗（Modal）通用结构 ============ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(17,17,17,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  z-index:100;animation:fadeIn .18s ease;
  padding:20px;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-overlay.show{display:flex}
.modal{
  background:var(--bg);
  border-radius:20px;
  width:100%;max-width:620px;max-height:85vh;
  overflow-y:auto;padding:40px;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  animation:modalIn .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal h2{
  font-family:var(--serif);
  font-size:30px;font-weight:400;
  letter-spacing:-.015em;
  margin-bottom:20px;color:var(--ink);
}
.modal p{
  font-size:14.5px;line-height:1.8;
  color:var(--ink-2);
}
.modal .close-btn{margin-top:28px;width:100%;background:var(--ink)}
.modal .close-btn:hover{background:var(--red)}

/* ── 弹窗内表单 ── */
.modal .form-group{margin-bottom:20px}
.modal .form-group label{
  display:block;font-size:12px;font-weight:600;
  color:var(--ink-3);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.06em;
}
.modal .form-group .file-info{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;
  font-size:13px;color:var(--ink-2);
}
.modal .form-group .file-info .remove-file{
  margin-left:auto;color:var(--red);
  cursor:pointer;font-size:12px;font-weight:500;
  border:none;background:transparent;
}
.modal .form-group .file-info .remove-file:hover{text-decoration:underline}
.modal .form-group input[type="file"]{
  width:100%;
  padding:24px 14px;
  border:2px dashed var(--line-2);
  border-radius:12px;
  text-align:center;
  font-size:13px;color:var(--ink-4);
  cursor:pointer;background:var(--paper);
  transition:border-color .12s,background .12s;
}
.modal .form-group input[type="file"]:hover{
  border-color:var(--ink);
  background:#fff;
}
.modal .form-group .skip-hint{
  font-size:12px;color:var(--ink-4);margin-top:8px;
}
.modal .form-actions{
  display:flex;gap:10px;margin-top:24px;
}
.modal .form-actions .btn{flex:1}

/* 背景文件徽章（设置弹窗中用） */
.bg-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  background:var(--red-soft);color:var(--red);
  font-size:12px;font-weight:500;
}
.bg-badge .remove{
  cursor:pointer;font-size:14px;line-height:1;
}
.bg-badge .remove:hover{color:var(--red-hover)}

/* ============ 反馈弹窗特殊样式 ============ */
.modal .feedback-content{
  font-size:14.5px;line-height:1.8;
  color:var(--ink-2);white-space:pre-wrap;
}
.modal .feedback-content .score-item{
  display:flex;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.modal .feedback-content .score-item:last-child{border-bottom:none}

.delete-btn{background:transparent;color:var(--red);border:1px solid var(--red-soft)}
.delete-btn:hover{background:var(--red-soft)}

/* ============ 杂项 ============ */
.extracted-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:500;
  padding:2px 8px;border-radius:999px;
  background:var(--red-soft);color:var(--red);
}
.spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid var(--line);
  border-top-color:var(--red);
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Toast 通知 ============ */
.toast-container{
  position:fixed;top:20px;right:20px;z-index:200;
  display:flex;flex-direction:column;gap:8px;
}
.toast{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 18px;
  box-shadow:0 8px 28px rgba(0,0,0,.1);
  font-size:13px;color:var(--ink);
  max-width:340px;
  animation:slideIn .25s ease;
}
.toast.success{border-left:3px solid var(--ink)}
.toast.error{border-left:3px solid var(--red)}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ============ 滚动条 ============ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:5px;border:3px solid var(--paper)}
*:hover::-webkit-scrollbar-thumb{background:var(--line-2)}

/* ============ 侧边栏布局 ============ */
.app-container{
  flex:1;
  display:flex;flex-direction:row;
  min-height:0;overflow:hidden;
}

.sidebar{
  width:240px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--line);
  background:var(--bg);
}

.nav-list{
  flex:1;
  padding:16px 12px;
  display:flex;flex-direction:column;gap:4px;
}

.nav-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 14px;
  border:none;border-radius:10px;
  background:transparent;
  font-size:14px;font-weight:500;
  color:var(--ink-2);cursor:pointer;
  transition:background .12s,color .12s;
  text-align:left;
  font-family:inherit;
}
.nav-item:hover{background:var(--paper);color:var(--ink)}
.nav-item.active{background:var(--ink);color:#fff}
.nav-item.active .nav-icon{filter:grayscale(0)}
.nav-icon{font-size:16px}

.sidebar-footer{
  padding:12px;
  border-top:1px solid var(--line);
}
.sidebar-user{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.user-avatar{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.user-info{
  display:flex;flex-direction:column;
  min-width:0;
}
.user-name{
  font-size:13px;font-weight:600;
  color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-resume{
  font-size:11px;color:var(--ink-4);
}
.sidebar-actions{
  display:flex;gap:6px;
}
.sidebar-actions .btn-sm{
  flex:1;font-size:11px;padding:4px 8px;text-align:center;
}

/* ============ 主内容区 + 视图容器 ============ */
.content{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}

.view-container{
  flex:1;display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
  padding:0 40px;
}
.view-container .messages{
  flex:1;overflow-y:auto;
  padding-bottom:20px;
}

/* Chat 视图：input 紧贴消息区底部 */
#view-chat .messages{
  padding-bottom:0;
}
#view-chat .input-area{
  position:static;flex-shrink:0;
}

/* Interview 视图：setup 可滚动 */
#view-interview > #interviewSetup{
  flex:1;overflow-y:auto;
}
#interviewSetup .messages{
  overflow:visible;flex:none;
}
#view-interview > #interviewActive{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}
#interviewActive .messages{
  flex:1;overflow-y:auto;
  padding-bottom:20px;
}
#interviewActive .input-area{
  position:static;flex-shrink:0;
}
#interviewActive .chat-status{
  flex-shrink:0;
}

/* History 视图 */
#view-history .messages{
  flex:1;overflow-y:auto;
  padding:24px 0 40px;
}

/* ============ Chat Header ============ */
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.chat-header h2{
  font-family:var(--serif);
  font-size:22px;font-weight:400;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ============ 历史卡片 ============ */
.history-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  margin:0 20px 10px;
  cursor:pointer;
  transition:border-color .12s,box-shadow .12s;
  background:var(--bg);
}
.history-card:hover{
  border-color:var(--line-2);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.history-card-main{flex:1;min-width:0}
.history-card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:4px;
}
.history-card-persona{
  font-size:14px;font-weight:600;color:var(--ink);
}
.history-card-date{
  font-size:11px;color:var(--ink-4);flex-shrink:0;
}
.history-card-field{
  font-size:12px;color:var(--ink-3);margin-bottom:4px;
}
.history-card-preview{
  font-size:12px;color:var(--ink-4);
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.history-card-actions{
  display:flex;flex-direction:column;gap:4px;
  flex-shrink:0;
}

/* ============ Agent 预设按钮 ============ */
.agent-preset{
  flex:1;text-align:center;transition:all .12s;
}
.agent-preset.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}

/* ============ 响应式 ============ */
@media (max-width: 640px){
  header{padding:0 20px;height:56px}
  header h1{font-size:18px}

  .app-container{flex-direction:column}

  .sidebar{
    width:100%;flex-direction:row;flex-shrink:0;
    border-right:none;border-bottom:1px solid var(--line);
    padding:0;overflow-x:auto;
  }
  .nav-list{
    flex-direction:row;padding:8px 12px;gap:2px;
  }
  .nav-item{padding:8px 12px;font-size:12px;white-space:nowrap;width:auto}
  .nav-icon{font-size:14px}
  .sidebar-footer{display:none}

  .chat-header{padding:12px 0}
  .chat-header h2{font-size:18px}

  #welcomeScreen{padding:48px 24px 140px;gap:48px}
  .view-container{padding:0 20px}
  .welcome-hero h2{font-size:36px}
  .setup-section{grid-template-columns:1fr;gap:14px;padding-top:28px}
  .setup-section .num{font-size:24px}
  .message{padding:16px 24px}
  .message.interviewer .bubble{font-size:18px}
  .input-area{padding:16px 20px 20px}
  .modal{padding:28px}
  .modal h2{font-size:24px}
  #view-chat .input-area{position:static;padding:16px 20px 20px}
  #view-chat .messages{padding-bottom:0}
  .history-card{margin:0 12px 8px}
}