/* OurXTV 即时沟通浮动组件（商城/门户通用，双语） */
.otv-chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 300; width: 54px; height: 54px;
  border-radius: 50%; border: none; cursor: pointer; font-size: 24px; color: #fff;
  background: linear-gradient(140deg,#24589c,#0e7490); box-shadow: 0 10px 26px rgba(18,58,99,.35);
  transition: transform .15s; }
.otv-chat-fab:hover { transform: scale(1.07); }
.otv-chat-fab .badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px;
  border-radius: 10px; background: #e03131; color: #fff; font-size: 11px; line-height: 19px;
  padding: 0 5px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

.otv-chat-panel { position: fixed; right: 22px; bottom: 88px; z-index: 301; width: 360px; max-width: calc(100vw - 32px);
  height: 480px; max-height: calc(100vh - 120px); background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(8,22,44,.35); display: none; flex-direction: column; overflow: hidden;
  border: 1px solid #e3e9f1; }
.otv-chat-panel.open { display: flex; animation: otvpop .18s; }
@keyframes otvpop { from { transform: translateY(12px); opacity: 0; } }

.otv-chat-head { padding: 13px 16px; color: #fff; background: linear-gradient(135deg,#123a63,#16537e);
  display: flex; align-items: center; gap: 10px; }
.otv-chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.otv-chat-head b { font-size: 14.5px; }
.otv-chat-head small { font-size: 11px; opacity: .75; display: block; margin-top: 2px; }
.otv-chat-head .x { margin-left: auto; cursor: pointer; opacity: .7; font-size: 17px; padding: 2px 6px; }
.otv-chat-head .x:hover { opacity: 1; }

.otv-chat-name { display: flex; gap: 8px; align-items: center; padding: 9px 14px; background: #f7f9fc;
  border-bottom: 1px solid #eef2f7; font-size: 12px; color: #5b6d84; }
.otv-chat-name input { flex: 1; font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid #dbe4ef;
  border-radius: 8px; outline: none; }
.otv-chat-name input:focus { border-color: #2f74c0; }

.otv-chat-msgs { flex: 1; overflow-y: auto; padding: 14px; background: #f7f9fc; }
.otv-chat-msgs .day { text-align: center; font-size: 10.5px; color: #93a5bb; margin: 6px 0; }
.bubble { max-width: 82%; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.bubble .who { font-size: 10.5px; color: #93a5bb; margin-bottom: 3px; }
.bubble .t { font-size: 10px; color: #a9b8ca; margin-top: 4px; text-align: right; }
.bubble.them { background: #fff; border: 1px solid #e3e9f1; border-radius: 12px 12px 12px 4px; }
.bubble.me { background: linear-gradient(135deg,#24589c,#2f74c0); color: #fff; margin-left: auto;
  border-radius: 12px 12px 4px 12px; }
.bubble.assistant { background: #eefaf6; border: 1px solid #c8ece0; }
.bubble .p-card2 { display: block; background: rgba(255,255,255,.9); border: 1px solid #e3e9f1;
  border-radius: 9px; padding: 8px 10px; margin: 6px 0; font-size: 12px; color: #1c3049; }
.bubble.me .p-card2 { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.bubble .p-card2 b { display: block; margin-bottom: 3px; }
.bubble .p-card2 .pr { color: #d4380d; font-weight: 700; }
.bubble.me .p-card2 .pr { color: #ffd9a8; }

.otv-chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eef2f7; background: #fff; }
.otv-chat-input textarea { flex: 1; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid #dbe4ef;
  border-radius: 10px; resize: none; height: 40px; outline: none; }
.otv-chat-input textarea:focus { border-color: #2f74c0; }
.otv-chat-input button { font: inherit; font-size: 13px; padding: 0 16px; border: none; border-radius: 10px;
  background: linear-gradient(135deg,#24589c,#1f4e8c); color: #fff; cursor: pointer; }
.otv-chat-input button:disabled { opacity: .5; }
.otv-chat-tip { font-size: 10.5px; color: #93a5bb; padding: 0 14px 8px; background: #fff; }

@media (max-width: 480px) { .otv-chat-panel { right: 12px; left: 12px; width: auto; } }