@import url('https://cdn.iocdn.cc/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- THEME DEFINITIONS --- */
:root {
  --bg-gemini-deep: #131314;     /* Gemini's main dark background */
  --bg-gemini-panel: #1E1F20;     /* Panels, inputs, headers */
  --bg-gemini-interactive: #2a2b2e; /* Slightly lighter interactive color */
  --text-gemini-primary: #E3E3E3;  /* Primary text */
  --text-gemini-secondary: #BDC1C6; /* Secondary/placeholder text */
  --accent-gemini-glow: #34d399;   /* Gemini's signature blue/purple glow */
}

/* --- BASE STYLES --- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-gemini-deep) !important;
  color: var(--text-gemini-primary) !important;
}

#app-container {
  background-color: var(--bg-gemini-panel) !important;
  border: none !important; /* 移除最外层边框 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

header, footer {
  background-color: var(--bg-gemini-panel) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- INTERACTIVE ELEMENTS --- */
textarea#message-input, 
#room-modal .bg-gray-800, 
#room-modal #back-to-entry-btn,
#send-options-menu,
#share-view #share-link-input {
  background-color: var(--bg-gemini-interactive) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text-gemini-primary);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
textarea#message-input::placeholder {
  color: var(--text-gemini-secondary);
}

.focus\:ring-cyan-400:focus {
  --tw-ring-color: var(--accent-gemini-glow) !important;
  box-shadow: 0 0 8px var(--accent-gemini-glow);
  border-color: var(--accent-gemini-glow) !important;
}

#open-options-btn.hover\:bg-gray-600:hover,
#room-modal #back-to-entry-btn:hover,
#send-options-menu .hover\:bg-gray-600:hover {
  background-color: #3c3d41 !important;
}


/* --- MODAL STYLES (No Glow) --- */
#room-modal .bg-gray-900 {
  background-color: var(--bg-gemini-panel) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); /* Re-add shadow for depth */
  /* animation property is removed */
}
#room-modal .border-gray-800 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
#room-modal footer {
  background-color: var(--bg-gemini-panel) !important;
}

/* --- COPY BUTTON FIX --- */
#copy-link-btn {
  top: 1.25rem !important;
  bottom: auto !important;
  height: 2.5rem !important;
}
#copy-link-btn:focus,
#copy-link-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* --- CHAT BUBBLES (Themed for Gemini) --- */
.message-bubble {
  position: relative;
  padding: 0.75rem 1.25rem;
  border-radius: 1.2rem;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  word-break: break-word;
  transition: background .3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.message-bubble.sent {
  background-color: var(--bg-gemini-interactive) !important;
  color: var(--text-gemini-primary) !important;
}
.message-bubble.received {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-gemini-primary) !important;
}
.message-bubble::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  top: 50%;
  transform: translateY(-50%);
}
.message-bubble.sent::before {
  right: -10px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent var(--bg-gemini-interactive) !important;
}
.message-bubble.received::before {
  left: -10px;
  border-width: 7px 10px 7px 0;
  border-color: transparent rgba(255, 255, 255, 0.1) !important;
}

/* --- ORIGINAL CUSTOM STYLES (Unchanged) --- */
.message-container { display: flex; align-items: center; gap: 0.75rem; max-width: 85%; }
.message-container.sent { flex-direction: row-reverse; margin-left: auto; }
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; flex-shrink: 0; background: linear-gradient(135deg, #3a7bd5, #3a6073 50%, #232526); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; }
.message-content-wrapper { display: flex; flex-direction: column; }
.message-container.sent .message-content-wrapper { align-items: flex-end; }
.sender-name { font-size: 0.75rem; color: #aaa; margin-bottom: 0.125rem; padding: 0 0.25rem; }
.message-bubble a.image-link { display: block; line-height: 0; }
.message-bubble img { display: block; max-width: 250px; height: auto; border-radius: 0.75rem; cursor: pointer; }
.file-info-container { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 0.75rem; background: linear-gradient(102.5deg, #232526 0%, #414345 100%); box-shadow: 0 2px 8px 0 rgb(0 0 0 / 7%); cursor: pointer; min-width: 240px; }
.file-icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; background: #2d3748; border-radius: 0.75rem; flex-shrink: 0; }
.file-details { flex: 1; min-width: 0; }
.file-name { font-size: 0.95rem; font-weight: 500; color: #e3fcec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size, .file-progress-text { font-size: 0.77rem; color: #b9f5d8; }
.progress-bar-bg { width: 100%; background: #555; border-radius: 0.5rem; height: 0.4rem; margin-top: 0.2rem; overflow: hidden; }
.progress-bar-fg { background: linear-gradient(90deg, #43e97b, #38f9d7); height: 100%; border-radius: 0.5rem; transition: width .3s; }
.system-message { text-align: center; font-size: 0.85rem; color: #e5e7eb; margin: 0.5rem 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fadeIn { animation: fadeIn 0.2s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.animate-fadeInUp { animation: fadeInUp 0.15s cubic-bezier(.4, 0, .2, 1) both; }
#message-wrapper::-webkit-scrollbar { width: 8px; }
#message-wrapper::-webkit-scrollbar-track { background: transparent; }
#message-wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); }


.message-bubble:has(a.image-link) {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/* --- Styles for Beautified Fingerprint Box --- */
#fingerprint-container .content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  text-align: left;
}

#fingerprint-container .icon {
  flex-shrink: 0;
  color: var(--accent-gemini-glow);
}

#fingerprint-container .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--accent-gemini-glow);
  width: 100%;
}

/* 移除并重新应用动画以实现重置 */
.progress-bar-animate {
  animation: shrink-width 5s linear forwards;
}

@keyframes shrink-width {
  from { width: 100%; }
  to { width: 0%; }
}

/* 淡出动画 */
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.animate-fadeOut {
  animation: fadeOut 0.5s ease-out forwards;
}


/* --- Custom Media Player Styles --- */

.custom-audio-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(0,0,0,0.2);
  padding: 0.75rem;
  border-radius: 0.75rem;
  width: 100%;
  max-width: 270px;
}

.audio-play-button {
  flex-shrink: 0;
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--accent-gemini-glow);
  color: var(--bg-gemini-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.audio-play-button:hover {
  transform: scale(1.1);
}

.audio-info {
  flex-grow: 1;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.audio-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-duration {
  font-size: 0.75rem;
  color: var(--text-gemini-secondary);
}

/* --- Custom Video Player Styles --- */
.video-player-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 0.75rem;
    overflow: hidden;
    color: white;
}

.video-player-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
}

/* 居中播放按钮 */
.video-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
}
.video-player-wrapper.is-playing .video-overlay-button {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
    pointer-events: none;
}

/* 底部控制条 */
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.video-player-wrapper:hover .video-controls {
    opacity: 1;
}

/* 进度条 */
.progress-bar-container {
    flex-grow: 1;
    cursor: pointer;
    padding: 0.5rem 0; /* 增-大-点-击-区-域 */
}
.progress-bar-track {
    height: 4px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 2px;
}
.progress-bar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--accent-gemini-glow);
    border-radius: 2px;
}
.progress-bar-thumb {
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    top: -4px;
    transform: translateX(-50%) scale(0);
    transition: transform 0.2s ease;
}
.progress-bar-container:hover .progress-bar-thumb {
    transform: translateX(-50%) scale(1);
}


/* 时间和控制按钮 */
.video-time-display {
    font-size: 0.75rem;
    font-family: monospace;
}
.control-button {
    background: none;
    border: none;
    padding: 0;
    color: white;
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
}


.message-container.received .message-content-wrapper {
  align-items: flex-start;
}


.message-bubble:has(.custom-audio-player) {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.message-bubble:has(.video-player-wrapper) {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#message-wrapper {
  will-change: transform;
}