gemini-chat

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

page.module.css (2251B)

      1 /* page.module.css */
      2 .chatContainer {
      3   display: flex;
      4   flex-direction: column;
      5   height: 100vh;
      6   background: #fafafa;
      7   font-family: system-ui, sans-serif;
      8 }
      9 
     10 .chatHeader {
     11   display: flex;
     12   align-items: center;
     13   justify-content: space-between;
     14   padding: 16px 20px;
     15   background: #ffffff;
     16   border-bottom: 1px solid #ddd;
     17 }
     18 
     19 .chatTitle {
     20   font-size: 20px;
     21   font-weight: 600;
     22   margin: 0;
     23 }
     24 
     25 .chatClear {
     26   display: flex;
     27   align-items: center;
     28   gap: 6px;
     29   padding: 6px 10px;
     30   border: none;
     31   border-radius: 6px;
     32   background: transparent;
     33   cursor: pointer;
     34 }
     35 
     36 .chatClear:hover {
     37   background: #f0f0f0;
     38 }
     39 
     40 .chatMessages {
     41   flex: 1;
     42   overflow-y: auto;
     43   padding: 20px;
     44   display: flex;
     45   flex-direction: column;
     46   gap: 16px;
     47 }
     48 
     49 .chatEmpty {
     50   color: #777;
     51   text-align: center;
     52   margin-top: 40px;
     53 }
     54 
     55 .messageRow {
     56   display: flex;
     57 }
     58 
     59 .user {
     60   justify-content: flex-end;
     61 }
     62 
     63 .assistant {
     64   justify-content: flex-start;
     65 }
     66 
     67 .messageBubble {
     68   max-width: 65%;
     69   padding: 10px 14px;
     70   border-radius: 18px;
     71   white-space: pre-wrap;
     72   word-break: break-word;
     73   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     74   line-height: 1.5;
     75 }
     76 
     77 .messageBubble.user {
     78   background: #2563eb;
     79   color: #fff;
     80   border-bottom-right-radius: 6px;
     81 }
     82 
     83 .messageBubble.assistant {
     84   background: #ffffff;
     85   color: #111;
     86   border-bottom-left-radius: 6px;
     87 }
     88 
     89 .chatError {
     90   background: #fde2e2;
     91   color: #c53030;
     92   text-align: center;
     93   padding: 10px;
     94   font-size: 14px;
     95 }
     96 
     97 .chatFooter {
     98   background: #ffffff;
     99   border-top: 1px solid #ddd;
    100   padding: 16px 20px;
    101   display: flex;
    102   flex-direction: column;
    103   gap: 10px;
    104 }
    105 
    106 .apiKeyBox {
    107   width: 100%;
    108 }
    109 
    110 .apiKeyInput {
    111   width: 100%;
    112   padding: 8px 10px;
    113   font-size: 14px;
    114   border: 1px solid #ccc;
    115   border-radius: 6px;
    116 }
    117 
    118 .inputBox {
    119   display: flex;
    120   gap: 10px;
    121 }
    122 
    123 .messageInput {
    124   flex: 1;
    125   padding: 10px;
    126   border: 1px solid #ccc;
    127   border-radius: 6px;
    128   font-size: 14px;
    129   resize: none;
    130   line-height: 1.5;
    131 }
    132 
    133 .sendButton {
    134   display: flex;
    135   align-items: center;
    136   justify-content: center;
    137   padding: 0 18px;
    138   background: #2563eb;
    139   color: #fff;
    140   border: none;
    141   border-radius: 6px;
    142   cursor: pointer;
    143 }
    144 
    145 .sendButton:hover {
    146   background: #1d4ed8;
    147 }
    148 
    149 .sendButton:disabled {
    150   opacity: 0.5;
    151   cursor: not-allowed;
    152 }